Download this Blogger Template by Clicking Here!

Ad 468 X 60

Thủ Thuật Blogger

11/21/15

Tăng tốc độ tải trang cho blogspot của bạn


Vào Mẫu - Chỉnh sửa HTML thêm đoạn code bên dưới vào trước thẻ </body>

<script type='text/javascript'> //<![CDATA[ (function(a) { a.fn.lazyload=function(b){var c={threshold: 0,failurelimit:0,event:"scroll",effect:"show",container:window;};if(b) { a.extend(c,b);}var d=this;if("scroll"==c.event) { a(c.container).bind("scroll",function(b){var e=0;d.each(function(){if(a.abovethetop(this,c)||a.leftofbegin(this,c)){}else if(!a.belowthefold(this,c)&&!a.rightoffold(this,c)) { a(this).trigger("appear");}else { if(e++>c.failurelimit){return false;}}});var f=a.grep(d,function(a) { return!a.loaded;});d=a(f);})}this.each(function() {var b=this;if(undefined==a(b).attr("original")){a(b).attr("original",a(b).attr("src"));}if("scroll"!=c.event||undefined==a(b).attr("src")||c.placeholder==a(b).attr("src")||a.abovethetop(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.rightoffold(b,c)) {if(c.placeholder){a(b).attr("src",c.placeholder);}else {a(b).removeAttr("src");}b.loaded=false;}else {b.loaded=true;}a(b).one("appear",function() {if(!this.loaded){a("<img />").bind("load",function(){a(b).hide().attr("src",a(b).attr("original"))[c.effect](c.effectspeed);b.loaded=true;}).attr("src",a(b).attr("original"));}});if("scroll"!=c.event) {a(b).bind(c.event,function(c){if(!b.loaded){a(b).trigger("appear");}})}});a(c.container).trigger(c.event);return this;};a.belowthefold=function(b,c) {if(c.container===undefined||c.container===window){var d=a(window).height()+a(window).scrollTop();}else {var d=a(c.container).offset().top+a(c.container).height();}return d<=a(b).offset().top-c.threshold;};a.rightoffold=function(b,c) {if(c.container===undefined||c.container===window){var d=a(window).width()+a(window).scrollLeft();}else {var d=a(c.container).offset().left+a(c.container).width();}return d<=a(b).offset().left-c.threshold;};a.abovethetop=function(b,c) {if(c.container===undefined||c.container===window){var d=a(window).scrollTop();}else {var d=a(c.container).offset().top;}return d>=a(b).offset().top+c.threshold+a(b).height();};a.leftofbegin=function(b,c) {if(c.container===undefined||c.container===window){var d=a(window).scrollLeft();}else {var d=a(c.container).offset().left;}return d>=a(b).offset().left+c.threshold+a(b).width();};a.extend(a.expr[":"], {"below-the-fold":"$.belowthefold(a, {threshold : 0, container: window})","above-the-fold": "!$.belowthefold(a, {threshold : 0, container: window})","right-of-fold":"$.rightoffold(a, {threshold : 0, container: window})","left-of-fold":"!$.rightoffold(a, {threshold : 0, container: window})";})})(jQuery);$(function() {$("img").lazyload({placeholder: "http://i22.servimg.com/u/f22/15/42/72/40/grey10.gif",effect:"fadeIn",threshold:"-50";})}) //]]> </script>

Hãy để lại comment nến bạn gặp khó khăn.
Read More »

11/3/15

Thiết kế giao diện Mobile Responsive Design trong 3 bước

Ngày nay, do sự phát triển chóng mặt của các mobile smartphone và tablet, nên ta cần phải làm seo cho website hiển thị tốt trên mọi thiết bị có kích thước khác nhau, bên cạnh đó cũng có nhiều người dùng không bao giờ maximize trình duyệt của họ. Để đáp ứng được nhu cầu đó hiện tại theo tôi biết thì người ta có 2 cách làm :

