Recent Post adalah widget untuk memperlihatkan artikel terakhir yang kalian update, dan Recent Post kali ini bisa kita sesuaikan dengan Label atau Kategori yang kita inginkan seperti misal kalian ingin menampilan recent post dari Kategori Game maka kalian tinggal mengubah script yang ada dengan nama Kategori yang sobat inginkan.
Penasaran? kalian bisa melihat tampilan nya langsung di link demo di bawah.
Gimana Keren bukan? Untuk menerapkan Recent Post ini di blog kalian silahkan ikuti tutorial di bawah ini
- Buka Blogger > Tata Letak
- Tambahkan Widget HTML/Javascript lalu masukan Script dibawah ini dan Simpan.
<script>Ganti kata "Android" dengan kategori atau Label yang sobat inginkan.
document.write("<script src=\"/feeds/posts/default/-/Android?orderby=updated&alt=json-in-script&callback=rcentbytag\"><\/script>");
</script>
- Oke selanjutnya buka Template > Edit HTML
- Masukan Kode 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrxwvH6WB3C1-GeMISGRbMxnAkyLNMJQmFRg1dysj17GVcd2SIYIChk65pYDM757lxFRdr7b9D2_A0TMGEQ_UXXCj7kCW8LXUhJw80s_zfU4dblnPZ-l7tr55i14HG2wlhmELy59ntfU16/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="clear">');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>
- Sobat bisa mengubah kata "Download" Dengan kata yang sobat inginkan. (Bebas)
Oke Step akhir kalian tinggal taruh salah satu Style Script di bawah ini tepat di atas ]]</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 */Dan silahkan lihat hasilnya. :D
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}}
Sekian dulu artikel kali ini semoga sobat puas dengan artikel pertama yang saya berikan.
Thanks buat IdBlanter yang sudah membuat recent post dengan style yang seperti Jalantikus ini untuk para blogger.
Sekian dan Salam. :)
0 comments:
Emoticon