Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Membuat Recent Post dengan Thumbanil di Template Blogger versi Non-AMP

Cara Membuat Recent Post dengan Thumbanil di Template Blogger versi Non-AMP

Recent post ini bisa kamu pasang di template blogger versi non-amp, selain itu recent post yang saya buat ini juga menggunakan thumbanil dimana tampilannya akan terlihat lebih keren dari pada yang lain.

Baca juga: Cara Membuat Slider Featured Images di Blogger

Bagi kamu yang suka utak-atik template blogger agar menjadi lebih keren, maka wigdet recent post ini adalah sebagai bahan yang pas untuk memenuhi keinginan kamu dalam hal mendesain tema blog.

Cara Memasang Recent Post by Label Menggunakan Thumbanil


Buka Blogger > Template > Edit HTML > Salin kode CSS dibawah ini
.recent-post-title{background:#fff;margin:0 0 15px;padding:0;position:relative;border-bottom:0}.recent-post-title h2{font-family:"Roboto,Arial,Sans-serif";height:17px;line-height:17px;margin:0;padding:7px 12px 4px;background:#222;color:#fff;display:none;border:0;text-transform:uppercase}.recent-post-title h2 a{color:#fff}.recent-post-one-thumb{margin-left:-24px;margin-right:-24px}.recent-post-one-thumb .widget{display:block;min-height:1px;float:left;padding-right:24px;padding-left:24px;width:50%;box-sizing:border-box}.recent-post-one-thumb .widget-content{background:#fff;border:0;padding:0}.recent-post-one-thumb ul{list-style-type:none;margin:0;padding:0}ul.rp_thumbs{margin:0}ul.rp_thumbs li{font-size:12px;min-height:68px;margin:0 0 8px;padding:0 0 8px;border:0}ul.rp_thumbs .rp_thumb{position:relative;background:#fbfbfb;margin:3px 0 10px 0;width:100%;height:0;padding-bottom:46%;overflow:hidden}ul.rp_thumbs .rp_thumb img{height:auto;width:100%}ul.rp_thumbs2{font-size:13px}ul.rp_thumbs2 li{min-height:76px;font-size:11px;margin-bottom:6px;padding-left:116px;border:0}ul.rp_thumbs2 .rp_thumb2{float:left;margin:3px 8px 0 0;height:70px;width:100px}ul.rp_thumbs2 .rp_thumb2 img{height:70px;width:100px}span.rp_title{font:400 21px Roboto,Helvetica,Arial,sans-serif;display:block;margin:0 0 6px;line-height:25px}span.rp_title a{color:#111}span.rp_title2{font-size:14px;font-weight:500}span.rp_summary{font-size:13px;color:#777;display:block;margin-top:9px;font-family:open sans,arial,sans-serif}span.rp_meta{background:transparent;display:block;font-size:11px;font-weight:400;color:#aaa}span.rp_meta a{color:#aaa!important;display:inline-block}span.rp_meta_date,span.rp_meta_comment,span.rp_meta_more{font-weight:400;display:inline-block;margin-right:8px}ul.rp_thumbs2 li a:hover,ul.rp_thumbs li a:hover,a.posts-link:hover{color:#4caf50!important}
Letakan kode CSS ini tepat dibagian atas kode ]]></b:skin> atau </style>

Lalu, salin lagi kode JavaScript dibawah ini.
<script type='text/javascript'>
//<![CDATA[
function labelthumbs(v){for(var u=0;u<numposts;u++){var f=v.feed.entry[u];var g=f.title.$t;var y;if(u==v.feed.entry.length){break}for(var r=0;r<f.link.length;r++){if(f.link[r].rel=="replies"&&f.link[r].type=="text/html"){var m=f.link[r].title;var n=f.link[r].href}if(f.link[r].rel=="alternate"){y=f.link[r].href;break}}var h;try{h=f.media$thumbnail.url;h=h.replace("/s72-c/","/w"+thumb_width+"-h"+thumb_height+"-c/")}catch(q){s=f.content.$t;a=s.indexOf("<img");b=s.indexOf('src="',a);c=s.indexOf('"',b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){h=d}else{h=no_thumb}}var w=f.published.$t;var l=w.substring(0,4);var j=w.substring(5,7);var t=w.substring(8,10);document.write('<ul class="rp_thumbs">');document.write("<li>");if(showpostthumbnails==true){document.write('<a href="'+y+'"><div class="rp_thumb"><span class="rollover"></span><img width="'+thumb_width+'" height="'+thumb_height+'" alt="'+g+'" src="'+h+'"/></div></a>')}document.write('<span class="rp_title"><a href="'+y+'" target ="_top">'+g+"</a></span>");var z="";document.write('<span class="rp_meta">');if(showpostdate==true){z=z+'<span class="rp_meta_date">'+t+"/"+j+"/"+l+"</span>"}if(showcommentnum==true){if(m=="1"){m="1"}if(m=="0"){m="0"}m='<span class="rp_meta_comment"><a href="'+n+'" target ="_top">'+m+"</a></span>";z=z+m}if(displaymore==true){z=z+'<span class="rp_meta_more"><a href="'+y+'" class="url" target ="_top">Read More...</a></span>'}document.write(z);document.write("</span>");document.write('<span class="rp_summary">');if("content" in f){var x=f.content.$t}else{if("summary" in f){var x=f.summary.$t}else{var x=""}}var o=/<\S[^>]*>/g;x=x.replace(o,"");if(showpostsummary==true){if(x.length<numchars){document.write("");document.write(x);document.write("")}else{document.write("");x=x.substring(0,numchars);var e=x.lastIndexOf(" ");x=x.substring(0,e);document.write(x+"...");document.write("")}}document.write("</span>");document.write("</li>");document.write("</ul>")}document.write('<ul class="rp_thumbs2">');for(var u=1;u<numposts2;u++){var f=v.feed.entry[u];var g=f.title.$t;var y;if(u==v.feed.entry.length){break}for(var r=1;r<f.link.length;r++){if(f.link[r].rel=="replies"&&f.link[r].type=="text/html"){var m=f.link[r].title;var n=f.link[r].href}if(f.link[r].rel=="alternate"){y=f.link[r].href;break}}var p;try{p=f.media$thumbnail.url.replace("/s72-c/","/w"+thumb_width2+"-h"+thumb_height2+"-c/")}catch(q){s=f.content.$t;a=s.indexOf("<img");b=s.indexOf('src="',a);c=s.indexOf('"',b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){p=d}else{p=no_thumb2}}var w=f.published.$t;var l=w.substring(0,4);var j=w.substring(5,7);var t=w.substring(8,10);if(showpostthumbnails2==true){document.write('<a href="'+y+'"><div class="rp_thumb2"><img width="'+thumb_width2+'" height="'+thumb_height2+'" alt="'+g+'" src="'+p+'"/></div></a>')}document.write("<li>");document.write('<span class="rp_title rp_title2"><a href="'+y+'" target ="_top">'+g+"</a></span>");var z="";document.write('<span class="rp_meta rp_meta2">');if(showpostdate2==true){z=z+'<span class="rp_meta_date rp_meta_date2">'+t+"/"+j+"/"+l+"</span>"}if(showcommentnum2==true){if(m=="1"){m="1"}if(m=="0"){m="0"}m='<span class="rp_meta_comment rp_meta_comment2"><a href="'+n+'" target ="_top">'+m+"</a></span>";z=z+m}if(displaymore2==true){z=z+'<span class="rp_meta_more rp_meta_more2"><a href="'+y+'" class="url" target ="_top">Read More...</a></span>'}document.write(z);document.write("</span>");document.write("</li>")}document.write("</ul>")};
//]]>
</script>
<script type='text/javascript'>
var numposts = 1;
var numposts2 = 3;
var showpostthumbnails = true;
var showpostthumbnails2 = true;
var displaymore = false;
var displaymore2 = false;
var showcommentnum = false;
var showcommentnum2 = false;
var showpostdate = true;
var showpostdate2 = true;
var showpostsummary = true;
var numchars = 150;
var thumb_width = 326;
var thumb_height = 160;
var thumb_width2 = 100;
var thumb_height2 = 70;
var no_thumb = &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg55shroOhWqxXwCUt6_ds0JZzMkOZ2R4-fMOayTHG3VCZFittkGOSXe1UUf12vFifK__ayA6EZ1QEzGEwzmYET2VzTM1GmuuXdc1AxVMxh94dG0Ybqqj8IO1kdwfeqAPXuE9pUlPbDBGba/w300-c-h140/no-image.png&quot;;
var no_thumb2 = &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS0ET_wdO7_chniyoE5KG7LHbLdAJjP71A1ouF2JGz_0-T250AFJqfFpCJDVIVw9icWCcBHeky-HDUx5IkGgZvGGo0NBehvfgPZwgQnTV6fnRMVu7I_7RdmSJZs9WtnvYrLZXJ_n1f9LwD/s60-c/no-image.png&quot;;
</script>
Letakan kode JavaScript ini dibagian atas kode </head> atau </body>

