Cara Membuat Recent Post Sederhana, Simple, Keren dan Fast Loading - Recent Post merupakan Salah satu Widget yang Paling banyak digunakan para Bloggers. Sesuai Namanya Widget ini bertujuan memberikan Informasi kepada pengunjung berupa Postingan Terbaru dan terkait yang baru saja Di Publikasikan Oleh Para Blogger.
Ada Banyak Sekali Model Recent Post Salah satunya yang ini Recent Post Responsive, Keren, Simple dengan Thumbnail Bergerak Dari Atas Kebawah. Namun kali ini saya akan memberikan Tutorial cara Membuat Recent Post Sederhana tanpa Gambar atau Thumbnail sehingga mempercepat Loading Blog atau situs anda. Walaupun Begitu Tampilan Recent Post ini cukup menarik dan Keren sekali bila diterapkan Di Blog anda.
Berikut Tampilan gambar dari Recent Post yang keren ini
Tanpa Panjang Lebar, Berikut Step By Step Cara Membuat Recent Post Keren Fest Loading
1. Login Ke Akun Blogger anda
2. Pilih Template >> Edit HTML, kemudian Cari </head> dengan menggunakan Alt + F
3. Setelah itu letakkan Kode css dibawah ini Tepat Di atas </head>
4. Setelah Itu Klik Save Template
5. Kemudian Pilih Tata Letak, Untuk menentukan dimana Widget Recent Post itu akan di Letakkan
6. Klik Tambah Gedget >> HTML/JavaScript, lalu masukkan Script Di bawah ini
Ada Banyak Sekali Model Recent Post Salah satunya yang ini Recent Post Responsive, Keren, Simple dengan Thumbnail Bergerak Dari Atas Kebawah. Namun kali ini saya akan memberikan Tutorial cara Membuat Recent Post Sederhana tanpa Gambar atau Thumbnail sehingga mempercepat Loading Blog atau situs anda. Walaupun Begitu Tampilan Recent Post ini cukup menarik dan Keren sekali bila diterapkan Di Blog anda.
Berikut Tampilan gambar dari Recent Post yang keren ini
1. Login Ke Akun Blogger anda
2. Pilih Template >> Edit HTML, kemudian Cari </head> dengan menggunakan Alt + F
3. Setelah itu letakkan Kode css dibawah ini Tepat Di atas </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>
5. Kemudian Pilih Tata Letak, Untuk menentukan dimana Widget Recent Post itu akan di Letakkan
6. Klik Tambah Gedget >> HTML/JavaScript, lalu masukkan Script 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&alt=json-in-script&callback=showlatestposts\"></scr" + "ipt>");
//]]>
</script>
Ganti Angka 5, dengan Jumlah Recent Post yang anda inginkan.
7. Kemudian Klik Save dan lihat Hasilnya.
Bagaimana? Mudah bukan cara membuat Recent Post Sederhana ini, yang tentunya bisa anda Praktekkan Sendiri
loading...
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
