Jan 23, 2011

Membuat Spoiler untuk Widget Asli Blogger


Selamat siang sobat blogger, kebetulan tadi pagi saya lihat space blog saya ini sudah terlalu penuh jadi terlihat ribet, sementara beberapa widget lain masih saya perlukan. Gimana nih caranya...? *mikir*... Ting!!! akhirnya dapat ide juga, kenapa ngga saya coba saja pake spoiler biar menghemat tempat. Apa spoiler itu? Spoiler adalah widget sistem buka tutup yang jika kita klik tabnya maka akan muncul widget yang kita sembunyikan tersebut, -kira-kira begitu-. Tapi yang saya perlukan ini widget asli bawaan blogger, bisa ga ya? ternyata bisa dan caranya mudah sekali. Langsung saja yuk kita garap.. hehe... 

Widget ini sebetulnya biasa dipakai di sidebar, tapi bisa juga diletakkan di template dengan catatan di-encode dulu, sobat bisa lakukan disini. Scriptnya adalah berikut ini:

<div><div style="margin: 5px;"><div class="normalfont" style="margin-bottom: 2px;"><input value="LIHAT" style="margin: 0px; padding: 5px; width: 100%; font-size: 11px; background:#eae6e6; color:#000000; border:1px dashes grey;" onclick="if (this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display != &#39;&#39;) { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;&#39;; this.innerText = &#39;&#39;; this.value = &#39;TUTUP&#39;; } else { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;none&#39;; this.innerText = &#39;&#39;; this.value = &#39;LIHAT&#39;; }" type="button" /></div><div class="alt2"><div style="display: none;"><div style="border: 2px dashes white; color:Bisque;background-color:NONE; text-align: justify; padding:10px; ">

LETAKKAN WIDGET DISINI

</div></div></div></div></div>
 Kata yang diberi warna sepertinya ga perlu saya jelaskan lagi, sobat pasti sudah mengerti.

Script diatas bisa langsung sobat gunakan di sidebar dengan menambahkan widget HTML/Javascript (caranya pasti sudah tahu). Dan untuk menggunakan spoiler ini pada widget asli blogger seperti Link List dan Blog Archive (Lihat Sidebar blog ini) sobat harus menuju ke tab edit HTML, caranya mudah yaitu seperti ini :


1. Setelah berada pada edit template HTML, jangan lupa expand widget template untuk memback up template current euntuk menghindari kesalahan.
2. Pastikan sobat sudah memasang widget Link List atau Blog Archive pada sidebar
3. Gunakan F3 atau Ctrl + F kemudian cari kode 
b:widget id='LinkList1' 
kemudian geser kebawah sobat akan menemukan kode :
<div class='widget-content'>
4. Letakkan script widget spoiler diatas tadi (sebelum tulisan "LETAKKAN WIDGET DISINI") atau bagian widget yang telah di encode
<div class='widget-content'>
5. Kemudian geser lagi kebawah maka sobat akan menemukan kode  
</b:includable>
Kemudian letakkan kode  dibawah ini (setelah di encode) persis diatas kode pada poin 5 sebagai penutup widget.
</div></div></div></div></div>  
6. Save template dan lihat hasilnya.
 
Selesai sampai disitu dan sekarang sobat bisa menghemat space blog sobat dengan menggunakan spoiler. Mohon maaf jika kurang jelas, mari berbagi disini, semoga bermanfaat ya. Happy Blogging.

9 komentar

Sip... saya save ah... masih belum banyak widget saya. Penting nih jika widget saya semakin banyak..
Makasih ya bos

wah manstab Kang tutornya, untuk sementara punya saya biar dulu memanjang, entar kalo pingin ngrubah saya akan ke sini ngopas tutornya, Insya Allah

@Serba Ter: sip,, silakan sob mgkin bisa ipake klo widgetnya udh banyak.
@Djangan: maksih mas, mdh2n bs dpake nanti ya, kalo perlu datang lagi aja kseini.. mksih.. :)

...kaya" ny udah lm ga" bekunjung ke sini,pdahal info ny banyak banget ilmu yg bisa qu ambil..'
koment qu sama dengan @serba ter....makasiyh bang infonya...!!

kegunaan spoiler ini emng bagus banget , dapat menghemat tampilan widget dan membuat blog serasa lebih ringan , simple namun tetap elegant :)

sip ini kayaknya...tapi saya belum kebanyakan widget apa ya?

ok juga....
makasih gan infonya....
salam kenal

.nday: iya gan sama ane jg, thanks ya
.chandra: betul sob, dan lebih menarik
.muhammad a vip: sip gan, boleh dicoba dulu
.andisyam: mksih sob, smoga manfaaatnya besar ya
.Agen obat herbal: salam knal jg gan, mksih ya.
all: makasih smuana udh mmpir n brkomentar.. suksesslalu..


EmoticonEmoticon