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

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 !

5
4
3
2
1

Không có nhận xét nào:

Đăng nhận xét

» Hướng dẫn nhúng hình ảnh: [img]http://domain.com/image.png[/img]
» Tham trang khảo ảnh động cực cute: Qoobee
» Hướng dẫn nhúng link trang web: <a href="url" rel="nofollow" target="_blank">Link</a>
» Không chửi tục, nói bậy, quảng cáo thông qua khung Comment.
» Không spam link, chia sẻ các link không liên quan đến bài viết.
» Không xuyên tạc, bôi nhọ tổ chức hay cá nhân nào.
» Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước.

Group giao lưu, giải đáp và chia sẻ kinh nghiệm blogspot - blogger :

  • Kích hoạt giao diện tối
  • Giao diện tối giúp bạn nhìn vào ban đêm, làm dịu mắt và tránh căng thẳng khi phải nhìn vào màn hình sáng quá nhiều.

    Đếm ngược thời gian đến tết Kỷ Hợi 2019