Tips Cara Mempercantik Blogger Dengan Widget Artikel Terbaru/Recent Post Warna-warni

Tips Cara Mempercantik Blogger Dengan Blogspot Widget Artikel Terbaru/Recent Post Warna-warni - Widget artikel terbaru atau orang luar negeri biasa menyebutnya dengan nama widget recent post, merupakan sebuah widget yang dapat kita pergunakan pada blog kita. Widget ini jika saya bilang sangat berguna sekali dan sangat membantu sekali dan wajib kita letakkan pada seluruh blog yang kita miliki. Kenapa karena dengan mempergunakan widget artikel terbaru ini kita dapat memberitahukan kepada pengunjung blog kita kalau kita telah menerbitkan artikel terbaru pada blog kita dan yang pasti pengunjung kita ingin mengetahui artikel terbaru tersebut bukan.

Pada kesempatan sebelumnya saya juga telah menjelaskan bagaimana Cara Membuat Widget Artikel Terbaru Yang Ringan Dan SEO Friendly namun Untuk itu pada kesempatan saya kali ini saya ingin membagikan sebuah tips dan trik cara untuk membuat sebuah widget artikel terbaru atau recent post dengan tampilan yang warna-warni. Tidak hanya widget ini dapat membantu blog kita dalam memperkenalkan artikel terbaru dari blog yang kita miliki namun dengan widget ini kita juga dapat mempercantik blog kita dengan tampilan nya yang sangat cantik dan menawan. Tidak hanya menawan namun dengan tampilan nya yang color full widget ini dapat memancing para pengunjung blog kita untuk membaca artikel terbaru yang ada pada blog kita.

Artikel terkait
Tips Blog Cara Membuat Random Post Yang SEO Friendly Beserta Gambar

Cara membuat artikel terbaru atau recent post

Untuk membuat widget ini sangatlah mudah dan gampang, tidak sampai 5 menit maka widget ini akan tampil pada blog anda dan mempercantik blog anda. Untuk langkah-langkahnya anda dapat mengikutinya sebagai berikut ini.

Silahkan masuk ke blogger anda

Masuk ke layout > Add a Gadget 

Pilih HTML/Javascript

Copy lalu pastekan kode dibawah ini ke form HTML/Javascript tadi

<script type="text/javascript">

function showlatestpostswiththumbs(t){document.write('<ul class="recent-posts-container">');for(var e=0;e<posts_no;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/AVvXsEi9K90X_fzwjUDIzoBDpOw-MUkBWKSu9S2yUQ02LQJmJLk1OithO0yCm96HKOvfRXgPqUBDn9rLUD4CcbONeGVyk-ZG1bP90WmXuSRe9ep-FD2q6W2ijMYmZPVF0MSLKkzku8EA2vNCIoRX/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==showpoststhumbs&&document.write('<a href="'+r+'"><img class="recent-post-thumb" 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==readmorelink&&(1==$&&(_+=" | "),_=_+'<a href="'+r+'" class="url" target ="_top">Read more</a>',$=1),1==showcommentslink&&(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_no = 5;

var showpoststhumbs = true;

var readmorelink = true;

var showcommentslink = false;

var posts_date = true;

var post_summary = true;

var summary_chars = 70;

</script>

<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>

<a style="font-size: 9px; color: #CECECE; margin-top: 10px;" href="https://bit.ly/widgetartikelterbaruwarnawarni" rel="nofollow">Widget Artikel Terbaru</a>

<noscript>Your browser does not support JavaScript!</noscript>

<link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css' />

<style type="text/css">

img.recent-post-thumb{width:50px;height:50px;float:right;margin:5px -5px 0px 0px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;padding:3px;background: #fff}

ul.recent-posts-container {list-style-type: none; background: #fff;padding: 0px;font:12px 'Ubuntu Condensed', sans-serif;margin: 5px 0px 5px 0px;}

ul.recent-posts-container li:nth-child(1n+0) {background: #F49A9A; width: 100%}

ul.recent-posts-container li:nth-child(2n+0) {background: #FCD092; width: 95%}

ul.recent-posts-container li:nth-child(3n+0) {background: #FFF59E; width: 90%;}

ul.recent-posts-container li:nth-child(4n+0) {background: #E1EFA0; width: 85%;}

ul.recent-posts-container li:nth-child(5n+0) {background: #B1DAEF; width: 80%;}

ul.recent-posts-container li {padding:5px 10px;list-style-type: none; margin: 0 0 -5px; color: #777;}

.recent-posts-container a { text-decoration:none; }

.recent-posts-container a:hover { color: #222;}

.post-date {color:#e0c0c6; font-size: 11px; }

.recent-post-title a {font-size: 14px;color: #444; font-weight: bold;}

.recent-post-title {padding: 6px 0px;}

.recent-posts-details a{ color: #222;}

.recent-posts-details {padding: 5px 0px 5px; }

</style>

Untuk merubah-rubah tampilan dari widget artikel terbaru yang kita miliki kita dapat merubah ada bagian dibawah ini.

var posts_no = 5;

Untuk menampilkan jumlah postingan terbaru yang akan ditampilkan pada widget artikel terbaru milik blog kita

var showpoststhumbs = true;

Untuk menampilkan gambar dari artikel yang ada pada blog kita

var readmorelink = true;

Link read more untuk membaca artikel terbaru pada blog kita 

var showcommentslink = false;

Untuk menampilkan link komentar pada artikel blog kita

var posts_date = true;

Untuk menampilkan tanggal artikel blog kita

var post_summary = true;

Menampilakan postingan pada blog kita hehehe

Setelah kita melakukan edit-edit dari kode widget artikel terbaru di atas maka tahap selanjutnya silahkan simpan kode diatas tersebut dan anda dapat melihat tampilan dari artikel terbaru tersebut pada sidebar blog anda.

Cara Pasang Widget Artikel Terbaru

Bagi newbie yang baru belajar mempercantik blog agar enak di lihat oleh para pembaca kamu, dan bingung bagai mana cara pasang widget artikel terbaru warna-warni ini.

Untuk langkah-langkah cara pasang windget artikel terbaru ini cukup mudah karena kamu bisa mengikuti langkah-langkah berikut ini.

Kamu bisa masuk ke Layout lalu pilih add a gedget.

Pilih HTML/Javascript

Pastekan script di atas di form kosong yang sudah tersedia lalu kamu simpan

Jika sudah maka kamu bisa simpan dengan menggunakan tombol save seperti pada gambar di atas dan lihat kembali tampilan website kamu.

Nah bagaimana mudah bukan Tips Cara Mempercantik Blogger Dengan Blogspot Widget Artikel Terbaru/Recent Post Warna-warni ini. dengan tampilan yang warna warni maka widget artikel terbaru ini dapat kita pergunakan untuk mempercantik tampilan dari blog kita. Nah sekian dan terimakasih telah berkunjung di blog newbie code news ini

Share this post