Popular Posts | Personalisasi Tampilan Widget Popular Post Pada Blogspot

Widget entri populer atau popular post pada blog adalah widget bawaan dari blogspot yang bisa kita pasang di blog. Sayangnya secara default tampilan widget ini sangat terlihat amburadul. Untuk itu kita perlu sedikit mempersonalisasi tampilan widget popular posts tersebut agar lebih indah dipandang mata. Dan tentunya sesuai dengan tampilan blog kita.

Perhatikan perbedaan tampilan widget popular posts sebelum dan sesudah di personalisasi

Sebelum di personalisasi	Setelah di personalisasi

Ikuti langkah-langkah berikut untuk merubah Tampilan Widget Popular Post yang sesuai dengan keinginan kita Pada Blogspot;

• Pastikan, kamu telah menambahkan widget popular posts pada blogmu terlebih dahulu. Sementara nikmatin dulu tampilannya yang ancur itu...

• Expand Widget Template dan letakkan kode CSS berikut diatas kode ]]></b:skin>

#Tampilan-populer {
font-size: 11px;
overflow: hidden;
margin-top: 5px;
padding : 0; }
#Tampilan-populer ul {
width: auto;
overflow: hidden;
list-style-type: none;
padding: 0;
margin: 0; }
#Tampilan-populer li {
padding: 3px;
margin: 0 0 5px;
list-style-type: none;
float: left;
height: auto;
overflow: hidden;
background-color:#eaeaea;
border:1px dotted #ccc;
line-height: 12px;
text-indent: 0px;}
#Tampilan-populer li a {
margin-left: 0; }
#Tampilan-populer li a img {
margin-top: 0;
float: left; }

• Selanjutnya anda cari kode <div class='widget-content popular-posts'> dan ganti kode <ul> yang ada dibawahnya dengan kode:
  

  <div id='Tampilan-populer'>
  <ul class='populer'>

• Terakhir, cari kode </ul> yang pertama kali ditemukan setelah kode <div class='widget-content popular-posts'> diatas. Jika sudah ketemu, letakkan kode </div> dibawah kode </ul> tersebut.

• Simpan template kamu untuk melihat hasilnya.

Catatan:

• Pastikan untuk mem-backup template sebelum melakukan pengeditan. Sekedar jaga-jaga jika terjadi error.
• Tampilan bisa kamu sesuaikan lagi dengan keingginan kamu. Cabalah mengutak-atik value kode CSS yang telah diletakkan diatas ]]></b:skin> tadi.

Moga bermanfaat and Happy Blogging!

Read more »

MEMASANG WIDGET ANIMASI POPULAR POST

Menanggapi permintaan share dari sobat blogger, Tips Wisata Murah tentang widget popular post yang bergerak [Popular Post Animated Widget], maka disini saya akan share tentang cara membuatnya di blog kita. Sebagai catatan, mungkin widget tidak bisa berjalan pada beberapa template. namun tidak ada salahnya untuk mencoba.

Ikuti langkah-langkah berikut:

• Silahkan pasang terlebih dahulu widget popular post, Design > Page Elemen > Add a Gadget > Popular Posts (New!) 
• Jika sudah, masuk ke Edit HTML > Centang Expand Widget Template. Ingat! Selalu back-up template kamu sebelum melakukan perubahan. Sekedar untuk jaga-jaga jika terjadi kegagalan.
• Cari kode ]]></b:skin> dan letakkan kode dibawah ini diatas kode ]]></b:skin> tersebut.

#postlist-spy {
font-size: 11px;
overflow: hidden;
margin-top: 5px;
padding : 0; }
#postlist-spy ul {
width: auto;
overflow: hidden;
list-style-type: none;
padding: 0;
margin: 0; }
#postlist-spy li {
padding: 0;
margin: 0 0 5px;
list-style-type: none;
float: left;
height: auto;
overflow: hidden;
line-height: 12px;
text-indent: 0px;}
#postlist-spy li a {
margin-left: 0; }
#postlist-spy li a img {
margin-top: 0;
float: left; }

• Cari kode </head> dan pastekan kode dibawah ini diatas kode </head> tersebut.

<script charset='utf-8' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>


