Membuat Grid Recent Post » Buat teman-teman blogger yang mau menciptakan widget recent post di ahir postingan silahkan ikuti panduan dibawah ini.
Apa Itu Recent Post ?
Recent post yakni widget yang dapat memunculkan postingan terkait di ahir artikel yang sudah di publikasikan. pada umumnya recent post itu sifatnya mencangkup semua artikel tanpa menyortir menurut label / kategori.
Namun pada tutorial kali ini admin ingin share tutorial menciptakan recent post bedasarkan kategori dengan tema atau tampilan grid. Nilai plus buat blog dengan topik d0wnl0ad game atau aplikasi android.
Widget recent post ini sedikit seolah-olah dengan web jalan tikus. dan widget ini sangatlah cocok kalau kau padukan dengan template blogger seolah-olah jalan tikus.
Membuat Grid Recent Post Berdasarkan Label di Blog
- Masuk ke dasboard blogger kamu.
- Pilih menu Tata Letak dan tambahkan atau edit HTML/Javascript
- Copy kemudian pastekan script dibawah ini. Script<script>
document.write(“<script src=”/feeds/posts/default/-/Android?orderby=updated&alt=json-in-script&callback=rcentbytag”></script>”);
</script>NOTE: Jangan lupa ganti text Android dengan label yang ingin kau munculkan di recent post. - Lalu beralih ke menu Template lalu Edit HTML
- Cari kode </head> kemudian masukan arahan j4va script dibawah ini sempurna di atasnya. Script<script type=’text/j4vascript’>
var numposts = 6;
var showpostthumbnails = true;
var showpostdate = false;
</script>
<script type=’text/j4vascript’>
//<![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=”https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIiKfgctYzoMyzTHApx_svOvivTRr71s-nPZJMi533pCVZe0Z2s2_CG20pV1ittcvjNqFdYcOr82IVfZSp0aqbRMDngnq0l_GsNxLwDwRrjn2beMjuhCZKuV0S_far2bsj6y6slN-PRWk9/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+'” sasaran =”_blank” title=”‘+r+'”><img class=”rct-thumb” alt=”‘+r+'” src=”‘+l+'”/></a>’);document.write(‘<strong><a href=”‘+i+'” sasaran =”_blank” title=”‘+r+'” rel=”nofollow”>’+r+'</a></strong>’);document.write(‘<br>’);document.write(‘<a class=”btndown” href=”‘+i+'” sasaran =”_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>NOTE: Ganti Text Download yang bewarna merah dengan text yang kau inginkan. Namun kalau tidak kau ganti juga tak masalah. - Cari lagi kode ]]></b:skin> atau kode </style> kemudian letakan arahan dibawah ini di atasnya. Script/* 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}} - Atau kalau blog kau bukan blog d0wnl0ad silahkan gunakan arahan dibawah ini. Script/* 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}} - Terahir Save Template
Nah itulah tutorial Membuat Grid Recent Post blogger yang keren. Semoga artikel ini bermanfaat. Terimakasih.
Sumber aciknadzirah.blogspot.com