Cara Membuat Widget Recent Post Dengan Sangat Mudah

Tutorial Blog- Halo sahabat blogger. Lagi-lagi Catatan Adi akan berbagi cara membuat recent post yang super sederhana. Ini cocok buat kalian yang emang ga suka tampilan yang terlalu rame.

Emang sih ada yang suka blog simpel. Namun sesimpel apapun ada elemen yang harus tetap ada ya. Salah satunya adalah recent post.

Recent post ini punya beberapa nama lain, seperti : post terbaru, artikel terbaru, newest articles, recent articles. Terserah sahabat kalo umpama mau mengganti namanya. 

Selain terlihat lebih elegan, memang blog yang sederhana juga memiliki keunggulan di bidang loading blog. 

Selain mengurangi kecepatan loading blog, penggunaan widget berlebihan juga tidak enak dipandang mata. Olehnya itu, kali ini Catatan Adi akan memberikan satu tutorial penggunaan widget recent posts yang sederhana.

(Baca Juga: Cara Membuat Tabel Dalam Postingan Blog)

Meski sederhana, namun recent posts ini cukup memukau karena bisa menyesuaikan diri dengan tema blog. Contohnya bisa dilihat pada gambar berikut ini:

cara membuat recent posts
Cara Membuat Widget Recent Post



Bagaimana caranya? Ternyata sangatlah mudah! 

Silahkan ikuti dengan seksama ya....

(Baca Juga: hal-hal yang membuat blog Anda sepi)


1. Masuk ke dashboard Blogspot Anda.

2. Buka pilihan tata letak.

3. Fokus ke bagian sidebar.

4. Pilih tambah gadget.

5. Pilih tambah java script / html.

Masukkan skrip di bawah ini. 

<script>
//<![CDATA[
function showlatestposts(json){document.write('<ul id="recent-posts">');for(var i=0;i<5;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var postsurl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){postsurl=entry.link[k].href;break;}}
document.write('<li class="recent-posts">');document.write('<a href="'+ postsurl+'" target ="_top" title="'+ posttitle+'">'+ posttitle+'</a>');document.write('</li>');}
document.write('</ul>');};
document.write("<scr" + "ipt type=\"text/javascript\" src=\"/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showlatestposts\"></scr" + "ipt>");
//]]>
</script>

6. Setelah itu, masuk ke menut tema.


7. Masuk ke bagian Edit HTML Anda dan paste kode berikut ini tepat diatas </head>

<style type='text/css'>
#recent-posts{
    width:auto;
    padding:0 10px;
    margin:0 auto;
    border:1px solid #ddd;
}
#recent-posts ul,#recent-posts li {
    list-style:none;
}
#recent-posts a{
    text-decoration:none;
}
#recent-posts li{
    border-top:1px solid #ddd;
    padding:6px 0
}
#recent-posts li:first-child{
    border-top:none;
}
</style>


8. Setelah usai, klik Simpan dan lihat hasilnya diblog Anda. 

(Baca Juga: Tutorial mendapatkan uang dari blog)

Ternyata sangat mudah dan keren bukan! Selamat mencoba.


Baca terus artikel menarik lainnya dari Catatan Adi seputar dunia blogging. Semoga beruntung!

0 Response to "Cara Membuat Widget Recent Post Dengan Sangat Mudah"

Post a Comment

Komentar Anda akan muncul setelah kami review.

Baca Juga

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel