16 September 2016

Membuat Grid Recent Post Berdasarkan Label di Blog

Grid Recent Post Berdasarkan Label

Recent Post adalah suatu widget yang memunculkan postingan terakhir yang di publish atau di update, nah kali ini saya akan membagikan tutorial cara membuat recent post berdasarkan label di blog yang bertemakan grid. Widget recent post ini sangat cocok digunakan pada blog yang membahas tentang Game Android ataupun Aplikasi Android.

Tampilan Grid Recent Post ini saya buat 2 style agar sobat dapat memilih tampilan yang cocok untuk blog sobat. Tampilan pertama cocok untuk tampilan blog yang simple dan flat, dan tampilan kedua cocok untuk tampilan blog yang menggunakan template dengan desain elegant dan keren dan juga ada tambahan tombol Download (sobat bisa mengganti teks Download dengan teks yang sobat inginkan).

Tampilan yang ke 2 saya buat atas permintaan beberapa sobat blogger yaitu membuat recent post berdasarkan label atau widget grid yang mirip seperti Jalan Tikus.


Cara Membuat Grid Recent Post Berdasarkan Label


Langkah Pertama buka Blogger > Tata Letak

Tambahkan atau Edit widget HTML/Javascript dan masukan script di bawah ini :

<script>
document.write("<script src=\"/feeds/posts/default/-/Android?orderby=updated&amp;alt=json-in-script&amp;callback=rcentbytag\"><\/script>");
</script>

Ganti Android dengan Label yang ingin sobat munculkan pada Recent Post.

Langkah Kedua buka Template > Edit HTML

Masukan kode Javascript di bawah ini tepat di atas kode </head>

<script type='text/javascript'>
var numposts = 6;
var showpostthumbnails = true;
var showpostdate = false;
</script>
<script type='text/javascript'>
//<![CDATA[
function rcentbytag(e){document.write('<ul class="recent-by-tag">');for(var t=0;t<numposts;t++){var n=e.feed.entry[t];var r=n.title.$t;var i;if(t==e.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if(n.link[o].rel=="replies"&&n.link[o].type=="text/html"){var u=n.link[o].title;var f=n.link[o].href}if(n.link[o].rel=="alternate"){i=n.link[o].href;break}}var l;try{l=n.media$thumbnail.url}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);if(a!=-1&&b!=-1&&c!=-1&&d!=""){l=d}else l="http://2.bp.blogspot.com/-giova1ZCh-A/Uzq6L8QTJNI/AAAAAAAAAJc/USXictTq_xs/s70-c/KM+Icon.png"}var p=n.published.$t;var v=p.substring(0,4);var m=p.substring(5,7);var g=p.substring(8,10);var y=new Array;y[1]="Januari";y[2]="Februari";y[3]="Maret";y[4]="April";y[5]="Mei";y[6]="Juni";y[7]="Juli";y[8]="Agustus";y[9]="September";y[10]="Oktober";y[11]="November";y[12]="Desember";document.write('<li class="recentlist">');if(showpostthumbnails==true)document.write('<a href="'+i+'" target ="_blank" title="'+r+'"><img class="rct-thumb" alt="'+r+'" src="'+l+'"/></a>');document.write('<strong><a href="'+i+'" target ="_blank" title="'+r+'" rel="nofollow">'+r+'</a></strong>');document.write('<br>');document.write('<a class="btndown" href="'+i+'" target ="_blank">Download</a>');var x="";var T=0;if(showpostdate==true){x='<span class="showdates">'+x+g+" "+y[parseInt(m,10)]+" "+v+"</span>";T=1}document.write(x);document.write("</li>");if(t!=numposts-1)document.write("")}document.write("</ul>")}
//]]>
</script>

Jika sobat ingin mengganti Teks "Download", ganti teks Download yang sudah saya tandai dengan teks tombol yang sobat inginkan.

Langkah Terakhir pilih salah satu Style di bawah ini dan letakan di atas kode ]]></b:skin> atau </style>

Style 1


/* Grid Recent Post by Label */
ul.recent-by-tag{overflow:hidden;padding:0 15px}
.recent-by-tag img{width:100px;height:100px;margin-right:10px;margin-bottom:5px}
.recent-by-tag li{width:100px;margin-bottom:10px;margin-right:12px;text-align:center;list-style:none;padding:11px 18px;background:#f1f1f1;border:1px solid #ddd;float:left;line-height:1.3em!important}
.recent-by-tag li a{list-style:none;color:#555;font-weight:400;font-size:13px!important;width:1-0px;overflow:hidden;text-overflow:ellipsis;display:block;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.recent-by-tag li a:hover,.recent-by-tag li:hover a{color:#f35858!important}
.recent-by-tag .btndown{display:none}
@media screen and (max-width:640px) {ul.recent-by-tag{padding:0;margin-left:10px}}
@media screen and (max-width:480px) {ul.recent-by-tag{margin-left:0}}

Style 2


/* Grid Recent Post by Label */
ul.recent-by-tag{overflow:hidden;padding:0 15px}
.recent-by-tag img{width:80px;height:80px;margin-left:10px;margin-bottom:5px}
.recent-by-tag li{width:100px;margin-bottom:10px;margin-right:12px;text-align:center;list-style:none;padding:11px 18px;float:left;line-height:1.3em!important}
.recent-by-tag li a{list-style:none;color:#111;font-weight:700;font-size:12px!important;overflow:hidden;display:block;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.recent-by-tag .btndown{color:#88c425;font-weight:400;text-transform:uppercase;padding:2px 4px;font-size:11px!important;border:1px solid #88c425}
.recent-by-tag .btndown:hover{color:#fff;background:#88c425}
@media screen and (max-width:640px) {ul.recent-by-tag{padding:0;margin-left:10px}}
@media screen and (max-width:480px) {ul.recent-by-tag{margin-left:0}}

Simpan Template.

UPDATED : 29/09/2016


Sekian Tutorial yang bisa saya bagikan kali ini, semoga bermanfaat. Terima kasih.
Rhinokage Rio
Rhinokage Rio

Adalah seorang blogger yang suka mempelajari hal-hal yang baru seputar blog, template, SEO dan Bisnis Online. Untuk mempelajari Hal baru, membutuhkan kesabaran dan ketelitian dalam mempelajarinya.

Add Your Comments

  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.
Konversi Code
Out Of Topic