-Một là người lập trình sẽ viết code nhận diện thiết bị người dùng đang sử dụng, rồi sẽ đưa họ đến trang được thiết kế dành riêng cho thiết bị của họ.

-Hai là sử dụng responsive design mobile ,responsive là kiểu giao diện co giãn theo kích thước của cửa sổ trình duyệt, cũng là xu hướng thiết kế web của năm nay.

Nói nôm na là vậy, các bạn xem vài hình ảnh sẽ dễ hiểu:


Trong những bài viết trước về Mobile tôi đã giới thiệu khá nhiều về lý thuyết Responsive design mobile là gì, ngày hôm nay tôi sẽ làm ví dụ mẫu, 3 bước để tạo ra 1 giao diện Responsive design mobile. Những ai chưa đọc các bài viết trước thì đọc trong chuyên mục Seo Mobile nhé !

Bước 1 : Tạo Meta Tag
Tag meta viewport là điều tất yếu trong responsive layouts. Nó thiết lập màn hình theo tỷ lệ 1×1, điều này sẽ loại bỏ các chức năng mặc định từ các trình duyệt smartphone, chỉ hiển thị vừa màn hình để xem và có thể phóng to bằng thao tác tay, thêm vào trong thẻ .




Trình duyệt IE8 trở xuống không hỗ trợ media query. Bạn có thể sử dụng media-queries.js hoặc respond.js để hỗ trợ.


Bước 2 : HTML


Trong ví dụ này, tôi có một bố cục trang cơ bản với một #header, #content nội dung, #sidebar, và #footer. Tiêu đề có height 180px cố định, nội dung #content width là 600px và #sidebar width là 300px.



<div id="pagewrap">

<div id="header">

<h1>Header</h1>

</div>

<div id="content">

<h2>Content</h2>

</div>

<div id="sidebar">

<h3>Sidebar</h3>

</div>

<div id="footer">

<h4>Footer</h4>

</div>
</div>

Bước 3 :CSS-Media Queries
Đầu tiên, tôi CSS cho các div trên.


#pagewrap {
    padding: 5px;
    width: 960px;
    margin: 20px auto;
}
#header {
    height: 180px;
}
#content {
    width: 600px;
    float: left;
}
#sidebar {
    width: 300px;
    float: right;
}
#footer {
    clear: both;
}
Sau đó, tôi sẽ sử dụng CSS3 media query, với viewport từ 980px trở xuống , màn hình sẽ hiển thị 2 cột với width của #content là 65% và #sidebar là 30%

/* 980px hoặc nhỏ hơn */
@media screen and (max-width: 980px) {
    #pagewrap {
        width: 94%;
    }
    #content {
        width: 65%;
    }
    #sidebar {
        width: 30%;
    }
}
Và với viewport 700px trở xuống , ta set giá trị width của #content và #siderbar là auto , bỏ float đi để hiển thị 1 cột full width


/* 700px hoặc nhỏ hơn */
@media screen and (max-width: 700px) {
    #content {
        width: auto;
        float: none;
    }
    #sidebar {
        width: auto;
        float: none;
    }
}
Cuối cùng , với viewport 400px trở xuống(mobile),ta set lại height #header auto ,thay đổi font chữ h1 xuống 24px, và cho ẩn luôn sidebar

/*  480px hoặc nhỏ hơn */
@media screen and (max-width: 480px) {
    #header {
        height: auto;
    }
    h1 {
        font-size: 24px;
    }
    #sidebar {
        display: none;
    }
}

Bạn có thể viết bao nhiêu media query tuỳ ý ,trong ví dụ này tôi chỉ viết 3 media queries.



Read More »

11/2/15

Tạo Slideshow cho hình ảnh với mô tả trượt đẹp mắt cho Blogspot



Hình mô tả Slideshow

