SAHIFA V 5.0

DOWNLOAD

Đừng quên nhấn like và chia sẻ nha! :)

Hôm nay mình sẽ chia sẻ với các bạn cách để tạo hộp bài viết liên quan cho blogspot có hiệu ứng đẹp khi rê chuột. Mình sẽ lần lượt chia sẻ 3 loại hộp bài viết có hiệu ứng khác nhau để các bạn tùy chọn.

Các bạn xem DEMO tại ĐÂY

Để thêm vào blogspot các bạn vui lòng thực hiện theo các bước sau đây

Bước 1: Vào bảng điều khiển blogger (Blogger Dasboard)
Bước 2: Chọn chỉnh sửa mẫu (Template)
Bước 3: Chọn chỉnh sửa HTML
Bước 4: Chọn mở rộng tiện ích
Bước 5: Tìm đoạn code sau:

</head>

Bước 6: Copy đoạn code dưới đây và dán vào phía trước đoạn code </head> vừa tìm được

<!--RelatedPostsStarts--><script language='JavaScript'> //<![CDATA[ var relatedTitles = new Array(); var relatedTitlesNum = 0; var relatedUrls = new Array(); function related_results_labels(json) { for (var i = 0; i < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; relatedTitles[relatedTitlesNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { relatedUrls[relatedTitlesNum] = entry.link[k].href; relatedTitlesNum++; break; } } } } function removeRelatedDuplicates() { var tmp = new Array(0); var tmp2 = new Array(0); for(var i = 0; i < relatedUrls.length; i++) { if(!contains(tmp, relatedUrls[i])) { tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i]; tmp2.length += 1; tmp2[tmp2.length - 1] = relatedTitles[i]; } } relatedTitles = tmp2; relatedUrls = tmp; } function contains(a, e) { for(var j = 0; j < a.length; j++) if (a[j]==e) return true; return false; } function printRelatedLabels() { var r = Math.floor((relatedTitles.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < relatedTitles.length && i < 6) { document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>'); if (r < relatedTitles.length - 1) { r++; } else { r = 0; } i++; } document.write('</ul>'); } //]]> </script> <!--RelatedPostsStops-->

Bước 7:  Tìm một vị trí thích hợp mà bạn muốn hộp bài viết liên quan hiện trong template.

Thường thì sẽ dán ở đoạn code sau:

<div class='post-footer-line post-footer-line-2'/>
<div class='post-footer-line post-footer-line-3'/>
</div>
</div>

Tuy nhiện với một số loại responsive template thì sẽ phải dán ở đoạn:

<b:includable id='relatedpost'> ..........  </b:includable>

Bước 8: Copy và dán đoạn code sau vào đoạn code mà bạn vừa tìm được ở bước 7.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if>
</b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;; var maxresults=5; <!-- Increase To Show More Then 5 Related Post -->

removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
</b:if>

Bước 9:  Tiếp theo bạn tìm trong template đoạn code

]]></b:skin>

và dán vào phía trước đoạn code ]]></b:skin> một trong những đoạn code của các kiểu cho dưới đây mà bạn thấy thích.

LOẠI 1:

#related-posts {clear: both;}
#related-posts ul{margin: 20px 0; padding: 0;list-style: none;}
#related-posts ul li {border-top: 1px solid #333;border-bottom: 1px solid #111;}
#related-posts ul li:first-child {border-top: none;}
#related-posts ul li:last-child {border-bottom: none;}
#related-posts ul li a {padding: 10px;display: block;color: #222;text-decoration: none;cursor: pointer; -webkit-transition: padding-left 250ms ease-out; -moz-transition: padding-left 250ms ease-out; /* trans pattern: property duration timingMethod delay */}
#related-posts ul li a:hover {padding-left: 20px;}

LOẠI 2:

