Chào Các Bạn Thì Hôm Nay Mình Xin Share Cách TẠO WIDGET HIỂN THỊ BÀI ĐĂNG DẠNG TAB ...
CÁCH THỰC HIỆN
Bước 1: Vào Blogger -> Chủ Đề -> Chỉnh Sửa HTML
Bước 2: Các Bạn Chèn Đoạn Code Dưới Này Trước Thẻ
]]></b:skin>.tabs{background:#fff;width:100%;max-width:100%;float:none;list-style:none;padding:0;margin:auto;display:table;overflow:hidden}
.tabs-st{background:#eee;display:block;height:45px}
.tabs:after{content:'';display:table;clear:both}
.tabs input[type=radio]{display:none}
.tabs label{display:table-cell;float:left;width:25%;color:#555;font-size:19px;font-weight:400;text-align:center;cursor:pointer;transition:all .3s;height:45px;line-height:45px;text-transform:uppercase;margin-right:10px;background:linear-gradient(135deg,#ffffff 0%,#ffffff 70%,#F2F2F2 30%,#F2F2F2 30%,#F2F2F2 100%)}
.more-tabs{width:21.1%;float:right;height:45px;margin:-45px 0 0;line-height:45px;font-size:25px;text-align:center;background:linear-gradient(135deg,#ffffff 0%,#ffffff 70%,#F2F2F2 30%,#F2F2F2 30%,#F2F2F2 100%)}
.more-tabs a{color:#555}
.more-tabs a:hover{color:#52537d}
.tabs label span{display:inline-block}
.tabs label i{margin-right: 5px;height:45px;line-height:45px}
.tabs label:hover{color:#52537d}
.tabs label:focus{color:#fff}
.tab-content{display:none;width:100%;float:left}
.tab-content *{-webkit-animation:showx .5s ease-in-out;-moz-animation:showx .5s ease-in-out;animation:showx .5s ease-in-out}
.tabs [id^="tab"]:checked + label{color:#fff;background:#52537d}
#tab1:checked ~ #tab-content1,#tab2:checked ~ #tab-content2,#tab3:checked ~ #tab-content3{display:block;background:#eee}
@media screen and (max-width:768px){
.tabs label{width:23.4%}
.tabs label span{display:none}
}
.widget-home img{float:left;clear:both;object-fit:cover;transition:.33s;margin:0 0 6px 0}
.widget-home img:hover{-webkit-filter:brightness(80%)}
.widget-home{overflow:hidden}
#widget-00 .featuredPost a:hover {color:rgba(234, 25, 25, 0.77)}
#widget-0 .featuredPost a:hover {color:rgb(255, 153, 0)}
.widget-home a{color:#555;text-decoration:none;line-height: normal;}
.widget-home a:hover{color:#0087be}
.widget-homewrap{margin-top:10px;overflow:hidden}
Bước 3: Chèn đoạn code này dưới thẻ
<b:includable id='main' var='top'><b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='tabs'>
<div class='tabs-st'>
<input checked='' id='tab1' name='tabs' type='radio'/>
<label for='tab1'><i class='fa fa-picture-o'/><span>ẢNH BÌA</span>
</label>
<input id='tab2' name='tabs' type='radio'/>
<label for='tab2'><i class='fa fa-facebook-official'/><span>Facebook</span>
</label>
<input id='tab3' name='tabs' type='radio'/>
<label for='tab3'><i class='fa fa-html5'/><span>BLOGSPOT</span>
</label>
<!-- Tab 1 -->
<div class='tab-content' id='tab-content1'>
<span class='more-tabs'><a href='/search/label/PSD?max-results=9' title='Xem thêm'><i class='fa fa-arrow-right'/></a></span>
<div class='widget-home'>
<div class='widget-homewrap'>
<div class='widget-homesplitone'>
<script> document.write("<script src=\"/feeds/posts/default/-/PSD?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>"); </script>
</div>
</div>
</div>
</div>
<!-- Tab 2 -->
<div class='tab-content' id='tab-content2'>
<span class='more-tabs'><a href='/search/label/Thủ%20Thuật%20Facebook?max-results=9' title='Xem thêm'><i class='fa fa-arrow-right'/></a></span>
<div class='widget-home'>
<div class='widget-homewrap'>
<div class='widget-homesplitone'>
<script> document.write("<script src=\"/feeds/posts/default/-/Thủ%20Thuật%20Facebook?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>"); </script>
</div>
</div>
</div>
</div>
<!-- Tab 3 -->
<div class='tab-content' id='tab-content3'>
<span class='more-tabs'><a href='/search/label/Thủ%20Thuật%20Blogspot' title='Xem thêm'><i class='fa fa-arrow-right'/></a></span>
<div class='widget-home'>
<div class='widget-homewrap'>
<div class='widget-homesplitone'>
<script> document.write("<script src=\"/feeds/posts/default/-/Thủ%20Thuật%20Blogspot?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>"); </script>
</div>
</div>
</div>
</div>
</div>
</div>
</b:if>
Chúc các bạn thành công!!!