1. Đăng nhập vào tài khoản Blogger
2. Vào phần Mẫu (Template)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chèn tiếp code CSS bên dưới vào trước thẻ ]]></b:skin>
#slider{ width:660px;height:275px;position:relative;overflow:hidden;-moz-box-shadow:0 0 6px #000;-webkit-box-shadow:0 0 6px #000;box-shadow:0 0 6px #000}
#mask-gallery{overflow:hidden}
#gallery{list-style:none;margin:0;padding:0;z-index:0;width:900px;overflow:hidden}
#gallery li{float:left}
#mask-excerpt{position:absolute;top:0;left:0;z-index:500;width:100px;overflow:hidden}
#excerpt{filter:alpha(opacity=60);-moz-opacity:0.6;-khtml-opacity:0.6;opacity:0.6;list-style:none;margin:0;padding:0;z-index:10;position:absolute;top:0;left:0;width:100px;background-color:#000;overflow:hidden;font-family:arial;font-size:14px;color:#fff}
#excerpt li{padding:5px}
.clear{clear:both}
#btn-prev{border-top:1px solid #96d1f8;background:#65a9d7;padding:4px 8px;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;-webkit-box-shadow:rgba(0,0,0,1) 0 1px 0;-moz-box-shadow:rgba(0,0,0,1) 0 1px 0;box-shadow:rgba(0,0,0,1) 0 1px 0;text-shadow:rgba(0,0,0,.4) 0 1px 0;color:white;font-size:9px;font-family:Georgia,serif;text-decoration:none;vertical-align:middle}
#btn-prev:hover{border-top-color:#28597a;background:#28597a;color:#ccc}
#btn-prev:active{border-top-color:#238acf;background:#238acf}
#btn-next{border-top:1px solid #96d1f8;background:#65a9d7;padding:4px 8px;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;-webkit-box-shadow:rgba(0,0,0,1) 0 1px 0;-moz-box-shadow:rgba(0,0,0,1) 0 1px 0;box-shadow:rgba(0,0,0,1) 0 1px 0;text-shadow:rgba(0,0,0,.4) 0 1px 0;color:white;font-size:9px;font-family:Georgia,serif;text-decoration:none;vertical-align:middle}
#btn-next:hover{border-top-color:#28597a;background:#28597a;color:#ccc}
#btn-next:active{border-top-color:#238acf;background:#238acf}

