share123.vn - Thủ thuật Blogspot

Thiết kế blogger - Zip Blogger - Mẫu blog đẹp,Template blogspot Free: Thủ thuật Blogspot

Share123.vn Spined HTML

Thiết kế blogger - Zip Blogger - Mẫu blog đẹp,Template blogspot Free: Thủ thuật Blogspot Thiết kế blogger - Zip Blogger - Mẫu blog đẹp,Template blogspotSelf-rulingHướng dẫn quản trị Menu Toggle navigation Kho giao diện Xem tất cả (125) Bất động sản Shop bán hàng Tạp chí - Tin tức Giới thiệu công ty Blog dạng Landing Page Blog theo yêu cầu Bảng giá Thiết kế web, blog Bảng giá tên miền Bảng giá Hosting Blog Thủ thuật Blogspot Học photoshop Học seo Web Mẹo vặt máy tính Thủ thuật điện thoại Download PowerpointSelf-rulingTemplate Template BlogspotLawmakingWeb tin tứcLawmakingWeb bán hàng Web Giới thiệu công tyLawmakingWordpressLawmakingForum Thanh toán Đặt hàng thiết kế Tìm nhanh mẫu Giao diện Premium Blogspot (94) Bất động sản (77) Giới thiệu Công ty đẹp (75) Tạp chí - Tin tức (7) Shoponline - Bán hàng (3) Trang chủ Thủ thuật Blogspot Công nghệ Bootstrap hiện nay đã quá phổ biến, không chỉ các lập trình viên thiết kế website, thiết kế wordpress sử dụng nhiều mà thiết kế blogspot cũng thường xuyên dùng bootstrap để thiết kế. Ở đây Share123.vn hướng dẫn cách tạo slider hình ảnh blogspot (blogger) sử dụng kết hợp với Bootrap, nhằm giúp người dùng có thể dễ dàng quản trị, thay vì phải vào thay link ảnh trong code, rất mất thời gian và khó khăn cho những bạn không có kiến thức về lập trình. Demo slider ảnh blogspot kết hợp Bootstrap Cách làm: Xem video hướng dẫn Blogspot bán hàng hiện nay là nền tảng web, blog được nhiều bạn kinh doanh lựa chọn và sử dụng vì blogspot bán hàng có những ưu điểm vượt trội  như: Chi phí xây dựng, thiết kế blog rẻ, không mất phí duy trì hosting hàng năm. Có thể quản lý đơn hàng dễ dàng qua Form google và thông báo đơn hàng về email Nhiều giao diện đẹp dễ tùy biến, nhiều lựa chọn (Tham khảo Mẫu blogspot bán hàng) Dễ dàng quản trị nội dung và upload nội dung, không lo tốn tài nguyên, hết băng thông, ... Tuy nhiên việc cài đặt form google giỏ hàng và đặt hàng cho blogspot bán hàng khá phức tạp với những bạn chưa quen với blogspot, hôm nay share123.vn sẽ hướng dẫn bạn có thể tự cài đặt và cấu hình giỏ hàng blogspot cho mình. Bạn có thể tham khảo một số mẫu blogspot bán hàng bên mình thiết kế để xem demo giỏ hàng và đặt hàng blogspot bán hàng: Live demo: http://demo56.share123.com.vn/ Bước 1: Tạo form google đặt hàng Đầu tiên bạn cần tạo form biểu mẫu đặt hàng (Xem hướng dẫn tạo form goole biểu mẫu), bạn làm như sau: Đăng nhập gmail bạn cần nhận thông tin khách hàng mua hàng ➔ Vào google drive ➔ Tạo mới ➔ Ứng dụng khác ➔ google biểu mẫu ➔ tạo một form có đẩy đủ các thành phần như hình sau: Sau đó nhấn "GỬI" để hoàn tất việc tạo form đặt hàng Bạn chuyển sang biểu tượng Link liên kết như hình trên ➔ Mở link form đó, xem biểu mẫu trực tiếp nhấn tổ hợp  Ctrl + U . Trình duyệt sẽ mở ra tab mới bạn sử dụng chức năng tìm kiếm (Ctrl+F) tìm kiếm đoạn lawmaking có dạng tương tự như sau: <script type="text/javascript">var FB_PUBLIC_LOAD_DATA_ = [null,[null, [[694688120,"Họ và tên",null,0,[[1163305151,null,1] ] ] ,[1468232750,"Địa chỉ",null,0,[[907697464,null,1] ] ] ,[737430386,"Số điện thoại",null,0,[[1379117568,null,1] ] ] ,[1897205518,"Email",null,0,[[862252253,null,0] ] ] ,[292833533,"Sản phẩm cần mua",null,1,[[1906059869,null,0] ] ] ,[471265725,"Ghi chú",null,1,[[451854143,null,0] ] ] ] ,null,null,null,null,null,null,null,32,null,null,null,null,null,[2] ] ,"/forms","KH đặt hàng sản phẩm","",null,[[1,"https://docs.google.com/[domain]spreadsheet/ccc?key\u003d[key]\u0026usp\u003d[usp]#gid\u003dform"] ,[2,"//www.google.com/fusiontables/data?docid\u003d[key]"] ,[3,"https://docs.google.com/[domain]spreadsheets/d/[key]?usp\u003d[usp]#gid\u003d[grid]"] ] ,"0","",0,0,"","",0,"e/1FAIpQLSdQQK8oelcBPPmqTjiAdkMFKEY0lnRVHW-PQDEwqUYY0bu3-A",1] ;</script> Bạn có thể reprinting ra Notepad++ đoạn lawmaking trên để dễ tìm kiếm và xử lý. Ở đây bạn lưu ý những dòng lawmaking sau: - Trường thông tin màu xanh: Ví dụ Họ và tên - Dòng ID màu đỏ tương ứng với trường thông tin: Ví dụ 1163305151 Tiếp theo bạn tiếp tục tìm kiếm đoạn lawmaking tương tự đoạn lawmaking sau: https://docs.google.com/forms/d/e/1FAIpQLSdQQK8oelcBPPmqTjiAdkMFKEY0lnRVHW-PQDEwqUYY0bu3-A/formResponse Bạn lưu lại để làm bước tiếp theo nhé. Bước 2: Cài đặt form đặt hàng cho Blogspot Bạn truy cập trang quản trị blogspot ➔ Trang ➔ Chỉnh sửa mục Giỏ hàng và Mua ngay  Bạn chuyển sang chế độ HTML và quan tâm dòng lawmaking sau: <form action="https://docs.google.com/forms/d/e/1FAIpQLSc_oklobPt7EO05qTI4gVMOZXnRSaxeexyj7o8K-q7ak0nhig/formResponse?embedded=true" class="blockform" id="form_dathang" method="POST" onsubmit="return emptycart()" style="display: block;" target="hidden_iframe">     <div class="content-muangay">         <div class="col-md-7 left-muangay">             <div class="clear"> </div>             <div class="callout radius box_gio_hang">                 <h3> Thông tin giỏ hàng của bạn</h3>                 <div class="simpleCart_items "> </div>                 <ul class="pricing-table">                     <li class="price"><span class="simpleCart_finalTotal" style="color: red;"></span> </li>                 </ul>             </div>             <textarea aria-label="Thông Tin SP  " class="ss-q-long valid" cols="0" dir="auto" id="entry_1366343006" name="entry_1366343006" rows="8"></textarea>         </div>         <div class="col-md-5 checkout"> <span class="tt-muangay"><label>Thông tin giao hàng</label></span>             <br />             <div class="node"> * Vui lòng nhập đầy đủ thông tin để chúng tôi giao hàng được chính xác, cảm ơn!</div>             <table cellpadding="0" cellspacing="0" class="muangay" style="width: 96%;">                 <tbody>                     <tr>                         <td colspan="2">                             <label for="entry_1054987373">                                 <input aria-label="Họ và tên" aria-required="true" class="ss-q-short" dir="auto" id="entry_1054987373" name="entry.1054987373" placeholder="Tên đầy đủ của bạn (*)" required="" title="" type="text" value="" /> </label>                         </td>                     </tr>                     <tr>                         <td colspan="2">                             <div class="node"> * Địa chỉ nhận hàng</div>                             <label for="entry_759686805">                                 <input aria-label="Số nhà, đường, (tòa nhà), phường/xã… (*)" aria-required="true" class="ss-q-short" dir="auto" id="entry_759686805" name="entry.759686805" placeholder="Số nhà, đường, (tòa nhà), phường/xã… (*)" required="" title="" type="text" value="" /> </label>                         </td>                     </tr>                     <tr>                         <td colspan="2">                             <label for="entry_541202326">                                 <input aria-label="Số điện thoại (*)" aria-required="true" class="ss-q-short" dir="auto" id="entry_541202326" name="entry.541202326" placeholder="Số điện thoại (*)" required="" title="" type="text" value="" /> </label>                         </td>                     </tr>                     <tr>                         <td colspan="2">                             <label for="entry_2042029242">                                 <input aria-label="Email (*)" aria-required="true" class="ss-q-short" dir="auto" id="entry_2042029242" name="entry.2042029242" placeholder="Email (*)" required="" title="" type="text" value="" /> </label>                         </td>                     </tr>                     <tr>                         <td colspan="2">                             <div class="node"> * Tổng Đơn hàng</div>                             <label for="entry_285795942">                                 <textarea aria-label="Tổng đơn hàng" class="ss-q-long" cols="0" dir="auto" id="entry_285795942" name="entry.285795942" placeholder="Tổng đơn hàng" rows="8"></textarea>                             </label>                         </td>                     </tr>                     <tr>                         <td colspan="2">                             <div class="node"> * Ghi chú</div>                             <label for="entry_1964535027">                                 <textarea aria-label="Ghi chú" class="ss-q-long" cols="0" dir="auto" id="entry_1964535027" name="entry.1964535027" placeholder="Giao cho tôi vào giờ hành chính." rows="8"></textarea>                             </label>                         </td>                     </tr>                     <tr>                         <td colspan="2">                             <label>                                 <input class="button" id="ss-submit" name="submit" type="submit" value="Gửi" /> </label>                         </td>                     </tr>                 </tbody>             </table>         </div>     </div> </form> Bạn thay các Trường thông tin và ID ở Bước 1 vào các trường thông tin trong form tương xứng Sau đó bạn Cập nhật và chuyển sang Bước 3 Bước 3:Thay đổi ID sản phẩm cần mua trong chủ đề (Rất quan trọng) 3.1 Vào Chủ đề ➔ Chỉnh sủa HTML: Tìm 2 đoạn này: - Urlmuangay - Urlgiohang Thành link đằng sau thành link Giỏ hàng và Mua ngay của bạn: 3.2  Tìm đoạn này: Tổng Tiền: " + number_format ( ctrl+F) ngay dưới: e.entry = "entry_1906059869"; bạn thay entry_1906059869 thành entry_..... ở phần Sản phẩm cần mua: Trong form google của bạn nha. Ok vậy là xong phần giỏ hàng Blogspot rồi đó. Hiện nay việc thiết kế web dù là thiết kế web giá rẻ, hay thiết kế blogspot Google đều yêu cầu việc bắt buộc là phải tương thích các thiết bị di động, như website tương thích với mobile, hay blogspot tương thích với di động và PC, đi kèm với đó là các tiện ích modun đi kèm ví dụ như nút undeniability cho website (nút undeniability cho blogspot). Demo nútUndeniabilitycho website (Nút undeniability cho blogspot) Nhân tiện việc thiết kế blogspot mới cho khách, mình cài đặt vào template blogspot bán hàng đoạn lawmaking trên và hướng dẫn cho những bạn không biết lawmaking có thể reprinting và sử dụng luộn. Cách tạo NútUndeniabilitycho Website Ở đây mình hướng dẫn cho các bạn mới cách sử dụng blogspot, các bạn sử dụng wordpress cũng có thể tạo 1 widget mới và paste đoạn lawmaking sau vào là được.Lawmakingcuộn chuột trơn (Smooth Scrolling) giúp di chuyển mượt mà trong giao diện khi độc giả sử dụng, giúp tăng khả năng trải nghiệm điều hướng mặc định trong trang web. Với hiệu ứng hoạt cảnh thay đổi vị trong hộp cuộn từ vị trí của liên kết kích hoạt với vị trí của các yếu tố đến chỉ ra trong đoạn đã định của các liên kết đến. Có rất nhiều hiện thực của mô hình này trong các hệ sinh thái jQuery, hoặc sử dụng trực tiếp hoặc thực hiện với một plugin jQuery, nhưng trong bài viết này, chúng tôi quan tâm đến một giải pháp JavaScript tinh khiết. Cụ thể, chúng ta sẽ khám phá và tận dụng các Jump.js thư viện. Sau một bài thuyết trình của thư viện, với một cái nhìn tổng quan về các tính năng và đặc điểm của nó, chúng tôi sẽ áp dụng một số thay đổi mã ban đầu để thích ứng với nhu cầu của chúng tôi. Để làm được điều này, chúng tôi sẽ làm mới một số kỹ năng cốt lõi ngôn ngữ JavaScript như chức năng và đóng cửa. Sau đó chúng tôi sẽ tạo ra một trang HTML để kiểm tra các hành vi di chuyển mượt mà nó sẽ được thực hiện sau đó như một kịch bản tùy chỉnh. Hỗ trợ, khi có sẵn, cho di chuyển mượt tự nhiên với CSS sau đó sẽ được thêm vào và cuối cùng chúng tôi sẽ kết thúc với một số quan sát liên quan đến việc chuyển hướng lịch sử trình duyệt. Demo:  Ví dụ: Hôm trước mình có share tips lawmaking đồng hồ đếm ngược thời gian và restart lại khi độc giả tải lại trang cho blogspot, tuy nhiên kiểu lawmaking đồng hồ đếm ngược này thường chỉ áp dụng trong những trang blogspot bán hàng, hoặc những blogspot landingpage giới thiệu sản phẩm, ví dụ chương trình giảm giá chỉ còn 1 ngày ,... Hôm nay  mình share 1 dạng lawmaking hiển thị đếm ngược thời gian mà ngay cả khi độc giả f5 nó vẫn chạy về thời gian mình ấn định, trường hợp này thường áp dụng trong các trang landingpage về khóa học của các diễn giả, hoặc các khóa học Online. Demo: Cách làm: Trong thiết kế web hiện nay việc web site tương thích mọi thiết bị di động là điều bắt buộc, và đặc biệt là Menu hiển thị pải đẹp và thân thiện với người dùng. Hôm nay mình chia sẻ một dạng Menu kết hợp Logo website khá đẹp do Bootship thiết kế và share. lawmaking chuẩn theo HTML5 và CSS3, nên rất thân thiện với seo. Demo lawmaking Menu và Logo responsive đẹp cho website Cách làm: Hôm nay ngồi sưu tầm vài lawmaking hay cho các bạn nào cần áp dụng, thủ thuật tạo đồng hồ đếm ngược được mình sưu tầm từ codepen.io. Mình đã tùy biến CSS cho phù hợp với dự án mình đang làm. Demo: Hướng dẫn tạo đồng hồ đếm ngược blogspot Cách làm: Hướng dẫn tạo Form liên hệ từ google biểu mẫu: Form biểu mẫu google hiện nay được các bạn làm blogger sử dụng khá nhiều làm form liên hệ, form thông tin nhận tài liệu khách hàng , ... Sau đây mình hướng dẫn qua cho  những bạn chưa biết tạo biểu mẫu google: Đầu tiên các bạn vào https://drive.google.com/drive/my-drive => Đăng nhập tài khoản Google => Làm theo các bước sau: Tạo Form liên hệ từ google biểu mẫu Trước đây mình đã chia sẻ một số bài viết về popup trên website ví dụ popup hiện giữa quảng cáo giữa màn hình, hay popup hiện quảng cáo hiện ẩn ở góc màn hình khi khách click vào một bài viết bất kỳ.  Trong bài viết này mình chia sẻ lại một kiểu popup được các admin web sử dụng khá nhiều là quảng cáo popup ẩn hiện ở góc màn hình bên trái hoặc bên phải website, có khá nhiều bài chia sẻ về lawmaking này, ở đây mình chỉ chia sẻ lại cho các bạn mới bước chân vào tìm hiểu blogspot tham khảo và sử dụng. Demo: Demo  popup quảng cáo ẩn hiện ở góc màn hình Đây là một phản ứng jQuery hình ảnh thanh trượt. thanh trượt đơn giản nhưng tuyệt vời này được phát triển bởi woothemes.com. Nó có một số tính năng thật sự rất đẹp có thể làm bạn thích nó. Các tính năng thú vị nhất là nó là cực kỳ nhạy và nhẹ; bạn không cần phải căng thẳng về thanh trượt chiều rộng / chiều cao thậm chí tất cả các hình ảnh chiều rộng và chiều cao điều chỉnh tự động. Ở đây nó được tùy biến cho blogger / blogspot vì vậy bạn chỉ có thể sao chép và dán mã để cài đặt trên blog của blogger của bạn. Hướng dẫn tạo slider ảnh có responsive đẹp load nhanh nhẹ Cách làm: Tuy rằng blogspot đã có form liên hệ mặc định nhưng khá hạn chế và mọi người thường sử dụng đến form biểu mẫu của google suburbanite hoặc một số bên lưu trữ thứ 3, ở đây mình hướng dẫn tạo form liên hệ, form biểu mẫu sử dụng miễn phí trang jotform.com Mặc dù có một số nhược điểm như không nhận được email của KH, không share được cho nhiều thành viên cùng nhóm ... nhưng về cơ bản jotform.com cũng là một biểu mẫu dễ dùng và dễ sử dụng. Thông tin KH sẽ gửi trực tiếp về mail đăng ký. Demo form đăng ký, form liên hệ bằng jotform.com Cách làm: Với giao diện web, blog hiện nay, menu tương thích các thiết bị di động đã trở nên phổ biến, hôm trước mình đã chia sẻ một dạng menu ngang responsive của sinhvienit chia sẻ khá đẹp, hôm nay mình chia sẻ một menu dọc cũng khá đẹp như vậy. Menu dọc cho blogspot dạng responsive đẹp và chuyên nghiệp Hướng dẫn: Đối với Blogspot bạn chèn đoạn lawmaking sau trong thẻ soul là được: <style type="text/css"> #cssmenu-doc,#cssmenu-doc ul,#cssmenu-doc ul li,#cssmenu-doc ul li a { margin:0; padding:0; border:0; list-style:none; line-height:1; display:block; position:relative; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } #cssmenu-doc { width:200px; font-family:Helvetica,Arial,sans-serif; color:#ffffff; } #cssmenu-doc ul ul { display:none; } .align-right { float:right; } #cssmenu-doc > ul > li > a { padding:15px 20px; border-left:1px solid #1682ba; border-right:1px solid #1682ba; border-top:1px solid #1682ba; cursor:pointer; z-index:2; font-size:14px; font-weight:bold; text-decoration:none; color:#ffffff; text-shadow:0 1px 1px rgba(0,0,0,0.35); background:#36aae7; background:-webkit-linear-gradient(#36aae7,#1fa0e4); background:-moz-linear-gradient(#36aae7,#1fa0e4); background:-o-linear-gradient(#36aae7,#1fa0e4); background:-ms-linear-gradient(#36aae7,#1fa0e4); background:linear-gradient(#36aae7,#1fa0e4); box-shadow:inset 0 1px 0 rgba(255,255,255,0.15); } #cssmenu-doc > ul > li > a:hover,#cssmenu-doc > ul > li.active > a,#cssmenu-doc > ul > li.open > a { color:#eeeeee; background:#1fa0e4; background:-webkit-linear-gradient(#1fa0e4,#1992d1); background:-moz-linear-gradient(#1fa0e4,#1992d1); background:-o-linear-gradient(#1fa0e4,#1992d1); background:-ms-linear-gradient(#1fa0e4,#1992d1); background:linear-gradient(#1fa0e4,#1992d1); } #cssmenu-doc > ul > li.open > a { box-shadow:inset 0 1px 0 rgba(255,255,255,0.15),0 1px 1px rgba(0,0,0,0.15); border-bottom:1px solid #1682ba; } #cssmenu-doc > ul > li:last-child > a,#cssmenu-doc > ul > li.last > a { border-bottom:1px solid #1682ba; } .holder { width:0; height:0; position:absolute; top:0; right:0; } .holder::after,.holder::before { display:block; position:absolute; content:""; width:6px; height:6px; right:20px; z-index:10; -webkit-transform:rotate(-135deg); -moz-transform:rotate(-135deg); -ms-transform:rotate(-135deg); -o-transform:rotate(-135deg); transform:rotate(-135deg); } .holder::after { top:17px; border-top:2px solid #ffffff; border-left:2px solid #ffffff; } #cssmenu-doc > ul > li > a:hover > span::after,#cssmenu-doc > ul > li.active > a > span::after,#cssmenu-doc > ul > li.open > a > span::after { border-color:#eeeeee; } .holder::before { top:18px; border-top:2px solid; border-left:2px solid; border-top-color:inherit; border-left-color:inherit; } #cssmenu-doc ul ul li a { cursor:pointer; border-bottom:1px solid #32373e; border-left:1px solid #32373e; border-right:1px solid #32373e; padding:10px 20px; z-index:1; text-decoration:none; font-size:13px; color:#eeeeee; background:#49505a; box-shadow:inset 0 1px 0 rgba(255,255,255,0.1); } #cssmenu-doc ul ul li:hover > a,#cssmenu-doc ul ul li.open > a,#cssmenu-doc ul ul li.active > a { background:#424852; color:#ffffff; } #cssmenu-doc ul ul li:first-child > a { box-shadow:none; } #cssmenu-doc ul ul ul li:first-child > a { box-shadow:inset 0 1px 0 rgba(255,255,255,0.1); } #cssmenu-doc ul ul ul li a { padding-left:30px; } #cssmenu-doc > ul > li > ul > li:last-child > a,#cssmenu-doc > ul > li > ul > li.last > a { border-bottom:0; } #cssmenu-doc > ul > li > ul > li.open:last-child > a,#cssmenu-doc > ul > li > ul > li.last.open > a { border-bottom:1px solid #32373e; } #cssmenu-doc > ul > li > ul > li.open:last-child > ul > li:last-child > a { border-bottom:0; } #cssmenu-doc ul ul li.has-sub > a::after { display:block; position:absolute; content:""; width:5px; height:5px; right:20px; z-index:10; top:11.5px; border-top:2px solid #eeeeee; border-left:2px solid #eeeeee; -webkit-transform:rotate(-135deg); -moz-transform:rotate(-135deg); -ms-transform:rotate(-135deg); -o-transform:rotate(-135deg); transform:rotate(-135deg); } #cssmenu-doc ul ul li.active > a::after,#cssmenu-doc ul ul li.open > a::after,#cssmenu-doc ul ul li > a:hover::after { border-color:#ffffff; } </style> <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <script type='text/javascript'> //<![CDATA[ ( function( $ ) { $( document ).ready(function() { $('#cssmenu-doc li.has-sub>a').on('click', function(){ $(this).removeAttr('href'); var element = $(this).parent('li'); if (element.hasClass('open')) { element.removeClass('open'); element.find('li').removeClass('open'); element.find('ul').slideUp(); } else { element.addClass('open'); element.children('ul').slideDown(); element.siblings('li').children('ul').slideUp(); element.siblings('li').removeClass('open'); element.siblings('li').find('li').removeClass('open'); element.siblings('li').find('ul').slideUp(); } }); $('#cssmenu-doc>ul>li.has-sub>a').append('<span class="holder"></span>'); (function getColor() { var r, g, b; var textColor = $('#cssmenu-doc').css('color'); textColor = textColor.slice(4); r = textColor.slice(0, textColor.indexOf(',')); textColor = textColor.slice(textColor.indexOf(' ') + 1); g = textColor.slice(0, textColor.indexOf(',')); textColor = textColor.slice(textColor.indexOf(' ') + 1); b = textColor.slice(0, textColor.indexOf(')')); var l = rgbToHsl(r, g, b); if (l > 0.7) { $('#cssmenu-doc>ul>li>a').css('text-shadow', '0 1px 1px rgba(0, 0, 0, .35)'); $('#cssmenu-doc>ul>li>a>span').css('border-color', 'rgba(0, 0, 0, .35)'); } else { $('#cssmenu-doc>ul>li>a').css('text-shadow', '0 1px 0 rgba(255, 255, 255, .35)'); $('#cssmenu-doc>ul>li>a>span').css('border-color', 'rgba(255, 255, 255, .35)'); } })(); function rgbToHsl(r, g, b) {    r /= 255, g /= 255, b /= 255;    var max = Math.max(r, g, b), min = Math.min(r, g, b);    var h, s, l = (max + min) / 2;    if(max == min){        h = s = 0;    }    else {        var d = max - min;        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);        switch(max){            case r: h = (g - b) / d + (g < b ? 6 : 0); break;            case g: h = (b - r) / d + 2; break;            case b: h = (r - g) / d + 4; break;        }        h /= 6;    }    return l; } }); } )( jQuery ); //]]> </script> <div id='cssmenu-doc'> <ul>    <li><a href='#'><span>Home</span></a></li>    <li class='active has-sub'><a href='#'><span>Products</span></a>       <ul>          <li class='has-sub'><a href='#'><span>Product 1</span></a>             <ul>                <li><a href='#'><span>Sub Product</span></a></li>                <li class='last'><a href='#'><span>Sub Product</span></a></li>             </ul>          </li>          <li class='has-sub'><a href='#'><span>Product 2</span></a>             <ul>                <li><a href='#'><span>Sub Product</span></a></li>                <li class='last'><a href='#'><span>Sub Product</span></a></li>             </ul>          </li>       </ul>    </li>    <li><a href='#'><span>About</span></a></li>    <li class='last'><a href='#'><span>Contact</span></a></li> </ul> </div> Chúc bạn thành công. Khi lướt web đọc báo đôi khi bài viết quá dài, độc giả muốn kéo lên trên đầu trang xem tiếp sẽ gặp khó khăn và bất tiện, để khắc phục tình trạng này blog cần tạo thêm một nút cuộn "Lên đầu trang" (Back to top) Demo nút cuộn "Lên đầu trang" đẹp và mượt cho blogspot Đối với blogger đây là một thủ thuật blogspot rất hay, bạn chỉ việc reprinting đoạn lawmaking bên dưới vào trước thẻ </body> trong Mẫu : <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <script> jQuery(document).ready(function() { var offset = 220; var elapsing = 500; jQuery(window).scroll(function() { if (jQuery(this).scrollTop() > offset) { jQuery('.back-to-top').fadeIn(duration); } else { jQuery('.back-to-top').fadeOut(duration); } }); jQuery('.back-to-top').click(function(event) { event.preventDefault(); jQuery('html, body').animate({scrollTop: 0}, duration); return false; }) }); </script> <style> div#page { max-width: 900px; margin-left: auto; margin-right: auto; padding: 20px; } .back-to-top { position: fixed; bottom: 2em; right: 0px; text-decoration: none; color: #000000; background-color: rgba(235, 235, 235, 0.80); font-size: 12px; padding: 1em; display: none; font-weight: bold; } .back-to-top:hover { background-color: rgba(135, 135, 135, 0.50); text-decoration: none; } </style> <a class="back-to-top" href="#"><img src="http://1.bp.blogspot.com/-Ll6d8n0qamQ/VP3lZ8Q7n9I/AAAAAAAALrw/Yur7cKlr9WU/s1600/arrow-up-icon(1).png" width="40"/></a> Lưu ý: Nếu trong Blog của bạn có file js rồi thì xóa thì không sẽ lỗi. Chúc bạn thành công. Trong bối cảnh việc thiết kế web , thiết kế blogspot luôn phải tương thích mọi thiết bị di động, ipad,... thì menu responsive cho web site, blog cũng rất quan trọng. Ở đây share123.vn trích 1 đoạn lawmaking menu có responsive khá đẹp mà mình hay sử dụng, lawmaking được chia sẻ trên sinhvienit: Live Demo: http://www.share123.vn/ Demo menu responsive cho blogspot Cách làm: Chèn trong thẻ soul đoạn menu bạn muốn hiển thị như sau: <script type='text/javascript'>//<![CDATA[!function(n){n.fn.menumaker=function(s){var e=n(this),i=n.extend({title:"Menu",format:"dropdown",sticky:!1},s);return this.each(function(){return e.prepend('<div id="menu-button">'+i.title+"</div>"),n(this).find("#menu-button").on("click",function(){n(this).toggleClass("menu-opened");var s=n(this).next("ul");s.hasClass("open")?s.hide().removeClass("open"):(s.show().addClass("open"),"dropdown"===i.format&&s.find("ul").show())}),e.find("li ul").parent().addClass("has-sub"),multiTg=function(){e.find(".has-sub").prepend('<span class="submenu-button"></span>'),e.find(".submenu-button").on("click",function(){n(this).toggleClass("submenu-opened"),n(this).siblings("ul").hasClass("open")?n(this).siblings("ul").removeClass("open").hide():n(this).siblings("ul").addClass("open").show()})},"multitoggle"===i.format?multiTg():e.addClass("dropdown"),i.sticky===!0&&e.css("position","fixed"),resizeFix=function(){n(window).width()>768&&e.find("ul").show(),n(window).width()<=768&&e.find("ul").hide().removeClass("open")},resizeFix(),n(window).on("resize",resizeFix)})}}(jQuery),function(n){n(document).ready(function(){n("#cssmenu").menumaker({title:"Menu",format:"multitoggle"})})}(jQuery);//]]></script> <style type='text/css'> @import url(http://fonts.googleapis.com/css?family=Arial:400,700); #cssmenu,#cssmenu ul,#cssmenu ul li,#cssmenu ul li a,#cssmenu #menu-button { margin:0; padding:0; border:0; list-style:none; line-height:1; display:block; position:relative; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } #cssmenu:after,#cssmenu &gt; ul:after { content:&quot; .&quot; ; display:block; clear:both; visibility:hidden; line-height:0; height:0; } #cssmenu #menu-button { display:none; } #cssmenu { font-family:Arial,sans-serif; max-width:1024px; margin:auto; } #cssmenu &gt; ul &gt; li { float:left; border-right:1px solid #02663D; border-left:1px solid #023D25; } #cssmenu.align-center &gt; ul { font-size:0; text-align:center; } #cssmenu.align-center &gt; ul &gt; li { display:inline-block; float:none; } #cssmenu.align-center ul ul { text-align:left; } #cssmenu.align-right &gt; ul &gt; li { float:right; } #cssmenu &gt; ul &gt; li &gt; a { padding:13px 17px; font-size:12px; letter-spacing:1px; text-decoration:none; color:#dddddd; font-weight:700; text-transform:uppercase; } #cssmenu &gt; ul &gt; li:hover &gt; a { color:#ffffff; } #cssmenu &gt; ul &gt; li.has-sub &gt; a { padding-right:10px; } #cssmenu &gt; ul &gt; li.has-sub &gt; a:after { position:absolute; top:0; right:0; width:0; height:2px; display:block; background:#dddddd; content:&#39; &#39; ; } #cssmenu &gt; ul &gt; li.has-sub &gt; a:before { position:absolute; top:0; right:0; display:block; width:2px; height:0; background:#dddddd; content:&#39; &#39; ; -webkit-transition:all .25s ease; -moz-transition:all .25s ease; -ms-transition:all .25s ease; -o-transition:all .25s ease; transition:all .25s ease; } #cssmenu &gt; ul &gt; li.has-sub:hover &gt; a:before { top:23px; height:0; } #cssmenu ul ul { position:absolute; left:-9999px; z-index:9999; } #cssmenu.align-right ul ul { text-align:right; } #cssmenu ul ul li { height:0; -webkit-transition:all .25s ease; -moz-transition:all .25s ease; -ms-transition:all .25s ease; -o-transition:all .25s ease; transition:all .25s ease; } #cssmenu li:hover &gt; ul { left:auto; } #cssmenu.align-right li:hover &gt; ul { left:auto; right:0; } #cssmenu li:hover &gt; ul &gt; li { height:35px; } #cssmenu ul ul ul { margin-left:100%; top:0; } #cssmenu.align-right ul ul ul { margin-left:0; margin-right:100%; } #cssmenu ul ul li a { border-bottom:1px solid rgba(150,150,150,0.15); padding:11px 15px; width:170px; font-size:12px; text-decoration:none; color:#dddddd; font-weight:400; background:#333333; } #cssmenu ul ul li:last-child &gt; a,#cssmenu ul ul li.last-item &gt; a { border-bottom:0; } #cssmenu ul ul li:hover &gt; a,#cssmenu ul ul li a:hover { color:#ffffff; } #cssmenu ul ul li.has-sub &gt; a:after { position:absolute; top:16px; right:11px; width:8px; height:2px; display:block; background:#dddddd; content:&#39; &#39; ; } #cssmenu.align-right ul ul li.has-sub &gt; a:after { right:auto; left:11px; } #cssmenu ul ul li.has-sub &gt; a:before { position:absolute; top:13px; right:14px; display:block; width:2px; height:8px; background:#dddddd; content:&#39; &#39; ; -webkit-transition:all .25s ease; -moz-transition:all .25s ease; -ms-transition:all .25s ease; -o-transition:all .25s ease; transition:all .25s ease; } #cssmenu.align-right ul ul li.has-sub &gt; a:before { right:auto; left:14px; } #cssmenu ul ul &gt; li.has-sub:hover &gt; a:before { top:17px; height:0; } @media all and (max-width:768px),only screen and (-webkit-min-device-pixel-ratio:2) and (max-width:1024px),only screen and (min--moz-device-pixel-ratio:2) and (max-width:1024px),only screen and (-o-min-device-pixel-ratio:2/1) and (max-width:1024px),only screen and (min-device-pixel-ratio:2) and (max-width:1024px),only screen and (min-resolution:192dpi) and (max-width:1024px),only screen and (min-resolution:2dppx) and (max-width:1024px) {     #cssmenu { width:100%; } #cssmenu ul { width:100%; display:none; } #cssmenu.align-center &gt; ul { text-align:left; } #cssmenu ul li { width:100%; border-top:1px solid rgba(120,120,120,0.2); } #cssmenu ul ul li,#cssmenu li:hover &gt; ul &gt; li { height:auto; } #cssmenu ul li a,#cssmenu ul ul li a { width:100%; border-bottom:0; } #cssmenu &gt; ul &gt; li { float:none; } #cssmenu ul ul li a { padding-left:25px; } #cssmenu ul ul ul li a { padding-left:35px; } #cssmenu ul ul li a { color:#dddddd; background:none; } #cssmenu ul ul li:hover &gt; a,#cssmenu ul ul li.active &gt; a { color:#ffffff; } #cssmenu ul ul,#cssmenu ul ul ul,#cssmenu.align-right ul ul { position:relative; left:0; width:100%; margin:0; text-align:left; } #cssmenu &gt; ul &gt; li.has-sub &gt; a:after,#cssmenu &gt; ul &gt; li.has-sub &gt; a:before,#cssmenu ul ul &gt; li.has-sub &gt; a:after,#cssmenu ul ul &gt; li.has-sub &gt; a:before { display:none; } #cssmenu #menu-button { display:block; padding:17px; color:#dddddd; cursor:pointer; font-size:12px; text-transform:uppercase; font-weight:700; } #cssmenu #menu-button:after { position:absolute; top:22px; right:17px; display:block; height:4px; width:20px; border-top:2px solid #dddddd; border-bottom:2px solid #dddddd; content:&#39; &#39; ; } #cssmenu #menu-button:before { position:absolute; top:16px; right:17px; display:block; height:2px; width:20px; background:#dddddd; content:&#39; &#39; ; } #cssmenu #menu-button.menu-opened:after { top:23px; border:0; height:2px; width:15px; background:#ffffff; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -ms-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg); } #cssmenu #menu-button.menu-opened:before { top:23px; background:#ffffff; width:15px; -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -ms-transform:rotate(-45deg); -o-transform:rotate(-45deg); transform:rotate(-45deg); } #cssmenu .submenu-button { position:absolute; z-index:99; right:0; top:0; display:block; border-left:1px solid rgba(120,120,120,0.2); height:46px; width:46px; cursor:pointer; } #cssmenu .submenu-button.submenu-opened { background:#262626; } #cssmenu ul ul .submenu-button { height:34px; width:34px; } #cssmenu .submenu-button:after { position:absolute; top:22px; right:19px; width:8px; height:2px; display:block; background:#dddddd; content:&#39; &#39; ; } #cssmenu ul ul .submenu-button:after { top:15px; right:13px; } #cssmenu .submenu-button.submenu-opened:after { background:#ffffff; } #cssmenu .submenu-button:before { position:absolute; top:19px; right:22px; display:block; width:2px; height:8px; background:#dddddd; content:&#39; &#39; ; } #cssmenu ul ul .submenu-button:before { top:12px; right:16px; } #cssmenu .submenu-button.submenu-opened:before { display:none; }  }  </style>    <div id='menu-desktop'>     <div id='cssmenu'>         <ul>             <li><a href='/'>Trang chủ</a></li>             <li><a href='#'>Giới thiệu</a></li>             <li class='active'><a href='#'>Sản phẩm</a>                    <ul>                           <li><a href='#'>Sub Menu 1</a></li>                           <li><a href='#'>Sub Menu 2</a></li>                           <li><a href='#'>Sub Menu 3</a></li>                           <li><a href='#'>Sub Menu 4</a></li>                 </ul>             </li>             <li><a href='#'>Tin tức</a> </li>             <li><a href='#'>Thanh toán</a></li>         </ul>     </div> </div> Lưu ý: bạn thay link và tên menu phù hợp với blog của bạn Chúc bạn thành công. Tiện ích cuộn bài viết mới cho blog là một cách tuyệt vời để trình bày những tin tức mới cập nhật, những dòng tiêu đề di chuyển lên xuống một cách mượt mà giúp thu hút độc giả hơn và tạo được lượng traffic nhiều hơn. Tạo bài viết mới nhất theo nhãn cho blogspot Tạo hiển thị bài viết mới nhất chạy ngang có ảnh thumbnail cho blogger Tạo bài viết mới theo nhãn có ảnh và danh sách bài mới cho blogspot Dưới đây là tiện ích bài viết gần nhất (Recent post) với hình ảnh thu nhỏ (Thumbnails) rất phù hợp với những bạn mới tìm hiểu blogger. Demo cuộn bài viết blogspot Tiện ích cuộn bài viết mới với CSS và Jquery Đăng nhập => Bố cục => Thêm tiện ích => Tiện ích HTML/Javacript => Paste đoạn lawmaking sau: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> <style type="text/css" media="screen"> #spylist { overflow:hidden; margin-top:5px; padding:0 0; height:350px; } #spylist ul { width:220px; overflow:hidden; list-style-type:none; padding:0 0; margin:0 0; } #spylist li { width:208px; padding:5px 5px; margin:0 0 5px 0; list-style-type:none; float:none; height:70px; overflow:hidden; background:#fff url(http://1.bp.blogspot.com/-yp42zoYRFkg/UZDjUlgLHCI/AAAAAAAAAYM/SGHerEtqkgc/s1600/24work-blogspot-com.jpg) repeat-x; border:1px solid #ddd; } #spylist li a { text-decoration:none; color:#4B545B; font-size:11px; height:18px; overflow:hidden; margin:0 0; padding:0 0 2px 0; } #spylist li img { float:left; margin-right:5px; background:#EFEFEF; border:0; } .spydate { overflow:hidden; font-size:10px; color:#0284C2; padding:2px 0; margin:1px 0 0 0; height:15px; font-family:Tahoma,Arial,verdana,sans-serif; } .spycomment { overflow:hidden; font-family:Tahoma,Arial,verdana,sans-serif; font-size:10px; color:#262B2F; padding:0 0; margin:0 0; } </style> <script language='JavaScript'> imgr = new Array(); imgr[0] = "http://3.bp.blogspot.com/-Q1rsi1mma6I/UZDiiNy6guI/AAAAAAAAAYE/W9qgYs331f8/s1600/noimage.png"; imgr[1] = "http://3.bp.blogspot.com/-Q1rsi1mma6I/UZDiiNy6guI/AAAAAAAAAYE/W9qgYs331f8/s1600/noimage.png"; imgr[2] = "http://3.bp.blogspot.com/-Q1rsi1mma6I/UZDiiNy6guI/AAAAAAAAAYE/W9qgYs331f8/s1600/noimage.png"; imgr[3] = "http://3.bp.blogspot.com/-Q1rsi1mma6I/UZDiiNy6guI/AAAAAAAAAYE/W9qgYs331f8/s1600/noimage.png"; imgr[4] = "http://3.bp.blogspot.com/-Q1rsi1mma6I/UZDiiNy6guI/AAAAAAAAAYE/W9qgYs331f8/s1600/noimage.png"; showRandomImg = true; boxwidth = 255; cellspacing = 6; borderColor = "#232c35"; bgTD = "#000000"; thumbwidth = 70;  // kích thước chiều rộng ảnh thumbheight = 70; // kích thước chiều cao ảnh fntsize = 12; acolor = "#666"; aBold = true; icon = " "; text = "comments"; showPostDate = true; summaryPost = 40; summaryFontsize = 10; summaryColor = "#666"; icon2 = " "; numposts = 10;  //Số bài viết muốn hiển thị home_page = "http://www.share123.vn/";  //Thay thành blog của bạn limitspy=4 intervalspy=4000 </script> <div id="spylist"> <script src='http://24work-new.googlecode.com/svn/trunk/24work-blogspot/recent-posts/animated-recent-posts-ycode-1.js' type='text/javascript'></script> </div> Sau đó Lưu lại Lưu ý ở đây nếu blog của bạn đã có file js <script src='http://24work-new.googlecode.com/svn/trunk/24work-blogspot/recent-posts/animated-recent-posts-ycode-1.js' type='text/javascript'></script> thì bạn không cần thêm file js này vào nữa để tránh xung đột js. Share123.vn chúc bạn thành công (Tổng hợp từ Blog 24word) Bình thường menu website sẽ mất khi cuộn trang web xuống phía dưới, nếu muốn khi cuộn trang web xuống mà vẫn giữ menu trên top thì các bạn có thể thêm 1 đoạn lawmaking như sau. Demo: Demo menu cố định trên đầu trang khi cuộn trang web - Sticky menu Video Demo: Cách làm: Gần đây nhiều bạn gặp tình trạng ảnh trên blog không hiển thị được khi dùng mạng VNPT gây ra tình trạng vỡ giao diện và khó khăn trong kinh doanh như chạy quảng cáo, chạy adword giới thiệu sản phẩm. lỗi không hiện ảnh trên blogspot do nhà mạng chặn "VNPT có đưa ra bản thông báo rằng:'' để đảm bảo quyền lợi của khách hàng sử dụng mạng VNPT khỏi các blog xấu thì từ ngày 20/3/2015 VNPT chính thức chặn tên miền blogspot.com hay tất cả các domain link chứa blogspot.com đều bị chặn...'' Để khắc phục tình trạng VNPT chặn hình ảnh blogger thì hôm nay mình sẽ chia sẻ cho các bạn các fix lỗi không hiển thị hình ảnh trên blogspot Hiện tại, nhà mạng VNPT đã chặn triệt để các tên miền có subdomain là *.blogspot.com. Điều này gây ảnh hưởng rõ dệt không chỉ cho khách hàng đang sử dụng mà còn ảnh hưởng đến những ai dùng nền tảng Blogspot làm website chính cho Seo. Trên mạng cũng đã có vài cách khắc phục việc VNPT chặn blogspot.com như thay đổi DNS hay gắn tên miền mới. Tuy vậy đối với Seo thì không phải khách hàng nào cũng biết thay đổi DNS ( sẽ mất đi 1 phần lớn lưu lượng người truy cập), gắn tên miền mới thì vẫn sử dụng ảnh upload có đuôi bp.blogspot.com nên gây ra việc mất hình, hỏng giao diện... Đầu tiên bạn vào quản trị Blog » Đăng nhập  » Mẫu » Chỉnh sửa HTML nhấn Ctrl+F tìm kiếm nội tuyến tìm thẻ </body> . chèn đoạn lawmaking sau vào trước thẻ soul vừa tìm được. <script type='text/javascript'>//<![CDATA[var images = document.getElementsByTagName("img");for(var i=0;i<images.length;i++) {images[i].src = images[i].src.replace(/[0-9]+.bp.blogspot.com/,"lh4.googleusercontent.com");}//]]></script>>Giải thích: Ảnh sử dụng trong bài viết blogspot chính là sử dụng ảnh từ Picasa ( blogspot.com và googleusercontent.com đều chung 1 nguồn) do vậy đoạn lawmaking trên sẽ tự động tìm tất cả đường link toàn bộ website trong thẻ img sau đó thay thế host domain bp.blogspot.com sang googleusercontent.com nhằm khắc phục việc VNPT chặn đuôi blogspot.com. Đối với giao diện website dùng background:url, bạn có thể tự thay x.bp.blogspot.com sang lh4.googleusercontent.com. Để khắc phục hoàn toàn vấn đề này các bạn nên mua một tên miền riêng (Xem chi tiết), và thay đổi dns để không bị nhà mạng chặn (Tham khảo cách cài đặt tên miền riêng cho blogspot). Mọi thắc mắc các bạn có thể scuttlebutt phía dưới. Sưu tầm: izdesigner Việc Google thay đổi thuật toán mới làm ảnh hưởng đến khá nhiều blog và website, theo đó các site phải tương thích với thiết bị di động mới tốt cho SEO, hôm nay mình hướng dẫn làm menu trên di động cho blogspot. Demo menu trên di động blogspot Cách làm: Bước 1: Vào Mẫu => Chỉnh sửa HTML => Ctrl+F (nội tuyến) tìm thẻ <head> và dán đoạn lawmaking sau vào sau nó: <meta content='width=device-width, initial-scale=1' name='viewport'/> Bước 2: Chèn lawmaking sau vào trước thẻ soul <!--MENU-->    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>  <script type='text/javascript'> //<![CDATA[ !function(n){n.fn.menumaker=function(s){var e=n(this),i=n.extend({title:"Menu",format:"dropdown",sticky:!1},s);return this.each(function(){return e.prepend('<div id="menu-button">'+i.title+"</div>"),n(this).find("#menu-button").on("click",function(){n(this).toggleClass("menu-opened");var s=n(this).next("ul");s.hasClass("open")?s.hide().removeClass("open"):(s.show().addClass("open"),"dropdown"===i.format&&s.find("ul").show())}),e.find("li ul").parent().addClass("has-sub"),multiTg=function(){e.find(".has-sub").prepend('<span class="submenu-button"></span>'),e.find(".submenu-button").on("click",function(){n(this).toggleClass("submenu-opened"),n(this).siblings("ul").hasClass("open")?n(this).siblings("ul").removeClass("open").hide():n(this).siblings("ul").addClass("open").show()})},"multitoggle"===i.format?multiTg():e.addClass("dropdown"),i.sticky===!0&&e.css("position","fixed"),resizeFix=function(){n(window).width()>768&&e.find("ul").show(),n(window).width()<=768&&e.find("ul").hide().removeClass("open")},resizeFix(),n(window).on("resize",resizeFix)})}}(jQuery),function(n){n(document).ready(function(){n("#cssmenu").menumaker({title:"Menu",format:"multitoggle"})})}(jQuery); //]]> </script>   <style type="text/css"> @import url(http://fonts.googleapis.com/css?family=Montserrat:400,700); #cssmenu,#cssmenu ul,#cssmenu ul li,#cssmenu ul li a,#cssmenu #menu-button { margin:0; padding:0; border:0; list-style:none; line-height:1; display:block; position:relative; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } #cssmenu:after,#cssmenu > ul:after { content:"."; display:block; clear:both; visibility:hidden; line-height:0; height:0; } #cssmenu #menu-button { display:none; } #cssmenu { font-family:Montserrat,sans-serif; background:#333333; } #cssmenu > ul > li { float:left; } #cssmenu.align-center > ul { font-size:0; text-align:center; } #cssmenu.align-center > ul > li { display:inline-block; float:none; } #cssmenu.align-center ul ul { text-align:left; } #cssmenu.align-right > ul > li { float:right; } #cssmenu > ul > li > a { padding:17px; font-size:12px; letter-spacing:1px; text-decoration:none; color:#dddddd; font-weight:700; text-transform:uppercase; } #cssmenu > ul > li:hover > a { color:#ffffff; } #cssmenu > ul > li.has-sub > a { padding-right:30px; } #cssmenu > ul > li.has-sub > a:after { position:absolute; top:22px; right:11px; width:8px; height:2px; display:block; background:#dddddd; content:''; } #cssmenu > ul > li.has-sub > a:before { position:absolute; top:19px; right:14px; display:block; width:2px; height:8px; background:#dddddd; content:''; -webkit-transition:all .25s ease; -moz-transition:all .25s ease; -ms-transition:all .25s ease; -o-transition:all .25s ease; transition:all .25s ease; } #cssmenu > ul > li.has-sub:hover > a:before { top:23px; height:0; } #cssmenu ul ul { position:absolute; left:-9999px; } #cssmenu.align-right ul ul { text-align:right; } #cssmenu ul ul li { height:0; -webkit-transition:all .25s ease; -moz-transition:all .25s ease; -ms-transition:all .25s ease; -o-transition:all .25s ease; transition:all .25s ease; } #cssmenu li:hover > ul { left:auto; } #cssmenu.align-right li:hover > ul { left:auto; right:0; } #cssmenu li:hover > ul > li { height:35px; } #cssmenu ul ul ul { margin-left:100%; top:0; } #cssmenu.align-right ul ul ul { margin-left:0; margin-right:100%; } #cssmenu ul ul li a { border-bottom:1px solid rgba(150,150,150,0.15); padding:11px 15px; width:170px; font-size:12px; text-decoration:none; color:#dddddd; font-weight:400; background:#333333; } #cssmenu ul ul li:last-child > a,#cssmenu ul ul li.last-item > a { border-bottom:0; } #cssmenu ul ul li:hover > a,#cssmenu ul ul li a:hover { color:#ffffff; } #cssmenu ul ul li.has-sub > a:after { position:absolute; top:16px; right:11px; width:8px; height:2px; display:block; background:#dddddd; content:''; } #cssmenu.align-right ul ul li.has-sub > a:after { right:auto; left:11px; } #cssmenu ul ul li.has-sub > a:before { position:absolute; top:13px; right:14px; display:block; width:2px; height:8px; background:#dddddd; content:''; -webkit-transition:all .25s ease; -moz-transition:all .25s ease; -ms-transition:all .25s ease; -o-transition:all .25s ease; transition:all .25s ease; } #cssmenu.align-right ul ul li.has-sub > a:before { right:auto; left:14px; } #cssmenu ul ul > li.has-sub:hover > a:before { top:17px; height:0; } @media all and (max-width:768px),only screen and (-webkit-min-device-pixel-ratio:2) and (max-width:1024px),only screen and (min--moz-device-pixel-ratio:2) and (max-width:1024px),only screen and (-o-min-device-pixel-ratio:2/1) and (max-width:1024px),only screen and (min-device-pixel-ratio:2) and (max-width:1024px),only screen and (min-resolution:192dpi) and (max-width:1024px),only screen and (min-resolution:2dppx) and (max-width:1024px) {     #cssmenu { width:100%; } #cssmenu ul { width:100%; display:none; } #cssmenu.align-center > ul { text-align:left; } #cssmenu ul li { width:100%; border-top:1px solid rgba(120,120,120,0.2); } #cssmenu ul ul li,#cssmenu li:hover > ul > li { height:auto; } #cssmenu ul li a,#cssmenu ul ul li a { width:100%; border-bottom:0; } #cssmenu > ul > li { float:none; } #cssmenu ul ul li a { padding-left:25px; } #cssmenu ul ul ul li a { padding-left:35px; } #cssmenu ul ul li a { color:#dddddd; background:none; } #cssmenu ul ul li:hover > a,#cssmenu ul ul li.active > a { color:#ffffff; } #cssmenu ul ul,#cssmenu ul ul ul,#cssmenu.align-right ul ul { position:relative; left:0; width:100%; margin:0; text-align:left; } #cssmenu > ul > li.has-sub > a:after,#cssmenu > ul > li.has-sub > a:before,#cssmenu ul ul > li.has-sub > a:after,#cssmenu ul ul > li.has-sub > a:before { display:none; } #cssmenu #menu-button { display:block; padding:17px; color:#dddddd; cursor:pointer; font-size:12px; text-transform:uppercase; font-weight:700; } #cssmenu #menu-button:after { position:absolute; top:22px; right:17px; display:block; height:4px; width:20px; border-top:2px solid #dddddd; border-bottom:2px solid #dddddd; content:''; } #cssmenu #menu-button:before { position:absolute; top:16px; right:17px; display:block; height:2px; width:20px; background:#dddddd; content:''; } #cssmenu #menu-button.menu-opened:after { top:23px; border:0; height:2px; width:15px; background:#ffffff; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -ms-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg); } #cssmenu #menu-button.menu-opened:before { top:23px; background:#ffffff; width:15px; -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -ms-transform:rotate(-45deg); -o-transform:rotate(-45deg); transform:rotate(-45deg); } #cssmenu .submenu-button { position:absolute; z-index:99; right:0; top:0; display:block; border-left:1px solid rgba(120,120,120,0.2); height:46px; width:46px; cursor:pointer; } #cssmenu .submenu-button.submenu-opened { background:#262626; } #cssmenu ul ul .submenu-button { height:34px; width:34px; } #cssmenu .submenu-button:after { position:absolute; top:22px; right:19px; width:8px; height:2px; display:block; background:#dddddd; content:''; } #cssmenu ul ul .submenu-button:after { top:15px; right:13px; } #cssmenu .submenu-button.submenu-opened:after { background:#ffffff; } #cssmenu .submenu-button:before { position:absolute; top:19px; right:22px; display:block; width:2px; height:8px; background:#dddddd; content:''; } #cssmenu ul ul .submenu-button:before { top:12px; right:16px; } #cssmenu .submenu-button.submenu-opened:before { display:none; } } </style> <div id='cssmenu'> <ul>    <li><a href='#'>Home</a></li>    <li class='active'><a href='#'>Products</a>       <ul>          <li><a href='#'>Product 1</a>             <ul>                <li><a href='#'>Sub Product</a></li>                <li><a href='#'>Sub Product</a></li>             </ul>          </li>          <li><a href='#'>Product 2</a>             <ul>                <li><a href='#'>Sub Product</a></li>                <li><a href='#'>Sub Product</a></li>             </ul>          </li>       </ul>    </li>    <li><a href='#'>About</a></li>    <li><a href='#'>Contact</a></li> </ul> </div> <!--END MENU --> Share123.vn chúc các bạn thành công. :)) Có một số bạn hỏi làm sao để chèn quảng cáo bên trong bài viết mà khi cần thay đổi có thể thay cho toàn bộ bài viết đã add quảng cáo, ở đây mình chia sẻ lại thủ thuật blogger khá hay này của Fandung. Ví dụ minh họa về quảng cáo trong bài viết bất kỳ Cách làm: Đăng nhập blogger => Mẫu => Chỉnh sửa HTML => tìm <data:post.body/> (Trong blog thường có từ 3 đến 4 đoạn này, nên chèn đúng vào <data:post.body/> hiển thị bài viết ) Sau đó thay thế <data:post.body/> thành đoạn lawmaking sau: <div expr:id='"aim1" + data:post.id'></div> <div style="clear:both; margin:5px ;">Lawmakingquảng cáo của bạn ở đây </div> <div expr:id='"aim2" + data:post.id'> <data:post.body/> </div> <script type="text/javascript"> var obj0=document.getElementById("aim1<data:post.id/>"); var obj1=document.getElementById("aim2<data:post.id/>"); var s=obj1.innerHTML; var r=s.search(/\x3C!-- ads --\x3E/igm); if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+16);} </script> Sau đó Lưu lại Như vậy là mình đã cài xong quảng cáo trong phần code, khi muốn thay thế quảng cáo khác chỉ việc vào đó thay thành quảng cáo khác, bây giờ đến bước chèn quảng cáo khi đăng bài. Để quảng cáo có thể hiển thị trong một bài viết bạn đăng thì khi đăng bài bạn làm như sau: Đăng bài => Chuyển sang chế độ HTML => Paste đoạn lawmaking sau vào những chỗ bạn muốn quảng cáo hiển thị:<!-- ads --> Như thế là ok , chỉnh sửa bài đăng cho đẹp rồi đăng bài kiếm tiền thôi.Video Hướng dẫn chèn quảng cáo bên trong bài viết blogger Chúc các bạn thành công, Sưu tầm Fandung. Đối với các pro blogger thì không khó, còn với những bạn mới chưa biết gì nhiều về blogger thì mình quay 1 video hướng dẫn qua cách quản trị blog, ở đây mình hướng dẫn quản trị như thay link menu, đăng bài mới, tạo nhãn, thay liên hệ, reprinting right, ... Tất cả các bạn có thể xem qua tại video phía dưới, link blog demo cho video này là http://www.news30-share123vn.blogspot.com Các bạn nên bật chế độ HD để xem cho nét Tag liên kết Template Blogspot (96) Premium Blogspot (94) Thủ thuật Blogspot (88) News Template Blogspot (86) Bất động sản (77) Giới thiệu Công ty đẹp (75) blogger đẹp (36) blogger google (35) blogger template (35) Học Seo Web (31) blogspot bán hàng (22) News Web (19) Source Joomla (18) blogspot cá nhân (18) Shop Web (16) blogspot đẹp (15) blogspot template đẹp (14) blogspot đẹp nhất (13) blogspot templates (12) blogspot template 2017 (11) Template Wordpress (10) blogspot template (10) Thủ thuật Điện thoại - Mobile (9) blogspot tin tức (9) Thủ thuật Photoshop (8) WordPress (8) Giới thiệu công ty (7) Tạp chí - Tin tức (7) Webmaster (7) Hướng dẫn quản trị (6) Mẫu blog bất động sản (5) Source Loại khác (5) Predium Template (4) Shop Template Blogspot (4) Source Wordpress (4) blog bán hàng online (4) Blogspot (3) Premium Web News (3) Shoponline - Bán hàng (3) Source Forum (3) Template Joomla (3) Template blogspot giới thiệu công ty (3) Template blogspot giới thiệu dịch vụ (3) template blogspot bán hàng chuẩn seo (3) template blogspot bán hàng full (3) Landing Page (2) Premium Web Shop (2) Template blogspot giới thiệu sản phẩm (2) template blogger landing page (2) template bán hàng blogspot đã việt hóa (2)Undeniabilityblogspot (1)Undeniabilityto whoopee blogspot (1) Giao diện blogger (1) Premium Forum (1) Source Nukeviet (1) Template Forum (1) bat dong san template (1) nút gọi điện trên web (1) template blogspot nhà đất (1) template landing page self-ruling (1) 0988 227 905 0904 227 905 Loading... Mẫu Blog Bất động sản Mẫu Blog Shop bán hàng Mẫu Blog Tạp chí - Tin tức Mẫu Blog Giới thiệu công ty Blog dạng Landing Page Blog theo yêu cầu Xem nhiều Share template Phim Blogspot đẹp Thêm nútUndeniabilitycho website, blogspot đẹp bằng CSS3 trên di động và PC Share full lawmaking Forum vbb đẹp chuẩn và chuyên nghiệp Johny Palelu Peang - Template web bán hàng chuyên nghiệp cho blogger Hướng dẫn cách lấy toàn bộ bài viết từ blog khác Ultra Video Converter - Phần mềm giảm dung lượng Video chuyên nghiệp Web hạ giá - Mẫu template blogger tin tức đẹp Share news template blogspot giống tiin.vn đẹp và chuyên nghiệp Tùy chỉnh khung scuttlebutt blogspot có thanh cuộn Tổng hợp những mẫu Powerpoint đẹp và chuyên nghiệp Đó chưa phải tất cả ... Chúng tôi còn 100 mẫu blog đẹp khác. View all Mẫu Template Blogger Hãy nhanh tay gọi điện ngay đến chúng tôi theo số 0988227905 hoặc đặt hàng thiết kế ngay hôm nay theo mẫu form bên dưới. Chúng tôi sẽ hoàn thành trong thời gian sớm nhất cho quý khách ĐẶT THIẾT KẾ NGAY! Hãy truy cập để trải nghiệm dịch vụ của chúng tôi Đã có lượt Khách Hàng quan tâm đến dịch vụ của chúng tôi Bài mới nhất Blog Hướng dẫn quản trị Mẫu blog mới Sử dụng nội dung ở trang này và dịch vụ tại Share123.vn có nghĩa là bạn đồng ý với Thỏa thuận sử dụng và Chính sách phát triển của chúng tôi. www.Share123.vn - Website chuyên thiết kế blogspot, zip blogger, thiết kế blog chuẩn seo, blogger responsive, Thủ thuật Blogspot,Self-rulingTemplate Blogspot, kho giao diện blog đẹp, premium template blogger, self-ruling template blogger, Với kinh nghiệm nhiều năm trong nghề thiết kế Temple, diamond skin web chúng tôi cam kết tạo ra những sản phẩm chất lượng, tối ưu đến tay người dùng, thiết kế theo yêu cầu của quý khách, cùng đội ngủ support chuyên nghiệp nhiệt tình, ... Copyright 2013 © Share123.vn - Blogger Team. All right Reserved - Hotline: 0988.227.905 - 0904.227.905 - Email: nguyenhuytap@gmail.com - website: www.share123.vn