Tampilan Blog merupakan salahsatu hal untuk menarik para pengunjung ke Blog kita, apalagi navigasinya memudahkan mereka, kali ini saya ingin berbagai bagaimana Memasang Widget Recent Post Blogger dengan Thumbnail Keren, Recent Posts adalah widget Blog Recent Posts untuk memudahkan pengunjung menemukan postingan terbaru. Tidak hanya menggunakan teks tetapi untuk menarik perhatian Anda dapat menambahkan gambar. Memang, masih banyak tutorial atau cara lainnya namun kadang kita bingung saat harus mengedit kode HTML di dalamnya.
 |
| Cara Memasang Widget Recent Post Blogger dengan Thumbnail Keren |
Silakan apabila Anda tertarik, menggunakan HTML ini yang saya dapatkan, versi ini tampilannya agak unik dan keren menurut saya. Thumbnail ditampilkan di sebelah kanan dan beragam warna. Jika anda ingin memasangnya di Blogger caranya cukup sederhana dan tidak perlu memasukkan ke Widget Blogger. Silakan ikuti caranya.
Widget Recent Post Blogger dengan thumbnail keren :
Langkah 1 :
Silahkan Anda Login ke Dasboard Blogger, kebetulan saya menggunakan Template VioMagz Premium dari Sugeng Id, pilih Tata Letak lalu klik Tambahkan Gadget.
Langkah 2 :
Pilih dan klik tanda + (HTML/JavaScript)
Langkah 3 :
Tuliskan pada Julul “Postingan Terbaru” atau “Recent Post. Pada Konten Widget copy paste Script yang sudah saya siapkan di bawah :
<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/AVvXsEjS80W1nS8biJtqMMRR9DMd0n6XfbCFIEpNTwdijkzlaTq1wSIsFlJuh8tVpMXoer9M2WsAmESNw4y93aapjZgYiJ_YsVVhVlV66DNeLdmXKT9NqFmLBXXXL1G5fbgAu2YoW5oCbCVx_ybt/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 not support JavaScript!</noscript>
<link href=’http://fonts.googleapis.com/css?family=Ubuntu+Condensed’ rel=’stylesheet’ type=’text/css’ />
Keterangan :
Untuk tulisan berwarna merah, silahkan ganti sesuai keingginan. Jumlah Post, Tampilkan Thumbail, Tanggal atau Waktu Postingan, Kata atau kalimat dalam postingan sedangkan angka silahkan ganti sesukanya kemudian untuk False itu tidak aktif dan untuk mengaktifkannya silahkan ganti True.
Langkah 4 :
Kemudian jangan lupa Save atau Simpan Setelan setelah itu silakan Cek di Blog Anda hasilnya.
Langkah 5 :
Hasil dari menempatkan Script tersebut kuranglebih hasilnya seperti ini :
Keterangan : Untuk tulisan 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.
Demikian Cara Memasang Widget Recent Post Blogger dengan Thumbnail Keren, cukup mudahkan, semoga bermanfaat. Terimakasih. RAS
Author: Liputan CS
Liputan CS adalah organisasi non-profit, sebuah komunitas informasi masyarakat, portal berita, gerbang informasi yang berfokus pada penyampaian informasi, inspirasi serta edukasi kepada masyarakat. Dapatkan update terbaru dan artikel menarik lainnya. Masyarakat memilih Liputan CS karena pendekatan inklusif dan kemampuannya dalam menyuarakan potensi wilayah dan ikut serta dalam mencerdaskan Bangsa.
