Bảo trợ bởi

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

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

B1: 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ị.


B2: 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;}

B3: 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://2.bp.blogspot.com/-rXnQfJ6w3A4/W3FvWd56SoI/AAAAAAAABPU/MNpFfu5gpesXTXIzLfS2a_JfrQCQLmMlwCLcBGAs/s1600/THUM.jpg&quot;,no_thumb2=&quot; https://2.bp.blogspot.com/-rXnQfJ6w3A4/W3FvWd56SoI/AAAAAAAABPU/MNpFfu5gpesXTXIzLfS2a_JfrQCQLmMlwCLcBGAs/s1600/THUM.jpg&quot;; </script>

#BSW
Được xuất bản bởi Quốc Bảo Blog

Bình luận

XEM NHIỀU TRONG TUẦN

Bạn có thể quan tâm