5. Chèn code bên dưới vào trước thẻ </head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="http://traidatmuidata.googlecode.com/files/jquery.scrollTo.js"></script>
<script>/* <![CDATA[ */
$(document).ready(function() {
var speed = 5000; // Tốc độ trình diễn$('#mask-gallery, #gallery li').width($('#slider').width());
$('#gallery').width($('#slider').width() * $('#gallery li').length);
$('#mask-gallery, #gallery li, #mask-excerpt, #excerpt li').height($('#slider').height());
var run = setInterval('newsscoller(0)', speed);
$('#gallery li:first, #excerpt li:first').addClass('selected');
$('#btn-pause').click(function () {
clearInterval(run);
return false;
});
$('#btn-play').click(function () {
run = setInterval('newsscoller(0)', speed);
return false;
});
$('#btn-next').click(function () {
newsscoller(0);
return false;
});
$('#btn-prev').click(function () {
newsscoller(1);
return false;
});
$('#slider').hover(
function() {
clearInterval(run);
},
function() {
run = setInterval('newsscoller(0)', speed); });});
function newsscoller(prev) {
var current_image = $('#gallery li.selected').length ? $('#gallery li.selected') : $('#gallery li:first');
var current_excerpt = $('#excerpt li.selected').length ? $('#excerpt li.selected') : $('#excerpt li:first');
if (prev) {
var next_image = (current_image.prev().length) ? current_image.prev() : $('#gallery li:last');
var next_excerpt = (current_excerpt.prev().length) ? current_excerpt.prev() : $('#excerpt li:last');
} else {
var next_image = (current_image.next().length) ? current_image.next() : $('#gallery li:first');
var next_excerpt = (current_excerpt.next().length) ? current_excerpt.next() : $('#excerpt li:first');
}
$('#excerpt li, #gallery li').removeClass('selected');
next_image.addClass('selected');
next_excerpt.addClass('selected');
$('#mask-gallery').scrollTo(next_image, 800);
$('#mask-excerpt').scrollTo(next_excerpt, 800); }
/* ]]> */</script>
6. Save template lại và vào Bố cục (Layout)7. Thêm 1 HTML/Javascript và thêm vào code bên dưới<div id="slider">
<div id="mask-gallery">
<ul id="gallery">
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSSRLjBF958_l4Nx18yzCTppWZBBojWxhb7zdWeBm0f1ejF5X1Gt7RQviN5yl4dRS5Ge1VX_v3XYe4nCw6Tj431P9LE8h1A3KnHc-Ry8Z2JydHmzyjOIHOAkeRH4Mv3rCzIp8UQlO1ExLJ/s515/100307-1920x1200.jpg" width="660" height="275" alt=""/></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI9EU-sOe-FRGl2akqaTkneBM665TBavGCwUUHHoUqk6mCf0dekpRUku6dDxxEgPDsyNvOqoKqBG7xr8GvXoDBtPWNj43Wh-icxSNtIO75GRH6cG-eeuh-5HmxaGDY-Lapz13KqVweOVd-/s515/22355-2560x1600+%255BDesktopNexus.com%255D.jpg" width="660" height="275" alt=""/></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFV8_uU4Xp3ckMDWd8biX6MQltIDLDmu9Nw7E4_pfTbvyVlLXPr_G3sXmmPselwZy9MOfYRIR_qyEIamZWUdizSYFOuhkWNI5L8XDEuN-5-AROt27gvtcOw2aIOMA2WLTZY-bkX_8EHeU0/s515/7+%255BDesktopNexus.com%255D.jpg" width="660" height="275" alt=""/></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfOIgD1NbOnfi4cj52Mx8DzKy36H7uQSzmNdxj15s90HsEIOu3Tw8wuoYbvaN-3mruDbvISgJg3YEBmzckvhg07xbg5vBUa30Hew-cEvFz_Oj9dZWzUYDOwF65yy0t8PSJ9DoB0LtCPf49/s515/1254602948249.jpg" width="660" height="275" alt=""/></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisCh_DodQ7cW5TMbp92VvHf7VKYvf6oB56J1oO9tqrWiTt9BQahZljp9IH0imgpXrHpima-ZQH-I7qn1Sah-dAozLuhuD6Pf-ZxOW1nCH2aYcdAHiHbW7QRD5o1M0r5SZpNc-NyG9J3Q-A/s515/2.jpg" width="660" height="275" alt=""/></li>
</ul>
</div>
<div id="mask-excerpt">
<ul id="excerpt">
<li>Nội dung thông tin mô tả cho hình ảnh 1. </li>
<li>Nội dung thông tin mô tả cho hình ảnh 2. </li>
<li>Nội dung thông tin mô tả cho hình ảnh 3. </li>
<li>Nội dung thông tin mô tả cho hình ảnh 4. </li>
<li>Nội dung thông tin mô tả cho hình ảnh 5. </li>
</ul>
</div>
</div>
<div id="buttons" style="width: 100px;margin-left: 260px;padding-left: 25px;height: 25px;">
<a href="#" id="btn-prev">prev</a> <a href="#" id="btn-next">next</a></div>

Bạn hãy thay link ảnh (Link màu xanh) thành link hình ảnh của bạn và nội dung mô tả tương ứng cho hình ảnh của bạn.

8. Cuối cùng save tiện ích lại

Chúc bạn thành công!

Tham khảo bloggertrix.com

Read More »

11/1/15

Cách Xóa Bỏ Thuộc Tính Cung Cấp Bản Quyền Bởi Blogger

