Thêm bài gần đây ẩn hiện khi cuộn trang cho Blogspot

Bài viết gần đây, nghe nó rất cổ xưa đúng không? Nhưng bài viết này sẽ chia sẻ các bạn hiển thị bài viết gần đây dưới dạng hộp. Nó có thể tự động ẩn hiện khi cuộn trang rất tiện lợi.

Xin chào, hôm nay bài này mình sẽ hướng dẫn các bạn cách tạo hộp bài viết gần đây ẩn hiện khi cuộn chuột cho Blogspot. Mời các bạn tham khảo!

Ưu điểm:

• Hộp dạng Slider nên rất gọn số lượng bài viết liên quan nhiều.
• Gọn nhẹ không chiếm nhiều diện tích cũng như thẩm mỹ.
• Giúp cho người sử dụng tiếp cận bài viết nhanh chóng.

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

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

Copy
@media screen and (max-width:550px){#related-box{bottom:0!important}}
#related-box{width:300px;overflow:hidden;height:auto;position:fixed;bottom:80px;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:45px;line-height:45px;color:#212121;background:rgb(230,230,230)}
#related-box .header h2{font-size:17px;text-transform:uppercase;font-weight:600;margin:0;text-align:center}
#related-box .header a{color:#212121}
#related-box .tombol{ border-radius: 50%;margin:5px;position:absolute;color:#212121;top:0;left:0;font-size:18px;font-weight:400;cursor:pointer;background:rgba(90, 87, 87, 0.19);text-align:center;width:34px;height:34px;line-height:34px;transition:all .3s ease-in-out}
#related-box .tombol a{color:#212121}
#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{border-radius:10px;border: 2px solid #f0f1f5;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:15px;color:#222;font-weight:600;line-height:normal;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
#related-box .info h3{margin:0}
#related-box .navigation{transition:all .3s;float: right;position: absolute;width: 90%;left: 12px;bottom: 12px;}
#related-box .navigation a{background:#e6e6e6;transition: all .4s ease-in-out;color:#212121;float:left;border:1px solid rgba(0,0,0,0.2);margin:3px;font-size:12px;width:100%;height:26px;line-height:26px;text-align:center;border-radius:4px}
#related-box .navigation a:hover{background:#7577a9;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: 130px!important;text-align:inherit!important}
#related-box .gambar:hover{border:2px solid #7577a9}
#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{display:none;color:#fff;background:#7577a9;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:'\f0c1';color:#FFF;display:block;position:absolute;top:47%;left:47%;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}

Bước 2: Tìm đến thẻ <data:post.body/>. Copy code dưới đây và dán phía dưới thẻ vừa tìm được.

Copy
<script type='text/javascript'>
//<![CDATA[
!function(){var a={homepage:"https://www.duyblogs.com",title:"Bài đăng gần đây",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>

Chỉnh sửa: thay https://www.duyblogs.com thành địa chỉ Blog của bạn! 
Sau khi hoàn thánh bấm lưu mẫu để xem kết quả!

Lời kết

Nếu bạn biết về CSS thì hãy tùy biến nó theo ý thích của các bạn để đem lại một sự đặc biệt của riêng bạn!

Code mod by: Trần Thanh Bình - Tôi Share

Admin: Lê Quốc Dũng

Chào mừng bạn đã đến với Blog của tôi. Website chia sẻ Thủ Thuật - Phần Mềm - Ảnh Đẹp - PSD tổng hợp, ... được cập nhật liên tục. Mong được mọi người quan tâm.