Tab cho bài đăng theo nhãn ngoài trang chủ.

Bạn muốn tạo bài đăng hiển thị dạng tab ở trang chủ để cho trang chủ mìn sinh động hơn và có thể bấm qua lại giửa các tab với nhau để xem chủ đề khác mà không cần phải chuyển trang web đi đâu.
Dưới đây là hướng dẫn để giúp bạn làm được việc đó.

Dán đoạn CSS bên dưới vào trước ]]></b:skin>

/* tab Post Home */
/* #mainpost{display:none;visibility:hidden} */
.tabs{background:#fff;width:100%;max-width:100%;float:none;list-style:none;padding:0;margin:auto;display:table;overflow:hidden;margin-top:20px}
.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:#00796b}
.tabs label span{display:inline-block}
.tabs label i{margin-right:5px;height:45px;line-height:45px}
.tabs label:hover{color:#00796b}
.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:#1e73be}
#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}}
.title-post0,.title-post1{font-size:18px;padding:10px;font-weight:400;text-transform:uppercase;text-align:left;color:#fff;line-height:normal;margin:0}
.title-post1{background:#337ab7}
.title-post0{background:rgb(250,73,73)}
.title-post2,.title-post1,.title-post3,.title-post4{font-size:18px;padding:10px;font-weight:400;text-transform:uppercase;text-align:left;color:#fff;line-height:normal;margin:0}
.title-post2{background:#1ABC9C}
#widget-22{box-shadow:#1ABC9C inset}
#widget-22 .featuredPost a:hover{color:#00796b}
#widget-2{box-shadow:0 0 0 1px rgb(255,153,0) inset}
#widget-2 .featuredPost a:hover{color:rgb(255,153,0)}
.title-post3{background:#FF4000}
.title-post4{background:#8E44AD}
.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{margin:0 0 10px;overflow:hidden}
.widget-home a{color:#555;text-decoration:none}
.widget-home a:hover{color:#66689c}
.widget-homewrap{margin-top:10px;overflow:hidden}
.widgetsplitone{width:558px;padding:0;margin:0;overflow:hidden}
.widgetsplitone_left{width:100%;padding:0;margin:0;float:left;text-align:left;height:440px;position:relative}
.widgetsplitone_right{width:100%;padding:0;margin:0;float:right}
.featuredPost{margin:0 0 10px;height:80px;padding:0 0 0 10px;background:#fff;display:table;width:70%}
.featuredPost img{margin-right:10px}
.featuredPost a{font-size:16px;font-weight:400;line-height:1.345;display:table-cell;vertical-align:middle;letter-spacing:-.15px;text-transform:uppercase}
.contentstyle p{margin:0;color:#777;font-size:17px;display:none}
.widgetsplitone_left img{position:absolute;top:0;left:0;height:100%}
h5.posttitle{margin:0;padding:0;float:left;text-align:center;bottom:0;left:0;background:#fff;width:100%;box-sizing:border-box;transition:.35s;position:absolute;height:80px}
h5.posttitle a{position:absolute;left:0;top:50%;transform:translate(0,-50%);color:#555;font:400 18px Roboto;letter-spacing:-.15px;line-height:1.5;display:block;width:100%;padding:0 15px;box-sizing:border-box;text-transform:uppercase}
h5.posttitle:hover{background:#00796b!important}
h5.posttitle a:hover{color:#fff!important}
@media screen and (max-width:600px){.widgetsplitone_right{width:100%;margin:15px 0 0 0;padding:0;float:left}.widgetsplitone_left{width:100%}.tabs label span{display:none}.tabs label i{display:block}}
#carousel{width:100%;position:relative;display:block}
#carousel .container{position:relative}
#carousel ul{width:100%;position:relative;margin:0}
#carousel ul li{display:inline;float:left;text-align:center;font-weight:400;font-size:14px;line-height:normal;width:18.6%;margin:0 .7%}
#carousel ul li:hover{-webkit-filter:brightness(80%)}
#carousel ul li a.slider_title{color:#222;display:block;margin-top:5px}
#carousel ul li a.slider_title:hover{color:#FF4000}
#carousel a img{display:block;background:#fff;margin-top:0;width:100%}
#carousel1{width:100%;height:190px;position:relative;display:block;box-shadow:0 0 0 1px #FF4000 inset;padding:10px 2px;margin:0 0 15px}
#carousel1 .container{position:relative}
#carousel1 ul{width:100%;position:relative;margin:0}
#carousel1 ul li{display:inline;float:left;text-align:center;font-weight:400;font-size:14px;line-height:normal;width:18.6%;margin:0 .7%}
#carousel1 ul li:hover{-webkit-filter:brightness(80%)}
#carousel1 ul li a.slider_title{color:#222;display:block;margin-top:5px}
#carousel1 ul li a.slider_title:hover{color:#FF4000}
#carousel1 a img{display:block;background:#fff;margin-top:0;width:100%}
.tab-box-left{width:60%;padding:10px;float:left}
.tab-box-right{width:40%;padding:10px;float:left}
.widgetsplitone_right img{width:30%!important}
@media screen and (max-width:755px){.tab-box-right,.tab-box-left{width:100%}}

Đặt đoạn Javacript vào trước </head>

<script type='text/javascript'>
//<![CDATA[ //
function removeHtmlTag(t, e) {
for (var s = t.split("<"), i = 0; i < s.length; i++) - 1 != s[i].indexOf(">") && (s[i] = s[i].substring(s[i].indexOf(">") + 1, s[i].length));
return s = s.join(""), s = s.substring(0, e - 1)
}
function showrecentposts1(t) {
j = showRandomImg ? Math.floor((imgr.length + 1) * Math.random()) : 0, img = new Array, numposts5 <= t.feed.entry.length ? maxpost = numposts1 : maxpost = t.feed.entry.length;
for (var e = 0; e < maxpost; e++) {
var i, r, n = t.feed.entry[e],
l = n.title.$t;
if (e == t.feed.entry.length) break;
for (var o = 0; o < n.link.length; o++)
if ("alternate" == n.link[o].rel) {
r = n.link[o].href;
break
}
for (var o = 0; o < n.link.length; o++)
if ("replies" == n.link[o].rel && "text/html" == n.link[o].type) {
i = n.link[o].title.split(" ")[0];
break
}
if ("content" in n) var m = n.content.$t;
else if ("summary" in n) var m = n.summary.$t;
else var m = "";
postdate = n.published.$t, j > imgr.length - 1 && (j = 0), img[e] = imgr[j], s = m, a = s.indexOf("<img"), b = s.indexOf('src="', a), c = s.indexOf('"', b + 5), d = s.substr(b + 5, c - b - 5), -1 != a && -1 != b && -1 != c && "" != d && (img[e] = d);
for (var g = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], p = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], f = (postdate.split("-")[2].substring(0, 2), postdate.split("-")[1]), h = (postdate.split("-")[0], 0); h < g.length; h++)
if (parseInt(f) == g[h]) {
f = p[h];
break
}
if (0 == e) {
var u = '<div class="tab-box-left"><div class="widgetsplitone_left"><a href="' + r + '"><img width="100%" height="260px" class="imagefeatured wp-post-image" src="' + img[e] + '"/></a><div class="clear"></div><h5 class="posttitle"><a href="' + r + '">' + l + '</a></h5><div class="contentstyle"><p>' + removeHtmlTag(m, summaryPost) + '...</p></div><div class="clear"></div></div></div><div class="tab-box-right"><div class="widgetsplitone_right">';
document.write(u)
}
if (e > 0 && e < maxpost) {
var u = '<a href="' + r + '"><img class="imagewidgetthumb wp-post-image" height="80" src="' + img[e] + '" width="120"/></a><div class="featuredPost"><a href="' + r + '">' + l + "</a></div>";
document.write(u)
}
j++
}
document.write("</div></div>")
}
function showrecentposts3(t) {
j = showRandomImg ? Math.floor((imgr.length + 1) * Math.random()) : 0, img = new Array;
for (var e = 0; 10 > e; e++) {
var i, r, n = t.feed.entry[e],
l = n.title.$t;
if (e == t.feed.entry.length) break;
for (var o = 0; o < n.link.length; o++)
if ("alternate" == n.link[o].rel) {
r = n.link[o].href;
break
}
for (var o = 0; o < n.link.length; o++)
if ("replies" == n.link[o].rel && "text/html" == n.link[o].type) {
i = n.link[o].title.split(" ")[0];
break
}
if ("content" in n) var m = n.content.$t;
else if ("summary" in n) var m = n.summary.$t;
else var m = "";
postdate = n.published.$t, j > imgr.length - 1 && (j = 0), img[e] = imgr[j], s = m, a = s.indexOf("<img"), b = s.indexOf('src="', a), c = s.indexOf('"', b + 5), d = s.substr(b + 5, c - b - 5), -1 != a && -1 != b && -1 != c && "" != d && (img[e] = d);
for (var g = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], p = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], f = (postdate.split("-")[2].substring(0, 2), postdate.split("-")[1]), h = (postdate.split("-")[0], 0); h < g.length; h++)
if (parseInt(f) == g[h]) {
f = p[h];
break
}
var u = '<li><a href="' + r + '">' + l + "</a></li>";
document.write(u), j++
}
}
function showrecentposts6(t) {
j = showRandomImg ? Math.floor((imgr.length + 1) * Math.random()) : 0, img = new Array;
for (var e = 0; e < numposts; e++) {
var i, r, n = t.feed.entry[e],
l = n.title.$t;
if (e == t.feed.entry.length) break;
for (var o = 0; o < n.link.length; o++)
if ("alternate" == n.link[o].rel) {
r = n.link[o].href;
break
}
for (var o = 0; o < n.link.length; o++)
if ("replies" == n.link[o].rel && "text/html" == n.link[o].type) {
i = n.link[o].title.split(" ")[0];
break
}
if ("content" in n) var m = n.content.$t;
else if ("summary" in n) var m = n.summary.$t;
else var m = "";
postdate = n.published.$t, j > imgr.length - 1 && (j = 0), img[e] = imgr[j], s = m, a = s.indexOf("<img"), b = s.indexOf('src="', a), c = s.indexOf('"', b + 5), d = s.substr(b + 5, c - b - 5), -1 != a && -1 != b && -1 != c && "" != d && (img[e] = d);
for (var g = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], p = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], f = (postdate.split("-")[2].substring(0, 2), postdate.split("-")[1]), h = (postdate.split("-")[0], 0); h < g.length; h++)
if (parseInt(f) == g[h]) {
f = p[h];
break
}
var u = '<a href="' + r + '"><img width="266" height="139" class="imagefeatured wp-post-image" src="' + img[e] + '"/></a><div class="clear"></div><h5 class="posttitle"><a href="' + r + '">' + l + '</a></h5><div class="contentstyle"><p>' + removeHtmlTag(m, summaryPost) + '...</p></div><div class="clear"></div>';
document.write(u), j++
}
}
imgr = new Array, imgr[0] = "#", showRandomImg = !0, aBold = !0, summaryPost = 170, summaryPost1 = 80, summaryTitle = 15, numposts = 1, numposts1 = 5, numposts2 = 4, numposts3 = 6, numposts4 = 1, numposts5 = 6, numposts6 = 10, numposts7 = 10, numposts8 = 6;
eval(function(p, a, c, k, e, d) {
e = function(c) {
return (c < a ? '' : e(parseInt(c / a))) + ((c = c % a) > 35 ? String.fromCharCode(c + 29) : c.toString(36))
};
while (c--) {
if (k[c]) {
p = p.replace(new RegExp('\\b' + e(c) + '\\b', 'g'), k[c])
}
}
return p
}('K(x(p,a,c,k,e,d){e=x(c){u c};A(!\'\'.C(/^/,J)){D(c--){d[c]=k[c]||c}k=[x(e){u d[e]}];e=x(){u\'\\\\w+\'};c=1};D(c--){A(k[c]){p=p.C(M I(\'\\\\b\'+e(c)+\'\\\\b\',\'g\'),k[c])}}u p32|34|||||||||||35|36|56|http|www|title|31|33|58|113|103|102|90|84|105|100|98|97|96|99|52|94|87|88|89|visible|93|95|location|91'.split('|')))
//]]></script>

Dán đoạn code dưới đây vào vị trí muốn hiển thị tab của mình

<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-camera-retro'/><span>PSD</span> </label> <input id='tab2' name='tabs' type='radio'/> <label for='tab2'><i class='fa fa-facebook-square'/><span>Facebook</span> </label> <input id='tab3' name='tabs' type='radio'/> <label for='tab3'><i class='fa fa-html5'/><span>Blogspot</span> </label>
 <div class='tab-content' id='tab-content1'> <span class='more-tabs'><a href='/search/label/Gửi Tiền?max-results=9' title='Xem thêm bài mới'><i class='fa fa-arrow-circle-o-right'/></a></span> <div class='widget-home'> <div class='widget-homewrap'> <div class='widget-homesplitone'> <script> document.write("<script src=\"/feeds/posts/default/-/Tên Nhãn 1?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>"); </script> </div> </div> </div> </div>
 <div class='tab-content' id='tab-content2'> <span class='more-tabs'><a href='/search/label/Tên Nhãn 2?max-results=9' title='Xem thêm máy tính'><i class='fa fa-arrow-circle-o-right'/></a></span> <div class='widget-home'> <div class='widget-homewrap'> <div class='widget-homesplitone'> <script> document.write("<script src=\"/feeds/posts/default/-/Tên Nhãn 2?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>"); </script> </div> </div> </div> </div>
 <div class='tab-content' id='tab-content3'> <span class='more-tabs'><a href='/search/label/Tên Nhãn 3?max-results=9' title='Xem thêm đồ hoạ'><i class='fa fa-arrow-circle-o-right'/></a></span> <div class='widget-home'> <div class='widget-homewrap'> <div class='widget-homesplitone'> <script> document.write("<script src=\"/feeds/posts/default/-/Tên Nhãn 3?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>"); </script> </div> </div> </div> </div> </div> </div>
</b:if>

Thay đổi một số thuộc tính trong CSS để phù hợp với trang blog của bạn.

Nguồn: http://nguyengia2017.blogspot.com

Weekly post

10/5/18

Tab cho bài đăng theo nhãn ngoài trang chủ.

Hãy Để Lại Nhận Xét Của Bạn

Đăng nhận xét

About Me

Welcome!