Sau khi bạn đã cài đặt một template mới cho Blog của mình thì nhiều bạn thắc mắc về cách xóa thuộc tính bản quyền Blogger trên website của mình nhằm mục đích che đậy thì làm website trông chuyên nghiệp hơn. Do đó, bài viết này sẽ giúp bạn bỏ dòng "Cung cấp bởi Blogger" hay "Powered by Blogger" một cách đơn giản. LÀM THẾ NÀO ĐỂ XÓA POWERED BY BLOGGER Bước 1: Xác định nó nằm đâu trong HTML Click chuột phải ngay dòng chữ Cung cấp bởi Blogger mà ban muốn xóa sau đó chọn Kiểm tra phần tử, thì bạn sẽ thấy nó nằm ở một cái
chưa có id là Attribution1.

Hình sô 1

Bước 2: Tìm phần tử Attribution1 trong HTML Vào Mẫu > Chỉnh sửa HTML tại đây bạn click vào phần chứa Code > nhấn tổ hợp phím Ctrl + F và nhập phần tử Attribution1 > nhấn Enter bạn sẽ thấy nó xuất hiện như trong hình.

Hình số 2
Bước 3: Thay đổi True > False > Lưu mẫu Bạn thay đổi phần từ True thành False và Lưu thay đổi như trong hình.
Hình số 3
Bước 4: Xóa bỏ bản quyền trong Bố cục Bạn vào trong Bố cục, tìm tiện ích Thuộc tính > Chỉnh sửa > Xóa bỏ. Trước khi bạn chưa thực hiện các bước trên thì nút Xóa bỏ sẽ không hiện ra, nếu bạn đã thực hiện 3 bước trên nhưng vẫn chưa hiện ra thì bạn nên kiểm tra lại mình đã lỗi ở bước nào đó. Sau cùng bạn chỉ cần nhấn Xem Blog kiểm tra xem nó đã mất phần cung cấp bản quyền bởi Blogger chưa nhé. Chúc các bạn tạo ra một website đẹp mắt và chuyên nghiệp.


Read More »

HƯỚNG DẪN THÊM HTTPS ĐỂ BẢO VỆ CHO BLOG CỦA BẠN


Hình ảnh thêm https cho blogger
HTTP là Hypertext Transfer Protocol – Giao thức chuyển đôi ngôn ngữ siêu văn bản. Cái này có lẽ đa số các bạn đã biết rồi. Các bạn thường gặp giao thức HTTP này khi sử dụng các trình duyệt web (như Firefox, chrome, IE…). Trên thực tế thì khi các bạn load một website thông thường, chúng ta dùng giao thức HTTP để gửi và nhận dữ liệu.
Thế còn HTTPS là gì? Https ( Hypertext Transfer Protocol – Secure ) khác với http chính là ở chữ Secure. Có lẽ các bạn cũng đoán được là HTTPS khác HTTP ở điểm nào rồi đó? Rõ ràng HTTPS hỗ trợ thêm bảo mật, giải quyết vấn đề thông tin gửi nhận lên Internet của chúng ta bị rò rỉ. HTTPS thường được sử dụng trong những trường hợp đăng nhập, đăng ký, thanh toán tiền, thanh toán thẻ,… những thông tin nhạy cảm cần được bảo vệ.



Read More »

10/30/15

Mag ktvonline blogspot template

Minh họa template Mag ktvonline

Bố cục bài viết theo nhãn


Template có gì hay:

  • Bố cục đơn giản, bài viết theo nhãn rất dễ tùy chỉnh
  • Logo text shadow
  • Related Post với thumb
  • Thích hợp cho các trang tạp chí.
  • Chuẩn Seo 100%
  • Tích hợp giao diện điện thoại....

Download:
http://goo.gl/S7utds?gdriveurl

Read More »

10/12/15

Template blogspot Seo 100% ( Chuẩn Seo)

Template blogspot chuẩn seo ktvonline24

Giao diện bố cục dễ sử dụng.

- Thông tin chung:

