Cara Memasang Featured Post by Label di Blog
Snippet Tips Blogger Widget
Widget yang akan saya bagikan ini bisa Anda gunakan untuk menandai postingan apa yang ingin ditampilkan pada halaman utama blog dan widget ini cukup ringan untuk digunakan.
Bagi yang penasaran untuk mencobanya, simak caranya di bawah ini.
Cara Memasang Featured Post by Label di Blog
Pertama login ke Blogger > Klik menu Tema dan Edit HTML > Kemudian tambahkan kode di bawah ini tepat 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://2.bp.blogspot.com/-hJCmymH_jbk/WmpmjvEx2nI/AAAAAAAABqI/mwD8HQPUjI8OfBNfJ8CniDVD40bnPAMswCLcBGAs/s1600/tech1.jpg';
var no_box2 = 'https://2.bp.blogspot.com/-MfOI67FUg6Q/WmpmjW8Ml5I/AAAAAAAABqE/8GdkCFEZEIkwplEXubzxtaKUvs9CyK9NwCLcBGAs/s1600/tech2.jpg';
//]]>
</script>
</b:if>Perhatikan kode yang ditandai, untuk box_width=629 box_height=350 box_width2=314 dan box_height2=170 tinggi dan lebarnya sesuaikan dengan template yang Anda gunakan.
Kemudian untuk kode pemanggilnya, tambahkan kode di bawah ini bebas dimanapun selama masih di dalam <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>Contohnya seperti gambar di bawah ini yang ditambahkan di markup post di atas Blog1
<div class='site-mainku' id='mainku' role='main'>
...
...
<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>
...
...
<b:section class='mainblogsec' id='mainblogsec' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog' version='1'>Klik tombol Simpan tema setelah itu klik menu Tata Letak (refresh halaman) di dasbor Blogger > Klik edit pada widget featured
Kemudian ganti nama label Featured dengan nama label yang ingin dimunculkan.
Selesai.
Klik tombol Result di bawah ini untuk melihat hasilnya
Demikian dari Namina untuk Cara Memasang Featured Post by Label di Blog, terima kasih sudah berkunjung dan semoga bermanfaat.