Pasang Featured Post by Lable di Blog-Mu
Hay sahabat online ku, kali ini saya akan membagikan sedikit tutolian yang mungkin saja bermanfaat bagi para Bloggers pemula seperti saya, untuk mempermudah para pengunjung mengetahu isi dari blog kita berdasarkan lable dengan lebih menarik. Perlu diketahui bahwa widget yang saya bagikan ini cukup ringan sehingga tidak akan menghambat kinerja dari sobat sekalian. Bagi yang penasaran dengan widgetnya, mari kita simak tutorial dibawah ini ya sob.
Langkah pertama yang harus dilakukan pastikan bahwa kamu sudah login di Bloggers > Klik menu Tema dan Edit HTML > Lalu tambahkan kode dibawah ini sebelum Kode </head>
<b:if cond='data:view.isHomepage'>
<style type='text/css'>
/* Featured */
#featured-wrapper{padding:0 20px 0 0}
.featured{color:#666;line-height:1.4em;margin:0;padding:0}
.featured ul{list-style:none;margin:0;padding:0}
.featured li{margin:0;padding:0;line-height:1.4em}
.featured .widget{padding:0;margin:0 0 20px}
ul.tech_thumbs{margin:0;padding:0}
ul.tech_thumbs li{margin:0 0 1px;padding:0}
ul.tech_thumbs .tech_box{background:#050505;position:relative;margin:0;padding:0;overflow:hidden;width:100%;height:auto}
span.tech_title a{left:0;bottom:0;position:absolute;margin:0;padding:20px 30px;height:auto;line-height:1.2em;color:#fff}
span.tech_title2 a{left:0;top:0;position:absolute;margin:0;padding:15px 30px;height:auto;line-height:1.4em;color:#fff}
ul.tech_thumbs p,ul.tech_thumbs2 p{line-height:1.2em;color:#eee;margin:8px 0 0;padding:0;font-size:12px;font-weight:400;text-transform:none;letter-spacing:normal}
span.tech_title a:hover,span.tech_title2 a:hover,span.tech_title3 a:hover{text-decoration:none}
ul.tech_thumbs .tech_box img{height:auto;width:100%;opacity:.6;transition:all .5s ease}
ul.tech_thumbs .tech_box:hover img{opacity:.5}
ul.tech_thumbs2,ul.tech_thumbs3{margin:0;padding:0}
ul.tech_thumbs2 li{float:left;margin:0 1px 1px 0;padding:0}
ul.tech_thumbs2:nth-child(odd) li{margin:0 0 1px 0}
ul.tech_thumbs2 .tech_box2{background:#050505;position:relative;margin:0;overflow:hidden;width:313.9px;height:170px}
ul.tech_thumbs2 .tech_box2 img{opacity:.5;width:100%;height:100%;transition:all .5s ease}
ul.tech_thumbs2 .tech_box2:hover img{opacity:.3}
span.tech_title{font-size:24px;font-weight:500;margin:0;padding:0;letter-spacing:1px}
span.tech_title2{font-size:16px}
@media screen and (max-width:768px){
#featured-wrapper{padding:0;margin:0 auto 10px auto;overflow:hidden}
ul.tech_thumbs2{display:none}}
</style>
<script type='text/javascript'>
//<![CDATA[
function labelthumbs(e){for(h=0;h<numtech;h++){f=(o=e.feed.entry[h]).title.$t;if(h==e.feed.entry.length)break;for(m=0;m<o.link.length;m++){if("replies"==o.link[m].rel&&"text/html"==o.link[m].type)o.link[m].title,o.link[m].href;if("alternate"==o.link[m].rel){u=o.link[m].href;break}}var t;try{t=o.media$thumbnail.url,t=t.replace("/s72-c/","/w"+box_width+"-h"+box_height+"-c/")}catch(e){s=o.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),t=-1!=a&&-1!=b&&-1!=c&&""!=d?d:no_box}var i=(x=o.published.$t).substring(0,4),r=x.substring(5,7),n=x.substring(8,10),l=new Array;l[1]="January",l[2]="February",l[3]="March",l[4]="April",l[5]="May",l[6]="June",l[7]="July",l[8]="August",l[9]="September",l[10]="October",l[11]="November",l[12]="December",document.write('<ul class="tech_thumbs">'),document.write("<li>"),document.write('<div class="tech_box"><a href="'+u+'"><img width="'+box_width+'" height="'+box_height+'" alt="'+f+'" src="'+t+'"/></a><span class="tech_title"><a href="'+u+'" target ="_top">'+f+"<p>"+l[parseInt(r)]+" "+n+", "+i+" </p></a></span></div>"),document.write("</li>"),document.write("</ul>")}for(h=1;h<numtech2;h++){f=(o=e.feed.entry[h]).title.$t;if(h==e.feed.entry.length)break;for(m=1;m<o.link.length;m++){if("replies"==o.link[m].rel&&"text/html"==o.link[m].type)o.link[m].title,o.link[m].href;if("alternate"==o.link[m].rel){u=o.link[m].href;break}}try{g=o.media$thumbnail.url.replace("/s72-c/","/w"+box_width2+"-h"+box_height2+"-c/")}catch(e){s=o.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),g=-1!=a&&-1!=b&&-1!=c&&""!=d?d:no_box2}var i=(x=o.published.$t).substring(0,4),r=x.substring(5,7),n=x.substring(8,10);document.write('<ul class="tech_thumbs2">'),document.write("<li>"),document.write('<div class="tech_box2"><a href="'+u+'"><img width="'+box_width2+'" height="'+box_height2+'" alt="'+f+'" src="'+g+'"/></a><span class="tech_title tech_title2"><a href="'+u+'" target ="_top">'+f+" <p>"+l[parseInt(r)]+" "+n+", "+i+"</p></a></span></div>"),document.write("</li>"),document.write("</ul>")}};
var numtech=1,numtech2=3,box_width=629,box_height=350,box_width2=314,box_height2=170;
var no_box = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjENxtNz6TqyLZC7kWzBpONsI6GiXAmtByRMJtWqP3yqmKiHpqs3gmtJPenSq_HqMgrDR50QIdkDy5_ni_FE0UBbxCWHdkb2q1dQB5YKeH3V4o3-WMfbHWkLpvGuYOltReWgBlGaDCAvuM/s1600/tech1.jpg';
var no_box2 = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj50MVtdcj9f7ln4xs2mMuSFl-Be4T9oxh5ngLxwymT6-o04YHN7Qpw5GZcaR-TtY-L5mdBSLtGcR4jpDA_yhysnOjlEBnKb1IzSx1td0kMNqYfXhDm7ypi01oRcvjD7kU7eY19Yceiw44/s1600/tech2.jpg';
//]]>
</script>
</b:if>Pastikan untuk box_width=629 box_height=350 box_width2=314 dan box_height2=170 untuk tinggi dan lebarnya sesuaikan dengan template sobat masing-masing ya.
Lalu jika telah selesai, silahkan tambah kode pemanggilnya, tambahkan kode dibawah ini dimanapun selama masih didalam <body> dan </body>
<b:if cond='data:view.isHomepage'>
<div id='featured-wrapper'>
<b:section class='featured' id='featured' maxwidgets='1' showaddelement='yes'>
<b:widget id='HTML200' locked='false' title='' type='HTML' version='1'>
<b:widget-settings>
<b:widget-setting name='content'>Featured</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<script>
document.write("<script src=\"/feeds/posts/default/-/<data:content/>?orderby=published&alt=json-in-script&callback=labelthumbs\"><\/script>");
</script>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
</b:if>Lalu klik tombol Simpan Tema lalu kembali ke Dashboard Blog kemudian klik Tata Letak cari tulisan Featured kemudian klik Edit pada widget Featured. Kemudian pada bagian konten ubah tulisan Featured sesuai dengan nama Label yang ingin dimunculkan.
Selesai. Klik tombol dibawah ini untuk melihat hasilnya.
Mungkin hanya ini yang dapat saya bagikan hari ini, terima kasih kepada sobat online yang telah membaca artikel ini dan jika terdapat kesalahan dalam penulisan saya mohon maaf. Jika ada yang ingin ditanyakan atau ada saran maupun masukan terkait blog ini silahkan tinggalkan di kolom komentar, kritik dan saran sangat dibutuhkan untuk memperbaiki blog ini kedepannya. Sampai jumpa diartikel selanjutnya.
image quote pre code