Promote Your Web Here

Get paid To Promote at any Location

11 May 2009

Membuat Widget di Sidebar Buka/Tutup

Kebanyakan widget di sidebar kadang menjengkelkan, karena blog kita akan kelihatan panjang widget daripada postingan. Sobat dari hasil saya berjalan-jalan alias dalam bahasa jawanya tuh BLOG WALKING hehehe..., saya menemukan sebuah blog yang membahas tentang hal ini. Terimakasih buat sobat saya Easyblogtrick, dengan bahasannya saya dapat mempraktekkan dan menuliskan kembali.

Sobat dapat melihat contoh yang telah saya pergunakan pada widget daftar isi, labels, dan pengunjung. Bagaimana cara pembuatannya, ternyata setelah saya praktekkan sangatlah mudah.

Berikut ini tahapan membuat widget seakan dapat dibuka maupun ditutup :

1. Masuk kedalam Blog area sobat dengan menggunakan ID dan password sobat.

2. Klik Tab "LAYOUT/TATA LETAK" =>> "EDIT HTML"

3. Beri tanda pada kotak disamping tulisan "EXPAND WIDGET TEMPLATES", ingat lebih baik sobat selalu backup template sobat sebelum merubah sesuatu pada template sobat dengan menekan tulisan "Download Full Templates.

4. Cari kode widget yang akan sobat buka/tutup, disini misal saya gunakan daftar isi, cara pencariaan yang mudah dengan menekan tombol Ctrl+F kemudian ketik apa yang sobat cari. Disini kode standar untuk daftar isi seperti berikut.

<b:widget id='HTML5' locked='false' title='DAFTAR ISI' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>
Perhatikan kode yang berwarna biru yang merupakan kode awal dari widget daftar isi dan kode yang berwarna merah yang merupakan akhir kode widget
5. Ganti kode yang berwarna kuning dan berkedip dengan kode seperti ini :
<h2 class='title'><script type='text/javascript'> /* <![CDATA[ */ if(typeof(rnd) == 'undefined') var rnd = ''; rnd = Math.floor(Math.random()*1000); rnd = 'id-' + rnd; document.write('<a href="#" onclick="tmp = document.getElementById(&quot;' + rnd + '&quot;); tmp.style.display = (tmp.style.display == &quot;none&quot;) ? &quot;block&quot; : &quot;none&quot;; return false;" style="float:right;margin-right:0px;">[+/-]<\/a>'); /* ]]> */ </script><data:title/></h2><script type='text/javascript'> /* <![CDATA[ */ document.write('<div id="' + rnd + '" style="display:none;">'); /* ]]> */ </script>
Ganti kode/tulisan berwarna biru dengan kreasi sobat (bisa dengan kata Buka, Open, dsb)

6. Copy kode berikut
<script type='text/javascript'> /* <![CDATA[ */ document.write('<\/div>'); /* ]]> */ </script>
Kemudian letakkan kode tersebut diatas kode
</b:includable>

7. Langkah pembuatan telah selesai, kemudian simpan/save Template sobat.

Selamat berkreasi, dan semoga berhasil.

Comments :

13 comments to “Membuat Widget di Sidebar Buka/Tutup”

Dapat Duit Tanpa Modal said...
on 

akhirnya ketemunya disini tutorialnya
kemaren sempet mikir pengen buat kayak gini
makasih banyak sob

rezza said...
on 

bos.banner ku hapus dulu aja

tukang arsip said...
on 

wah nice tutorial....mdh dipahamin....

aaLiL BelajarSEO said...
on 

pit paling mantab deh urusan edit2 blog... keep share yow...

ALI MASRURI said...
on 

apa banner nya ga salah tuhh http://www.uangpanas123.blogspot.com/

iklan Fresh said...
on 

keren infonya. thx

bobot.blog said...
on 

ayo maen komentar ampe pegel............

chempluk said...
on 

wah mantap neh postingan nya,,ntar dicobain,,sukses y bro

Pit-Onta™ a.k.a kAnzENk™ said...
on 

@dapat duit : makasih silahkan di coba

@reza : sabar yah broo saya edit nanti

@tukang arsip : saya masih blogger baru mas, sesuai dengan title belajar dalam blog biar sama" belajar. jika ada yang salah di saya mohon dibenarkan.

@aaLiL : ajarin aku tentang SEO yah boss :)

@ALI MASRURI : maksudnya banner yang mana mas...

@iklan fresh : semoga bermanfaat

@bobot.blog : komentar terus yahh...

mezzaluna said...
on 

makasih dah review...wah, bener2 blogger sejati neh......siip!!

adi said...
on 

wah..
nice job...
thanks for the info...

adi said...
on 

lagi sekali...

jangan lupa ingetin aku bwatin kamu header ya....

salutte lagi... =)

Wisata SEO Sadau said...
on 

makasih tutorialnya sobat

Post a Comment

Followers

SUPPORT MY BLOG

SUPPORT ME !!

Komentator

Widget Oleh : Pit-Onta

BANNER

BeLaJaR DaLaM BLog

 

Copyright © 2009 by Kanzenk Blog's