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

Share

Tweet

Google+

Email

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.

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

<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

ĐIỀU KHOẢN SỬ DỤNG

1. Blog chúng tôi hoạt động hoàn toàn tự nguyện nhằm mang đến cho các bạn sự trải nghiệm tốt nhất.
2. Các tập tin được cung cấp link tải miễn phí.
3. Mọi người có thể chia link tải từ Blog chúng tôi qua các trang hoặc diễn đàn khác mà không phải xin phép tác giả hoặc ghi nguồn.
4. Chúng tôi không chịu trách nhiệm với lỗi phát sinh trong quá trình sử dụng tập tin.
5. Nếu các bạn gặp khăn có thể liên hệ trực tiếp với chúng tôi.

Bài đăng mới hơn Bài đăng cũ hơn