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

Lê An    8/20/2013    Related Posts , Thủ thuật blog    Comments   

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ị.