Hosting Unlimited Indonesia

Cara Memasang Widget Recent Post Blogger dengan Thumbnail Keren

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
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 :

<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:"http://2.bp.blogspot.com/-C3Mo0iKKiSw/VGdK808U7rI/AAAAAAAAAmI/W7Ae_dsEVAE/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

Rocky Sastradjumena
Rocky Sastradjumena Assalammu'alaikum, Sampurasun ijin perkenalkan saya Rocky Sastradjumena, Seorang Pengembara, Bernavigasikan Langit, Berusaha terus menggali Makna dan Hikmah dari berbagai Ilmu dan Pengetahuan yang bertebaran di Muka Bumi, Belajar, Belajar dan Terus Belajar. Apa yang disajikan, Semoga Bermanfaat. Terimakasih (Lead Yourself Before Leading Others - Keep Catur Watak - Silih Asah Asih Asuh Silih Wawangi), Jaga Diri Jaga Keluarga Jaga Negara.

Post a Comment for "Cara Memasang Widget Recent Post Blogger dengan Thumbnail Keren"

SANGGARBisnisOnline.Com