Kali ini saya ingin share kepada teman-teman semua tentang Pasang Widget 4 in 1 di Blog: Readers Count, Twitter Follower Count, Total Post dan Comments. Panjang banget ya judulnya? Habisnya saya bingung dikasih judul apa, jadinya saya tulis lengkap deh :P
Ok, dalam widget ini saya akan menampilkan 4 widget dalam 1 tampilan, artinya akan ada 4 widget yang terintegrasi dalam 1 HTML/Javascript yaitu Readers Count, Twitter Follower Count, Total Post dan Total Comments.
lihat pict
lihat demo di sini
Jika sebelumnya saya juga pernah buat postingan tentang Widget Total Artikel dan Total Komentar di Blogspot maka anggap saja widget kali ini adalah updatenya karena ada tambahan Readers Count dan Twitter Followernya + icon dan tentunya hasil dari jumlah post dan komentarnya lebih akurat, pastinya menarik.
1. Readers Count,
Ini untuk menghitung jumlah pembaca (readers) via email yang telah berlangganan artikel blog teman-teman.
2. Twitter Follower Count,
Ini untuk menghitung jumlah Follower akun Twitter teman-teman,
3. Total Post dan Total Comments,
Ini adalah untuk menghitung jumlah keseluruhan total artikel dan total komentar yang telah masuk ke blog teman-teman.
Bagi teman-teman yang mau memasang Widget 4 in 1 ini, ikuti langkah-langkah di bawah ini:
1. Login ke akun blogspot,
2. Klik Design/Rancangan >> Page Element >> Add a Gadget >> HTML/Javascript,
3. Copy semua kode di bawah ini dan pastekan ke dalam konten HTML/Javascript:
<div style="width: 330px; background: #fff; padding: 0; margin: 0; border: 0;">
<div name="feed" style="float: left; width: 160px; height: 50px; background: #fff;">
<div name="img" style="float: left; margin: 2px 5px 2px 2px; padding: 0; width: 46px; height: 46px; background: url(http://cdn.iconfinder.net/data/icons/aquaticus/48%20X%2048/feed.png) no-repeat;"></div>
<div name="contador" style="padding: 6px 0 0 0; margin: 0; font-size: 13px; font-weight: bold; font-family: Arial, Helvetica, sans-serif;"><a href="http://feeds.feedburner.com/blogspot/rcydk" target="_blank"><script language='javascript' type='text/javascript' src='http://www.codigosblog.net/servidor/contadorfeed.php?uri=http://feeds.feedburner.com/blogspot/rcydk'></script> Readers</a></div>
<p name="texto" style="padding: 0; margin: -1px 0 0 0; font-size: 12px; font-family: Arial, Helvetica, sans-serif;"></p>
</div>
<div name="twitter" style="float: left; margin-left: 10px; width: 160px; height: 50px; background: #fff;">
<div name="img" style="float: left; margin: 2px 5px 2px 2px; padding: 0; width: 46px; height: 46px; background: url(http://cdn.iconfinder.net/data/icons/aquaticus/48%20X%2048/twitter.png) no-repeat;"></div>
<div name="contador" style="padding: 6px 0 0 0; margin: 0; font-size: 13px; font-weight: bold; font-family: Arial, Helvetica, sans-serif;"><a href="http://www.twitter.com/Anggasona" target="_blank"><script type='text/javascript' src="http://www.codigosblog.net/servidor/contadorTwitter/seguidores.php?usuario=Anggasona"></script> Followers</a></div>
<p name="texto" style="padding: 0; margin: -1px 0 0 0; font-size: 12px; font-family: Arial, Helvetica, sans-serif;"></p>
</div>
<div name="postagens" style="margin-top: 5px; float: left; width: 160px; height: 50px; background: #fff;">
<div name="img" style="float: left; margin: 2px 5px 2px 2px; padding: 0; width: 46px; height: 46px; background: url(http://codigosblog.net/servidor/widget_twitter_feed_post_comment/post-icon.png) no-repeat;"></div>
<div name="contador" style="padding: 6px 0 0 0; margin: 0; font-size: 13px; font-weight: bold; font-family: Arial, Helvetica, sans-serif;"><script type="text/javascript"> function showpostcount(json) { document.write(parseInt(json.feed.openSearch$totalResults.$t,10)); }</script><script src="http://anggasona-anotherbestblog.blogspot.com/feeds/posts/default?alt=json-in-script&callback=showpostcount"></script> Post </div>
<p name="texto" style="padding: 0; margin: -1px 0 0 0; font-size: 12px; font-family: Arial, Helvetica, sans-serif;"></p>
</div>
<div name="comentarios" style="margin-top: 5px; margin-left: 10px; float: left; width: 160px; height: 50px; background: #fff;">
<div name="img" style="float: left; margin: 2px 5px 2px 2px; padding: 0; width: 46px; height: 46px; background: url(http://cdn.iconfinder.net/data/icons/free-3d-social-icons/png/48x48/Orange%20forum.png) no-repeat;"></div>
<div name="contador" style="padding: 6px 0 0 0; margin: 0; font-size: 13px; font-weight: bold; font-family: Arial, Helvetica, sans-serif;"><script type="text/javascript"> function showpostcount(json) { document.write(parseInt(json.feed.openSearch$totalResults.$t,10)); }</script><script src="http://anggasona-anotherbestblog.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showpostcount"></script> Comments</div>
<p name="texto" style="padding: 0; margin: -1px 0 0 0; font-size: 12px; font-family: Arial, Helvetica, sans-serif;"></p>
</div>
<span style="float: right; padding: 0; margin: 0;"><small><script language='javascript' type='text/javascript' src='https://sites.google.com/site/anggasonaanotherbestblog/javascript/anggasona_readers_twitter_post_comment_widget1.js'></script></small></span>
</div>
</div>
<div name="feed" style="float: left; width: 160px; height: 50px; background: #fff;">
<div name="img" style="float: left; margin: 2px 5px 2px 2px; padding: 0; width: 46px; height: 46px; background: url(http://cdn.iconfinder.net/data/icons/aquaticus/48%20X%2048/feed.png) no-repeat;"></div>
<div name="contador" style="padding: 6px 0 0 0; margin: 0; font-size: 13px; font-weight: bold; font-family: Arial, Helvetica, sans-serif;"><a href="http://feeds.feedburner.com/blogspot/rcydk" target="_blank"><script language='javascript' type='text/javascript' src='http://www.codigosblog.net/servidor/contadorfeed.php?uri=http://feeds.feedburner.com/blogspot/rcydk'></script> Readers</a></div>
<p name="texto" style="padding: 0; margin: -1px 0 0 0; font-size: 12px; font-family: Arial, Helvetica, sans-serif;"></p>
</div>
<div name="twitter" style="float: left; margin-left: 10px; width: 160px; height: 50px; background: #fff;">
<div name="img" style="float: left; margin: 2px 5px 2px 2px; padding: 0; width: 46px; height: 46px; background: url(http://cdn.iconfinder.net/data/icons/aquaticus/48%20X%2048/twitter.png) no-repeat;"></div>
<div name="contador" style="padding: 6px 0 0 0; margin: 0; font-size: 13px; font-weight: bold; font-family: Arial, Helvetica, sans-serif;"><a href="http://www.twitter.com/Anggasona" target="_blank"><script type='text/javascript' src="http://www.codigosblog.net/servidor/contadorTwitter/seguidores.php?usuario=Anggasona"></script> Followers</a></div>
<p name="texto" style="padding: 0; margin: -1px 0 0 0; font-size: 12px; font-family: Arial, Helvetica, sans-serif;"></p>
</div>
<div name="postagens" style="margin-top: 5px; float: left; width: 160px; height: 50px; background: #fff;">
<div name="img" style="float: left; margin: 2px 5px 2px 2px; padding: 0; width: 46px; height: 46px; background: url(http://codigosblog.net/servidor/widget_twitter_feed_post_comment/post-icon.png) no-repeat;"></div>
<div name="contador" style="padding: 6px 0 0 0; margin: 0; font-size: 13px; font-weight: bold; font-family: Arial, Helvetica, sans-serif;"><script type="text/javascript"> function showpostcount(json) { document.write(parseInt(json.feed.openSearch$totalResults.$t,10)); }</script><script src="http://anggasona-anotherbestblog.blogspot.com/feeds/posts/default?alt=json-in-script&callback=showpostcount"></script> Post </div>
<p name="texto" style="padding: 0; margin: -1px 0 0 0; font-size: 12px; font-family: Arial, Helvetica, sans-serif;"></p>
</div>
<div name="comentarios" style="margin-top: 5px; margin-left: 10px; float: left; width: 160px; height: 50px; background: #fff;">
<div name="img" style="float: left; margin: 2px 5px 2px 2px; padding: 0; width: 46px; height: 46px; background: url(http://cdn.iconfinder.net/data/icons/free-3d-social-icons/png/48x48/Orange%20forum.png) no-repeat;"></div>
<div name="contador" style="padding: 6px 0 0 0; margin: 0; font-size: 13px; font-weight: bold; font-family: Arial, Helvetica, sans-serif;"><script type="text/javascript"> function showpostcount(json) { document.write(parseInt(json.feed.openSearch$totalResults.$t,10)); }</script><script src="http://anggasona-anotherbestblog.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showpostcount"></script> Comments</div>
<p name="texto" style="padding: 0; margin: -1px 0 0 0; font-size: 12px; font-family: Arial, Helvetica, sans-serif;"></p>
</div>
<span style="float: right; padding: 0; margin: 0;"><small><script language='javascript' type='text/javascript' src='https://sites.google.com/site/anggasonaanotherbestblog/javascript/anggasona_readers_twitter_post_comment_widget1.js'></script></small></span>
</div>
</div>
4. Ganti beberapa keterangan seperti di bawah ini:
- Ganti tulisan warna merah dengan id feedburner teman-teman,
- Ganti tulisan warna biru dengan id Twitter teman-teman,
- Ganti tulisan warna hijau dengan URL blog teman-teman,
Penyesuaian lebar widget dengan tampilan sidebar harap ubah bagian berikut:
- Ubah ukuran width: 330px; untuk merubah lebar kolom/border keseluruhan widget,
- Ubah ukuran width: 160px; untuk merubah lebar per satuan widget (1 widget count),
- Ubah ukuran width: 46px; height: 46px; untuk merubah lebar dan tinggi ikon.
5. Jika sudah selesai, maka tinggal klik save dan lihat hasilnya.
Harap untuk tidak meremove link back widget ini, belajarlah untuk menghargai karya milik orang lain dan tentunya untuk membuat mudah orang lain untuk menemukan dan memasang widget ini juga. Terimakasih
Note:
1. Widget ini akan lebih optimal dipasang pada blog yang memilik rentang sidebar agak lebar,
2. Untuk beberapa kejadian, khusus pada Readers Count terkadang jumlah count nya berubah 0 (no readers) tapi itu cukup dibiarkan saja karena Count ini akan menghitung ulang Jumlah Pembaca via Email dari feedburner teman-teman dan selanjutnya akan normal kembali.
Seperti itulah cara Pasang Widget 4 in 1 di Blog: Readers Count, Twitter Follower Count, Total Post dan Comments. Semoga widget ini bisa bermanfaat untuk aktivitas statistik blog teman-teman dan tentunya bisa membuat blog tampil lebih cantik. Selamat mencoba dan salam.