Widget Recent Postal Service Blogger Dengan Thumbnail Cantik

Recent Post merupakan sebuah Widget Postingan Terbaru di sebuah Blog untuk mempermudahkan pengunjung menemukan artikel terbaru. Bukan hanya menggunakan teks saja tenamun supaya menarik perhatian dapat menambahkan gambar. Ada kaya tutorialnya tenamun terkadang kita kebinggungan saat harus edit HTML ke dalam.

Sebelumnya admin sudah berbagi artikel tentang Cara menciptakan Widget Postingan terbaru di Blogger menggunakan 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 baru ini tampilannya sedikit unik dan cantik. Gambar thumbailnya terlihat di sebelah kanan dan tampil bulat. Untuk sobat semua yang inggin memasangnya di Blogger cukup mudah dan tak perlu masuk ke HTML Blogger. Silahkan ikuti carannya dibawah ini dan perhatikan intruksi yang admin berikan.

Widget Recent Post Blogger dengan Thumbnail cantik

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

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

 

Langkah three :  Tuliskan pada Julul "Postingan Terbaru". Pada konten silahkan isi Script yang sudah admin 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/AVvXsEgK7x_q8RHV1cdNkVkBi0h9lBTvLHEDgcSFJkjxJ3RJL_igZWFuY2Mo_Jn4F9l3qVovvT_9XKeQUdtOg26j2R1M7ci2w6yqG78_w8yxNeSsgEchcAcfC1cIUQjDQGi9ol8NZCvZTy-B-9np/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+'" target ="_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" target ="_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+'" target ="_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 non back upward JavaScript!</noscript>
<link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css' />

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

Langkah four : Jangan lupa Save atau Simpan Setelan.

Langkah five : Selesai dan berikut ini merupakan contoh tampilannya.

Bagaimana cukup mudah bukan menciptakan Recent Post dengan menambahkan Thumbnail yang cantik dan unik. Silahkan anda praktekkan dan apabila mengalami kesulitan boleh anda tanyakan di kolom Komentar. Anda juga dapat belajar tentang Blog mulai awal sampai menguasai di Channel Youtube admin "Timon Adiyoso", Jangan lupa Subscribe ya hehehe.

Share this post