1.Đã tối ưu hóa chuẩn Seo 100%
2.Bài đăng phổ biến nhiều màu sắc
3.Bài viết trang chủ theo nhãn chỉ cần chỉnh trong bố cục từng nhãn.
4.Bài viết liên quan CSS khá đẹp.
5.Logo theo phong cách text CSS3 rất đẹp
6.Tích hợp facebook comment.
7.Responsive trên điện thoại....
Và còn nhiều tính năng khác.

http://goo.gl/uQSevW?gdriveurl

Read More »

10/11/15

Tuyển Tập Những Ca Khúc Trữ Tình Của Giang Trường [Official]


Xuất bản 07-09-2015
Tuyển Tập Những Ca Khúc Trữ Tình Của Giang Trường



Read More »

30 ca khúc hay nhất của Đan Nguyên


Tổng hợp 30 ca khúc hay nhất của Đan Nguyên



Read More »

10/10/15

Bài viết liên quan có hình cho blogger chuẩn HTML5 và CSS3

Related Post chuẩn HTML5 và CSS3

Đoạn CSS chuẩn CSS3 cho bài viết liên quan cho blogger

/* RELATED */.related-post {margin: 5px 0;padding: 10px;overflow: hidden;background: #f8f8f8;border: 1px solid #e2e2e2;}.related-post a {color : #333;}.related-post h4 {font-size : 20px;font-weight : 400;font-family : Oswald;margin : 0 0 0.5em;text-transform : uppercase;color : #555;}.related-post-style-3, .related-post-style-3 li {margin : 0;padding : 0;list-style : none;overflow-wrap : break-word;overflow : hidden;}.related-post-style-3 .related-post-item {display : block;float : left;width : 125px;height : 70px;padding : 100px 5px 5px;margin-right : 10px;margin-bottom : 10px;font : normal normal 11px/1.4 Arial, Sans-Serif;border : #ddd solid 1px;position : relative;}.related-post-style-3 .related-post-item:focus {outline : none;}.related-post-style-3 .related-post-item-thumbnail {display : block;margin : 0 0 10px;width : 101%;height : 90px;background-color : transparent;border : none;padding : 0;position : absolute;top : 0;left : 0;}.related-post-style-3 .related-post-item-title {font-weight : bold;}
Hướng dẫn cách chèn đoạn CSS vào template blogspot
Đang nhập vào tài khoản blogger của bạn >> Mẫu >> Chỉnh sửa HTML >> Ctrl+F >> Tìm đến thẻ ]]></b:skin> và chèn đoạn CSS3 trên vào trước nó >> Sau đó lưu lại

Đoạn mã bài viết liên quan có hình chuẩn HTML5

