Cara Menambahkan Label 2 Kolom Terbaru Ala IDBlanter


Cara Menambahkan Label 2 Kolom Terbaru Ala IDBlanter - Hallo sobat blogger semua, gimana kabarnya? Semoga sehat selalu. Pada kesempatan ini saya akan membagikan sebuah tutorial yang membahas tentang cara menambahkan label 2 kolom terbaru ala IDBlanter untuk blogspot.

Apa yang perlu dilakukan?
Langkah Pertama : Temukan tag </head> dan tambahkan js berikut ini dibawahnya.

Javascript


<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script type='text/javascript'>
//<![CDATA[
function labelthumbs(t){document.write('<ul class="label_with_thumbs">');for(var e=0;e<numposts;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if("replies"==n.link[o].rel&&"text/html"==n.link[o].type)var m=n.link[o].title,l=n.link[o].href;if("alternate"==n.link[o].rel){r=n.link[o].href;break}}var u;try{u=n.media$thumbnail.url}catch(t){s=n.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:"http://2.bp.blogspot.com/_IKigl6y9hFA/TMdcT1jzo5I/AAAAAAAAAHA/hAKuT9rJpFU/noimage.jpg"}var h=n.published.$t,p=h.substring(0,4),f=h.substring(5,7),g=h.substring(8,10),w=new Array;if(w[1]="Jan",w[2]="Feb",w[3]="Mar",w[4]="Apr",w[5]="May",w[6]="Jun",w[7]="Jul",w[8]="Aug",w[9]="Sep",w[10]="Oct",w[11]="Nov",w[12]="Dec",document.write('<li class="clearfix">'),1==showpostthumbnails&&document.write('<a href="'+r+'" target ="_top"><img class="label_thumb" src="'+u+'"/></a>'),document.write('<strong><a href="'+r+'" target ="_top">'+i+"</a></strong><br>"),"content"in n)A=n.content.$t;else if("summary"in n)A=n.summary.$t;else var A="";var y=/<\S[^>]*>/g;if(A=A.replace(y,""),1==showpostsummary)if(A.length<numchars)document.write(""),document.write(A),document.write("");else{document.write("");var v=(A=A.substring(0,numchars)).lastIndexOf(" ");A=A.substring(0,v),document.write(A+"..."),document.write("")}var k="",_=0;document.write("<br>"),1==showpostdate&&(k=k+w[parseInt(f,10)]+"-"+g+" - "+p,_=1),1==showcommentnum&&(1==_&&(k+=" | "),"1 Comments"==m&&(m="1 Comment"),"0 Comments"==m&&(m="No Comments"),k+=m='<a href="'+l+'" target ="_top">'+m+"</a>",_=1),1==displaymore&&(1==_&&(k+=" | "),k=k+'<a href="'+r+'" class="url" target ="_top">Read More</a>',_=1),document.write(k),document.write("</li>"),1==displayseparator&&e!=numposts-1&&document.write("")}document.write("</ul>")}
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
function labelthumbs(t){for(var e=0;e<numposts;e++){var r,n=t.feed.entry[e],m=n.title.$t;if(e==t.feed.entry.length)break;for(var i=0;i<n.link.length;i++){if("replies"==n.link[i].rel&&"text/html"==n.link[i].type)var l=n.link[i].title,o=n.link[i].href;if("alternate"==n.link[i].rel){r=n.link[i].href;break}}var u;try{u=n.media$thumbnail.url,u=u.replace("/s72-c/","/w"+thumb_width+"-h"+thumb_height+"-c/")}catch(h){s=n.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=n.published.$t,w=p.substring(0,4),_=p.substring(5,7),f=p.substring(8,10);document.write('<ul class="rp_thumbs">'),document.write("<li>"),1==showpostthumbnails&&document.write('<a href="'+r+'"><div class="rp_thumb"><span class="rollover waves-effect waves-light"></span><img width="'+thumb_width+'" height="'+thumb_height+'" alt="'+m+'" src="'+u+'"/></div></a>'),document.write('<div class="rp_utama"><span class="rp_title"><a href="'+r+'" target ="_top">'+m+"</a></span>");var g="";if(document.write('<span class="rp_meta">'),1==showpostdate&&(g=g+'<span class="rp_meta_date">'+f+"/"+_+"/"+w+"</span>"),1==showcommentnum&&("1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),showcomment='<span class="rp_meta_comment"><a href="'+o+'">'+l+"</a></span>",g+=showcomment),1==displaymore&&(g=g+'<span class="rp_meta_more"><a href="'+r+'" class="url" target ="_top">Read More...</a></span>'),document.write(g),document.write("</span>"),document.write('<span class="rp_summary">'),"content"in n)var v=n.content.$t;else if("summary"in n)var v=n.summary.$t;else var v="";var k=/<\S[^>]*>/g;if(v=v.replace(k,""),1==showpostsummary)if(v.length<numchars)document.write(""),document.write(v),document.write("");else{document.write(""),v=v.substring(0,numchars);var y=v.lastIndexOf(" ");v=v.substring(0,y),document.write(v+"..."),document.write("")}document.write("</span>"),document.write("</div></li>"),document.write("</ul>")}document.write('<ul class="rp_thumbs2">');for(var e=1;e<numposts2;e++){var r,n=t.feed.entry[e],m=n.title.$t;if(e==t.feed.entry.length)break;for(var i=1;i<n.link.length;i++){if("replies"==n.link[i].rel&&"text/html"==n.link[i].type)var l=n.link[i].title,o=n.link[i].href;if("alternate"==n.link[i].rel){r=n.link[i].href;break}}var $;try{$=n.media$thumbnail.url.replace("/s72-c/","/w"+thumb_width2+"-h"+thumb_height2+"-c/")}catch(h){s=n.content.$t,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?d:no_thumb2}var p=n.published.$t,w=p.substring(0,4),_=p.substring(5,7),f=p.substring(8,10);1==showpostthumbnails2&&document.write(''),document.write("<li>"),document.write('<a href="'+r+'"><div class="rp_thumb2"><img width="'+thumb_width2+'" height="'+thumb_height2+'" alt="'+m+'" src="'+$+'"/></div></a><span class="rp_title rp_title2"><a href="'+r+'" target ="_top">'+m+"</a></span>");var g="";document.write('<span class="rp_meta rp_meta2">'),1==showpostdate2&&(g=g+'<span class="rp_meta_date rp_meta_date2">'+f+"/"+_+"/"+w+"</span>"),1==showcommentnum2&&("1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),showcomment='<span class="rp_meta_comment rp_meta_comment2"><a href="'+o+'">'+l+"</a></span>",g+=showcomment),1==displaymore2&&(g=g+'<span class="rp_meta_more rp_meta_more2"><a href="'+r+'" class="url" target ="_top">Read More...</a></span>'),document.write(g),document.write("</span>"),document.write("</li>")}document.write("</ul>")}
//]]>
var numposts=1,numposts2=4,showpostthumbnails=!0,showpostthumbnails2=!0,displaymore=!1,displaymore2=!1,showcommentnum=!1,showcommentnum2=!1,showpostdate=!1,showpostdate2=!1,showpostsummary=!0,numchars=100,thumb_width=325,thumb_height=200,thumb_width2=60,thumb_height2=60,no_thumb=&quot;https://1.bp.blogspot.com/-7vDs5hMaDho/U268E2ecF4I/AAAAAAAADY8/RBHVTTuJrxc/w300-h140-c/no-image.png&quot;,no_thumb2=&quot;https://3.bp.blogspot.com/-ltyYh4ysBHI/U04MKlHc6pI/AAAAAAAADQo/PFxXaGZu9PQ/s60-c/no-image.png&quot;;$(function(){$(&quot;.tabs-1&quot;).mtabs()});
</script>
</b:if>

Langkah Kedua : Tambahkan css berikut ini dibawah tag ]]> </b:skin>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
/* CSS Homepage and Index */
ul.rp_thumbs{margin:0;padding:0;list-style:none}
ul.rp_thumbs li{background:#fff;overflow:hidden;font-size:12px;min-height:68px;margin:0 0 8px;padding:0;box-shadow:0 3px 4px 0 rgba(0,0,0,0.08),0 2px 7px 0 rgba(0,0,0,0.08),0 3px 2px -3px rgba(0,0,0,0.09);border-bottom-left-radius:4px;border-bottom-right-radius:4px}
ul.rp_thumbs .rp_thumb{position:relative;background:#fbfbfb;margin:0;width:100%;height:200px;overflow:hidden}
ul.rp_thumbs .rp_thumb img{height:auto;width:100%;transition:transform .3s}
ul.rp_thumbs2{font-size:13px;margin:0 0 10px;padding:0}
ul.rp_thumbs2 .rp_thumb2{background:#fbfbfb;float:left;margin:3px 8px 0 0;height:60px;width:60px}
ul.rp_thumbs2 .rp_thumb2 img{height:60px;width:60px;border-radius:5px}
.sidebar ul.rp_thumbs li:before,.sidebar ul.rp_thumbs2 li:before,#bottombar ul.rp_thumbs li:before,#bottombar ul.rp_thumbs2 li:before{display:none}
#recent1{margin-right:27px}
#recent2{margin-right:0}
.recent-widget:nth-child(1){margin-right:0}
.recent-widget{width:48%;float:left;margin-top:15px;margin-right:0}
.recent-widget h2 i{float:left;line-height:.8;background:#039be5;color:#fff;padding:5px;margin:-5px 8px -5px -5px;border-radius:5px}
.recent-widget h2{font-size:14px;padding:15px;background:#fff;box-shadow:0 3px 4px 0 rgba(0,0,0,0.08),0 2px 7px 0 rgba(0,0,0,0.08),0 3px 2px -3px rgba(0,0,0,0.09);border-top-right-radius:5px;border-top-left-radius:5px}
.recent-widget h2 a{color:#444;letter-spacing:1px}
span.rp_title{font:normal normal 17px Roboto,Arial,sans-serif;display:block;margin:0 0 5px;line-height:1.5em}
span.rp_title2{font-size:12.5px}
span.rp_summary{display:block;margin:0;color:#555;line-height:1.5;padding:20px 15px;font-size:13px;height:60px}
span.rollover{position:absolute;width:100%;height:200px;background:rgba(20,20,20,0.42);z-index:1}
span.rp_meta{background:transparent;display:block;font-size:11px;font-weight:400;color:#999;text-transform:uppercase}
span.rp_meta a{color:#8D8D8D!important;display:inline-block}
ul.rp_thumbs2 li a:hover{color:#0072C6}
ul.rp_thumbs2 li{list-style:none;min-height:66px;font-size:11px;margin:0 0 8px 2px;background:#fff;padding:10px;border-radius:4px;box-shadow:0 1px 2px 1px rgba(0,0,0,0.07),0 1px 2px 0 rgba(0,0,0,0.09)}
.rp_title2 a{color:#444}
.rp_utama{position:relative}
.rp_utama a{color:#fff;font-weight:500}
.rp_utama .rp_title{position:absolute;top:-64px;left:0;padding:10px 15px;right:0;z-index:1;font-size:14px;letter-spacing:.5px;line-height:1.5}
@media screen and (max-width:684px) {
.recent-widget{width:100%}
}
</style>
</b:if>

Langkah Terakhir : Tambahkan kode di bawah ini di tempat yang ada inginkan.

Ganti Label yang ditandai warna merah dengan label yang sobat inginkan.


<b:if cond='data:blog.url == data:blog.homepageUrl'> <!-- Recent --> <b:section class='recent-widget' id='recent1' preferred='yes'> <b:widget id='HTML2' locked='false' title='' type='HTML'> <b:widget-settings> <b:widget-setting name='content'>&lt;script&gt; document.write(&#39;&lt;div class=&quot;recent-post-title&quot;&gt;&lt;h2&gt;&lt;a href=&quot;/search/label/Blogger?max-results=10&quot;&gt;&lt;i class=&quot;material-icons&quot;&gt;&amp;#xE885;&lt;/i&gt; Tutorial&lt;/a&gt;&lt;/h2&gt;&lt;/div&gt;&#39;); document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/Blogger?orderby=updated&amp;alt=json-in-script&amp;callback=labelthumbs\&quot;&gt;&lt;\/script&gt;&quot;); &lt;/script&gt;</b:widget-setting> </b:widget-settings> <b:includable id='main'> <!-- only display title if it's non-empty --> <b:if cond='data:title != &quot;&quot;'> <h2 class='title'><data:title/></h2> </b:if> <div class='widget-content'> <data:content/> </div> </b:includable> </b:widget> </b:section> <b:section class='recent-widget' id='recent2' preferred='yes'> <b:widget id='HTML3' locked='false' title='' type='HTML'> <b:widget-settings> <b:widget-setting name='content'>&lt;script&gt; document.write(&#39;&lt;div class=&quot;recent-post-title&quot;&gt;&lt;h2&gt;&lt;a href=&quot;/search/label/Template%20Blogger?max-results=10&quot;&gt;&lt;i class=&quot;material-icons&quot;&gt;&amp;#xE87E;&lt;/i&gt; Template&lt;/a&gt;&lt;/h2&gt;&lt;/div&gt;&#39;); document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/Template%20Blogger?orderby=updated&amp;alt=json-in-script&amp;callback=labelthumbs\&quot;&gt;&lt;\/script&gt;&quot;); &lt;/script&gt;</b:widget-setting> </b:widget-settings> <b:includable id='main'> <!-- only display title if it's non-empty --> <b:if cond='data:title != &quot;&quot;'> <h2 class='title'><data:title/></h2> </b:if> <div class='widget-content'> <data:content/> </div> </b:includable> </b:widget> </b:section> </b:if>

Demikian artikel dari saya tentang Cara Menambahkan Label 2 Kolom Terbaru Ala IDBlanter, Semoga artikel yang saya bagikan diatas bermanfaat bagi sobat semua. Terima kasih dan selamat mencoba

0 Response to "Cara Menambahkan Label 2 Kolom Terbaru Ala IDBlanter"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

close