<script type='text/javascript'><!--//--><![CDATA[//><!--
jQuery(function () {
jQuery('ul.spy').simpleSpy();
});
(function (jQuery) {
jQuery.fn.simpleSpy = function (limit, interval) {
limit = limit || 2; // Number popular post shown - maximal 4 default 2
interval = interval || 10000;
return this.each(function () {
// 1. setup
// capture a cache of all the list items
// chomp the list down to limit li elements
var jQuerylist = jQuery(this),
items = [], // uninitialised
currentItem = limit,
total = 0, // initialise later on
height = jQuerylist.find('> li:first').height();
// capture the cache
jQuerylist.find('> li').each(function () {
items.push('<li>' + jQuery(this).html() + '</li>');
});
total = items.length;
jQuerylist.wrap('<div class="spyWrapper" />').parent().css({ height : height * limit });
jQuerylist.find('> li').filter(':gt(' + (limit - 1) + ')').remove();
// 2. effect
function spy() {
// insert a new item with opacity and height of zero
var jQueryinsert = jQuery(items[currentItem]).css({
height : 0,
opacity : 0,
display : 'none'
}).prependTo(jQuerylist);
// fade the LAST item out
jQuerylist.find('> li:last').animate({ opacity : 0}, 1000, function () {
// increase the height of the NEW first item
jQueryinsert.animate({ height : height }, 1000).animate({ opacity : 1 }, 1000);
// AND at the same time - decrease the height of the LAST item
// jQuery(this).animate({ height : 0 }, 1000, function () {
// finally fade the first item in (and we can remove the last)
jQuery(this).remove();
// });
});
currentItem++;
if (currentItem >= total) {
currentItem = 0;
}
setTimeout(spy, interval)
}
spy();
});
};
})(jQuery);
//--><!]]></script>

Keterangan:
Angka 2 pada kode diatas adalah jumlah post yang ditampilkan. Kamu bisa menampilkan hingga 4 popular post.

• Cari kode <div class='widget-content popular-posts'> dan hapus kode <ul> yang ada dibawahnya dan ganti dengan kode:

<div id='postlist-spy'>

<ul class='spy'>

• Langkah terakhir, cari kode </ul> yang pertama kali anda temukan setelah kode <div class='widget-content popular-posts'> dan masukkan kode </div> setelah </ul>

Simpan template kamu dan lihat hasilnya.

Demikian , selamat mencoba dan moga berhasil!

Thanks to Edo Pranata for this valuable tutorial...keep move on!

Read more »

PASANG WIDGET BUKA TUTUP

Pada postingan tentang video kekerasan anti-Ahmadiyah sebelumnya, saya pernah pakai widget ini untuk meng-kamuflase embed video dari YouTube, sekaligus sebagai peringatan akan tontonan tersebut. Pada kesempatan ini, saya akan share kode pembentuknya.

Terus terang, saya kurang tau sumber asli dari widget ini. Karena saya sendiri mendapatkannya dengan klik kanan pada salah satu blog sahabat. Di search engine juga ditemukan beberapa istilah misalnya, spoiler buka tutup, show hidden widget, kode buka tutup, widget buka tutup dan sebagainya. Widget ini bisa juga dipakai untuk tampilan buka tutup buku tamu atau seperti yang saya pakai pada post sebelumnya diatas.

Inilah kode pembentuk widget buka tutup [spoiler]:

<div style="text-align: center;">
<input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" style="-moz-border-radius: 2px; -webkit-border-radius: 2px; background-color: #e6e6e6; border-radius: 2px; border: 2px solid #ccc; color: black; width: 100px;" type="button" value="Buka" /></div>
<div style="padding: 5px; text-align: justify;">
<div style="display: none;">
ISI DENGAN TULISAN/URL GAMBAR /EMBED VIDEO/KODE BUKU TAMU DLL YANG AKAN DISEMBUNYIKAN</div>
</div>

Atau bisa juga menggunakan kode yang ini. Pilih mana yang bisa dijalankan pada blog kamu.