<div class='related-post' id='related-post'/>  <script type='text/javascript'>  var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>          &quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>      </b:loop></b:if>];  var relatedPostConfig = {      homePage: &quot;<data:blog.homepageUrl/>&quot;,      widgetTitle: &quot;&lt;h4&gt;Bài viết liên quan:&lt;/h4&gt;&quot;,      numPosts: 4,      summaryLength: 370,      titleLength: &quot;auto&quot;,      thumbnailSize: 80,      noImage: &quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC&quot;,      containerId: &quot;related-post&quot;,      newTabLink: false,      moreText: &quot;Read More&quot;,      widgetStyle: 3,      callBack: function() {}  };  </script><script type='text/javascript'>//<![CDATA[var randomRelatedIndex,showRelatedPost;(function(n,m,k){var d={widgetTitle:"<h4>Artikel Terkait:</h4>",widgetStyle:1,homePage:"http://www.tuanphan.info",numPosts:7,summaryLength:370,titleLength:"auto",thumbnailSize:72,noImage:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",containerId:"related-post",newTabLink:false,moreText:"Baca Selengkapnya",callBack:function(){}};for(var f in relatedPostConfig){d[f]=(relatedPostConfig[f]=="undefined")?d[f]:relatedPostConfig[f]}var j=function(a){var b=m.createElement("script");b.type="text/javascript";b.src=a;k.appendChild(b)},o=function(b,a){return Math.floor(Math.random()*(a-b+1))+b},l=function(a){var p=a.length,c,b;if(p===0){return false}while(--p){c=Math.floor(Math.random()*(p+1));b=a[p];a[p]=a[c];a[c]=b}return a},e=(typeof labelArray=="object"&&labelArray.length>0)?"/-/"+l(labelArray)[0]:"",h=function(b){var c=b.feed.openSearch$totalResults.$t-d.numPosts,a=o(1,(c>0?c:1));j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&start-index="+a+"&max-results="+d.numPosts+"&callback=showRelatedPost")},g=function(z){var s=document.getElementById(d.containerId),x=l(z.feed.entry),A=d.widgetStyle,c=d.widgetTitle+'<ul class="related-post-style-'+A+'">',b=d.newTabLink?' target="_blank"':"",y='<span style="display:block;clear:both;"></span>',v,t,w,r,u;if(!s){return}for(var q=0;q<d.numPosts;q++){if(q==x.length){break}t=x[q].title.$t;w=(d.titleLength!=="auto"&&d.titleLength<t.length)?t.substring(0,d.titleLength)+"&hellip;":t;r=("media$thumbnail"in x[q]&&d.thumbnailSize!==false)?x[q].media$thumbnail.url.replace(/\/s[0-9]+(\-c)?/,"/s"+d.thumbnailSize+"-c"):d.noImage;u=("summary"in x[q]&&d.summaryLength>0)?x[q].summary.$t.replace(/<br ?\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,d.summaryLength)+"&hellip;":"";for(var p=0,a=x[q].link.length;p<a;p++){v=(x[q].link[p].rel=="alternate")?x[q].link[p].href:"#"}if(A==2){c+='<li><img alt="thumbnail" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'" title="'+t+'"><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+'</span> <a href="'+v+'" class="related-post-item-more"'+b+">"+d.moreText+"</a></span>"+y+"</li>"}else{if(A==3||A==4){c+='<li class="related-post-item" tabindex="0"><a class="related-post-item-title" href="'+v+'"'+b+'><img alt="thumbnail" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'" title="'+t+'"></a><div class="related-post-item-tooltip"><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+"</a></div>"+y+"</li>"}else{if(A==5){c+='<li class="related-post-item" tabindex="0"><a class="related-post-item-wrapper" href="'+v+'" title="'+t+'"'+b+'><img alt="thumbnail" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'" title="'+t+'"><span class="related-post-item-tooltip">'+w+"</span></a>"+y+"</li>"}else{if(A==6){c+='<li><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><div class="related-post-item-tooltip"><img alt="thumbnail" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'" title="'+t+'"><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+"</span></span>"+y+"</div></li>"}else{c+='<li><a title="'+t+'" href="'+v+'"'+b+">"+w+"</a></li>"}}}}}s.innerHTML=c+="</ul>"+y;d.callBack()};randomRelatedIndex=h;showRelatedPost=g;j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")})(window,document,document.getElementsByTagName("head")[0]);//]]>  </script>

 Cách chèn đoạn mã trên vào template của bạn
Sau khi chèn đoạn CSS3 xong các bạn  nhấn Ctrl+F tìm đến thẻ <div class='post-footer-line post-footer-line-1'> thứ 2 nó nằm trong thẻ này <b:includable id='post' var='post'>...</b:includable> chèn  đoạn code chuẩn HTML trên trước thẻ đóng </b:includable> là chính xác nhất . Sau đó lưu lại và nhấn F5 để xem kết quả .
Lưu ý:
Các bạn có chọn như sau:
numPosts: 4 : Số lượng hiện thị bài viết liên quan
thumbnailSize: 80: Kích thước thumbnail
widgetStyle: 3 : Kiểu hiển thị
Read More »