#related-posts {clear: both;}
#related-posts ul{margin: 20px 0; padding: 0;list-style: none;}
#related-posts ul li {border-top: 1px solid #333;border-bottom: 1px solid #111;background: #222;}
#related-posts ul li:first-child {border-top: none;}
#related-posts ul li:last-child {border-bottom: none;}
#related-posts ul li a {padding: 10px;display: block;color: #fff;text-decoration: none;cursor: pointer; -webkit-transition: padding-left 250ms ease-out; -moz-transition: padding-left 250ms ease-out; /* trans pattern: property duration timingMethod delay */}
#related-posts ul li a:hover {padding-left: 20px;background: #111;}

LOẠI 3:

#related-posts {clear: both;}
#related-posts h2{color: #fff;}
#related-posts ul{margin: 20px 0; padding: 0;list-style: none;}
#related-posts ul li {border-top: 1px solid #333;border-bottom: 1px solid #111;background: #222;}
#related-posts ul li:first-child {border-top: none;}
#related-posts ul li:last-child {border-bottom: none;}
#related-posts ul li a {padding: 10px;display: block;color: #fff;text-decoration: none;cursor: pointer; -webkit-transition: padding-left 250ms ease-out; -moz-transition: padding-left 250ms ease-out; /* trans pattern: property duration timingMethod delay */}
#related-posts ul li a:hover {padding-left: 20px;background: #111;} 

Bước 10: Lưu lại và thưởng thức.

Lưu ý: Các bạn hoàn toàn có thể tùy chỉnh màu sắc và cách thể hiện cũng như font chữ trong mỗi loại mà mình đã kể trên.

Chúc các bạn thành công. 

Để tạo được widget bài mới đăng đơn giản và đẹp như trong hình các bạn có thể làm theo những bước đơn giản sau đây:

Bước 1: Vào bảng điều khiển của blogger và chon layout ( Bố cục)

Bước 2: Chọn thêm tiện ích ( Add widget) tại vị trí bạn muốn widger bài mới đăng hiện trên trang của bạn.

Bước 3: Trong cửa sổ hiện ra bạn chon loại widger HTMl/ Javascript

Bước 4 Copy và dán đoạn code sau vào phần nội dung:

<style type='text/css'>
    img.recent_thumb {padding:1px;width:55px;height:55px;border:0;
    float:left;margin:0px;}
    .recent_posts_with_thumbs {float: left;width: 350px;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:14px;}
    ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;}
    .recent_posts_with_thumbs a {text-decoration:none;}
    .recent_posts_with_thumbs strong {font-size:12px;}</style>
    <script style='text/javascript' src='http://yourjavascript.com/1159358112/www.mybloggertopic.blogspot.com.js'></script>
    <script style='text/javascript'>
    var numposts = 5;
    var showpostthumbnails = true;
    var displaymore = false;
    var displayseparator = false;
    var showcommentnum = false;
    var showpostdate = false;
    var showpostsummary = true;
    var numchars = 100;</script>
    <script src='http://www.rinviet.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>

 Trong đoạn code trên các bạn tùy chỉnh như sau:

    var numposts = 5; ------------------ 5 là số bài viết hiện trên widget.
    var showpostthumbnails = true; --- Hiện ảnh thu nhỏ bài viết: True là có, False là không.
    var displaymore = false; ------------ Hiện nút Readmore (Đọc thêm): True là có, False là không.
    var displayseparator = false; ------- Hiện dấu ngắt giữa từng bài: True là có, False là không.
    var showcommentnum = false; --- Hiện số comment (nhận xét): True là có, False là không.
    var showpostdate = false; --------- Hiện ngày tháng bài viết xuất bản: True là có, False là không.
    var showpostsummary = true; ---- Hiện đoạn bài viết rút gọn: True là có, False là không hiện.
    var numchars = 100; --------------- Số ký tự của đoạn thu gọn.

http://www.rinviet.com  ---- Thay đoạn code này bằng địa chỉ trang blog của các bạn. Sau khi thay xong các bạn kiểm tra bằng cách gõ vào thanh địa chỉ: http://địa chỉ blog của bạn/feeds/posts/default?orderby=published, nếu ra trang feeds thì bạn đã làm chính xác.

Bước 5, Lưu lại và xem thành quả.