<div !mulai spoiler><div style="text-align:center;"><input style="width:100px; background-color:#e6e6e6; color:#000; border:1px solid #ccc; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;" value="Tampilkan" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Sembunyikan'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Tampilkan'; }" type="button"></div>
<div style="padding:5px; text-align:justify;"><div style="display: none;">TULISAN/GAMBAR YANG AKAN DISEMBUNYIKAN</div></div></div !akhir spoiler>

Kamu bisa mempersonalisasi kode berwarna merah sesuai keinginan kamu. Selain itu, kamu juga bisa mengatur setiap value, seperti lebar, warna border, tulisan dan lain -lain untuk tampilan widget itu sendiri. Silahkan copy paste kode tersebut dan taro di sidebar, halaman post atau ditempat lainnya sesuai dengan keinginan kamu.

Selamat berkreasi dan moga bermanfaat!

Read more »

PASANG WIDGET BLOGGER INDONESIA

Sekedar berbagi untuk semua teman blogger yang ingin memasang widget Blogger Indonesia seperti pada blog design t-shirt, bisa mengunakan widget kreasi Iskaruji dot com ini. Adanya widget ini mungkin dapat menjadi alternatif lain dari widget sejenis untuk sisi tampilan blog sahabat blogger sekalian.

Cara pasang widget ini juga begitu mudah. Pada dasboard blog kamu pilih Design > Page Element > Add Gadget dan pilih JavaScript/HTML. Kemudian pastekan kode yang kamu pilih.

Berikut kode widget Blogger Indonesia:

SUDUT KIRI ATAS <script language="JavaScript" src="http://iskaruji.googlecode.com/files/iskaruji_kiri_atas.txt" type="text/javascript"></script> <script language="JavaScript" type="text/javascript"> cot("http://lh4.ggpht.com/_55xfixw5xxA/TSQeqQkaV7I/AAAAAAAAAO0/kFJ7ZrLVy3s/Widget%20Blogger%20Indonesia.png") </script>	SUDUT KANAN ATAS <script language="JavaScript" src="http://iskaruji.googlecode.com/files/iskaruji_kanan_atas.txt" type="text/javascript"></script> <script language="JavaScript" type="text/javascript"> cot("http://lh6.ggpht.com/_55xfixw5xxA/TSRAD5V-CeI/AAAAAAAAAPc/czrjhswKpVo/Widget%20Kanan%20Blogger%20Indonesia.png") </script>
SUDUT KIRI BAWAH <script language="JavaScript" src="http://iskaruji.googlecode.com/files/iskaruji_kiri_bawah.txt" type="text/javascript"></script> <script language="JavaScript" type="text/javascript"> cot("http://2.bp.blogspot.com/-Y1dKjqpXvgA/Tb92aJRlKoI/AAAAAAAABYs/PLNETiLrfRQ/s1600/Blogger+Indonesia+Kiri.png") </script>	SUDUT KANAN BAWAH <script language="JavaScript" src="http://iskaruji.googlecode.com/files/iskaruji_kanan_bawah.txt" type="text/javascript"></script> <script language="JavaScript" type="text/javascript"> cot("http://2.bp.blogspot.com/-Y1dKjqpXvgA/Tb92aJRlKoI/AAAAAAAABYs/PLNETiLrfRQ/s1600/Blogger+Indonesia+Kiri.png") </script>

Kamu juga bisa menggunakan image kreasi kamu sendiri dengan format PNG ukuran 100 X 100 Pixel. Kemudian ganti url image yang ada dengan url image kamu.

Note: Pada sebagian template seperti pada template Iskaruji dot com sendiri, tampilan widget Blogger Indonesia ini tidak bisa tampil tepat pada sudut yang diinginkan, sehingga akan terlihat janggal jika memasang widget ini.

Pilihan image yang bisa kamu pake:

http://lh5.ggpht.com/_55xfixw5xxA/TSVHdy9MFxI/AAAAAAAAAP0/nfFe3OYf3E0/Blogger%20Indonesia.png

http://lh4.ggpht.com/_55xfixw5xxA/TSVQ9DjCCRI/AAAAAAAAAP8/hYT_tTq5KV0/Widget%20garuda.png

http://lh5.ggpht.com/_55xfixw5xxA/TSVKbIlXynI/AAAAAAAAAP4/zO6JhyIbaDI/Blogger%20Indonesia2.png

Read more »