Sesuai judul, kali ini kita belajar membuat widget popular post di blogspot. nanti widget ini bisa kita tampilkan di sidebar blog sobat masing-masing. fungsinya adalah untuk menampilkan postingan paling populer menurut jumlah comment terbanyak.
lho bukanya semua udah tahu cara buat widget popular post. emang iya sih, tapi kali ini kita mau belajar buat popular post versi terbaru karena yang lama saya rasa terkadang tidak dapat berfungsi dengan baik. ya udah langsung aja yuk kita simak cara bikinnya. gampang kok.
Pertama. masuk dulu dong ke account blogger sobat masing-masing.
kedua. cari menu rancangan - elemen laman
ketiga. silahkan sobat mau ditempatkan sidebar mana, terserah sobat. klik menu tambah gadget-html/javascript.
keempat. silahkan copy script dibawah lalu paste-kan di gadget html tersebut.
<script language='javascript'>
aBold = false;
numposts=200;
maxshowresult=7;
home_page = "http://Blogsobat.blogspot.com/";
</script>
<script type='text/javascript'>
//<![CDATA[
var postTitlear=new Array();var postUrlar=new Array();var postCommentar=new Array();var totalpost;document.write("<ul>");function showrecentposts(j){var a=j.feed.entry.length;totalpost=a;for(var f=0;f<a;f++){var h=j.feed.entry[f];var c=h.title.$t;var b;var g;if(f==j.feed.entry.length){break}for(var d=0;d<h.link.length;d++){if(h.link[d].rel=="alternate"){g=h.link[d].href;break}}for(var d=0;d<h.link.length;d++){if(h.link[d].rel=="replies"&&h.link[d].type=="text/html"){b=h.link[d].title.split(" ")[0];break}}c=(aBold)?"<b>"+c+"</b>":c;postTitlear.push(c);postUrlar.push(g);postCommentar.push(b)}sortPosts();for(var f=0;f<maxshowresult;f++){var e='<li><a href="'+postUrlar[f]+'" class="recent-link">'+postTitlear[f]+" ("+postCommentar[f]+" comments)</a>";document.write(e)}}function sortPosts(){function c(d,f){var e=postTitlear[d];postTitlear[d]=postTitlear[f];postTitlear[f]=e;var e=postUrlar[d];postUrlar[d]=postUrlar[f];postUrlar[f]=e;var e=postCommentar[d];postCommentar[d]=postCommentar[f];postCommentar[f]=e}for(var b=0;b<postTitlear.length-1;b++){for(var a=b+1;a<postTitlear.length;a++){if(parseInt(postCommentar[b])<parseInt(postCommentar[a])){c(b,a)}}}}document.write('<script src="'+home_page+"feeds/posts/default?max-results="+numposts+'&orderby=published&alt=json-in-script&callback=showrecentposts"><\/script>');
//]]>
</script>
Keterangan untuk yang cetak merah
(abold= false;) = bisa dirubah menjadi true jika ingin tulisanya menjadi cetak tebal.
(numposts=200;) = hasil dari penelusuran 200 postingan
(maxshowresult=7;)= jumlah popular post yang ingin ditampilkan
home_page = rubah dengan URL blog sobat
kelima. klik simpan, Selesai
silahkan lihat hasilnya.
Setelah sebelumnya saya uraikan mengenai bagaimana cara membuat random post.
kali ini tidak kalah pentingnya adalah bagaimana cara menampilkan daftar postingan kita yang paling akhir.
Berikut langkah dan script untuk menampilkan postingan paling akhir
Layout ---> Page element --> add gadget --> Pilih HTML / java Script
Masukkan script berikut :
<script src="http://BLOG ANDA.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp">
</script>
Selamat Mencoba ..
ISI/ELEMEN KOTAK
ISI/ELEMEN KOTAK
ISI/ELEMEN KOTAK
ISI/ELEMEN KOTAK
ISI/ELEMEN KOTAK
ISI/ELEMEN KOTAK
ISI/ELEMEN KOTAK
ISI/ELEMEN KOTAK
ISI/ELEMEN KOTAK
ISI/ELEMEN KOTAK
ISI/ELEMEN KOTAK
ISI/ELEMEN KOTAK
ISI/ELEMEN KOTAK
ISI/ELEMEN KOTAK
ISI/ELEMEN KOTAK
- Silakan kunjungi situs http://www.cbox.ws
- Klik menu sign up pada bagian atas.
- Silakan isi form yang tersedia.
- Beri tanda centang pada kotak kecil di bawahnya.
- Setelah itu klik tombol Create my Cbox!.
- Kemudian login.
- Setelah login, klik menu Publish!.
- Copy kode HTML yang muncul.
- Masuk ke akun Blogger Anda.
- Pilih menu Rancangan.
- Selanjutnya klik Elemen Laman.
- Klik Tambah Gadget pada sidebar.
- Pilih HTML/JavaScript.
- Beri judul di kolom Judul.
- Paste kode HTML yang tadi dicopy ke Konten.
- Klik Simpan.
- Selesai.
Scroll Box merupakan sebuah elemen berbentuk kotak yang mempunyai penggulung baik di sisi sebelah kanan maupun di sebelah bawah. Scroll Box ini digunakan untuk menghemat ruangan atau tempat dalam sebuah blog. Selain itu, kotak ini juga dapat mempercantik tampilan blog sehingga terlihat rapi di mata pengunjung. Kotak ini dapat diisi dengan link-link, gambar-gambar, tulisan-tulisan dan lain sebagainya.
Adapun cara membuat scroll box ini adalah dengan menggunakan script di bawah ini.
<div style="overflow:auto; width:100%px; height:200px; padding:10px; border:1px solid #999999;">
ISI/ELEMEN KOTAK
</div>
Keterangan:
Ganti tulisan ISI/ELEMEN KOTAK dengan script yang Anda inginkan.
overflow:auto; menunjukkan agar terbentuk penggulung jika isi kotak telah melebihi batas tinggi atau lebar kotak yang telah ditentukan.
width:100%px; menunjukkan lebar dari kotak yang diinginkan. Ganti sesuai dengan kebutuhan Anda, misalnya 200px atau 300px. Agar lebih mudah menyesuaikan dengan lebar sidebar tentukan saja nilainya dengan 100%px.
height:200px; menunjukkan tinggi kotak, dapat diubah sesuai keinginan Anda.
padding:10px; menunjukkan jarak agar tulisan yang ada dalam kotak tidak menabrak dinding atau garis tepi kotak.
border:1px solid #999999; menunjukkan agar terlihat ada kotaknya. border:1px menunjukkan ketebalan garis tepi kotak. #999999 adalah kode warna untuk warna garis tepi kotak.
