Cara Menciptakan Recent Posts Sederhana Di Blogspot
Jumat, 18 Desember 2015
Edit
Tampilan blog yang sederhana akan jauh lebih menarik minat pengunjung ketimbang tampilan yang terlalu ramai. Ramai dapat saja dari segi pewarnaan yang terlalu banyak memakai warna berbeda atau penggunaan widget yang berlebihan.
Selain mengurangi kecepatan loading blog, penggunaan widget berlebihan juga tidak lezat dipandang mata. Olehnya itu, kali ini Blogooblok akan menunjukkan satu tutorial penggunaan widget recent posts yang sederhana.
(Baca Juga: Cara Membuat Kotak Script Dalam Postingan Blog)
Meski sederhana, namun recent posts ini cukup memukau alasannya ialah dapat mengikuti keadaan dengan tema blog. Contohnya dapat dilihat pada sidebar blog ini, atau lihat gambar berikut ini:
Cara membuatnya sederhana, cukup ikuti langkah-langkahnya berikut ini.
(Baca Juga: Cara Membuat Kotak Pesan Dibawah Postingan Blogspot)
Gimana gampang dan keren bukan! Selamat mencoba.
+Wisa Rahardi
Sumber https://www.blogooblok.com/
Selain mengurangi kecepatan loading blog, penggunaan widget berlebihan juga tidak lezat dipandang mata. Olehnya itu, kali ini Blogooblok akan menunjukkan satu tutorial penggunaan widget recent posts yang sederhana.
(Baca Juga: Cara Membuat Kotak Script Dalam Postingan Blog)
Meski sederhana, namun recent posts ini cukup memukau alasannya ialah dapat mengikuti keadaan dengan tema blog. Contohnya dapat dilihat pada sidebar blog ini, atau lihat gambar berikut ini:
(Baca Juga: Cara Membuat Kotak Pesan Dibawah Postingan Blogspot)
- Pertama-tama silahkan copy dan paste script berikut ini kedalam sidebar blogspot Anda. Angka 5 yang ditandai merah silahkan diganti sesuai dengan jumlah postingan yang ingin ditampilkan.
<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+'" sasaran ="_top" title="Cara Membuat Recent Posts Sederhana di Blogspot">'+ 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>
//<![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+'" sasaran ="_top" title="Cara Membuat Recent Posts Sederhana di Blogspot">'+ 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>
- Setelah itu, masuk ke bab Edit HTML Anda dan paste instruksi berikut ini sempurna 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>
#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>
- Setelah usai, klik Simpan dan lihat balasannya diblog Anda.
Gimana gampang dan keren bukan! Selamat mencoba.
+Wisa Rahardi
Sumber https://www.blogooblok.com/