Cara Membuat Recent Post di Blogspot Dengan Mudah
niachan - Memiliki tampilan blog yang cukup sederhana akan mampu menarik para pengunjung ketimbang tampilan blog yang terlalu ramai. Ramai bisa saja dari segi pewarnaan yang menggunakan begitu banyak warna yang berbeda-beda atau penggunaan widget yang cukup berlebihan.
Selain itu dengan membuat tampilan blog menjadi lebih sederhana, bisa mempercepat loading blog, dan lebih enak di pandang. Oleh karena itu, kali ini Nujinwo akan berbagi satu tutorial Cara Membuat Recent Post di Blogspot Dengan Mudah.
Meski terlihat sederhana, namun widget recent post ini cukup memukau karena bisa menyesuaikan dengan tema blog kalian. Contohnya bisa kalian lihat pada gambar berikut ini :
Baiklah, kita langsung ke tahap pembuatannya, cukup dengan ikuti langkah-langkah berikut :
1. Masuk / Login ke Blogger kalian.
2. Setelah itu copy paste script / kode HTML berikut ini. Angka 5 yang ditandai merah bisa kalian ganti dengan jumlah postingan yang ingin kalian tampilkan.
<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>
//<![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>
3. Kemudian pilih Tata Letak dan tambahkan widget pada widget sidebar.
4. Pilih HTML / Javascript
5. Kemudian Paste Script yang sudah kalian copy barusan dan simpan.
6. Setelah itu masuk kebagian Tema, Edit HTML dan copy paste-kan kode dibawah 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>
#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>
7. Setelah itu simpan tema.
Gimana mudah, simple, dan kerenkan ! buat yang masih bingung silahkan bertanya di kolom komentar. Semoga Bermanfaat dan Selamat Mencoba !
Belum ada Komentar untuk "Cara Membuat Recent Post di Blogspot Dengan Mudah"
Posting Komentar