Tạo bài viết liên quan Thumbnail và Hộp Feedburner

Một tiện ích không thể thiếu cho Web/blog của bạn chuyên nghiệp hơn. 
Tính năng bài viết liên quan cộng với hộp Feedburner nằm dưới chân bài viết sẻ dể dàng hơn cho người xem khi theo dỗi hay xem các bài viết khác từ web/blog của bạn. Cũng nhưng muốn theo dõi các bài viết mới từ Web/blog của bạn thông qua Mail.

Các bước thực hiện như sau:
Bước 1: Bạn đăng nhập phần quản lý Web/ Blog của bạn
Bước 2: Sau đó nhấp vào Mẫu > chọn Edit HTML
"Đừng quên sao lưu mẫu của bạn đầu tiên, chỉ trong trường hợp nếu có một lỗi trong việc chỉnh sửa sau này."
Bước 3: Sau đó, đặt đoạn mã sau trên mã ]]> </ b: skin>
#related{background:#222; border:1px solid #000; border-bottom:1px solid #444; border-right:1px solid #444;text-shadow:0 1px 0 #000;margin:0 0 5px;padding:10px}
ul#related-posts{font:bold 11px Arial;list-style:none;text-transform:none;margin:10px 0;padding:0}
#related .related-posts{font-weight:400;width:50%;float:right}
#related .related-posts p{margin:0}
ul#related-posts li{float:left;height:auto;list-style-type:none;margin:0 5px;padding:2px 1px}
*html ul.rp#related-posts li{margin:0 13px}
ul#related-posts li a{-moz-box-shadow:0 1px 2px rgba(0,0,0,0.15);border:2px solid #333;display:block;height:72px;position:relative;width:72px;color:#eaeaea;text-decoration:none;text-shadow:0 1px 0 #000}
ul#related-posts li .overlay{height:66px;line-height:16px;position:absolute;width:66px;z-index:10;padding:6px 0 0 6px}
ul#related-posts li a:hover .overlay{background:#000;display:block!important;opacity:0.7}
ul#related-posts li img{bottom:0;padding:0!important}
ul#related-posts li a:hover{-moz-box-shadow:0 1px 3px rgba(0,0,0,0.25)}
#related .subscribe{width:43%;float:left;color:#bdbdbd;}
#related .subscribe p.intro{font-weight:400}
#related .subscribe p.feed{margin-bottom:10px;font-weight:700;padding-left:21px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYN-SPXbRUWsTOVPtwM1D25b5R8-3KV8qmKQzRsZxOVdLjJxf-I_jY1WDtDUupm3E-qsmAKCK4B-8OTB5d9zx52ZhxqOEKx9dMqgHUmGjdGV8AxgQLHwfeXEMoTta6de1fYj_LOyWjEvQ/) 0 50% no-repeat;vertical-align:middle}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-block}
Bước 4: Tiếp theo bạn tìm đến đoạn <data:post.body/> đặc đoạn mã phía dưới vào ngay sau thẻ.
( Nếu Web/blog bạn có 2 hoặc 3 đoạn giống nhau thì chọn đoạn cuối cùng) 
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='clearfix' id='related'>
<div class='related-posts'>
<p>Related Articles</p>
<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA58lU57GFZL9CVLeJZtMDS2IjLzwO3d-JgrvAVFgdC-dcBm_mgroKatGNnHgTOKvOYegkE6yD5m-WZjbZ_AgrosOqIUQVk0EPtzSGW2YjeblwNG_JKoNcx60Jcjfz7cF88lMl4HeuxfU/s1600/no+image.jpg&quot;;
var maxresults=6;
</script>
<script src='http://yourjavascript.com/1198561349/relatedimg.js' type='text/javascript'/>
<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 class='subscribe'>
<p class='intro'>If you enjoyed this article just <a href='http://feeds.feedburner.com/TyniSoft' target='_blank' title='feedburner'>
<b>click here</b></a>, or subscribe to receive more great content just like it.</p>
<p class='feed'><a href='http://www.tynisoft.com/feeds/posts/default'>Subscribe via RSS Feed</a></p>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=TyniSoft&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='TyniSoft'/>
<input name='loc' type='hidden' value='en_US'/>
<input id='botsub' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email&quot;;}' onfocus='if (this.value == &quot;Enter your email&quot;) {this.value = &quot;&quot;;}' type='text' value='Enter your email....'/>
<input id='botsubbutton' type='submit' value='Submit'/><br/>
<small>Your information will not be shared. Ever.</small><br/>
<a href='http://feeds.feedburner.com/TyniSoft'><img alt='' height='26' src='http://feeds.feedburner.com/~fc/TyniSoft?bg=ceaa6c&amp;fg=444444&amp;anim=1' style='border:0' width='88'/></a>
</form>
</div>
</div>
</b:if>
Thuộc Tính  
Màu Xanh: là địa chỉ URL của bạn
Màu Đỏ: là tên nguồn dữ liệu Feedburner của Web bạn
Bước 5: Bạn Lưu lại và xem kết quả.

Tiện Ích Related Posts bằng hình ảnh / thu nhỏ

