demo văn dũng: TẠO WIDGET HIỂN THỊ BÀI ĐĂNG DẠNG TAB

loading...

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:&#39;&#39;;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{background:#069999;color:#fff}.more-tabs:hover{background:#069999;color:#fff}.tabs label span{display:inline-block}.tabs label i{margin-right: 5px;height:45px;line-height:45px}.tabs label:hover{background:#069999;color:#fff}.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^=&quot;tab&quot;]: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(&quot;&lt;script src=\&quot;/feeds/posts/default/-/PSD?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;); </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(&quot;&lt;script src=\&quot;/feeds/posts/default/-/Thủ%20Thuật%20Facebook?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;); </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(&quot;&lt;script src=\&quot;/feeds/posts/default/-/Thủ%20Thuật%20Blogspot?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;); </script>
</div>
</div>
</div>
</div>
</div>
</div>
</b:if>

 Chúc các bạn thành công!!!

Bài viết được viết bởi: Thế Lợi IT - Copy nhớ ghi nguồn bài viết đó