Chúc các bạn thành công.

Bắt đầu thôi.

Bước 1: Tạo một ảnh backlink thật đẹp

Bước 1A:Các bạn vào trang http://cooltext.com/ kéo xuống gần cuối trang, tìm chọn hình để làm ảnh backlink như sau:


Bước 1B: Tiếp đó các bạn nhấp chọn vào ảnh đó sẽ được chuyển tới trang để tùy chỉnh hình ảnh. Nó sẽ có dạng như hình sau:


Các bạn tiến hành thiết lập hình ảnh của mình theo hướng dẫn ở hình ảnh trên.

Bước 1C: Sau khi đã tùy chỉnh xong, các bạn nhấp chọn Create Logo để chuyển tới trang hoàn thành.

Ở trang hoàn thành như hình dưới, các bạn chọn DOWNLOAD IMAGE để tải ảnh về máy.


Bước 1D: Sau đó các bạn tiến hành upload hình ảnh đó lên host nào đó, hoặc host của blogger.


Bước 2: Tạo code và chuyển đổi code

Bước 2A: Các bạn copy và sửa lại đoạn code sau:

<a href="URL BLOG"><img alt="" src="URL HÌNH ẢNH" title="GIỚI THIỆU" /></a>

URL BLOG -> Địa chỉ trang blog của các bạn
URL HÌNH ẢNH -> Dán URL của hình ảnh bạn tạo ở bước 1D
GIỚI THIỆU-> Dòng giới thiệu blog khi trỏ chuột vào hình ảnh

Sau Sau khi chỉnh sửa code sẽ có dạng như sau:
Ví dụ của RinBlog:

<a href="http://www.xn--rinvit-mk8b.vn"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx6rQLwesYOjCf6mOIws8kTGG8aLacqbCmkxMgNrpzmEBJl9MxC4alf_fCIxTdBbE6H2kczdVJ1tvqHZMuDknTP9mdo8jLsNTCWFl0Yz-z9HcUZ_IRUwGRcVD887WPmcnIdYKkB3x4OyVV/h54/cooltext1318863096.gif" title="RinViet Blog" /></a>

Bước 2B: Sau khi đã chỉnh sửa blog, các bạn vào trang mã hóa (encode) HTML >>HTML ENCODER<<
Bạn copy đoạn code bạn đã chỉnh sửa ở đầu bước 2A vào khung Text Input và nhấp Encode Text như hướng dẫn ở hình dưới


Giữ nguyên trang kết quả này hoặc các bạn copy đoạn code ở ô Output ra để sử dụng nhé.

Bước 3. Tạo widget backlink + ảnh

Bước 3A: Các bạn vào Bố cục (layout) chọn thêm tiện ích (widget) ở vị trí các bạn muốn hiện trên trang website/blog.

Bước 3B: Trong menu thêm tiện ích (widget) các bạn chọn loại HTML/JAVASCRIPT

Bước 3C: Các bạn copy 2 đoạn code ở bước 2A và 2B sau đó dán vào phần nội dung của widget

Bước 3D: Lưu lại và xem thành quả.

Chúc các bạn thành công.

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script><div id="recent-posts"><script language="JavaScript">


home_page = "http://doanthieuda.blogspot.com/";
numposts = 5;

imgr = new Array();showRandomImg = false;boxwidth = 255;cellspacing = 6;borderColor = "#232c35";bgTD = "#000000";thumbwidth = 0;thumbheight = 0;fntsize = 15;acolor = "#666";aBold = true;icon = " ";text = false;showPostDate = false;summaryPost = 0;summaryFontsize = 10;summaryColor = "#666";icon2 = " ";</script><script src="http://dl.dropboxusercontent.com/s/niuq8uqagunjvbq/recent-posts-min-1-ycode.js" type="text/javascript"/></script><link rel="stylesheet" type="text/css" href="http://dl.dropboxusercontent.com/s/ecikvgo68yrfgps/recent-posts-min-1.css" /></div>

Lưu ý:

