Hidden Sidebar & Widget

kampanye damai pemilu indonesia 2009Tips dan trik blog kali ini adalah bagaimana membuat hidden sidebar & widget. Apa itu hidden Sidebar & Widget? Yang jelas, trik kali ini adalah bagaimana membuat sidebar bisa disembunyikan dan dimunculkan. Trik ini berlaku tidak hanya pada sidebar saja, tetapi bisa juga diterapkan pada footer.

Klo masih bingung, lihat saja pada sidebar Ayas (Recent Post) dan ke-3 footer Ayas dibawah. Ada tulisan [+/-] ato [Open], coba deh diklik. Pada keadaan tertutup, widget tersebut akan muncul secara keseluruhan. Sedangkan apabila dalam keadaan terbuka, maka widget akan disembunyikan lagi.

Keuntungan menggunakan trik ini adalah :
- Bisa lebih menghemat tempat, blog terlihat rapi.
- Pada saat mencoba, loading blog menjadi lebih cepat. Tapi yang ini Ayas sendiri masih agak ragu, apakah karena koneksi memang lagi 'bener', ato memang karena penggunaan trik ini.

Apapun itu, klo Sodara tertarik, yuk kita coba tips trik ini bersama... GAMPANG KOK!!!


== Sebagai contoh kasus, trik ini dipraktekkan pada sidebar 'Recent Post' di blog Ayas==

Menuju pada bagian 'edit HTML'

Pertama dan yang paling penting, download dulu template sodara. Sehingga jika terjadi kesalahan, bisa dikembalikan seperti semula.

Centang pada 'expand template widget'

Cari widget yang telah Sodara tentukan. Sebagai contoh, Ayas mau pake trik ini pada widget di sidebar Ayas yang bernama 'Recent Post', maka Ayas mencari kode seperti ini :

title='Recent Post'

Cara yang paling mudah dengan Ctrl+F, maka akan muncul kotak pencarian, lalu ketik

title='nama widget sodara'

Kemudian enter.

Maka muncul kode2, yang perlu diperhatikan hanya kode untuk widget Sodara. Contoh :

<b:widget id='HTML2' locked='false' title='Recent Post' 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 berwarna biru adalah Awal kode sodara, dan yang berwarna Merah adalah Akhir kode widget Sodara.

Lalu kode ini :

<h2 class='title'><data:title/></h2>


GANTI dengan kode :

<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;">[Open]<\/a>'); /* ]]> */ </script><data:title/></h2><script type='text/javascript'> /* <![CDATA[ */ document.write('<div id="' + rnd + '" style="display:none;">'); /* ]]> */ </script>


Tidak perlu bingung dengan kodenya, tinggal copas aza. Tulisan berwarna merah bisa Sodara ganti.

Kemudian copy kode ini :

<script type='text/javascript'> /* <![CDATA[ */ document.write('<\/div>'); /* ]]> */ </script>


Paste kode tersebut di ATAS ato Sebelum kode :

</b:includable>


Klo udah, tinggal simpen, trus lihat deh hasilnya..gimana? Berhasilkan? Klo belum bisa, coba lagi lebih teliti. Klo dah nyerah, silahkan tanya Ayas aja..Gak pa2 kok..

Selamat menikmati trik tips nya, semoga bermanfaat.. GAMPANG KOK!!!

19 comments:

  1. wah mantepp bos tutormya...kerennn
    salam kenal dari http://andidwih.blogspot.com spesial efek blog g pake telor

    ReplyDelete
  2. Sukses terus sob.. Artikelnya banyak membantu...

    ReplyDelete
  3. wah,..kalau saya yang tidak tahu html,..gimana boss,..gara2 diutak atik karena pernah error templatenya...lalu ganti deh,..

    ReplyDelete
  4. terima kasih mantap artikelnya, copas dlu ah

    ReplyDelete
  5. mantaf kang, aku akan coba dan back link yahh

    ReplyDelete
  6. Horeee berhasilll berhasilll aku dah lakuin di Blog Archives akuu...makasih sobat....
    (*_*)

    ReplyDelete
  7. sanagt berman faat postingnya sob, heheh terimaksih mau di copas dulu ni

    ReplyDelete
  8. Wah....aku gak bisa ini buat yang begini, uda tak coba caranya berkali2 tapi g pernah berhasil, bahkan tidak nge-fek sama sekali, mohon bantuannya sob...

    ReplyDelete
  9. coba lsg dipraktekin dulu ahhhhh mumpung yg punya blog masih OL; jadinya ntar kalau G jadi bisa lsg konsultasi hahahahaha

    Rgds; 3ndur0

    ReplyDelete
  10. wah bagus triknya..berguna buat yang ngerti seperti saya :-)

    ReplyDelete
  11. Terima kasih atas bantuannya. semoga ilmunya bermanfaat untuk diri sendiri dan orang lain. Amin

    ReplyDelete
  12. Alhamdulillah akhirnya ketemu infonya,, thx mas .. ni mau praktek dulu hehehe
    thx

    ReplyDelete
  13. informasi yang menarik gan..salam kenal

    ReplyDelete

Klo ada pertanyaan, masukan ato tips yang lebih mudah, koment aja y..Insya Allah Ayas bales.. Thanks all..moga2 bermanfaat

 
Copyright © 2013. About - Sitemap - Contact - Privacy
Template Seo Elite oleh Bamz