Hôm nay mình xin giới thiệu đến các bạn một tiện ích bài viết liên quan cho cho Web hay Blog, chỉ cần 2 bước các bạn đã có thể làm được ngay.















"Nên sao lưu Blog/web trước khi thực hiện"
Bước 1: Bạn đăng nhập vào Blog -> Mẫu -> Chỉnh sửa HTML
Bước 2: Bạn coppy toàn bộ code phía dưới và dán ngay phía trên thẻ </head>
Mách nhỏ: bạn dùng phím Ctrl+F và nhập </head> cho nhanh 
<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <style type="text/css"> #related-postsx h4{margin:0;padding:2px 5px;font-size:14px} #related-postsx ul,#related-postsx li{list-style:none;margin:0;padding:0;overflow:hidden} #related-postsx ul.loadingnya{width:100%;height:50px;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWiM-kwqdpA5n8HM2_HKLuYmeHAQ7EVxgWdkPNsQhXBkRkDcKq5b7Zsn5107nfH59ZwrirM8ILiMCOLLwGPtHAV-Aex4sk2KVEoQGAC65xYh-0bfavIlHXU1fBB9VFlsXO9F43R8R_fCc/s1600/loading-32-v1.gif) no-repeat 50% 50%} #related-postsx li{position:relative;float:left;width:19%;margin:0.5%;height:124px;font:normal normal 11px Verdana,Geneva,sans-serif;line-height: 15px} #related-postsx img,#related-postsx .gmbrrltd{width:100%;height:100%;display:block} #related-postsx strong,#related-postsx img{-webkit-transition:all 0.3s ease 0s;-o-transition:all 0.3s ease 0s;transition:all 0.3s ease 0s;-moz-transition:all 0.3s ease 0s} #related-postsx img{-khtml-opacity:0.3;-moz-opacity:0.3;-ms-filter:&quot;progid:DXImageTransform.Microsoft.Alpha(opacity=30)&quot;;filter:alpha(opacity=30);opacity:0.3} #related-postsx li:hover img{-khtml-opacity:0.8;-moz-opacity:0.8;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=80)";filter:alpha(opacity=80);opacity:0.8} #related-postsx strong{position:absolute;z-index:2;left:0;top:0;padding:0 5px;height:100%;color:white} #related-postsx .gmbrrltd{background:black} #related-postsx .jkmt a{position:absolute;z-index:2;bottom:5px;right:5px;padding:0 20px 0 0;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVA1FdZiqsCvHsR526DMvkJ1KNA5ClBwaiBDtKKsLUIDbL9jFtHpQZz4ezysjhSv7M5ygMWMa0ViKZN_cZKiOi8GpyMBB8GdUm0pnU_OJtM5P5FHc8usl9vAG6EGQ6vmhw10KJ_9Z2FpI/s20/comment.png) no-repeat 100% 0;line-height:20px} #related-postsx .dt{position:absolute;bottom:5px;z-index:3;left:5px;color:white;line-height:20px} </style> </b:if>
Bước 3: Có 2 cách thực hiện ( Tùy bạn chọn 1 trong 2 cách thích hợp để thực hiện)
Cách 1: bạn tìm đến thẻ <div class='post-footer'> và đặt toàn bộ code phía dưới vào ngay phía trên thẻ
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script defer='defer' src='https://tynisoft.googlecode.com/svn/trunk/Bai lien quan.js' type='text/javascript'/> <div id='artikelterkaitmkr'>
<script type='text/javascript'> //<![CDATA[
$(window).load(function(){ relatedPostsWidget({
related_title: "Bài Liên Quan",
recentTitle: "Bài Mới Nhất",
containerSelector: "#artikelterkaitmkr",
blogURL: "http://www.tynisoft.com",
maxPosts: 5,
maxPostsPerTag:5,
rlt_thumb: 120
});});//]]> </script>
</div>
</b:if>
Lưu ý: Do tùy thuộc tính từng trang, các bạn đặt vào các thẻ tương tự đến khi nào nó hiển thị Ok là được.
Mách nhỏ: các bạn có thể rê chuột vào ngay phía dưới bài đăng click chuột phải để Kiểm tra nguồn.
Hình minh họa 1
 
Hình minh họa 2

Ở hình mình đã tìm được thẻ thuộc tính, Đối với trang của bạn cũng tương tự khi tìm ra nơi nguồn để đặc tiện ích các bạn vào Code trang tìm kiếm tương tự và đặt vào đúng vị trí thì nó sẽ hiển thị tốt.

Cách 2:
Các bạn tìm đến ngay thể </body> và đặt toàn bộc code vào ngay phía trên thẻ:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script defer='defer' src='https://tynisoft.googlecode.com/svn/trunk/Bai lien quan.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(window).load(function(){
relatedPostsWidget({
related_title: "Bài Liên Quan",
recentTitle: "Bài Mới Nhất",
containerSelector: "div.post-body",
blogURL: "http://www.tynisoft.com",
maxPosts: 5,
maxPostsPerTag:5,
rlt_thumb: 120
});
});
//]]>
</script>
</b:if>
Tùy Chỉnh:
blogURL: Tên trang của bạn
maxPosts: Số bài viết cần hiển thị
maxPostsPerTag: Số Nhãn bài viết cần hiên thị.