Nah ini bagian yang sulit, karena setiap template memiliki struktur kode berbeda-beda. Tapi biasanya untuk meletakan kode wigdet HTML ini kebanyakan kebagian area kode wrapper / post-wrapper template.

Salin kode wigdet HTML dibawah ini.
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<b:if cond='data:blog.searchLabel'><b:else/>
<b:section class='recent-post-one-thumb' id='recent-post-one-thumb-5' maxwidgets='1' preferred='yes' showaddelement='no'>
<b:widget id='HTML84' locked='false' mobile='yes' title='News Sport' type='HTML' version='1'>
<b:widget-settings>
<b:widget-setting name='content'>Sport</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<div class='widget-content recent-posts'>
<script>document.write(&#39;&lt;div class=&quot;recent-post-title&quot;&gt;&lt;h2&gt;&lt;a href=&quot;/search/label/<data:content/>?max-results=10&quot;&gt;<data:title/>&lt;/a&gt;&lt;/h2&gt;&lt;/div&gt;&#39;);document.write(&#39;&lt;script src=&quot;/feeds/posts/default/-/<data:content/>?orderby=updated&amp;alt=json-in-script&amp;callback=labelthumbs&quot;&gt;&lt;\/script&gt;&#39;);</script>
</div>
</b:includable>
</b:widget>
</b:section>
<b:section class='recent-post-one-thumb' id='recent-post-one-thumb-6' maxwidgets='1' preferred='yes' showaddelement='no'>
<b:widget id='HTML85' locked='false' mobile='yes' title='' type='HTML' version='1'>
<b:widget-settings>
<b:widget-setting name='content'>Football</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<div class='widget-content recent-posts'>
<script>document.write(&#39;&lt;div class=&quot;recent-post-title&quot;&gt;&lt;h2&gt;&lt;a href=&quot;/search/label/<data:content/>?max-results=10&quot;&gt;<data:title/>&lt;/a&gt;&lt;/h2&gt;&lt;/div&gt;&#39;);document.write(&#39;&lt;script src=&quot;/feeds/posts/default/-/<data:content/>?orderby=updated&amp;alt=json-in-script&amp;callback=labelthumbs&quot;&gt;&lt;\/script&gt;&#39;);</script>
</div>
</b:includable>
</b:widget>
</b:section>
<div class='clear'/>
</b:if>
</b:if>
Cari kode HTML dibagian template yang mirip seperti <div id="post-wrapper"> atau <div class="wrapper"> atau <div class="content-wrapper">

Letakan kode HTML nya tepat dibagian bawah kode yang saya sebutkan diatas tadi.

Klik " SIMPAN "

Buka Blogger > Tata Letak > Edit HTML

Cara Membuat Recent Post dengan Thumbanil di Template Blogger versi Non-AMP
Images by @boshjn

Cara Membuat Recent Post dengan Thumbanil di Template Blogger versi Non-AMP
Images by @boshjn

Atur tulisan " Sport " dengan tulisan label yang ada di blog kamu.

Wigdet recent post ini pernah tampil ditemplate EvoMagz, jadi bisa dikatakan wigdet recent post ini agak mirip dengan tampilan seperti tema EvoMagz.

Akhir Kata


Demikian trik untuk membuat recent post by label with thumbanil blogger, Jika ada eror atau masalah dalam pemasangan jangan ragu untuk menulis komentarnya agar yang nantinya bisa saya bantu jika mengalami kesulitan.

Posting Komentar untuk "Cara Membuat Recent Post dengan Thumbanil di Template Blogger versi Non-AMP"