Cách thêm Widget (thêm tiện ích) vào Blogspot

LongAnIT 11/16/2018 Bình luận
Trong Blogger có một định nghĩa Widgets đơn giản chúng ta hiểu là tiện ích. Các widget được tạo ra từ code HTML trong blogger theo cú pháp của nó.

Cách thêm Widget (thêm tiện ích) vào Blogspot
Cách thêm Widget (thêm tiện ích) vào Blogspot
Việc tạo ra các widget rất tiện lợi cho việc quản lý blog của bạn ngoài ra nó còn có rất nhiều tiện ích khác nữa tôi sẽ đề cập đến các bạn trong những bài viết sau. Tùy theo templae mà người tạo ra sẽ hiển thị nó ở các vị trí khác nhau... Trong bài viết này tôi sẽ hướng dẫn cho các bạn cách cơ bản để thêm  Widget trong blogger.

1. Cách thêm một tiện ích widget thông thường

Ở cách thêm tiện ích widget thông thường này thì khi thêm tiện ích sẽ xuất hiện toàn bộ web, từ trang chủ, bài viết, label ...

<b:section class='sidebar' id='sidebar1' preferred='yes'>
<b:widget id='HTML99' locked='false' title='Xem nhiều trên Longanit.com' type='HTML'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<div class='title-left'><data:title/></div>
</b:if>
<div class='box-left'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>

Giải thích:

  • class='sidebar': Dành cho template có hơn 1 cột, sidebar thường nằm bên trái hay bên phải tùy vào người thiết kế template.
  • id='sidebarl' : ID có nhiều tính năng nhưng mục đích chính vẫn là CSS cho tiện ích 
  • preferred='yes' : Chọn yes bạn có thể thêm tiện ích khác từ Widget này
  • locked='false' : Bạn có thể di chuyển giữa các tiện ích với nhau ( Di chuyển lên hay xuống), trong tiện ích này tôi set là False có nghĩa là tắt tính năng di chuyển bạn có thể set thành True nếu muốn di chuyển các widget
  • Xem nhiều trên Longanit.com là tiêu đề bạn đặt cho tiện ích: Bạn có thể đặt tên khác tùy ý không quan trọng chủ yếu là để dễ quản lý.
  • HTML99 : Là thứ tự của các layer widget. nếu save nó báo đỏ thì đổi số cho khác vì nó trùng lặp. khi tạo cái khác cũng thế

Ví dụ: Tiện ích 1 là sidebar1, HTML99 thì tiện ích 2 là sidebar2, HTML100
HTML là tên của tiện ích

VD: HTML là HTML/Javascript, nếu bạn muốn thêm nhãn thì thay Bằng Label. phần này hơi phức tạp nếu bạn mà làm không được thì cứ commen vào bên giới mình sẽ chỉ rõ cho

Ở những cách sau đây là những cách chỉ thêm tiện ích vào một vị trí bất kỳ ví dụ như trang chủ hoặc là label, bài viết, trang...

1. Chỉ cho phép widget hiển thị ở trang chủ

<b:section class='sidebar' id='sidebar1' preferred='yes'>
<b:widget id='HTML3' locked='false' title='Thêm tiện ích ở trang chủ' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
</b:section>
Để thêm bạn đầu tiên là phải xác định vị trí muốn thêm, như head, footer....(nếu không xác địch được thì sau khi thêm vào một vị trí cùng với các tiện ích có sẵn trên web (thêm vào đầu hoặc cuối các tiện ích có sẵn sau này cho dể chĩnh sữa) rồi bạn vào bố cục để di chuyển đến nơi thích hợp)
sau khi xác định vị trí muốn thêm thì bạn hãy copy cã đoạn mã trên rồi dán vào

2. Chỉ cho phép widget hiển thị ở từng bài viết

<b:section class='sidebar' id='sidebar1' preferred='yes'>
<b:widget id='HTML3' locked='false' title='Thêm tiện ích ở từng bài viết' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
</b:section>

3. Chỉ cho phép widget hiển thị ở những trang nhất định

<b:section class='sidebar' id='sidebar1' preferred='yes'>
<b:widget id='HTML3' locked='false' title='Thêm tiện ích ở trang nhất định' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == "Link của bạn"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
</b:section>

4. Widget chỉ hiển thị trên các trang Label

<b:section class='sidebar' id='sidebar1' preferred='yes'>
<b:widget id='HTML3' locked='false' title='Thêm tiện ích ở trên các label' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.searchLabel'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
</b:section>

 5. Widget chỉ hiển thị trên các trang Static pages

<b:section class='sidebar' id='sidebar1' preferred='yes'>
<b:widget id='HTML3' locked='false' title='Thêm tiện ích ở static pages' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "static_page"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
</b:section>

 6. Widget hiển thị trên trang tìm kiếm

<b:section class='sidebar' id='sidebar1' preferred='yes'>
<b:widget id='HTML3' locked='false' title='Thêm tiện ích ở trang tìm kiếm' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.searchQuery>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
</b:section>

 7. Widget chỉ hiển thị tại trang lưu trữ

<b:section class='sidebar' id='sidebar1' preferred='yes'>
<b:widget id='HTML3' locked='false' title='Thêm tiện ích ở trang lưu trữ' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "archive"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
 Kết luận: Như vậy với cách trên tôi đã hướng dẫn cho các bạn cách thêm 1 widget vào trong blogger, trong quá trình thực hiện có thể sẽ gây ra một số lỗi bạn có thể comment bên dưới để trao đổi.

Code tạo nút Demo, Download, Xem mẫu, Tải về, Mua ngay đẹp cho Blogger

LongAnIT 11/15/2018 Bình luận
Với các blogger lĩnh vực về  game, phần mềm, chia sẻ tài liệu... thì thường chia sẻ những đường link để người dùng download hay xem demo.

Việc làm nổi bật các đường link này chúng ta nên kết hợp với các Button để người dùng dễ dàng nhìn thấy và làm đẹp blog của bạn. Bộ code này dùng để làm button bằng CSS3 đẹp tuyệt.
Button Demo, Download, Xem mẫu, Tải về, Mua ngay
Button Demo, Download, Xem mẫu, Tải về, Mua ngay

Khi bạn đưa trỏ chuột vào button thì sẽ thấy hiệu ứng rất hay. Bộ code này đi kèm với thư viện Bootstrap, Fontawesome, với bộ icon đa dạng và phong phú giúp bạn có thể tùy chỉnh icon tùy thích. Trong bài này tôi sẽ hướng dẫn cho các bạn cách tạo bộ icon này với các bước thực hiện như bên dưới.

Bước 1: Đăng nhập vào Blogger > Chủ đề > Chỉnh sửa HTML

Bước 2: Thêm thư viện FontAwesome vào bằng cách thêm đoạn code này vào sau thẻ <head>

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>

Nếu blog của bạn có đoạn tương tự thì có thể bỏ qua hoặc thay bằng đoạn code trên

Bước 3: Thêm đoạn CSS này trước thẻ đóng ]]></b:skin> hoặc </style> trong Template của bạn

