Tạo Recent Posts dạng tab đẹp mắt và độc đáo cho Blogger

Đây là thủ thuật khá đẹp và hiện đại, sử dụng nhiều CSS và Script để tạo. Nhưng với hiệu ứng và giao diện đẹp mắt, chắc chắn bạn sẽ thích!

Xem trước
Bước 1: Đăng nhập vào giao diện chỉnh sửa template của Blogger
Bước 2: Chèn đoạn CSS bên dưới vào trước thẻ ]]></b:skin> trong template

/* Recent Post Label */
.recent-labpost{margin:20px;}
.rctab-button > span{padding:15px 20px;cursor:pointer;position:relative;color:#222;display:inline-block;font-size:120%;font-weight:700;}
.rctab-button > span.active{color:#222;background:rgba(0,0,0,0.05)}
.rctab-button > span.active:before{content:'';top:0;opacity:1}
.rctab-content{padding:15px;background:rgba(0,0,0,0.05);position:relative;min-height:100px;overflow:auto}
.rctab-item{float:left;width:48%;margin:10px 1%;background:#fff;border:1px solid rgba(0,0,0,0);transition:all .3s;}
.rctab-item:hover{border:1px solid rgba(0,0,0,0.1);}
.rctab-item-inner{padding:10px}
.rctab-item img{float:left;width:120px;height:auto;}
.rctab-item h3{float:right;width:calc(100% - 130px);height:20px;margin:10px 0;font-size:120%}
.rctab-item h3 a{color:#222}.rctab-item h3 a:hover{color:#e74c3c}
.loader{position:absolute;left:50%;top:50%;margin-left:-27.5px;margin-top:-27.5px;transition:all .3s linear}
.hide-load .loader{opacity:0}
.squarin{background:#374140;width:15px;height:15px;float:left;top:-10px;margin-right:5px;margin-top:5px;position:relative;opacity:0;-webkit-animation:enter 6s infinite;animation:enter 6s infinite}
.enter{top:0;opacity:1}
.squarin:nth-child(1){-webkit-animation-delay:1.8s;-moz-animation-delay:1.8s;animation-delay:1.8s}
.squarin:nth-child(2){-webkit-animation-delay:2.1s;-moz-animation-delay:2.1s;animation-delay:2.1s}
.squarin:nth-child(3){-webkit-animation-delay:2.4s;-moz-animation-delay:2.4s;animation-delay:2.4s;background:#09c}
.squarin:nth-child(4){-webkit-animation-delay:0.9s;-moz-animation-delay:0.9s;animation-delay:0.9s}
.squarin:nth-child(5){-webkit-animation-delay:1.2s;-moz-animation-delay:1.2s;animation-delay:1.2s}
.squarin:nth-child(6){-webkit-animation-delay:1.5s;-moz-animation-delay:1.5s;animation-delay:1.5s}
.squarin:nth-child(8){-webkit-animation-delay:0.3s;-moz-animation-delay:0.3s;animation-delay:0.3s}
.squarin:nth-child(9){-webkit-animation-delay:0.6s;-moz-animation-delay:0.6s;animation-delay:0.6s}
@media screen and (max-width:768px) {
.rctab-item{float:left;width:100%;}
.rctab-item {margin:10px auto;}}

Bước 3: Tiếp tục chèn đoạn Script bên dưới vào trước thẻ </head> trong template

<script type='text/javascript'>
//<![CDATA[
function getMeImg(a){var t=[a,a,!1];return void 0!==a?-1!==a.url.indexOf("img.youtube")?(t[0]=a.url.replace("default.jpg","hqdefault.jpg"),t[1]=a.url.replace("default.jpg","mqdefault.jpg"),t[2]=!0):(t[0]=a.url.replace("s72-c","w100-h75-c"),t[1]=a.url.replace("s72-c","s500-c")):(t[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNxosSNY9AWnYL8p4x8Z9sG4WBJYRgV7nAhHNmvnGZTG6Hd4IJGK5W_v9B34t07nuy60Svr3Qx8LQqafyCRYu8mVmJdeEuYVIzZuART8-LGKMSokG2b-7x3yfSCUu8Plqm-vu4gG7lpc8/s1600/thumb.png",t[1]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNxosSNY9AWnYL8p4x8Z9sG4WBJYRgV7nAhHNmvnGZTG6Hd4IJGK5W_v9B34t07nuy60Svr3Qx8LQqafyCRYu8mVmJdeEuYVIzZuART8-LGKMSokG2b-7x3yfSCUu8Plqm-vu4gG7lpc8/s1600/thumb.png"),t}function load_w_tab(a){var t=a.find(".rctab-content>.active"),e=t.attr("data-load");$.ajax({type:"GET",url:"/feeds/posts/summary/-/"+e+"?max-results=20&alt=json-in-script",async:!1,contentType:"application/json",dataType:"jsonp",success:function(a){if(a.feed.entry){t.append('<div class="wtab-inner"></div>');for(var e=0;e<a.feed.entry.length;e++){for(var i=a.feed.entry[e],d=0;d<a.feed.entry[e].link.length;d++)if("alternate"==a.feed.entry[e].link[d].rel){var s=a.feed.entry[e].link[d].href;break}var n=i.title.$t,l=getMeImg(i.media$thumbnail),r='<div class="rctab-item"><div class="rctab-item-inner"><a href="'+s+'"><img src="'+l[0]+'"/></a><h3><a href="'+s+'">'+n+'</a></h3><div style="clear:both"></div></div></div>';t.find(".wtab-inner").append(r)}t.addClass("hide-load")}}})}function getwtabs(e){for(var labelArr=eval(e.attr("data-label")),html='<div class="rctab-button">',i=0;i<labelArr.length;i++)html+='<span data-target="'+labelArr[i]+'-genova">'+labelArr[i]+"</span>";html+='</div><div class="rctab-content">';for(var i=0;i<labelArr.length;i++)html+='<div data-load="'+labelArr[i]+'" data-container="'+labelArr[i]+'-genova">'+loaderHTML+"</div>";html+="</div>",e.append(html),e.find(".rctab-button>span").first().addClass("active"),e.find(".rctab-content>div").hide(0),e.find(".rctab-content>div").first().show(0).addClass("active loaded"),setTimeout(function(){load_w_tab(e)},500),e.find(".rctab-button>span").click(function(){var a=$(this).attr("data-target"),t=$(this),i="";e.find(".rctab-content>div").each(function(){$(this).attr("data-container")==a&&(e.find(".rctab-button>span").removeClass("active"),t.addClass("active"),e.find(".rctab-content>div").removeClass("active").hide(0),$(this).fadeIn().addClass("active"),i=$(this))}),i.hasClass("loaded")||(i.addClass("loaded"),setTimeout(function(){load_w_tab(e)},500))})}var loaderHTML='<div class="loader"> <div class="squarin" ></div> <div class="squarin"></div> <div class="squarin last"></div> <div class="squarin clear"></div> <div class="squarin"></div> <div class="squarin last"></div> <div class="squarin clear"></div> <div class="squarin "></div> <div class="squarin last"></div> </div>';$(function(){getwtabs($(".recent-labpost"))});
//]]>
</script>

Chỉnh sửa đoạn màu đỏ nếu bạn muốn hiển thị ít hoặc nhiều bài viết hơn.
Bước 4: Chèn đoạn mã dưới đây vào trước thẻ </body> hoặc sau thẻ <body> trong template

<div class='recent-labpost' data-label='[&quot;NAME LABEL&quot;,&quot;NAME LABEL&quot;,&quot;NAME LABEL&quot;,&quot;NAMA LABEL&quot;,&quot;NAME LABEL&quot;]'/>

Lưu ý: Thay đổi NAME LABEL thành tên nhãn muốn hiển thị

Source: www.arlinadzgn.com

Nhãn   Blogspot   CSS   Javascript   Thủ Thuật Blogger

aaaaaaaaaa

Xin chào các bạn mình là một người có niềm đam mê mãnh liệt với công việc thiết kế Website, đặc biệt với Blogger. Bắt đầu tìm hiểu và tự học hỏi trên mạng từ năm 2012, và hiện tại dành 100% thời gian cho công việc trên Internet.

Chia Sẽ Google Facebook Twitter

Có thể bạn muốn đọc

• Tự động thay đổi hình nền cho Blog sử dụng CSS3Trong bài viết trước, mình đã giới thiệu đến các bạn thủ thuật tự động thay đổi màu nền c
• Code trang trí Blog tuyệt đẹp mừng Tết 2017Tình cờ ghé ngang www.giangna.com thấy có bài viết chia sẻ code trang trí cho blog tuyệt
• Tạo khung chứa code đẹp và độc đáo cho BloggerCó lẽ không cần phải nói nhiều, đọc tiêu đề bài viết thì bạn đã biết rõ thủ thuật này là
• Trang trí Blog ngày tết với hiệu ứng pháo hoa tuyệt đẹp bằng JavascriptChào các bạn, để tăng thêm không khí Tết cho Blog, hôm nay mình sẽ giới thiệu đến các bạn