Tiện ích bài viết liên quan bằng hình ảnh cho blogspot

Qua bài viết này mình muốn chia sẻ cho các bạn 1 tiện ích bài viết liên quan bằng hình ảnh cho blogspot đơn giản và rất đẹp mắt. Bạn nào quan tâm hãy thục hiện qua các bước sau:

1. Đăng nhập vào blogger > Mẫu > Chỉnh sửa HTML.

2. Tìm dòng ]]></b:skin> và chèn bên dưới nó đoạn mã sau đây:

<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/AVvXsEgV47zLEe9HoVbYpHap1Iyj74nUGSEOcRDnMz6l-4Fh10dgTCNq3A-8Yv0Tl7j_QQKIqmeh944UERTT01Ri017bBB_VQTJnnTHIzF2-eAjsxaAeWq6fDRnkOeTIOI6jXHow35Drg7ov2WU/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/AVvXsEhrR8rf9hGFoPL-j1_rFIIM0dERoIkm2fcwH_2uoBUsZnH3cYdqEAj0vAlAQPvGDbejtT94rJhKao2q3PnU0GJg997FC9-TvUrJ0nvePnUVYqRm3cvMLv5lRXz0DTTYPk2w1IedtDCMMfY/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>

3. Tìm dòng : <div class='post-footer'>
Mẹo nhỏ: Nhấn Ctrl + F và gõ class='post-footer' để thuận lợi cho việc tìm kiếm.

Sao chép đoạn mã dưới đây và chèn bên trên nó :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script defer='defer' src='https://ivyth.googlecode.com/svn/js/related-post-image.js' type='text/javascript'/>
<div id='artikelterkaitmkr'>
<script type='text/javascript'>
//<![CDATA[
$(window).load(function(){
relatedPostsWidget({
related_title: "Artikel Terkait",
recentTitle: "Artikel Terbaru",
containerSelector: "#artikelterkaitmkr",
blogURL: "URL_BLOGmu",
maxPosts: 5,
maxPostsPerTag:5,
rlt_thumb: 120
});
});
//]]>
</script>
</div>
</b:if>

Hoặc bạn cũng có thể đặt nó dưới mã <div class='post-footer-line post-footer-line-1'> hoặc mã <p class='post-footer-line post-footer-line-1'> .
Tóm lại, mình sẽ đưa các bài viết liên kết bên dưới bài viết. Và hầu hết các mã bằng cụm từ sau chân thường là dưới bài viết.

4. Nếu bạn hoàn tất các bước trên, ấn Save Template và xem kết quả.

blogURL:'' | url blog của bạn ví dụ http://vuamang.blogspot.com/
maxPosts: 5 | Số lượng tối đa của bài viết liên quan xuất hiện ( mặc định 5 )
maxTags: 5 | Số lượng tối đa của các thẻ / nhãn ( mặc định là 5 )
maxPostsPerTag: 5 | Số bài tối đa cho mỗi thẻ / nhãn (nhìn thấy được nếu chỉ có một nhãn / khi nó không có một thẻ (một bài báo gần đây đã xuất hiện)). ( defaulnya 5) )
containerSelector:'' | Nếu có liên quan bài viết này sẽ được gọi là một ví dụ: <div id="artikelterkaitmkr"></div> sau đó viết # artikelterkaitmkr
relatedTitle: "Bài viết liên quan '  ( mặc định Bài viết liên quan )
rlpBlank: 'http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif' | hình ảnh xuất hiện nếu bài viết không có một hình ảnh ( http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif )
rlt_thumb: 70 | Kích thước hình ảnh được tải ( mặc định là 70 )
rlt_monthNames: ["Jan", "Feb", "Mar", "Apr", "Mei", "Jun", "Jul", "Agu", "Sep", "Okt", "Nov", "Dec"] | tên xuất hiện trong
recentTitle: 'Bài viết mới' | nhóm tiêu đề của bài viết mới nhất ( mặc định Bài viết mới nhất )

Bài viết bạn vừa đọc thuộc thể loại : bài viết liên quan / thủ thuật blogspot » Theo tiêu đề : Tiện ích bài viết liên quan bằng hình ảnh cho blogspot. Khi coppy bài viết xin ghi rõ nguồn : https://vuamang.blogspot.com/2013/07/tien-ich-bai-viet-lien-quan-bang-hinh.html. Thank!

Chia sẻ

+ Chia sẻ bài viết :