Selasa, 27 September 2016

Membuat Widget Postingan Terbaru Pada Blog

Membuat  Widget Postingan Terbaru Pada  Blog

Menampilkan menu artikel terbaru pada blogger merupakan salah satu cara untuk meningkatkan jumlah page view pada Blog. Dengan membuat widget postingan terbaru pada blog, akan memudahkan para pengunjung  untuk melihat tulisan terbaru yang  ada di blog, terutama pengunjung yang datang bukan dari halaman beranda (Home Page).

Blogger tidak menyediakan widget artikel terbaru secara default, sehingga kita perlu menambahkan beberapa kode secara  manual untuk  bisa menampilkan widget artikel terbaru pada sidebar atau bagian footer blogger.

Lihat postingan sebelumnya pada LomBlog, Panduan Membuat artikel SEO  Friendly bagian Satu.

 Langkah-Langkah Membuat Widget Postingan Terbaru Pada blogger

Langkah pertama, Login ke Blogger.com, masukkan  email dan password blogger anda, setelah masuk pada halaman dashboard pilih menu "Tata letak", kemudian pada sidebar Blog, klik menu "Tambahkan Gadget" untutk menambahkan widget baru. Kemudian klik tombol HTML/JavaScript untuk menambahkan kode WIidget Tulisan terbaru.
membuat widget postingan terbaru di blogger
Tambahkan Gadget Html/JavaScript

Selanjutnya Copy kode di Bawah ini, masukkan dalam kolom konten, dan pada kolom judul, beri judul "artikel terbaru" atau judul apa saja yang anda inginkan.  Simpan perubahan dengan mengklik Tombol Simpan.

Membuat  Widget Postingan Terbaru Pada  Blog

Copy Kode widget postingan terbaru Blogger
<div class="recentpoststyle">
<script type="text/javascript">
function showlatestposts(e){for(var t=0;t<posts_no;t++){var r,s=e.feed.entry[t],n=s.title.$t;if(t==e.feed.entry.length)break;for(var a=0;a<s.link.length;a++)if("alternate"==s.link[a].rel){r=s.link[a].href;break}n=n.link(r);var i="... read more";i=i.link(r);var l=s.published.$t,o=l.substring(0,4),u=l.substring(5,7),c=l.substring(8,10),m=new Array;if(m[1]="Jan",m[2]="Feb",m[3]="Mar",m[4]="Apr",m[5]="May",m[6]="Jun",m[7]="Jul",m[8]="Aug",m[9]="Sep",m[10]="Oct",m[11]="Nov",m[12]="Dec","content"in s)var d=s.content.$t;else if("summary"in s)var d=s.summary.$t;else var d="";var v=/<\S[^>]*>/g;if(d=d.replace(v,""),document.write('<li class="recent-post-title">'),document.write(n),document.write('</li><div class="recent-post-summ">'),1==post_summary)if(d.length<summary_chars)document.write(d);else{d=d.substring(0,summary_chars);var f=d.lastIndexOf(" ");d=d.substring(0,f),document.write(d+" "+i)}document.write("</div>"),1==posts_date&&document.write('<div class="post-date">'+m[parseInt(u,10)]+" "+c+" "+o+"</div>")}}
</script>
<script type="text/javascript">
var posts_no = 5;var posts_date = true;var post_summary = true;var summary_chars = 80;</script>
<script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showlatestposts">
</script>
<noscript>Your browser does not support JavaScript!</noscript>
<style type="text/css">
.recentpoststyle {counter-reset: countposts;list-style-type: none;}
.recentpoststyle a {text-decoration: none;color: #49A8D1;}
.recentpoststyle a:hover {color: #000;}
.recentpoststyle li:before {content: counter(countposts,decimal);counter-increment: countposts;float: left;z-index: 1;position:relative;font-size: 15px;font-weight: bold;color:#fff;background:#69B7E2; margin:13px 5px 0px 1px;line-height:30px;width:30px;height:30px;text-align:center;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;}li.recent-post-title{margin-bottom: 5px;padding: 0;}
.recent-post-title a {color: #444;text-decoration: none;font: bold 13px Roboto,sans-serif;}
.post-date {font-size: 11px;color: #999;margin:5px 0px 15px 32px;}
.recent-post-summ {border-left:1px solid #69B7E2; color: #777; padding: 0px 5px 0px 20px; margin-left: 10px; font: 15px Garamond,Baskerville,"Baskerville Old Face","Hoefler Text","Times New Roman",serif;}
</style></div>
Geser tata letak widget postingan terbaru ke posisi yang anda inginkan, simpan perubahan, Buka Bog  anda untuk melihat perubahan.

Demo widget tulisan terbaru pada  blogger ini  bisa anda lihat pada Blog ini, Lombok Blogger.

Membuat  Widget Postingan Terbaru Pada  Blog
Tampilan Widget  Tulisan Terbaru pada Blog ini.


Bagaimana  Cara Merubah Tampilan Widget Artikel Terbaru?


Merubah warna  Lingkaran dan Angka

.recentpoststyle li:before {content: counter(countposts,decimal);counter-increment: countposts;float: left;z-index: 1;position:relative;font-size: 15px;font-weight: bold;color:#fff;background:#69B7E2; margin:13px 5px 0px 1px;line-height:30px;width:30px;height:30px;text-align:center;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;}

Kode ini akan menampilkan warna lingkaran biru dan angka berwarna putih. Untuk mengganti warna background lingkaran yagn berwarna biru, ganti nilai #69B7E2 dengan kode warna yang anda inginkan. Untuk merubah warna angka, ganti code warna #fff dengan warna yang anda inginkan.

Merubah Style Judul

.recent-post-title a {color: #444;text-decoration: none;font: bold 13px Roboto,sans-serif;}


Untuk mengganti warna, ganti code warna #444 dengan warna yang anda inginkan. Untuk merubah ukuran huruf judul, ganti 13px dengan ukuran yang anda inginkan. Dan untuk jenis font anda tinggal merubah kode yang berwarna hijau pada kode diatas dengan nama font yang anda inginkan.

Merubah Ukuran text dibawah Judul

.recent-post-summ {border-left:1px solid #69B7E2; color: #777; padding: 0px 5px 0px 20px; margin-left: 10px; font: 15px Garamond,Baskerville,"Baskerville Old Face","Hoefler Text","Times New Roman",serif;}

Untuk mengganti warna garis pinggir sebelar kiri, ganti kode warna #69B7E2. Ganti ukuran font dengan merubah angka 15px dengan ukuran yang anda butuhkan. Ganti jenis font dengan mengganti text yang berwarna hijau pada kode diatas.

Penutup : Itu dia Tutorial cara membuat widget postingan terbaru pada Blog, Jika ada yang kurang jelas dan perlu ditanyakan, jangan sungkan untuk meninggalkan pesan pada kolom komentar. Terimakasih

Newsletter

Berlangganan artikel terbaru dari blog ini langsung via email.

Masih aktif menulis dibeberapa Blog dan website. Menjadi web designer di Sasambo Desain. Hobi travelling, reading, climbing, camping, hiking, swimming, and boxing

Terimkasih sudah berkunjung ke Lombok Blogger. Budayakan untuk berkomentar yang baik dan sesuai dengan materi postingan, komentar yang terlalu singkat kami anggap Spam dan tidak kami tanggapi
EmoticonEmoticon