Widget Hiển Thị Bài Viết Theo Label Ở Sidebar

tháng 2 03, 2019

Xin chào các bạn!! Đã lâu mình chưa ra bài một phần vì dạo này mình bận học và một phần là do đang "bí" ý tưởng nên không biết viết gì. Hôm nay mình sẽ chia sẻ cho các bạn Widget Hiển Thị Bài Viết Theo Nhãn mình đã view từ BSW.

Hướng dẫn thực hiện:

#HTML Thêm đoạn code bên dưới vào vị trí bạn muốn hiển thị.

<div id="sidebar-QBB"><div class='rc1-QBB'><script>
document.write("<script src=\"/feeds/posts/default/-/Tên Label?orderby=published&amp;alt=json-in-script&amp;callback=labelthumbsb\"><\/script>");
</script>
<div class='qbb-tl' title='Thủ thuật blogspot'>
<a class='s-more ripple' href='/search/label/Tên Label' >Xem tất cả<i class='fa fa-angle-right'></i></a></div>
</div></div>

Lưu ý: Tên Label chính là tên của label mà bạn muốn hiển thị.
#CSS Thêm css vào trước thẻ

]]></b:skin>

hoặc trong thẻ

<style>

/*Rc post*/ 
#sidebar-QBB h2,#sidebar-QBB h3{color:#666;font-weight:500;font-family:"Roboto",sans-serif;padding:0 0 8px;
font-size:16px;margin:0 0 10px;transition:.3s;border-bottom:1px solid #f0f0f0;text-transform:capitalize} 
#sidebar-QBB li{line-height:normal;margin:0;padding:0;font-size:15px;position:relative} 
#sidebar-QBB .widget{background:#fff;padding:10px;box-sizing:border-box;margin:0 0 20px} 
#sidebar-QBB .widget-content{margin:0} #sidebar-QBB a:link,
#sidebar-QBB a:visited{color:#333;text-decoration:none;font-size:14px;font-weight:500}
 #sidebar-QBB a:hover{color:#2473a5} #sidebar-QBB ul{list-style:none;margin:0;padding:0}
 .rc1-QBB{overflow:hidden;clear:both}
 .rc1-QBB .QBB-rc-_left ul.QBB-rc-_thumbs li a div.cat_thumb img{width:100%;height:auto} 
.rc1-QBB .QBB-rc-_left ul.QBB-rc-_thumbs li 
.QBB-rc-in4 .QBB-rc-_title a{font-size:16px!important;font-weight:700!important;padding:8px 0 0;display:block} 
.rc1-QBB .QBB-rc-_left ul.QBB-rc-_thumbs li .QBB-rc-in4 .QBB-rc-_meta,.rc1-QBB .QBB-rc-_left ul.QBB-rc-_thumbs li .QBB-rc-in4 .rc1-QBB .QBB-rc-_left ul.QBB-rc-_thumbs li .QBB-rc-in4 {margin-left:1px} 
.rc1-QBB .QBB-rc-_left ul.QBB-rc-_thumbs li .QBB-rc-_summary{font-size:14px;font-weight:400;margin:0 0 10px;display:none} 
.rc1-QBB .QBB-rc-_right ul.QBB-rc-_thumbs2{height:300px;overflow:auto;margin:1em 0 0.5em!important}
 .rc1-QBB .QBB-rc-_right ul.QBB-rc-_thumbs2 li a div.cat_thumb2 img{width:120px;height:70px;float:left;margin:0 10px 0 0;border-radius:4px}
 .rc1-QBB .QBB-rc-_right ul.QBB-rc-_thumbs2 li .QBB-rc-_meta{display:none} .rc1-QBB .QBB-rc-_title a{display:-webkit-box;overflow:hidden;-webkit-line-clamp:3;-webkit-box-orient:vertical;text-overflow:ellipsis;padding:2px 0 0;line-height:1.4} 
