Widget Recent Post Blogger Dengan Thumbnail Cantik

Recent Post ialah sebuah Widget Postingan Terbaru di sebuah Blog untuk mempermudahkan pengunjung menemukan artikel terbaru. Bukan hanya memakai teks saja tetapi agar menarik perhatian dapat menambahkan gambar. Ada banyak tutorialnya tetapi terkadang kita kebinggungan ketika harus edit HTML ke dalam.

Sebelumnya aku sudah menyebarkan artikel wacana Cara menciptakan Widget Postingan terbaru di Blogger memakai Gambar. Kalian dapat lihat di versi Desktop samping kanan Blog ini. Tampilan Thumbnail atau gambarnya kotak dan dapat melihat ke daftar postingan sebelumnya tanpa harus membuka yang baru.

Untuk versi yang gres ini tampilannya sedikit unik dan cantik. Gambar thumbailnya terlihat di sebelah kanan dan tampil bulat. Untuk kalian yang inggin memasangnya di Blogger cukup gampang dan tidak perlu masuk ke HTML Blogger. Silahkan ikuti carannya dibawah ini dan perhatikan intruksi yang aku berikan.

Widget Recent Post Blogger dengan Thumbnail cantik

Langkah 1 : Silahkan masuk ke Dasboard Blogger dan disini aku memakai Template VioMagz Versi 2.2, pilih Tata Letak kemudian klik Tambahkan Gadget untuk menampilkan di samping kanan.

Langkah 2 : Pilih dan klik tanda + (HTML/JavaScript)

 

Langkah 3 :  Tuliskan pada Julul "Postingan Terbaru". Pada konten silahkan isi Script yang sudah aku sipkan dibawah.

 

<script type="text/javascript" src="//cloud.github.com/downloads/jhwilson/Create-a-Blogger-archive-page/Make-Blogger-Archive-Page.js"></script>
<style type="text/css">
img.recent-post-thumbnail{float:right;height:50px;width:50px;margin:5px -5px 0px 0px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;padding:3px;background: #fff}
ul.recent-posts-wrap {background: #fff;list-style-type: none; margin: 5px 0px 5px 0px; padding: 0px;font:12px 'Ubuntu Condensed', sans-serif;}
ul.recent-posts-wrap li:nth-child(1n+0) {background: #FCD092; width: 94%}
ul.recent-posts-wrap li:nth-child(2n+0) {background: #FFE0B4; width: 94%}
ul.recent-posts-wrap li:nth-child(3n+0) {background: #FFF59E; width: 94%;}
ul.recent-posts-wrap li:nth-child(4n+0) {background: #E1EFA0; width: 94%;}
ul.recent-posts-wrap li:nth-child(5n+0) {background: #B1DAEF; width: 94%;}
ul.recent-posts-wrap li {padding:5px 10px;list-style-type: none; margin: 0 0 -5px; color: #777;}
.recent-posts-wrap a { text-decoration:none; }
.recent-posts-wrap a:hover { color: #222;}
.post-date {color:#e0c0c6; font-size: 11px; }
.recent-post-title a {font-size: 14px;font-weight: bold;color: #444;}
.recent-post-title {padding: 6px 0px;}
.recent-posts-details a{ color: #222;}
.recent-posts-details {padding: 5px 0px 5px; }
</style>
<script type="text/javascript">
function showrpwiththumbs(t){document.write('<ul class="recent-posts-wrap">');for(var e=0;e<posts_number;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 l=n.link[o].title,m=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(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:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqBCNp2xsXebsHclSUcRFte7xt2iPn2ZbcPg5mK1JN9FFX81jMwncpss9EGkQW8Jgem9THpniSPPNqjD3ouJxWj2yR68J9Xg5uSXMQBLimuuQO4FCmUxKNCCjKb03pAl1ntPvoAhhBWnQs/s1600/no-thumb.png"}var p=n.published.$t,f=p.substring(0,4),g=p.substring(5,7),v=p.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="recent-posts-list">'),1==showpostswiththumbs&&document.write('<a href="'+r+'"><img class="recent-post-thumbnail" src="'+u+'"/></a>'),document.write('<div class="recent-post-title"><a href="'+r+'" sasaran ="_top">'+i+"</a></div>"),"content"in n)var A=n.content.$t;else if("summary"in n)var A=n.summary.$t;else var A="";var k=/<\S[^>]*>/g;if(A=A.replace(k,""),1==post_summary)if(A.length<summary_chars)document.write(A);else{A=A.substring(0,summary_chars);var y=A.lastIndexOf(" ");A=A.substring(0,y),document.write(A+"...")}var _="",$=0;document.write('<br><div class="recent-posts-details">'),1==posts_date&&(_=_+w[parseInt(g,10)]+" "+v+" "+f,$=1),1==insidereadmorelink&&(1==$&&(_+=" | "),_=_+'<a href="'+r+'" class="url" sasaran ="_top">Read more</a>',$=1),1==showcomments&&(1==$&&(_+=" <br> "),"1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),l='<a href="'+m+'" sasaran ="_top">'+l+"</a>",_+=l,$=1),document.write(_),document.write("</div>"),document.write("</li>")}document.write("</ul>")}
</script>
<script type="text/javascript">
var posts_number = 5;
var showpostswiththumbs = true;
var insidereadmorelink = true;
var showcomments = false;
var posts_date = false;
var post_summary = true;
var summary_chars = 50;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrpwiththumbs"></script>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css' />

Keterangan : Untuk goresan pena warna merah di atas silahkan anda ganti sesuai keingginan. Jumlah Post, Tampilkan Thumbail, Tanggal atau Waktu Postingan, Kata atau kalimat dalam postingan. Untuk angka silahkan ganti sesukanya dan untuk False itu tidak aktif dan untuk mengaktifkannya silahkan ganti True.

Langkah 4 : Jangan lupa Save atau Simpan Setelan.

Langkah 5 : Selesai dan berikut ini ialah rujukan tampilannya.

Bagaimana cukup gampang bukan menciptakan Recent Post dengan menambahkan Thumbnail yang anggun dan unik. Silahkan anda praktekkan dan apabila mengalami kesulitan boleh anda tanyakan di kolom Komentar. Anda juga dapat mencar ilmu wacana Blog mulai awal hingga menguasai di Channel Youtube aku "Timon Adiyoso", Jangan lupa Subscribe ya hehehe.

Bagikan Artikel ini