a:active{position:relative;top:1px;left:1px}
#longanit-button{text-align:center}
#longanit-button a{padding:10px 20px;color:#fff;text-align:center;border:0;cursor:pointer;border-radius:3px;display:inline-block;font-weight:500;-webkit-box-shadow:inset 0 -4px rgba(0,0,0,0.15);box-shadow:inset 0 -4px rgba(0,0,0,0.15);color:#fff;max-width:220px;line-height:30px;font-size:16px;text-transform: uppercase;margin:10px}
#longanit-button a:hover{-webkit-box-shadow:inset 0 -54px rgba(0,0,0,0.15);box-shadow:inset 0 -54px rgba(0,0,0,0.15);color:#fff}
.demo-button:before{content:'\f1d9';font-family:fontawesome;display:inline-block;margin:0 8px 3px 0;vertical-align:middle}
.download-button:before{content:'\f019';font-family:fontawesome;display:inline-block;margin:0 8px 3px 0;vertical-align:middle}
.buy-button:before{content:'\f07a';font-family:fontawesome;display:inline-block;margin:0 8px 3px 0;vertical-align:middle}
.blue{background:#3498db;}
.green{background:#2ecc71}
.red{background:#e74c3c}
.orange{background:#e8930c}
.purple{background:#9b59b6}
.yellow{background:#FFD600}
.pink{background:#F889EB}
.grey{background:#bdc3c7}
.turquoise{background:#1abc9c}
.midnight{background:#2c3e50}
.asbestos{background:#6d7b7c}
.dark{background:#454545}

Chú ý:  Bạn có thể thay thế chỗ content bằng mã của icon bạn thích trong thư viện FontAwesome:

http://fontawesome.io/icons/
- Tôi đã liệt kê sẵn 1 số mã màu đẹp hay dùng: blue, green, red, orange, purple, yellow, pink, grey, turquoise, midnight, asbestos, dark.
- Và thay thế tên demo-button, download-button,buy-button bằng tên mà bạn thích khi bạn thêm icon vào.

Bước 4: Save Template (Lưu mẫu).

Bước 5: Khi viết bài viết, để chèn nút Demo, Download, Xem mẫu, Tải về, Mua ngay thì bạn chuyển qua chế độ HTML sau đó dán đoạn HTML sau vào tương ứng.
<div id="longanit-button">
<a href="https://www.longanit.com/" class="green demo-button" target="_blank" rel="nofollow">Xem mẫu</a><a href="https://www.longanit.com/" class="orange download-button" target="_blank" rel="nofollow">Tải về</a><a href="https://www.longanit.com/" class="blue buy-button" target="_blank" rel="nofollow">Mua ngay</a></div>

Thay đường link https://www.longanit.com/ thành đường link Download của bạn.

Tạo phân trang (Page Navigation) cho Blogger

LongAnIT 11/06/2018 Bình luận
Nếu như blog của bạn có nhiều bài viết thì sẽ rất mất công cho người dùng khi muốn xem các bài viết cũ hơn trên blog của bạn. Tính năng Page Navigation cho Blogger là vô cùng cần thiết để giải quyết vấn đề này.
Tạo phân trang (Page Navigation) cho Blogger

Tính năng bài đăng cũ hơn hay mới mơi không thể giải quyết hết vấn đề mà người đọc cần. Bài viết này mình sẽ hướng dẫn các bạn cách tạo phân trang cho blog của bạn rất đơn giản chỉ vài bước sau đây.

 Bước 1: Thêm Script

Copy đoạn code sau đây và dán vào trước thẻ đóng </body>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
 <script type='text/javascript'>
 //<![CDATA[
 var perPage=10;
 var numPages=2;
 var firstText ='First';
 var lastText ='Last';
 var prevText ='« Previous';
 var nextText ='Next »';
 var urlactivepage=location.href;
 var home_page="/";
if(typeof firstText=="undefined")firstText="First";if(typeof lastText=="undefined")lastText="Last";var noPage;var currentPage;var currentPageNo;var postLabel;pagecurrentg();function looppagecurrentg(pageInfo){var html='';pageNumber=parseInt(numPages/2);if(pageNumber==numPages-pageNumber){numPages=pageNumber*2+1}pageStart=currentPageNo-pageNumber;if(pageStart<1)pageStart=1;lastPageNo=parseInt(pageInfo/perPage)+1;if(lastPageNo-1==pageInfo/perPage)lastPageNo=lastPageNo-1;pageEnd=pageStart+numPages-1;if(pageEnd>lastPageNo)pageEnd=lastPageNo;html+="<span class='showpageOf'>Page "+currentPageNo+'/'+lastPageNo+"</span>";var prevNumber=parseInt(currentPageNo)-1;if(currentPageNo>1){if(currentPage=="page"){html+='<span class="showpage firstpage"><a href="'+home_page+'">'+firstText+'</a></span>'}else{html+='<span class="displaypageNum firstpage"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">'+firstText+'</a></span>'}}if(currentPageNo>2){if(currentPageNo==3){if(currentPage=="page"){html+='<span class="showpage"><a href="'+home_page+'">'+prevText+'</a></span>'}else{html+='<span class="displaypageNum"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">'+prevText+'</a></span>'}}else{if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+prevNumber+');return false">'+prevText+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+prevNumber+');return false">'+prevText+'</a></span>'}}}if(pageStart>1){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="displaypageNum"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">1</a></span>'}}if(pageStart>2){html+=' ... '}for(var jj=pageStart;jj<=pageEnd;jj++){if(currentPageNo==jj){html+='<span class="pagecurrent">'+jj+'</span>'}else if(jj==1){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="displaypageNum"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">1</a></span>'}}else{if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+jj+');return false">'+jj+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+jj+');return false">'+jj+'</a></span>'}}}if(pageEnd<lastPageNo-1){html+='...'}if(pageEnd<lastPageNo){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+lastPageNo+');return false">'+lastPageNo+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+lastPageNo+');return false">'+lastPageNo+'</a></span>'}}var nextnumber=parseInt(currentPageNo)+1;if(currentPageNo<(lastPageNo-1)){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+nextnumber+');return false">'+nextText+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+nextnumber+');return false">'+nextText+'</a></span>'}}if(currentPageNo<lastPageNo){if(currentPage=="page"){html+='<span class="displaypageNum lastpage"><a href="#" onclick="redirectpage('+lastPageNo+');return false">'+lastText+'</a></span>'}else{html+='<span class="displaypageNum lastpage"><a href="#" onclick="redirectlabel('+lastPageNo+');return false">'+lastText+'</a></span>'}}var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}function totalcountdata(root){var feed=root.feed;var totaldata=parseInt(feed.openSearch$totalResults.$t,10);looppagecurrentg(totaldata)}function pagecurrentg(){var thisUrl=urlactivepage;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){postLabel=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{postLabel=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}if(thisUrl.indexOf("?q=")==-1&&thisUrl.indexOf(".html")==-1){if(thisUrl.indexOf("/search/label/")==-1){currentPage="page";if(urlactivepage.indexOf("#PageNo=")!=-1){currentPageNo=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{currentPageNo=1}document.write("<script src=\""+home_page+"feeds/posts/summary?max-results=1&alt=json-in-script&callback=totalcountdata\"><\/script>")}else{currentPage="label";if(thisUrl.indexOf("&max-results=")==-1){perPage=20}if(urlactivepage.indexOf("#PageNo=")!=-1){currentPageNo=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{currentPageNo=1}document.write('<script src="'+home_page+'feeds/posts/summary/-/'+postLabel+'?alt=json-in-script&callback=totalcountdata&max-results=1" ><\/script>')}}}function redirectpage(numberpage){jsonstart=(numberpage-1)*perPage;noPage=numberpage;var nameBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nameBody.appendChild(newInclude)}function redirectlabel(numberpage){jsonstart=(numberpage-1)*perPage;noPage=numberpage;var nameBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary/-/"+postLabel+"?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nameBody.appendChild(newInclude)}function finddatepost(root){post=root.feed.entry[0];var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);var timestamp=encodeURIComponent(timestamp1);if(currentPage=="page"){var pAddress="/search?updated-max="+timestamp+"&max-results="+perPage+"#PageNo="+noPage}else{var pAddress="/search/label/"+postLabel+"?updated-max="+timestamp+"&max-results="+perPage+"#PageNo="+noPage}location.href=pAddress}
 //]]>
 </script>
 </b:if>
 </b:if>
Bước 2: Chỉnh sửa lại URl Label

Ở bước này chúng ta sẽ sửa lỗi không hiển thị phân trang khi xem các bài viết trong 1 Label. Các bạn hãy tìm và sửa tất cả

expr:href='data:label.url'

và bạn sửa nó thành

expr:href='data:label.url + "?&amp;max-results=10"'
 Bước 3: Viết CSS

Chúng ta đều cần phải ngồi viết lại CSS cho nó để nó được đẹp hơn và hòa hợp với Template hiện tại. Vì vậy, mỗi người sẽ có một cách viết CSS riêng. Tuy nhiên, mình cũng xin được chia sẻ đoạn CSS mà mình đã viết sẵn cho những bạn không biết viết CSS hay là không có thời gian,…

Các bạn chỉ việc copy đoạn CSS dưới đây và dán vào trước thẻ ]]></b:skin> của mình là được.
#blog-pager {clear:both;margin:30px auto;text-align:center; padding: 7px;}
 .blog-pager {background: none;}
 .displaypageNum a, .showpage a, .pagecurrent {font-size: 14px;padding: 5px 12px;margin-right:5px; color: #666; background-color:#eee;}
 .displaypageNum a:hover, .showpage a:hover, .pagecurrent {background:#359BED;text-decoration:none;color: #fff;}
 #blog-pager .pagecurrent {font-weight:bold;color: #fff;background:#359BED;}
 .showpageOf {display:none!important}
 #blog-pager .pages {border:none;}

 Đây là một thủ thuật bạn nên thực hiện nếu như blog của mình có nhiều bài viết nhé! Chúc các bạn thành công!

Bài viết tham khảo nguồn tại : https://mocgin.com

Code liên hệ trượt dưới chân trang đẹp cho blogger

LongAnIT 11/03/2018 2 Bình luận
Code liên hệ trượt dưới chân trang đẹp cho blogger
Đoạn code này lấy bên aecland.vn rất thích hợp dùng cho các website bán hàng hoặc làm dịch vụ nên sử dụng để giúp cho khách hàng của mình liên hệ dễ dàng hơn.

Có thể giúp gia tăng tỉ lệ gọi điện đặt hàng, thích hợp với các web đang triển khai các chiến dịch chạy bán hàng, kinh doanh online, bất động sản...

Tiện ích liên hệ trượt dưới chân trang web chia làm 3 phần gồm:
Thông tin hotline
Thông tin thanh toán
Chát, Tư vấn online

Bước 1:  Chèn đoạn code HTML trên thẻ đóng </body>
 <div class='site-support'>
<div class='site-content'>
<a href='#'><div class='item toogle-support-item'>
<i aria-hidden='true' class='fa fa-map-marker'/>
<span> AEC Land Bình Châu</span>
</div></a>
<a href='tel:0967 11 33 66'><div class='item toogle-support-item'>
<i aria-hidden='true' class='fa fa-phone'/>
<span>Hotline: <strong>0967 11 33 66</strong></span>
</div></a>
<a href='http://www.aecland.vn/p/lien-he.html' target='_blank'>
<div class='item chat toogle-support-item'>
<div class='download-fill'/>
<i aria-hidden='true' class='fa fa-download'/>
<span><blink>TẢI MẶT BẰNG - BẢNG GIÁ - CHÍNH SÁCH</blink></span>
</div></a>
<div class='contact-fill'/>
<a href='tel:0967 11 33 66 '><div class='item hidden-phone'>
<i aria-hidden='true' class='fa fa-phone'/>
</div></a>
</div>
</div>
Bước 2: Chèn CSS để làm đẹp. Code này chuẩn Responsive nên bạn hoàn toàn có thể yên tâm, hiển thị tốt cho đầy đủ các thiết bị khác nhau. Khi Reponsive nó sẽ hiển thị icon phone rất tiện lợi
Chèn code css sau, trên thẻ đóng ]]></b:skin>
@keyframes quick-alo-circle-fill-anim {
0% {
    transform: rotate(0) scale(.7) skew(1deg);
    opacity: .2;
}
50% {
    transform: rotate(0) scale(1) skew(1deg);
    opacity: .2;
}
100% {
    transform: rotate(0) scale(.7) skew(1deg);
    opacity: .2;
}
}
@keyframes quick-alo-circle-img-anim {
0% {
    transform: rotate(0) scale(1) skew(1deg);
}

10% {
    transform: rotate(-25deg) scale(1) skew(1deg);
}
20% {
    transform: rotate(25deg) scale(1) skew(1deg);
}
30% {
    transform: rotate(-25deg) scale(1) skew(1deg);
}
40% {
    transform: rotate(25deg) scale(1) skew(1deg);
}
50% {
    transform: rotate(0) scale(1) skew(1deg);
}
100% {
    transform: rotate(0) scale(1) skew(1deg);
}
}
@media screen and (min-width: 993px) {
  .site-support {
    background: #444;
    position: fixed;
    bottom: 0;
    width: 100%;
    font-size: 16px;
    z-index: 1001;
  }
  .site-support .item {
    float: left;
    margin-right: 30px;
    padding: 5px 0;
  }
  .site-support .item.chat {
    background: #663333;
    padding: 5px 20px;
    float: right;
    margin-right: 0;
    position: relative;
  }
.site-support .item.chat:hover {
   background: #00B328;
}
.site-support .item.chat .fa{
    -webkit-animation: quick-alo-circle-img-anim 1s infinite ease-in-out;
    -moz-animation: quick-alo-circle-img-anim 1s infinite ease-in-out;
    -ms-animation: quick-alo-circle-img-anim 1s infinite ease-in-out;
    -o-animation: quick-alo-circle-img-anim 1s infinite ease-in-out;
    animation: quick-alo-circle-img-anim 1s infinite ease-in-out;
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    border-radius: 100%;
    padding: 5px 6px;
    font-size: 30px;
    position: absolute;
    left: -20px;
    top: -20px;
    background: #CD843B;
}
  .site-support .item.toogle-support {
    display: none;
  }
  .site-support a {
    color: #fff;
  }
  .site-support .fa {
    color: #633;
    padding: 5px 10px;
    background: #ffcc33;
    border-radius: 100%;
    line-height: 20px;
    width: 30px;
    height: 30px;
  }
.site-content {
    max-width: 1170px;
    margin: 0 auto;
}
.hidden-phone{display:none}
.download-fill {
    width: 80px;
    height: 80px;
    top: -40px;
    left: -40px;
    position: absolute;
    background-color: #CD843B;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    border: 2px solid transparent;
    opacity: .75;
    -webkit-animation: quick-alo-circle-fill-anim 2.3s infinite ease-in-out;
    -moz-animation: quick-alo-circle-fill-anim 2.3s infinite ease-in-out;
    -ms-animation: quick-alo-circle-fill-anim 2.3s infinite ease-in-out;
    -o-animation: quick-alo-circle-fill-anim 2.3s infinite ease-in-out;
    animation: quick-alo-circle-fill-anim 2.3s infinite ease-in-out;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}
}
@media screen and (max-width: 992px) {
.hidden-phone{display:block}
.contact-fill {
    width: 80px;
    height: 80px;
    top: -10px;
    left: -20px;
    position: absolute;
    background-color: #0B5B1D;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    border: 2px solid transparent;
    opacity: .1;
    -webkit-animation: quick-alo-circle-fill-anim 2.3s infinite ease-in-out;
    -moz-animation: quick-alo-circle-fill-anim 2.3s infinite ease-in-out;
    -ms-animation: quick-alo-circle-fill-anim 2.3s infinite ease-in-out;
    -o-animation: quick-alo-circle-fill-anim 2.3s infinite ease-in-out;
    animation: quick-alo-circle-fill-anim 2.3s infinite ease-in-out;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}
  .site-support {
    position: fixed;
    left: 20%;
    transform: translateX(-50%);
    bottom: 10px;
    z-index: 1001;
  }
  .site-support .item {
    margin: 10px 0;
    height: 40px;
    line-height: 40px;
    text-align: right;
    animation: quick-alo-circle-img-anim 1s infinite ease-in-out; */
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animation: quick-alo-circle-img-anim 1s infinite ease-in-out;
    -moz-animation: quick-alo-circle-img-anim 1s infinite ease-in-out;
    -ms-animation: quick-alo-circle-img-anim 1s infinite ease-in-out;
    -o-animation: quick-alo-circle-img-anim 1s infinite ease-in-out;
  }
  .site-support .item span {
    color: #fff;
    background: #000;
    padding: 5px 10px;
    margin-right: 10px;
    position: relative;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4);
  }
  .site-support .item span:after {
    position: absolute;
    right: -6px;
    content: &#39;&#39;;
    top: 8px;
    width: 0px;
    height: 0px;
    border-bottom: 6px solid transparent;
    border-top: 6px solid transparent;
    border-left: 6px solid #000;
  }
  .site-support .item.toogle-support-item {
    display: none;
    margin-right: 8px;
  }
.site-support .item.toogle-support{display:block}
  .site-support .item.toogle-support .fa {
    width: 56px;
    height: 56px;
    line-height: 56px;
    font-size: 30px;
  }
  .site-support .fa {
    color: #fff;
    float: right;
    font-size: 25px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    background: #2196F3;
    text-align: center;
    border-radius: 50%;
  }
}
Bước 3: Tiến hành lưu lại và xem kết quả

Fix The reference to entity delimiter Blogger

LongAnIT 11/02/2018 Bình luận
Phân trang theo nhãn cho blogger giúp blog của bạn tải nhanh và trông gọn gàng hơn. Tuy nhiên khi click vào tên nhãn label thì số bài đăng hiển thị trên 1 trang theo mặc định là 20.

Fix lỗi phân trang search nhãn cho Blogger
Việc Chỉnh sửa HTML tạo menu đưa vào blog, khi lưu mẫu sẽ hiện thấy báo lỗi : đại loại như sau
The reference to entity "max-results" must end with the ';' delimiter.
Tạm dịch: Mẫu của bạn không thể được phân tích cú pháp vì được tạo không đúng. Hãy đảm bảo tất cả các phần từ XML được đóng chính xác.

Để khắc phục, ta chỉ cần thêm amp; vào sau dấu ?:

VD trên web longanit của tôi Link của trang nhãn lúc đầu:
https://www.longanit.com/search/label/Windows%20-%20Antivirus?&max-results=5
Bạn đổi thành link như bên dưới sẽ không báo lỗi nữa
https://www.longanit.com/search/label/Windows%20-%20Antivirus?&amp;max-results=5
Tiến hành save lại là sẽ không báo lỗi nữa. Bạn áp dụng tương tư cho các nhãn khác trong blog của mình nhé. Chúc thành công!

Hướng dẫn tạo Breaking News cho Blogger

LongAnIT 10/31/2018 Bình luận
Create Breaking News cho Blogger

Breaking News là gì ? Gọi chung là những tin nóng mới cập nhật, bài viết mới cập nhật. Các bạn hay theo dõi tin tức thời sự trên Tivi sẽ thấy một thanh dòng chữ chạy ngang từ trái sang ghi những thông tin cập nhật. Việc tạo  Breaking News sẽ giúp cho người đọc dễ dàng cập nhật những bài viết gần đây trên blog của bạn. Đó cũng là cơ hội để họ ghé lại blog của bạn lâu hơn.

Hôm nay tôi sẽ chia sẻ cho các bạn cách tạo Breaking News rất đơn giản và đặc biệt là nó có thể Reponsive trên các thiết bị. Vui lòng thực hiện theo các bước hướng dẫn dưới đây

Bước 1. Đăng nhập vào Blogger - Chủ đề - Chỉnh sửa HTML ,  Tìm thẻ ]]></b:skin> hoặc </style> đây là thẻ chứa CSS của blog. Copy và dán đoạn code dưới vào trên nó.
 #bd-breakingnews {margin:15px 0 0 0;margin-right:15px;height:42px;line-height:29px;overflow:hidden;background:#fff;border:1px solid #8ED557;}
#bd-breakingnews .head-breaking {position:absolute;background:none repeat scroll 0 0 #8ED557;color:#fff;display:block;float:left;font-family:inherit;font-size:16px;font-weight:420;text-transform:uppercase;padding:6.5px 22px;}
#breaking-bsd-news li a {font-family:inherit;font-weight:420;color:#666;margin-top:10px;transition:all 0.5s ease-in-out;}
#breaking-bsd-news li a:hover {color:#63953D;}
#breaking-bsd-news {float:left;margin-left:75px;margin-top:6px;}
#breaking-bsd-news ul,#breaking-bsd-news li{list-style:none;margin:0;padding:0}
@media only screen and (max-width:640px){
#bd-breakingnews {margin:20px 0 0 0;margin-right:0;}
#bd-breakingnews .head-breaking {padding:6.5px 14px;}
#breaking-bsd-news {margin-left:50px;}}

Bước 2: Tìm thẻ đóng  </body> và copy đoạn code bên dưới vào trước nó
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){var e="https://www.longanit.com",t=20;$.ajax({url:""+e+"/feeds/posts/default?alt=json-in-script&max-results="+t,type:"get",dataType:"jsonp",success:function(e){function t(){$("#breaking-bsd-news li:first").slideUp(function(){$(this).appendTo($("#breaking-bsd-news ul")).slideDown()})}var n,r,s="",a=e.feed.entry;if(void 0!==a){s="<ul>";for(var l=0;l<a.length;l++){for(var o=0;o<a[l].link.length;o++)if("alternate"==a[l].link[o].rel){n=a[l].link[o].href;break}r=a[l].title.$t,s+='<li><a href="'+n+'" target="_blank">'+r+"</a></li>"}s+="</ul>",$("#breaking-bsd-news").html(s),setInterval(function(){t()},5e3)}else $("#breaking-bsd-news").html("<span>No result!</span>")},error:function(){$("#breaking-bsd-news").html("<strong>Error Loading Feed!</strong>")}})});
//]]>
</script>

Bước 3: Tìm vị trí đặt cho Breaking News. Bạn có thể đặt code phía dưới menu trong blog của mình. Copy đoạn code bên dưới vào vị trí mà bạn muốn đặt.
 <div id='bd-breakingnews'><span class='head-breaking'><i class='fa fa-bullhorn'/></span>
<div id='breaking-bsd-news'>Loading..</div></div>

Vì code Request đến Font Awesome nên bạn có thể thay thế icon to đỏ trong code trên bằng icon khác mà bạn thích. Lưu ý là trong blog của bạn phải add thư viện Font Awesome vào nhé. Bạn có thể tham khảo đường link bên dưới.
https://fortawesome.github.io/Font-Awesome/icons/%C2%A0

Chú ý: Nếu bạn muốn code chỉ hiển thị ở trang chủ thì bạn có thể thay code ở bước 3 bằng code bên dưới nhé. Phần code này tôi đã thêm thẻ điều kiện vào.
 <b:if cond='data:blog.pageType == &quot;index&quot;'>
<div id='bd-breakingnews'><span class='head-breaking'><i class='fa fa-bullhorn'/></span>
<div id='breaking-bsd-news'>Loading..</div></div>
</b:if>

Kết luận: Như vây chỉ vài thao tác đơn giản tôi đã hướng dẫn các bạn cách tạo Breaking News Widget cho blog của bạn . Chúc thành công và đừng quên chia sẻ hặc để lại comments của bạn bên dưới nhé.

Responsive Recent Post Slider to Blogger

LongAnIT 10/31/2018 Bình luận
Automated Responsive Recent Post Slider to Blogger
Quay trở lại với thủ thuật blogger. Trong bài viết này tôi sẽ hướng dẫn cho các bạn cách tạo bài viết mới nhất dạng Slide tự trượt cho Blogger. Với thủ thuật này bạn sẽ thấy một tiện ích xuất hiện trên blog của mình cực kỳ hiện đại, dạng mờ mờ metro phẳng rất chuyên nghiệp, đặc biệt nó còn tự động trượt  để thay đổi bài viết. Để thực hiện widget này, các bạn cần thực hiện các bước như tôi hướng dẫn bên dưới

Bước 1: Đăng nhập vào Blogger - Chủ đề - Chỉnh sửa HTML tìm trong CSS của bạn và copy đoạn code bên dưới vào
#featuredpost {margin:15px auto; width: 970px;} #slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box} #slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative} #slides ul{height:320px} #slides li{width:50%;height:100%;position:absolute;display:none} #slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4), #slides li:nth-child(5){display:block} #slides li:nth-child(1){left:0;top:0} #slides li:nth-child(2){left:50%;width:25%;height:50%} #slides li:nth-child(3){left:75%;width:25%;height:50%} #slides li:nth-child(4){left:50%;top:50%;width:25%;height:50%} #slides li:nth-child(5){left:75%;top:50%;width:25%;height:50%} #slides li:nth-child(1) h4 {overflow:hidden;font-size:25px;bottom:0;color:#fafafa;width:100%; padding:10px 10px 10px 90px;text-align:left;text-transform:uppercase;background:rgba(0,0,0,0.3); height:90px;font-family:&#39;Oswald&#39;;text-shadow:2px 2px 0 rgba(0,0,0,0.2);line-height:32px;left:0;} #slides li:nth-child(1) .label_text {font-size:30px;display:block;bottom:10px;left:10px; padding:0;font-family:&#39;Oswald&#39;;box-shadow:5px 3px 0 rgba(0,0,0,0.2);} #slides li:nth-child(1) span.dd {display:block;font-size:30px;padding:12px 15px; background:#ff6553;margin:0;} #slides li:nth-child(1) span.dm {display:block;font-size:14px;background:#333;color:#fff; padding:5px 21px;text-transform:uppercase;margin:0;} #slides li:nth-child(1) span.dy, #slides li:nth-child(1) span.autname{display:none;} #slides a{display:block;width:100%;height:100%;overflow:hidden} #slides img{display:block;width:100%;height:auto;border:0;padding:0;background-color:#333;-moz-transform:scale(1.0) rotate(0);-webkit-transform:scale(1.0) rotate(0);-ms-transform:scale(1.0) rotate(0);transform:scale(1.0) rotate(0);transition:all 0.6s linear;} #slides li a:hover img {-moz-transform:scale(1.1) rotate(1deg);-webkit-transform:scale(1.1) rotate(1deg);-ms-transform:scale(1.1) rotate(1deg);transform:scale(1.1) rotate(1deg);transition:all 0.3s linear;} #slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(http://2.bp.blogspot.com/-0haO2Mfkjjk/VDgZww2tfEI/AAAAAAAAHAk/zhu3INYSkHA/s1600/fade.png);background-position:50% 40%;background-repeat:repeat-x;} #slides h4{position:absolute;bottom:40px;margin:0;font-size:13px;font-family:&#39;Oswald&#39;; left:10px;padding:5px 10px;color:#f9f9f9;z-index:3;line-height:20px;font-weight:normal; background:rgba(41,41,41,0.7);text-align:left;text-transform:uppercase;margin-right:10px;} #slides .label_text{font-size:12px;color:#fff;bottom:10px;z-index:3;left:10px; position:absolute;background:rgba(255,101,83,0.8);padding:3px 6px;font-family:&#39;Oswald&#39;; text-transform:uppercase;} #slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname,#slides li:nth-child(4) .autname,#slides li:nth-child(5) .autname{display:none;} #slides .overlayx,#slides li{transition:all .4s ease-in-out} #slides li:nth-child(1) .overlayx{display:none;} #slides li:hover .overlayx{opacity:0.1} @media only screen and (max-width:800px){ #slides li:nth-child(1) h4 {font-size:18px;line-height:24px;}} @media only screen and (max-width:600px){ #slides ul{height:600px} #slides li:nth-child(1){width:100%;height:50%} #slides li:nth-child(2){top:50%;height:25%;left:0;width:50%} #slides li:nth-child(3){left:50%;top:50%;width:50%;height:25%} #slides li:nth-child(4){left:0;top:75%;height:25%;width:100%} #slides li:nth-child(5){display:none;}} @media only screen and (max-width:480px){ #slides li:nth-child(1) h4 {font-size:13px;line-height:16px;}}

Bước 2: Nhấn Ctrl + F trong khung tìm kiếm gõ  </head>  Sau đó copy đoạn code bên dưới vào phía trên thẻ </head>
<script type='text/javascript'>
function FeaturedPost(a){(function(e){var h={blogURL:"",MaxPost:5,idcontaint:"#featuredpost",ImageSize:500,interval:10000,autoplay:false,loadingClass:"loadingxx",pBlank:"http://3.bp.blogspot.com/-v45kaX-IHKo/VDgZxWv0xUI/AAAAAAAAHAo/QJQf8Dlh3xc/s1600/grey.gif",MonthNames:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],tagName:false};h=e.extend({},h,a);var g=e(h.idcontaint);var c=h.blogURL;var d=h.MaxPost*200;if(h.blogURL===""){c=window.location.protocol+"//"+window.location.host}g.html('<div id="slides"><ul class="randomnya"></ul></div><div id="buttons"><a href="#" id="prevx" title="prev"></a><a href="#" id="nextx" title="next"></a></div>').addClass(h.loadingClass);var f=function(w){var q,k,m,u,x,p,t,v,r,l="",s=w.feed.entry;for(var o=0;o<s.length;o++){for(var n=0;n<s[o].link.length;n++){if(s[o].link[n].rel=="alternate"){q=s[o].link[n].href;break}}if("media$thumbnail"in s[o]){u=s[o].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+h.ImageSize+"-c")}else{u=h.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+h.ImageSize+"$1")}k=s[o].title.$t;r=s[o].published.$t.substring(0,10);m=s[o].author[0].name.$t;x=r.substring(0,4);p=r.substring(5,7);t=r.substring(8,10);v=h.MonthNames[parseInt(p,10)-1];l+='<li><a target="_blank" href="'+q+'" title="'+k+'"><div class="overlayx"></div><img class="random" src="'+u+'" title="'+k+'"><h4>'+k+'</h4></a><div class="label_text"><span class="date"><span class="dd">'+t+'</span> <span class="dm">'+v+'</span> <span class="dy">'+x+'</span></span> <span class="autname">'+m+"</span></div></li>"}e("ul",g).append(l)};var b=function(){var i="/-/"+h.tagName;if(h.tagName===false){i="";e.ajax({url:c+"/feeds/posts/default"+i+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",success:f,dataType:"jsonp",cache:true})}else{e.ajax({url:c+"/feeds/posts/default"+i+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",success:f,dataType:"jsonp",cache:true})}(function(){setTimeout(function(){e("#prevx").click(function(){e("#slides li:first").before(e("#slides li:last"));return false});e("#nextx").click(function(){e("#slides li:last").after(e("#slides li:first"));return false});if(h.autoplay){var k=h.interval;var l=setInterval("rotate()",k);e("#slides li:first").before(e("#slides li:last"));e("#slides").hover(function(){clearInterval(l)},function(){l=setInterval("rotate()",k)});function j(){e("#nextx").click()}}g.removeClass(h.loadingClass)},d)})()};e(document).ready(b)})(jQuery)};function rotate(){$('#nextx').click();};document.write('') //<![CDATA[ $(document).ready(function () { FeaturedPost({ blogURL:"https://www.longanit.com/", MaxPost:8, idcontaint:"#featuredpost", ImageSize:500, interval:10000, autoplay:true, tagName:false }); }); //]]>
</script>
Bước 3: Xác định vị trí đặt để hiển thị bài viết chúng ta dùng code HTML để gọi. Bạn tìm trong Template của mình vị trí muốn đặt và dán đoạn code bên dưới vào. Thường code này se hay đặt dưới phần Header của Blog
<div id="featuredpost"></div>
Bước 4: Bạn thay đổi các thông tin như tôi liệt kê bên dưới cho phù hợp với blog của bạn nhé
  • blogURL:"https://www.longanit.com" (Thay đổi thành link blog của bạn)
  • MaxPost:8, ( Số bài viết hiển thị  mặc định là 8)
  • idcontaint:"#featuredpost", ( lệnh gọi bài viết ra )
  • ImageSize:500, ( Kính thước tối đa của ảnh hiển thị)
  • interval:10000, ( Tốc độ Slide mặc định 10000)
  • autoplay:true, ( Tự động slide bài viết khi load nếu set False sẽ không tự động )
  • tagName:false ( Mặc định không hiển thị nhãn )
Chúc bạn thành công!

Thiết kế trang báo lỗi 404 theo phong cách Mi Sốp Blogger

LongAnIT 10/30/2018 Bình luận
Thiết kế trang báo lỗi 404 theo phong cách Mi Sốp Blogger

Tình cờ lạc vào trang 404 của Microsoft thấy thiết kế và trình bày rất hay. Ngoài việc thông báo lỗi 404 tới người dùng họ còn thêm vào một số kết quả tìm kiếm dạng gợi ý giúp người dùng có thể nhanh chóng chuyển hướng tới các liên kết tồn tại. Và giờ ta sẽ mang nó vào blogspot

Cụ thể list bài viết gợi ý ta có thể dùng thủ thuật random post/recent post/label post,... tùy theo mong muốn của webmaster. Trong bài viết này tôi sẽ sử dụng random post với layout giữ lại header và footer

Bước 1: xác định layout để đặt thẻ điều kiện

Tôi ví dụ layout trang của bạn như sau

<body>
    <div class="header">
        <!-- Nội dung header -->
    </div>
    <div class="main">
        <!-- Nội dung chính -->
    </div>
    <div class="footer">
        <!-- Nội dung footer -->
    </div>
</body>

Ta sẽ đặt thẻ điều kiện như sau để giữ lại header và footer trong trang 404 cũng như tối ưu code 

<body>
    <div class="header">
        <!-- Nội dung header -->
    </div>
    <b:if cond='!data:view.isError'>
        <div class="main">
            <!-- Nội dung chính -->
        </div>
        <b:else/>
        <div class="error">
            <!-- Nội dung trang error -->
        </div>
    </b:if>
    <div class="footer">
        <!-- Nội dung footer -->
    </div>
</body>


Bước 2: Chèn code vào trang 404

<div class='row'>
    <div class="non">
        <div class="mes">
            <div class="headline">
                404 - Page not found
            </div>
            <div class="suggest">
                <p> Hmm, we couldn't find this link, but here are some post that may be helpful</p>
                <div class="_suggest"></div>
            </div>
        </div>
        <div class="hero">
            <a href='/' title='Back to home page'><svg class="hero-image" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 150 270" style="" xml:space="preserve"><g><path class="st0" d="M116.3,255H34.3c-2.1,0-3.8-1.7-3.8-3.8c0-2.1,1.7-3.8,3.8-3.8h82.1c2.1,0,3.8,1.7,3.8,3.8C120.1,253.3,118.4,255,116.3,255z"></path><path class="st1" d="M73,251.1c-0.1-3.6-1.3-6.8-3.6-9.7c-2.4-3-5.4-4.9-9-5.6v-60h-7.2v60c-3.6,0.8-6.6,2.6-9,5.6c-2.3,2.9-3.5,6.1-3.6,9.7H73z"></path><path class="st1" d="M110.5,251.1c-0.1-3.6-1.3-6.8-3.6-9.7c-2.4-3-5.4-4.9-9-5.6v-60h-7.2v60c-3.6,0.8-6.6,2.6-9,5.6c-2.3,2.9-3.5,6.1-3.6,9.7H110.5z"></path><rect x="72.7" y="28.1" class="st2" width="5.8" height="46.7"></rect><rect x="26.9" y="58.3" class="st3" width="96.8" height="58.5"></rect><rect x="40.4" y="126.6" class="st2" width="69.8" height="35.3"></rect><path class="st2" d="M68.9,29.1c0.8,1.3,1.9,2.2,3.1,2.9h7.3c1.2-0.7,2.2-1.6,3.1-2.9c0.8-1.3,1.2-2.7,1.2-4.2c0-2.2-0.8-4.1-2.3-5.7c-1.6-1.6-3.4-2.3-5.7-2.3c-2.2,0-4.1,0.8-5.7,2.3c-1.6,1.6-2.3,3.4-2.3,5.7C67.6,26.4,68,27.8,68.9,29.1zM66.8,34.9c-1.4-1.3-2.6-2.9-3.3-4.6c-0.8-1.7-1.2-3.5-1.2-5.4c0-1.9,0.4-3.7,1.2-5.4c0.8-1.7,1.9-3.2,3.3-4.6L63.1,11c-1.9,1.7-3.4,3.7-4.5,6.2c-1.1,2.4-1.7,5-1.7,7.7c0,2.7,0.5,5.2,1.6,7.6c1.1,2.4,2.6,4.5,4.6,6.2L66.8,34.9z M73.7,22.9c0.5-0.5,1.1-0.7,1.9-0.7c0.8,0,1.4,0.3,1.9,0.7c0.5,0.5,0.7,1.1,0.7,1.9c0,0.8-0.2,1.4-0.7,1.9c-0.5,0.5-1.1,0.7-1.9,0.7c-0.8,0-1.4-0.3-1.9-0.7c-0.5-0.5-0.7-1.1-0.7-1.9C72.9,24.1,73.2,23.4,73.7,22.9z M84.4,34.9c1.4-1.3,2.6-2.9,3.3-4.6c0.8-1.7,1.2-3.5,1.2-5.4c0-1.9-0.4-3.7-1.2-5.4c-0.8-1.7-1.9-3.2-3.3-4.6l3.7-3.8c2,1.8,3.5,3.9,4.6,6.2c1.1,2.4,1.6,4.9,1.6,7.6c0,2.7-0.6,5.2-1.7,7.7C91.5,35,90,37,88.1,38.7L84.4,34.9z"></path><path class="st3" d="M110.2,161.1v7.5c0,8.7-6.7,15.8-15,15.8H56c-8.2,0-15-7.1-15-15.8v-7.5"></path><path class="st2" d="M51.4,145.2H39.5c-3,0-5.5,1-7.6,3.1c-2.1,2.1-3.1,4.6-3.1,7.6v14.2h-7.2v-14.2c0-4.9,1.8-9.2,5.3-12.7c3.5-3.5,7.7-5.3,12.7-5.3h11.9V145.2z"></path><path class="st4" d="M103.5,89H47.7c-3.9,0-7.2-3.2-7.2-7.2c0-3.9,3.2-7.2,7.2-7.2h55.7c3.9,0,7.2,3.2,7.2,7.2C110.6,85.8,107.4,89,103.5,89z"></path><g><path class="st2" d="M108,149.4h26.9c3,0,5.5-1,7.6-3.1c2.1-2.1,3.1-4.6,3.1-7.6v-9h7.2v9c0,4.9-1.8,9.2-5.3,12.7c-3.5,3.5-7.7,5.3-12.7,5.3H108V149.4z"></path><path class="st1" d="M152.9,125.2v12.6h-7.2v-12.6c-3.6-0.7-6.6-2.6-9-5.6c-2.4-3-3.6-6.4-3.6-10.1c0-4.4,1.5-8.1,4.5-11.2l5.1,5.1c-1.5,1.7-2.3,3.7-2.3,6.1c0,2.5,0.9,4.7,2.6,6.4c1.7,1.7,3.9,2.6,6.4,2.6c2.5,0,4.7-0.9,6.4-2.6c1.7-1.7,2.6-3.9,2.6-6.4c0-2.5-0.8-4.5-2.4-6.2l5.1-5.1c3,3.1,4.5,6.9,4.5,11.3c0,3.7-1.2,7.1-3.6,10.1C159.5,122.6,156.5,124.5,152.9,125.2z"></path></g><path class="st1" d="M21.6,182.1V162h7.2v20.1c3.6,0.7,6.6,2.6,9,5.6c2.4,3,3.6,6.4,3.6,10.1c0,4.4-1.5,8.1-4.5,11.2l-5.1-5.1c1.5-1.7,2.3-3.7,2.3-6.1c0-2.5-0.9-4.7-2.6-6.4c-1.7-1.7-3.9-2.6-6.4-2.6c-2.5,0-4.7,0.9-6.4,2.6c-1.7,1.7-2.6,3.9-2.6,6.4c0,2.5,0.8,4.5,2.4,6.2l-5.1,5.1c-3-3.1-4.5-6.9-4.5-11.3c0-3.7,1.2-7.1,3.6-10.1C15,184.7,18,182.8,21.6,182.1z"></path><circle class="st5" cx="47.5" cy="81.9" r="7.1"></circle><circle class="st5" cx="103.8" cy="81.9" r="7.1"></circle><g><path d="M78.1,55.8c3.1-5.3,7.4-9.5,12.7-12.7c5.3-3.1,11.1-4.7,17.4-4.7c6.3,0,12.1,1.6,17.4,4.7c5.3,3.1,9.5,7.4,12.6,12.7c3.1,5.3,4.6,11.1,4.6,17.4c0,7.9-2.6,15.2-7.9,21.8l37.9,37.9c0.7,0.6,1.1,1.4,1.1,2.5c0,1-0.3,1.9-1,2.6c-0.7,0.7-1.5,1-2.6,1c-1,0-1.9-0.4-2.5-1.1L129.9,100c-6.6,5.2-13.8,7.9-21.8,7.9c-6.3,0-12.1-1.5-17.4-4.6c-5.3-3.1-9.5-7.3-12.7-12.6c-3.1-5.3-4.7-11.1-4.7-17.4C73.4,67,74.9,61.2,78.1,55.8z M131.9,59.3c-2.5-4.2-5.8-7.5-10-10c-4.2-2.5-8.8-3.7-13.8-3.7c-5,0-9.6,1.2-13.8,3.7c-4.2,2.5-7.5,5.8-10,10c-2.5,4.2-3.7,8.8-3.7,13.8c0,5,1.2,9.6,3.7,13.8c2.5,4.2,5.8,7.5,10,10c4.2,2.5,8.8,3.7,13.8,3.7c5,0,9.6-1.2,13.8-3.7c4.2-2.5,7.5-5.8,10-10c2.5-4.2,3.7-8.8,3.7-13.7C135.6,68.2,134.3,63.5,131.9,59.3z"></path></g><path class="st1" d="M152.9,125.2v12.6h-7.2v-12.6c-3.6-0.7,1-6.7,3.6-6.7c2.5,0,4.7-0.9,6.4-2.6c1.7-1.7,2.6-3.9,2.6-6.4c0-2.5-0.8-4.5-2.4-6.2l5.1-5.1c3,3.1,4.5,6.9,4.5,11.3c0,3.7-1.2,7.1-3.6,10.1C159.5,122.6,156.5,124.5,152.9,125.2z"></path><path class="st2" d="M131.9,59.3c-2.5-4.2-5.8-7.5-10-10c-4.2-2.5-8.8-3.7-13.8-3.7c-5,0-9.6,1.2-13.8,3.7c-4.2,2.5-7.5,5.8-10,10c-2.5,4.2-3.7,8.8-3.7,13.8c0,5,1.2,9.6,3.7,13.8c2.5,4.2,5.8,7.5,10,10c4.2,2.5,8.8,3.7,13.8,3.7c5,0,9.6-1.2,13.8-3.7c4.2-2.5,7.5-5.8,10-10c2.5-4.2,3.7-8.8,3.7-13.7C135.6,68.2,134.3,63.5,131.9,59.3z"></path><g><defs><path id="SVGID_1_" d="M131.9,59.3c-2.5-4.2-5.8-7.5-10-10c-4.2-2.5-8.8-3.7-13.8-3.7c-5,0-9.6,1.2-13.8,3.7c-4.2,2.5-7.5,5.8-10,10c-2.5,4.2-3.7,8.8-3.7,13.8c0,5,1.2,9.6,3.7,13.8c2.5,4.2,5.8,7.5,10,10c4.2,2.5,8.8,3.7,13.8,3.7c5,0,9.6-1.2,13.8-3.7c4.2-2.5,7.5-5.8,10-10c2.5-4.2,3.7-8.8,3.7-13.7C135.6,68.2,134.3,63.5,131.9,59.3z"></path></defs><clipPath id="SVGID_2_"><use xlink:href="#SVGID_1_" style=""></use></clipPath><g class="st6"><path class="st4" d="M108,88.9H72.3c-8.9,0-16.2-7.3-16.2-16.2c0-8.9,7.3-16.2,16.2-16.2H108c8.9,0,16.2,7.3,16.2,16.2C124.2,81.6,116.9,88.9,108,88.9z"></path><circle class="st5" cx="108.1" cy="73" r="16.1"></circle></g></g></g></svg></a>
        </div>
    </div>
</div>
<div class="clear" />

 Mã CSS (giống demo, chưa responsive) 

<style type='text/css'>/*<![CDATA[*/
.non{padding:3em 0 0;overflow:hidden}
.mes{box-sizing: border-box;float: left;width: 63%;padding: 3em 5em;}
.hero{text-align:center;float:right;width:35%}
.hero-image{max-width:275px;margin:0 auto}
.hero-image .st0{opacity:.2}
.hero-image .st1{fill:#2c3e58}
.hero-image .st2{fill:#b9d6f2}
.hero-image .st3{fill:#639ee1}
.hero-image .st4{opacity:.3;fill:#f6e768}
.hero-image .st5{fill:#f6e768}
.headline{font-weight:600;font-size:47px;margin:0 0 20px}
.suggest>p{font-size:20px;margin:0 0 20px}
._suggest a:hover{text-decoration:underline}
._suggest a{color:#333;font-size:16px;text-decoration:none}
._suggest{line-height:1.8;box-sizing:border-box;padding:0 0 0 1em}
/*]]>*/</style>

 Mã JS 

<script type="text/javascript">//<![CDATA[
// Random post by Hung1001
var _numPost = 8;
$.ajax({
    url: "/feeds/posts/summary",
    type: "get",
    data: {
        alt: "json",
        "max-results": 0
    },
    dataType: "jsonp",
    success: function(e) {
        for (var t = [], r = [], a = 0; a < e.feed.openSearch$totalResults.$t; a++) t.push(a + 1);
        function n(e) {
            var t = e[Math.floor(Math.random() * e.length)];
            return function(e, t) {
                for (var r = 0; r < e.length; r++)
                    if (e[r] == t) return !0;
                return !1
            }(r, t) ? n(e) : (r.push(t), t)
        }
        for (var s = 0; s < _numPost; s++)
            for (var f = 1; f <= 1; f++) $.ajax({
                url: "/feeds/posts/summary",
                type: "get",
                data: {
                    "start-index": n(t),
                    alt: "json",
                    "max-results": 1
                },
                dataType: "jsonp",
                success: function(e) {
                    for (var t = 0; t < e.feed.entry.length; t++) {
                        for (var r = 0; r < e.feed.entry[t].link.length; r++)
                            if ("alternate" === e.feed.entry[t].link[r].rel) {
                                var a = e.feed.entry[t].link[r].href;
                                break
                            } var n = e.feed.entry[t].title.$t;
                        $("._suggest").append("<li><a href='" + a + "' title='" + n + "'>" + n + "<a></li>")
                    }
                }
            })
    }
});
//]]></script>

Bạn có thể thay đổi giá trị biến _numPost để chỉ định số bài đăng hiển thị

Cuối cùng lưu mẫu lại và vào 1 trang 404 để xem thành quả

Chúc thành công !

Nguồn: https://www.hung1001.blog

Tổng hợp các thẻ điều kiện Blogger 2018

LongAnIT 10/30/2018 Bình luận
Tổng hợp các thẻ điều kiện Blogger 2018
Để áp dụng thẻ (tag) điều kiện bạn phải có kiến thức chút về HTML, bạn chú ý là cơ bản nó bắt đầu bằng tag với thuộc tính “ cond “ và kết thúc là một tag đóng. Trong giữa những tag này, các nội dung (html ,style, script, widgets…) sẽ chỉ xuất hiện hoặc thực hiện theo những điều kiện xác định.

Ví dụ như trong đoạn code sau:
<b:if cond='your condition'>
 <style>...css code...</style>
 <script>...javascript code...</script>
</b:if> 
Phần 1. Các thẻ điều kiện
1. Trang chủ (Homepage)
<b:if cond='data:view.isHomepage'>
  <!-- Nội dung chỉ hiển thị trên trang chủ -->
</b:if> 
Theo version trước:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
  <!-- Nội dung chỉ hiển thị trên trang chủ -->
</b:if> 
2. Trang bài viết (item)
<b:if cond='data:view.isPost'>
 <!-- Nội dung chỉ hiển thị trên trang bài viết -->
</b:if> 
Theo version trước:
<b:if cond='data:blog.pageType == "item"'>
 <!-- Nội dung chỉ hiển thị trên trang bài viết -->
</b:if> 
Cho một trang bài viết cụ thể:
<b:if cond='data:blog.url == data:blog.canonicalHomepageUrl + "2016/03/postn.html"'>
  <!-- Nội dung chỉ hiển thị trên trang bài viết có địa chỉ url Blog-cua-ban/2016/03/postn.html-->
</b:if> 
3. Trang tĩnh (Static page)
<b:if cond='data:view.isPage'>
 <!-- Nội dung chỉ hiển thị trên trang tĩnh static page -->
</b:if> 
Theo version trước:
<b:if cond='data:blog.pageType == "static_page"'>
 <!-- Nội dung chỉ hiển thị trên trang tĩnh static page -->
</b:if> 
Cho một trang tĩnh cụ thể:
<b:if cond='data:blog.url == data:blog.canonicalHomepageUrl + "p/static.html"'>
  <!-- Nội dung chỉ hiển thị trên trang bài viết có địa chỉ url Blog-cua-ban/p/static.html 'foo' -->
</b:if> 
4. Trang index bao gồm trang chủ, trang hiển thị nhãn Label, và trang archive.
<b:if cond='data:view.isMultipleItems'>
  <!-- Nội dung chỉ hiển thị trên các trang index: trang chủ, trang hiển thị nhãn, trang lưu trữ -->
</b:if> 
Theo version trước:
<b:if cond='data:blog.pageType == "index"'>
  <!-- Nội dung chỉ hiển thị trên các trang index: trang chủ, trang hiển thị nhãn, trang lưu trữ -->
</b:if> 
5. Trang label search
<b:if cond='data:view.isLabelSearch'>
  <!-- Nội dung hiển thị trên tất cả các trang nhãn label -->
</b:if>
.................
<b:if cond='data:view.isLabelSearch == "blogger"'>
<!-- Nội dung chỉ hiển thị trên nhãn "blogger"-->
</b:if> 
Theo version trước:
<b:if cond='data:blog.searchLabel'>
  <!-- Nội dung hiển thị trên tất cả các trang nhãn label -->
</b:if>
.................
<b:if cond='data:blog.searchLabel == "blogger"'>
<!-- Nội dung chỉ hiển thị trên nhãn "blogger"-->
</b:if> 
6. Hiển thị nội dung cho kết quả tìm kiếm (ví dụ: /search?q=blogger)
<!-- Bao gồm trang tìm kiếm nhãn -->
<b:if cond='data:view.isSearch'> … </b:if>
<!-- Chỉ các trang tìm kiếm -->
<b:if cond='data:view.isSearch and !data:view.isLabelSearch'> … </b:if>
Theo version trước:
<b:if cond='data:blog.searchQuery'>
   <!-- Nội dung hiển thị trên tất cả các trang tìm kiếm --></b:if>
...................................
<b:if cond='data:blog.searchQuery == "blogger"'>
  <!-- Nội dung chỉ hiển thị trên trang tìm kiếm với từ "blogger"-->
</b:if> 
7. Trang lỗi 404
<b:if cond='data:view.isError'>
  <!-- Nội dung chỉ hiển thị trên trang lỗi -->
</b:if> 
Theo version trước:
<b:if cond='data:blog.pageType == "error_page"'>
  <!-- Nội dung chỉ hiển thị trên trang lỗi -->
</b:if> 
8. Trang lưu trữ (archive)
<b:if cond='data:view.isArchive'>
 <!-- Nội dung chỉ hiển thị trên tất cả các trang lưu trữ archive-->
</b:if> 
Theo version trước:
<b:if cond='data:blog.pageType == "archive"'>
 <!-- Nội dung chỉ hiển thị trên tất cả các trang lưu trữ archive-->
</b:if> 
9. Trang hiển thị trên mobile
<b:if cond="data:blog.isMobile">
<!-- Nội dung chỉ hiển thị trên trang mobile-->
</b:if> 
10. Nội dung hiển thị cho những trang có nhiều bài viết trên cùng một trang, áp dụng này cho bài viết đầu tiên FirstPost
<b:if cond='data:post.isFirstPost'>
 <!-- Nội dung cần trình bày -->
</b:if> 
11. Nội dung hiển thị cho trang tĩnh Static Page và bài viết Item
<b:if cond='data:view.isSingleItem'>
<!-- Nội dung chỉ hiển thị với trang tĩnh và bài viết -->
</b:if> 
Theo version trước:
<b:if cond='data:blog.url == data:post.url'>
<!-- Nội dung chỉ hiển thị với trang tĩnh và bài viết -->
</b:if> 
12. Hiển thị nội dung nếu bài viết có ảnh thumbnail
<b:if cond='data:post.thumbnailUrl'>
  <!-- Nội dung chỉ hiển thị với bài viết có ảnh thumbnail -->
</b:if> 
13. Hiển thị một nội dung khi có Backlink
<b:if cond='data:post.showBacklinks'>
 <!-- Nội dung chỉ hiển thị khi có backlink -->
</b:if> 
14. Hiển thị nội dung cho Tác giả bài viết
<b:if cond='data:displayname == "author-name"'>
<!-- Nội dung cần trình bày -->
</b:if> 
15. Hiển thị nội dung trên trang có số comments bằng một giá trị nào đó
<b:if cond='data:post.numComments == number'>
 <!-- Nội dung cần trình bày -->
</b:if> 
16. Hiển thị nội dung trong tất cả các trang khi chức năng comment được kích hoạt
 <b:if cond='data:post.allowComments'>
<!-- Nội dung cần trình bày -->
</b:if> 
17. Hiển thị nội dung ở trang Preview (xem trước)
<b:if cond='data:view.isPreview'> … </b:if>
18. Điều kiện đối với nhãn (Label) cuối cùng
<b:loop values='data:post.labels' var='label'>
    <b:if cond='data:label.isLast != &quot;true&quot;'> <!-- Nếu ko phải nhãn cuối thì thêm ký tự đặc biệt vào phía sau -->
       ,
    </b:if> 
</b:loop> 
Phần 2. Cách sử dụng và kết hợp các thẻ điều kiện 

1. Áp dụng điều kiện xuất hiện hoặc không xuất hiện
 == Có nghĩa là chỉ xuất hiện trên trang này …..
!= Có nghĩa là xuất hiện trên tất cả các trang trừ trang này ra……
2. Dùng thêm thẻ <b:/else/>

Nếu muốn đưa vào một nội dung thay thế khi điều kiện đưa vào là sai, bạn cần thêm một thẻ <b:else> và cho nội dung vào giữa.
<b:if cond='data:view.isPost'>
 Nội dung chỉ hiển thị trang bài viết Item
<b:else/>  Nội dung hiển thị các trang còn lại
</b:if>

3. Kết hợp của nhiều điều kiện (xuất hiện khi thỏa mãn các điều kiện)
<b:if cond='!data:blog.pageType == "item"'>
   <b:if cond='data:view.isHomepage'>
    <style type='text/css'>.post-body {color: yellow;}</style>
   <b:else/>
    <b:if cond='data:view.isLabelSearch'>
    <style type='text/css'>.post-body {color: blue;}</style>
     <b:else/> <style type='text/css'>.post-body {color: red;}</style>
    </b:if>
   </b:if>
</b:if> 
Với đoạn code này thì có ý nghĩa xuất ở trang chủ thì .post-body có chữ màu yellow, nếu là trang nhãn sẽ có màu là blue, còn nếu là các trang khác sẽ có màu red.
4. Sử dụng điều kiện IN
<b:if cond='data:blog.pageType in {"static_page","item"}'>
 Nội dung chỉ hiển thị Trang Tĩnh và trang Bài Viết
</b:if> 
5. Sử dụng điều kiện NOT IN
<b:if cond='data:blog.pageType not in {"static_page","item"}'>
Nội dung không hiển thị Trang Tĩnh và trang Bài Viết
</b:if> 
6. Sử dụng điều kiện AND
<b:if cond='data:view.isPage and data:view.isPost'>
Nội dung hiển thị Trang Tĩnh và Trang Bài Viết
</b:if> 
7. Sử dụng điều kiện OR
<b:if cond='data:view.isPage or data:view.isPost'>
Nội dung hiển thị hoặc Trang Tĩnh hoặc Trang Bài Viết
</b:if> 
8. Sử dụng điều kiện Else if
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <data:post.body/>
<b:elseif cond='data:blog.pageType == &quot;static_page&quot;'>
  <data:post.body/>
<b:else/>
  <data:post.snippet/>
</b:if> 
Đoạn code trên tương đương với
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <data:post.body/>
<b:else/>
   <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
     <data:post.body/>
   <b:else/>
     <data:post.snippet/>
   </b:if>
</b:if> 
Phần 3. Lưu ý 
Khi bạn chỉnh sửa code cho template của bạn, đôi khi dấu ngoặc kép (“) sẽ bị thay thế bằng ký tự quot;. Ví dụ như
<b:if cond='data:blog.pageType == "static_page"'> 
sẽ được thay là
<b:if cond='data:blog.pageType == quot;static_pagequot;'> 
Sử dụng điều kiện trong thẻ b:include hoàn toàn tương tự với thẻ b:if, bạn chỉ cần thêm vào thuộc tính cond='ĐIỀU KIỆN' của thẻ b:if vào thẻ b:include là xong.

Hướng dẫn tạo khung comment đẹp cho blogger (có phân cấp)

LongAnIT 10/26/2018 Bình luận
Tạo khung comment đẹp cho blogger (có phân cấp)

Đây là khung comment phân cấp. Nguyên nhân là do "threaded comment" mặc định của Blogger chỉ được tối đa là 1 cấp mà thôi. Bài viết hướng dẫn các bạn tạo khung comments system đẹp cho blogger. Vui lòng làm theo các bước sau đây

Bước 1: Vào chủ đề - Chỉnh sửa HTML tìm code sau:
<b:include data='post' name='comments'/>

Sau đó thay thế bằng code bên dưới
 <b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
Bước 2: Tìm trong CSS và copy đoạn code bên dưới vào trước thẻ đóng ]]></b:skin>
.comments{clear:both;margin-top:10px;margin-bottom:0;font-family:Arial;line-height:18px;font-size:13px}
.comments .comments-content{margin-bottom:16px;font-weight:normal;text-align:left}
.comments .comment .comment-actions a,.comments .comment .continue a{display:inline-block;margin:0 0 10px 10px;padding:0 15px;color:#424242 !important;text-align:center;text-decoration:none;background:#fede72;border:1px solid #fec648;border-radius:2px;height:26px;line-height:28px;font-weight:normal;cursor:pointer}
.comments .comments-content .comment-thread ol{list-style-type:none;padding:0;text-align:none}
.comments .comments-content .inline-thread{padding:0}
.comments .comments-content .comment-thread{margin:8px 0}
.comments .comments-content .comment-thread:empty{display:none}
.comment-replies{margin-top:1em;margin-left:40px;background:#fff}
.comments .comments-content .comment{margin-bottom:0;padding-bottom:0}
.comments .comments-content .comment:first-child{padding-top:16px}
.comments .comments-content .comment:last-child{border-bottom:0;padding-bottom:0}
.comments .comments-content .comment-body{position:relative}
.comments .comments-content .user{font-style:normal;font-weight:normal}
.comments .comments-content .user a{color:#0E6284;font-weight:normal;text-decoration:none}
.comments .comments-content .icon.blog-author{width:18px;height:18px;display:inline-block;margin:0 0 -4px 6px}
.comments .comments-content .datetime a{color:#0E6284;font-size:12px;float:right;text-decoration:none}
.comment-content{margin:0 0 8px;padding:0 5px}
.comment-header{font-size:18px;background-color:#f1f1f1;border-bottom:1px solid #e3e3e3;padding:5px}
.comments .comments-content .owner-actions{position:absolute;right:0;top:0}
.comments .comments-replybox{border:none;height:230px;width:100%}
.comments .comment-replybox-thread{margin-top:0}
.comments .comment-replybox-single{margin-top:5px;margin-left:48px}
.comments .comments-content .loadmore a{display:block;padding:10px 16px;text-align:center}
.comments .thread-toggle{cursor:pointer;display:inline-block}
.comments .comments-content .loadmore{cursor:pointer;max-height:3em;margin-top:0}
.comments .comments-content .loadmore.loaded{max-height:0;opacity:0;overflow:hidden}
.comments .thread-chrome.thread-collapsed{display:none}
.comments .thread-toggle{display:inline-block}
.comments .thread-toggle .thread-arrow{display:inline-block;height:6px;width:7px;overflow:visible;margin:0.3em;padding-right:4px}
.comments .thread-expanded .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent}
.comments .thread-collapsed .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent}
.avatar-image-container{background:url(https://lh5.googleusercontent.com/-Wmy6bwNKzbo/T0miLZkuJsI/AAAAAAAAChc/orbwMGHyBxA/s51/arrow.png) top right no-repeat;float:left;vertical-align:middle;overflow:hidden;width:65px !important;height:51px !important;max-width:65px !important;max-height:51px !important}
.comments .avatar-image-container img{padding:2px;border:1px solid #ccc;width:45px !important;height:45px !important;max-width:45px !important;max-height:45px !important}
.comments .comment-block{margin-left:65px;position:relative;border:5px solid #e3e3e3;border-radius:8px}
@media screen and (max-device-width:480px){.comments .comments-content .comment-replies{margin-left:0}}

Bước 3: Save template lại và test, chúc các bạn thành công

Hướng dẫn tạo sitemap cho Blogger

LongAnIT 10/24/2018 Bình luận
Sitemap Blogger by longanit.com

Tệp sitemap XML giống như thư mục của tất cả các trang tồn tại trên trang web hoặc blog của bạn. Các công cụ tìm kiếm như Google và Bing cũng như một số trang tìm kiếm khác có thể sử dụng các tệp sơ đồ trang web này để khám phá các trang trên trang web của bạn mà các chương trình tìm kiếm có thể đã bỏ lỡ trong thời gian thu thập dữ liệu thông thường.

Sitemap Blogger

Sitemap XML mặc định của bất kỳ blog Blogger nào sẽ chỉ có 26 bài đăng trên blogspot gần đây nhất. Đó là một giới hạn và một số trang cũ trên blog của bạn bị thiếu trong sitemap XML mặc định có thể không bao giờ được lập chỉ mục trong các công cụ tìm kiếm. Tuy nhiên có một giải pháp đơn giản để khắc phục sự cố này. Dưới đây tôi sẽ hướng dẫn cho các bạn cách để tạo sơ dồ web (sitemap) trên Blogger

Dưới đây là những gì bạn cần làm để tạo sơ đồ cấu trúc trang web sitemap XML hoàn chỉnh, chuẩn SEO với các công cụ tìm kiếm cho trang web blogspot:

Bước 1: Tạo sơ đồ trang web blogspot:

Các bạn truy cập vào địa chỉ tại đây rồi dán địa chỉ trang blogspot vào ô trống, sau đó chọn Generate Sitemap như hình ảnh dưới.

Hướng dẫn tạo sitemap cho Blogger
Bước 2: Sao chép toàn bộ đoạn mã được tạo ra:

Sau khi ấn tạo sơ đồ trang web các bạn sẽ nhận được đoạn mã có dạng như sau:

# Blogger Sitemap generated on 2018.10.23
User-agent: *
Disallow: /search
Allow: /
Sitemap: https://www.longanit.com/atom.xml?redirect=false&start-index=1&max-results=500

 Bước 3: Khai báo sitemap blogspot qua file robots.txt:

Các bạn truy cập vào trang quản trị Blogger rồi đến Cài đặt => Tùy chọn tìm kiếm => Robots.txt tùy chỉnh. Tại đây các bạn dán đoạn mã vừa được tạo thành vào ô trống rồi lưu lại như hình ảnh dưới
Tùy chọn tìm kiếm => Robots.txt 

Đến đây, các bạn đã khai báo thành công sơ đồ trang website cho các công cụ tìm kiếm thông qua tệp robots.txt mà không cần ping chúng bằng tay nữa.

Đối với các blog có nhiều hơn 500 bài các bạn tiến hành bổ sung thêm đoạn mã sau đây nữa:
Sitemap: https://www.longanit.com/atom.xml?redirect=false&start-index=1&max-results=500            Sitemap: https://www.longanit.com/atom.xml?redirect=false&start-index=501&max-results=500        Sitemap: https://www.longanit.com/atom.xml?redirect=false&start-index=1001&max-results=500      Sitemap: https://www.longanit.com/atom.xml?redirect=false&start-index=1501&max-results=500      Sitemap: https://www.longanit.com/atom.xml?redirect=false&start-index=2001&max-results=500    Sitemap: https://www.longanit.com/atom.xml?redirect=false&start-index=2501&max-results=500      Sitemap:https://www.longanit.com/atom.xml?redirect=false&start-index=3001&max-results=500

 Bước 4: Khai báo sơ đồ trang web blogspot lên webmaster tool:

Các bạn truy cập vào trang quản trị webmaster tool của Google rồi đến Thu thập dữ liệu => Sơ đồ trang web và chọn Thêm/kiểm tra sơ đồ trang web. Tại đây các bạn dán đoạn mã dưới đây vào chọn gửi rồi yêu cầu lập chỉ mục.

atom.xml?redirect=false&start-index=1&max-results=500             
Các bạn chọn tiếp "Tìm nạp như Google" rồi thêm đoạn mã trên vào và chọn gửi.

Đến đây, Google đã nhận được sơ đồ trang web của bạn và bắt đầu lập chỉ mục cho các trang trên website của bạn.

Nếu bạn có chuyển từ Blogger sang WordPress thì sơ đồ trang web XML của Blogspot cũ đã gửi của bạn vẫn có ý nghĩa  vì nó sẽ giúp các công cụ tìm kiếm khám phá các bài viết và trang WordPress mới của bạn.

Tạo liên kết 3 cột cho blogger

LongAnIT 10/16/2018 Bình luận
Tạo liên kết 3 cột cho blogger 
Việc trao đổi liên kết trong Website cũng như các Blogger với nhau là vô cùng cần thiết nó giúp cho các blogger liên kết với nhau, tạo tương tác và nhất là tạo backlink tốt. Trong bài viết này sẽ hướng dẫn các bạn tạo code liên kết bạn bè cho blogger với 3 cột bạn có thể đặt code  ngay bên dưới footer của mình
<style>
#lien-ket-ban-be::-webkit-scrollbar{width:5px}
#lien-ket-ban-be::-webkit-scrollbar-thumb{background:#484848;border-radius:3px}
#lien-ket-ban-be::-webkit-scrollbar-thumb:active{background:#777}
#lien-ket-ban-be{padding:0;margin:0;list-style:none}
.lien-ket-ban-be{margin:0;padding:0}
.lien-ket-ban-be ul{padding:6px 0.8px 6px 6px}
.lien-ket-ban-be li{width:33.3%;margin:0;padding:0;line-height:normal;display:block;float:left;text-align:center}
.lien-ket-ban-be a{padding-left:25px;transition: all 0.5s ease 0s;width:auto;text-overflow:ellipsis;overflow:hidden;display:block;-webkit-box-orient:vertical;-webkit-line-clamp:1;white-space:nowrap;margin:0 5px 5px 0;padding:5px;font-size:15px;font-weight:400;-webkit-transition:.3s;border-radius:3px;-moz-transition:.3s;-o-transition:.3s;color:#000;border:1px solid #e5e5e5}
.lien-ket-ban-be a:hover{color:#f90!important;border:1px solid;text-decoration:none!important}
.lien-ket-ban-be a:before{content:"\f007";font-family:"Font Awesome 5 Free";color:#00c0ef;margin-right:10px;font-size:11px;font-weight:700}
</style>
<div id='lien-ket-ban-be'>
<div class='lien-ket-ban-be'>
<ul>
<li><a href='#' target='_blank'>Đặt liên kết</a>  </li>
<li><a href='#' target='_blank'>Đặt liên kết</a>  </li>
<li><a href='#' target='_blank'>Đặt liên kết</a></li>
<li><a href='#' target='_blank'>Đặt liên kết</a> </li>
<li><a href='#' target='_blank'>Đặt liên kết</a> </li>
<li><a href='#' target='_blank'>Đặt liên kết</a>  </li>
<li><a href='#' target='_blank'>Đặt liên kết</a>  </li>
<li><a href='#' target='_blank'>Đặt liên kết</a>  </li>
<li><a href=#' target='_blank'>Đặt liên kết</a>  </li>
<li><a href='#' target='_blank'>Đặt liên kết</a>  </li>
<li><a href='#' target='_blank'>Đặt liên kết</a> </li>
<li><a href='#' target='_blank'>Đặt liên kết</a>  </li>
<li><a href='#' target='_blank'>Đặt liên kết</a>  </li>
<li><a href='#' target='_blank'>Đặt liên kết</a></li>
<li><a href='#' target='_blank'>Đặt liên kết</a> </li>
<li><a href='#' target='_blank'>Đặt liên kết</a> </li>
<li><a href='#' target='_blank'>Đặt liên kết</a>  </li>
<li><a href='#' target='_blank'>Đặt liên kết</a>  </li>
<!--<li><a href='#' target='_blank' title='Liên kết blog'>Đặt liên kết</a></li>-->
</ul>
</div></div>
<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://cdn.rawgit.com/hung1001/blog/master/lastest/font-awesome/css/all.css");
loadCSS("https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&amp;subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese");
//]]>
</script>

Hướng dẫn cách tạo một trang web trắng trên Blogspot

LongAnIT 10/03/2018 Bình luận
Tạo một trang web trắng trên Blogspot

Mỗi một ngôn ngữ đều có cấu trúc khác nhau. Blogger cũng vậy. Như chúng ta đã biết cấu trúc template của Blogger luôn phải có ít nhất 1 thẻ <b:section> thì mới có thể lưu Template lại được. Vì vậy, nếu muốn tạo 1 trang web trắng tinh để bước đầu Build 1 Template thì bạn có thể thử đoạn code dưới đây nhé!

Đoạn code dưới đây chỉ mang tính chất tham khảo thôi nhé. Vì thực chất nó chưa hề có chút nội dung nào ngoài câu: “Thêm nội dung trang web của bạn vào đây

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>
<head>
<title>
Welcome to longanit.com - Sharing for all
</title>
<!-- Bắt đầu viết Css cho web --><b:skin>
<![CDATA[ /* Chèn Css vào đây */ ]]>
</b:skin>
</head>
<!-- Bắt đầu phần hiển thị trên web --><body>
Thêm nội dung trang web của bạn vào đây<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='yes'>
</b:section>
</body>
<!-- Kết thúc phần hiển thị trên web -->
</html>
Sau khi copy nó vào template của bạn tiến hành save lại và ra ngoài trang chủ blog của bạn chỉ thấy mỗi câu "Thêm nội dung trang web của bạn vào đây"

Kết luận: Trong bài viết này tôi đã hướng dẫn các bạn Build 1 trang web trắng trên blogger. Bài viết tiếp theo tôi sẽ hướng dẫn các bạn cách thêm Widget và CSS cơ bản cho 1 template. Chúc các bạn thành công. Thắc mắc vui lòng comment bên dưới mình sẻ support.