.rc1-QBB .QBB-rc-_right li{margin:0 0 10px!important;overflow:hidden} .rc1-QBB .QBB-rc-_right ul.QBB-rc-_thumbs2::-webkit-scrollbar{width:0} .rc1-QBB .QBB-rc-_right ul.QBB-rc-_thumbs2:hover::-webkit-scrollbar{width:4px}
 .rc1-QBB .QBB-rc-_right ul.QBB-rc-_thumbs2::-webkit-scrollbar-thumb{background:#dedede} .rc1-QBB .QBB-rc-_right ul.QBB-rc-_thumbs2::-webkit-scrollbar-thumb:active{background:#999} 
.rc1-QBB .s-more{display:table;text-align:right;font-size:14px!important;color:#666!important;background:#f1f3f5;padding:5px 16px;border-radius:100px;text-transform:lowercase;margin:auto}
 .rc1-QBB .s-more .splash-wrapper{border-radius:100px} .rc1-QBB .s-more i{margin:0 0 0 6px} #sidebar-QBB{padding:6px;}

#JS Các bạn có thể thêm đoạn JS bên dưới vào trước thẻ

</head>

hoặc

</body>

đều được.

<script type='text/javascript'>
//<![CDATA[
// Recent post home QBB
function labelthumbsb(t) { for (var e = 0; e < numposts5; e++) { var n, r = t.feed.entry[e], m = r.title.$t; if (e == t.feed.entry.length) break; for (var i = 0; i < r.link.length; i++) 
{ if ("replies" == r.link[i].rel && "text/html" == r.link[i].type) var l = r.link[i].title, o = r.link[i].href; if ("alternate" == r.link[i].rel) 
{ n = r.link[i].href; break } } var u; try { u = r.media$thumbnail.url, u = u.replace("/s72-c/", "/w" + thumb_width + "-h" + thumb_height + "-c/") }
catch (h) { s = r.content.$t, a = s.indexOf("<img"), b = s.indexOf('src="', a), c = s.indexOf('"', b + 5), d = s.substr(b + 5, c - b - 5), u = -1 != a && -1 != b && -1 != c && "" != d ? d : no_thumb }
var p = r.published.$t, w = p.substring(0, 4), _ = p.substring(5, 7), f = p.substring(8, 10), g = new Array; g[1] = "Tháng 1", g[2] = "Tháng 2", g[3] = "Tháng 3", g[4] = "Tháng 4", g[5] = "Tháng 5", g[6] = "Tháng 6", g[7] = "Tháng 7", g[8] = "Tháng 8", g[9] = "Tháng 9", g[10] = "Tháng 10", g[11] = "Tháng 11", g[12] = "Tháng 12", document.write('<span class="QBB-rc-_left">'), document.write('<ul class="QBB-rc-_thumbs">'), document.write("<li>"), 1 == showpostthumbnails && document.write('<a href="' + n + '"><div class="cat_thumb"><span class="rollover"></span><img width="' + thumb_width + '" height="' + thumb_height + '" alt="' + m + '" src="' + u + '"/></div></a>'), document.write('<div class="QBB-rc-in4"><span class="QBB-rc-_title"><a href="' + n + '" target ="_top">' + m + "</a></span>"); var v = ""; if (document.write('<span class="QBB-rc-_meta">'), 1 == showpostdate && (v = v + '<span class="QBB-rc-_meta_date">' + f + " " + g[parseInt(_)] + ", " + w + "</span>"), 1 == showcommentnum && ("1 Comments" == l && (l = "1 Comments"), "0 Comments" == l && (l = "0 Comments"), showcomment = '<!--<a href="' + o + '">' + l + "</a>--></span>", v += showcomment), 1 == displaymore && (v = v + '<span class="QBB-rc-_meta_more"><a href="' + n + '" class="url" target ="_top">Read More...</a></span>'), document.write(v), document.write("</span>"), document.write('<span class="QBB-rc-_summary">'), "content" in r) var y = r.content.$t; else if ("summary" in r) var y = r.summary.$t; else var y = ""; var k = /<\S[^>]*>/g; if (y = y.replace(k, ""), 1 == showpostsummary) if (y.length < numchars) document.write(""), document.write(y), document.write(""); else { document.write(""), y = y.substring(0, numchars); var $ = y.lastIndexOf(" "); y = y.substring(0, $), document.write(y + "..."), document.write("") } document.write("</span></div>"), document.write("</li>"), document.write("</ul>"), document.write("</span>") } document.write('<span class="QBB-rc-_right">'), document.write('<ul class="QBB-rc-_thumbs2">'); for (var e = 1; e < numposts2; e++) { var n, r = t.feed.entry[e], m = r.title.$t; if (e == t.feed.entry.length) break; for (var i = 1; i < r.link.length; i++) { if ("replies" == r.link[i].rel && "text/html" == r.link[i].type) var l = r.link[i].title, o = r.link[i].href; if ("alternate" == r.link[i].rel) { n = r.link[i].href; break } } var x; try { x = r.media$thumbnail.url.replace("/s72-c/", "/w" + thumb_width2 + "-h" + thumb_height2 + "-c/") } catch (h) { s = r.content.$t, a = s.indexOf("<img"), b = s.indexOf('src="', a), c = s.indexOf('"', b + 5), d = s.substr(b + 5, c - b - 5), x = -1 != a && -1 != b && -1 != c && "" != d ? d : no_thumb2 } var p = r.published.$t, w = p.substring(0, 4), _ = p.substring(5, 7), f = p.substring(8, 10); 1 == showpostthumbnails2 && document.write('<li><a href="' + n + '"><div class="cat_thumb2"><img width="' + thumb_width2 + '" height="' + thumb_height2 + '" alt="' + m + '" src="' + x + '"/></div></a>'), document.write(""), document.write('<div class="QBB-inf4"><span class="QBB-rc-_title QBB-rc-_title2"><a href="' + n + '" target ="_top">' + m + "</a></span>"); var v = ""; document.write('<span class="QBB-rc-_meta QBB-rc-_meta2">'), 1 == showpostdate2 && (v = v + '<span class="QBB-rc-_meta_date">' + f + " " + g[parseInt(_)] + ", " + w + "</span>"), 1 == showcommentnum2 && ("1 Comment" == l && (l = "1 Comments"), "0 Comment" == l && (l = "0 Comments"), showcomment = '<a href="' + o + '">' + l + "</a></span>", v += showcomment), 1 == displaymore2 && (v = v + '<span class="QBB-rc-_meta_more QBB-rc-_meta_more2"><a href="' + n + '" class="url" target ="_top">Read More...</a></span>'), document.write(v), document.write("</span>"), document.write("</div></li>") } document.write("</ul>"), document.write("</span>") }
//]]>
</script>
<script type='text/javascript'>
// Recent Posts home QBB
var numposts5=1,numposts2=10,showpostthumbnails=!0,showpostthumbnails2=!0,displaymore=!1,displaymore2=!1,showcommentnum=!0,showcommentnum2=!0,showpostdate=!0,showpostdate2=!0,showpostsummary=!0,numchars=155,thumb_width=500,thumb_height=250,thumb_width2=260,thumb_height2=130,no_thumb=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDyRhNV4NCdvciQO_0Y_-OobwBPhLpJf1Ls_sGxT8LN5kgwxEMbYKy_biTemshnGK53Ul2vuHkiHzdw9Af02wdjANu2jOjzkOC4l0yq1kPE8_0N06CrSI6Ia_nnp4ZDVRTTuDNo_BuV5A/s1600/THUM.jpg&quot;,no_thumb2=&quot; https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDyRhNV4NCdvciQO_0Y_-OobwBPhLpJf1Ls_sGxT8LN5kgwxEMbYKy_biTemshnGK53Ul2vuHkiHzdw9Af02wdjANu2jOjzkOC4l0yq1kPE8_0N06CrSI6Ia_nnp4ZDVRTTuDNo_BuV5A/s1600/THUM.jpg&quot;;
</script>

lời kết

Chỉ đơn giản vậy thôi là bạn đã có một widget làm tăng thêm phần chuyên nghiệp cho blog của mình rồi.
Sắp tới mình sẽ có Event share Template QuocBaoBlogv5 hy vọng sẽ được các bạn ủng hộ!!