5/21/2018

Cara Membuat Recent Post Ringan Blogspot

        
Cara Membuat Recent Post Ringan Blogspot - Salah satu cara untuk menarik minat pengunjung adalah dengan memanfaatkan widget blogger. Dengan menggunakan widget anda dapat menambahkan recent post, contact, popular post dan lain sebagainya. Maka dalam kesempatan ini portal blogspot akan memberikan tutorial membuat recent post yang ringan di blogger. Recent post yang akan saya jabarkan kali ini sangat ringan dan dapat menyesuikan dengan tema blog yang sudah ada.


Tapi perlu diingat bahwa, jangan terlalu banyak menambahkan widget diblogger karena dapat menyebab loading blog menjadi lambat. Cara membuatnya cukup sederhana, ikuti langkah-langkahnya dibawah ini.

Baca: Cara Membuat Related Post Muncul di Dalam Postingan

Cara Membuat Recent Post Ringan Blogspot


#Langkah 1
Buka template kalian kemudian copy paste kode CSS dibawah ini tepat diatas kode </head> jangan lupa Simpan.
<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>

#Langkah 2
Kembali kehalaman dashboard blogger lalu buka Layout setelah itu klik Add a gadget > HTML/JavaScript kemudian copy paste kode javascript dibawah 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>

#Langkah 3
Simpan