Các bạn tùy chỉnh đoạn code trên như sau:

home_page = "http://doanthieuda.blogspot.com/";  ----Thay doanthieuda.blogspot.com = tên blog của bạn.

numposts = 5; ----------------------------------------------- 5 là số bài viết sẽ được hiện.


<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script><div id="recent-posts"><script language="JavaScript">  ------ Nếu sau khi thêm widget mà trang web của bạn bị xung đột code thì có thể xóa dòng màu xanh này đi. Lưu ý là nếu có xung đột thì mới xóa nhé, còn không có xung đột thì vẫn để nguyên.

Bước 4: Lưu lại và thưởng thức.

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

Code được sưu tầm và chỉnh sửa bởi RinBlog.

Như tiêu đề đã đăng, tớ sẽ chia sẻ đoạn code mà tớ dùng để tạo widget recent post đang áp dụng cho RinBlog. Cách làm cực kỳ đơn giản và hoàn toàn không đụng tới code chính của template.

Bước 1: Các bạn vào trang quản trị blogger, tiếp đó vào trang blog của cácbạn.

Bước 2: Các bạn chọn Bố cục (layout) rồi sau đó chọn thêm tiện ích (Add widget)

Bước 3: Trong giao diện của sổ hiện ra các bạn chọn loại widget là HTML/JAVASCRIPT

Bước 4: Copy và paste toàn bộ đoạn code sau vào ô nội dung, ô tiêu đề các bạn có thể tùy chọn theo ý riêng của các bạn.

Code:

<style type="text/css">

/*<![CDATA[*/
img.label_thumb{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;transition:all .5s ease;float:left;padding:0;border:3px solid #cccccc;-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;background:#fff;margin-right:10px;height:70px;width:70px}
img.label_thumb:hover{-moz-transform:scale(1.2) rotate(-350deg);-webkit-transform:scale(1.2) rotate(-350deg);-o-transform:scale(1.2) rotate(-350deg);-ms-transform:scale(1.2) rotate(-350deg);transform:scale(1.2) rotate(-350deg);-webkit-box-shadow:0 0 20px rgba(0,0,0,0.3),inset 0 0 20px rgba(0,0,0,0.1);-moz-box-shadow:0 0 20px rgba(0,0,0,0.3),inset 0 0 20px rgba(0,0,0,0.1);box-shadow:0 0 20px rgba(0,0,0,0.3),inset 0 0 20px rgba(0,0,0,0.1);background:#f7f6f6}
.label_with_thumbs{float:left;width:100%;min-height:70px;margin:0 10px 2px 0;adding:0}ul.label_with_thumbs li{background:#f5f5f5;list-style-type:none;padding:8px 0;min-height:65px;margin-bottom:5px}
.label_with_thumbs a{color:#000000;font-size:12pt;outline:0;text-decoration:none}
.label_with_thumbs a:hover,.label_with_thumbs a:focus{color:#F4A557}.credits,.credits a{font-size:12px!important;text-align:left;text-shadow:0 1px 0 #fff;color:#888}
#mdjumplink{font-weight:normal;background:#f7f8f9;background:-webkit-linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);background:-moz-linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);background:-o-linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);background:-ms-linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);background:linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f8f9',endColorstr='#e9e9e9',GradientType=0);border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;padding:6px 12px;margin:0;-webkit-box-shadow:0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);-moz-box-shadow:0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);box-shadow:0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);color:#888!important;text-shadow:0 1px 0 #fff;line-height:1.2;cursor:pointer;font-size:13px;font-weight:normal;text-decoration:none!important}
#mdjumplink:hover{background:#f1f1f1;background:-webkit-linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);background:-moz-linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);background:-o-linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);background:-ms-linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);background:linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f1f1f1',endColorstr='#e0e0e0',GradientType=0);text-decoration:none!important}
#mdjumplink a{color:#888!important;text-decoration:none;display:block;margin:2px}
#mdjumplink a:hover{color:#888!important;text-decoration:none}
#mdcomments{padding:6px 12px;background:#3395BF;color:#FFFFFF!important;font-size:13px;font-weight:normal}
#mdcomments:hover{background:#F4A557;text-decoration:none}
/*]]>*/
</style><script type="text/javascript" src="http://dl.dropboxusercontent.com/s/lvcqh2soqpa5tty/animated-recent-posts-ycode-5.js"></script>
<script type='text/javascript'>
//<![CDATA[
var numposts = 5;
var showpostthumbnails = true;
var displaymore = true;
var displayseparator = true;
var showcommentnum = true;
var showpostdate = false;
var showpostsummary = false;
var numchars = 80;
//]]>
</script>
<script src='http://doanthieuda.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=labelthumbs'></script>

Hết code.
Trong đoạn code trên, các bạn tùy chỉnh như sau:

var numposts = 5;  ----------------------- 5 là số bài viết các bạn muốn hiển thị
var showpostthumbnails = true;  ---------- Hiện ảnh thu nhỏ: true là có, false là không hiện ảnh
var displaymore = true;  ------------------ Hiện nút đọc thêm (readmore), true là có, false là không hiện
var showcommentnum = true; ------------ Hiện số bình luận (comment), true là có, false là không hiện
var showpostdate = false; ---------------- Hiện ngày viết, true là có, false là không hiện
var showpostsummary = false; ----------- Hiện đoạn tóm tắt,  true là có, false là không hiện
var numchars = 80; ---------------------- 80 là số ký tự trong đoạn tóm tắt

http://doanthieuda.blogspot.com/ ---------Thay địa chỉ này bằng địa chỉ trang blogspot của các bạn.

Bước 5: Lưu lại và xem thành quả.

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

Để làm được điều đó thì bạn vui lòng thực hiện theo những bước đơn giản sau:

Bước 1:  Bạn vào mục Bố cục/ layout
Bước 2: Chọn thêm một tiện ích/ widget ở một vị trí bất kỳ
Bước 3: Bạn chọn loại tiện ích là HTML/ Javascript
Bước 4: Bạn copy đoạn code sau vào ô trống trong cửa sổ widget mở ra.

<!-- floating share bar Start helplogger.blogspot.com--> <style type="text/css"> #pageshare {position:fixed; bottom:5%; margin-left:-721px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;} #pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;} .fb_share_count_top {width:48px !important;} .fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;} .FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;} .FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;} </style> <div id='pageshare' title="Get this from Helpblogger.com">
<div style="margin-left:8px;"><div class='sbutton' id='like' style='margin: 5px 0 0 5px;'><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'></script><fb:like layout='box_count' show_faces='false'></fb:like> </div></div>
<br /><div class='sbutton'><a class='twitter-share-button' data-count='vertical' data-via='mrbebibo' expr:data-counturl='data:blog.url' href='http://twitter.com/share' rel='nofollow'>Tweet</a><script src='http://platform.twitter.com/widgets.js'; type='text/javascript'></script>
<br /><div class='sbutton' id='su'> <script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script> </div> <div class='sbutton' id='digg' style='margin-left:3px;width:48px'> <script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script> <a class="DiggThisButton DiggMedium"></a> </div> <div class='sbutton' id='gplusone'> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> <g:plusone size="tall"></g:plusone></div><br/><a href='http://feeds.feedburner.com/doanthieuda' rel='nofollow' target='_blank' title='Subscribe To Our Rss Feed'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5EzjTrh3mnGnWca4rIxHikD11ek2S193AtDpxMzv1e67rAF7SZgo_jxRwY7rQgX1pBBKJGkBQ_QobOdVB44osTCyPxWTDJOf2Ib9wzFLvlKO76_CXsRUeWPt6AGFAvRsTK7vFLBLbGmc8/s1600/icon_rss_reader.png'/></a><div style="clear: both;font-size: 9px;text-align:center;">Get <a style="color: #3399BB;" href="http://doanthieuda.blogspot.com/">widget</a></div><!-- Do not remove this link --> </div> <!-- floating share bar End --></div>

Lưu ý:

• Để chỉnh vị trí trái, phải cho tiện ích phù hợp với blog của bạn, bạn vui lòng chỉnh sửa  đoạn code có màu đỏ sau thẻ margin-left để chỉnh vị trí.
• Thay thế đoạn code màu tím "mrbebibo" để thay đổi tên toàn khoản twitter của bạn
• Thay đoạn code màu xanh: http://feeds.feedburner.com/doanthieuda Bằng địa chỉ feed của bạn.

 </head>

Bước 4: Bạn copy đoạn code ở dưới và chèn vào phía trước đoạn code vừa tìm được, tức là trước thẻ </head>

<!--Related Posts with thumbnails Scripts and Styles Start--><!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'><style type='text/css'>#related-posts {float:center;text-transform:none;height:100%;min-height:100%;padding-top:5px;padding-left:5px;}
#related-posts h2{font-size: 18px;letter-spacing: 2px;font-weight: bold;text-transform: none;color: #5D5D5D;font-family: Arial Narrow;margin-bottom: 0.75em;margin-top: 0em;padding-top: 0em;}#related-posts a{border-right: 1px dotted #DDDDDD;color:#5D5D5D;}#related-posts a:hover{color:black;background-color:#EDEDEF;}</style><script type='text/javascript'>var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg7o2rB3a3svBkTYzYKTsJ2DoJx6C2D59M_7IjpPTpXW9reRTFpEcu6Fw2WNuJNljA7s6v_b5XLIbOKkJtxBmwTL2F9bCETkWsEgHu-8uZEkM4tHrbSHSKZcQh21ti_7_ea7TM7PgPrEEe/s1600/no_image.jpg&quot;;var maxresults=5;var splittercolor=&quot;#DDDDDD&quot;;var relatedpoststitle=&quot;Related Posts&quot;;</script><script src='http://helplogger.googlecode.com/svn/trunk/related-posts-with-big-thumbnails.js' type='text/javascript'/><!-- remove --></b:if>

<!--Related Posts with thumbnails Scripts and Styles End-->

 Chú ý:

• Để đổi hình ảnh mặc định nếu bài viết không có ảnh, bạn đổi URL có màu xanh ở trên

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg7o2rB3a3svBkTYzYKTsJ2DoJx6C2D59M_7IjpPTpXW9reRTFpEcu6Fw2WNuJNljA7s6v_b5XLIbOKkJtxBmwTL2F9bCETkWsEgHu-8uZEkM4tHrbSHSKZcQh21ti_7_ea7TM7PgPrEEe/s1600/no_image.jpg

• Để hiển thị số lượng lớn hơn 5 ảnh, bạn thay đổi giá trị 5 thành số bài bạn muốn hiện trong đoạn code sau: "var maxresults=5;
• Nếu bạn muốn bài liên quan hiện trên trang chủ, bạn hãy xóa tất cả những đoạn code có màu tím ở trên

    <div class='post-footer'>

Bước 6: Bạn chèn đoạn code ở dưới vào trước đoạn thẻ vừa tìm được.

<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://helplogger.blogspot.com'><img alt='Blogger Tricks' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg37ttzwgL3HTvEP4r-aZyD4zm_TIosgGo2zhLBUi06CpLyLjVEMBNfGyYMVI3vmvCN54k9ftWNcJpQAEgHgIFrlkB_xeTifEvtc__lyUK7h-2XunsJQuJoQjczUAcEEbyn_2D0tdc0Hph0/s1600/best+blogger+tips.png'/></a>
</b:if></b:if>

<!-- Related Posts with Thumbnails Code End-->

Chú ý:

• Đổi giá trị 6 thành giá trị khác nếu bạn muốn thay đổi số bài viết hiển thị max-results=6
•  Nếu bạn muốn bài liên quan hiện trên trang chủ, bạn hãy xóa tất cả những đoạn code có màu tím ở trên

Bước 7:  Lưu mẫu và thưởng thức thành quả.

*Bài viết được dịch từ Blog:http://helplogger.blogspot.com