Bài đăng liên quan cho Blogger (Related Post Box For Blogger)

Đăng Ngày: tháng 9 05, 2018

Đăng Bởi: Nguyễn Đình Diện

Chào các bạn, theo yêu cầu của một số bạn thì hôm nay mình sẽ hướng dẫn các bạn tạo hộp bài đăng liên quan cho blogspot nhé

HƯỚNG DẪN CÁCH LÀM:

Bước 1: Đăng nhập Blogger -> Chủ đề -> Chỉnh sửa HTML nhấn tìm ]]></b:skin> và thêm đoạn css bên dưới lên trên thẻ này

<style>
/* Related post image */
#related-box{width:300px;overflow:hidden;height:auto;position:fixed;bottom:65px;right:0;background:#fff;/*border:1px solid #ddd;*/    box-shadow:0 0 3px #CACACA;transition:all .5s;z-index:9999;font-family:'Open Sans',sans-serif}
#related-box .header{width:100%;height:34px;line-height:35px;border-top:4px solid #F88C00;color:#222;background:#fff}
#related-box .header h2{font-size:17px;text-transform:uppercase;font-weight:600;margin:0;text-align:center}
#related-box .header a{color:#222}
#related-box .tombol{position:absolute;color:#fff;top:0;left:0;font-size:18px;font-weight:400;cursor:pointer;background:#F88C00;text-align:center;width:30px;height:30px;line-height:30px;transition:all .3s ease-in-out}
#related-box .tombol a{color:#fff}
#related-box .tombol a:hover{color:#ffffff7d}
#related-box .tombol i{margin-right:0}
#related-box .item{width:300px;padding:15px;float:left}
#related-box .list{box-sizing:border-box;height:100%;overflow:hidden;width:600px;transition:all .5s}
#related-box .gambar{position:relative;float:left;width:100%;height:150px;display:block;overflow:hidden;margin:0}
#related-box .gambar a{width:100%;height:100%;position:relative;display:block;z-index:1;overflow:hidden}
#related-box .gambar img{width:100%;height:100%;display:block;object-fit:cover}
#related-box .info{padding:0 0 15px;margin:10px 0 20px}
#related-box .info a{float:left;text-transform:uppercase;font-size:17px;color:#222;font-weight:600;line-height:normal/*;border-bottom:1px solid #eee*/;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}
#related-box .info h3{margin:0}
#related-box .navigation{float:right;position:absolute;width:auto;left:12px;bottom:12px}
#related-box .navigation a{float:left;border:1px solid rgba(0,0,0,0.2);margin:3px;font-size:12px;width:26px;height:26px;line-height:26px;text-align:center;border-radius:100%}
#related-box .navigation a:hover{background:#f88c00;color:#fff;border:1px solid rgba(0,0,0,0.24)}
#related-box .navigation i{margin-right:0}
#related-box .navigation .left{float:left!important}
#related-box .navigation .right{float:right!important}
#related-box .navigation .left,#related-box .navigation .right{width:auto!important;text-align:inherit!important}
#related-box .gambar,#related-box .info{float:left;width:100%;box-sizing:border-box;display:block}
.relatedshow{position:fixed;bottom:40px;right:-50px;transition:all .5s;z-index:9999;margin:0 10px 0 0}
.relatedshow a{color:#fff;background:#F88C00;border-radius:100%;box-shadow:0 0 10px rgba(0,0,0,0.2);float:right;height:40px;width:40px;line-height:42px;text-align:center}
.relatedshow i{margin-right:0}
.gambar a{display:block!important;background:#000;font-size:0}
.gambar a:hover img{opacity:.3!important}
.gambar{margin-right:15px;position:relative;line-height:0}
.gambar a:hover .overlay-icon:before{opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}
.overlay-icon:before{content:'\f028';color:#FFF;display:block;position:absolute;top:50%;left:50%;border:3px solid #FFF;border-radius:100%;width:40px;height:40px;line-height:40px;text-align:center;font-size:18px;margin:-20px 0 0 -20px;opacity:0;-webkit-backface-visibility:hidden;-webkit-transform:scale(0);-moz-transform:scale(0);-ms-transform:scale(0);-o-transform:scale(0);transform:scale(0);-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}
.gambar img{height:auto;max-width:100%;width:100%;-webkit-transition:all .4s;-moz-transition:all .4s;-o-transition:all .4s;transition:all .4s}
.gambar{opacity:1;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out}
</style>

Bước 2: Tìm đến thẻ <data:post.body/> tuy nhiên kết quả sẽ cho nhiều hơn 1, vì vậy bạn cần thử từng cái (nên backup template nếu có lỗi thì còn mẫu để cập nhật lại), nhớ không lầm là cái thứ 3
Sau đó bạn dán code sau phía dưới thẻ vừa tìm được

<script type='text/javascript'>
//<![CDATA[
!function(){var a={homepage:"https://www.toishare.net",title:"Nên xem:",post:10,date:!0,scr:500,showcredit:!0};if("object"==typeof relatedbox)for(var b in relatedbox)a[b]=relatedbox[b];var c='<div class="relatedshow" style="right: 0px;"><a href="#"><i class="fa fa-plus"></i></a></div><div id="related-box" style="transform: translateX(400px);"><div class="tombol"><a href="#" class="close"><i class="fa fa-times"></i></a></div><div class="header"><h2>'+a.title+'</h2></div><div class="list">',d="object"==typeof labelArray&&labelArray.length?"/-/"+shuffle(labelArray)[0]:"",f=0;$.ajax({type:"GET",url:a.homepage+"/feeds/posts/summary"+d+"?max-results="+a.post+"&alt=json-in-script",async:!0,contentType:"application/json",dataType:"jsonp",success:function(b){var d=b.feed.entry;if(d){for(var e=0;e<d.length;e++){for(var g,h=d[e],i=0;i<h.link.length;i++)if("alternate"==h.link[i].rel){var j=h.link[i].href;break}g=void 0!==h.media$thumbnail?h.media$thumbnail.url.replace("s72-c","w"+f+"-h400-c"):"https://i.imgur.com/NmnW1Y1.jpg";var k=h.title.$t;c+='<div class="item"><div class="gambar"><a href="'+j+'"><img class="thumbpost2" src="'+g+'"/><span class="fa overlay-icon"></span></a></div><div class="info"><h3><a href="'+j+'">'+k+"</a></h3></div></div>"}var m=a.showcredit?'':"";c+='</div><div class="navigation"><div class="left"><a href="#"><i class="fa fa-chevron-left"></i></a></div><div class="right"><a href="#"><i class="fa fa-chevron-right"></i></a></div></div>'+m}$("body").append(c),$("#related-box").each(function(){function i(){$("#related-box").css({transform:"translateX(400px)"}),$(".relatedshow").css("right",0)}function j(){$("#related-box").css({transform:"translateX(0)"}),$(".relatedshow").css("display","none")}for(var b=$(this).find(".list"),c=$(this).find(".left a"),d=$(this).find(".right a"),e=0,f=0,g=!0,h=1;h<$(this).find(".item").length;h++)e+=$(this).find(".item").outerWidth();b.width(e+$(this).find(".item").outerWidth()),c.click(function(a){a.preventDefault(),0==f?f=-e:f+=300,b.css("transform","translateX("+f+"px)")}),d.click(function(a){a.preventDefault(),f==-e?f=0:f-=300,b.css("transform","translateX("+f+"px)")}),$(".relatedshow").click(function(a){a.preventDefault(),j()}),$(this).find(".close").click(function(a){a.preventDefault(),i(),g=!1}),$(window).scroll(function(){var b=$(window).scrollTop();b>a.scr&&g?j():b<a.scr&&g&&i()})})}})}();
//]]>
</script>

Code này mình lấy từ https://blogthuthuat.net/hop-bai-viet-lien-quan/ và về mod lại :3
// Tìm https://www.toishare.net và thay thành link blog của bạn nhé
Chúc bạn thành công !