Membuat Tombol Maximize Dan Minimize Pada Widget Blog

blog, tricks, tips, tutorial, free, download, blog templates, trik, stop dreaming start action Kita sudah pernah membahas trick blog cara membuat hidden sidebar widget (silahkan dibaca dulu), dimana tujuan dari trik blog ini adalah agar kita bisa menyembunyikan widget tertentu.

Masih berkaitan dengan trik membuat hidden sidebar widget tersebut, sekarang kita akan membahas trik blog membuat tombol maximize dan minimize pada widget blog.

tombol minimize maximize pada widget blog


Cara kerjanya hampir sama. Hanya saja pada trik blog terdahulu, cara membuat hidden widget, jika kita ingin menyembunyikan widget tertentu, kita perlu meletakkan link dengan tulisan [+/-] atau [Open] dan kemudian di klik. Tentu ini akan mengganggu tampilan blog Sodara.

Nah, trik ini akan Ayas optimasi lagi, sehingga kita bisa membuat tombol maximize dan minimize, untuk menyembunyikan dan memunculkan widget tertentu. Tentunya Blog Sodara akan semakin keren, tampilannya pun akan berbeda dan tampak professional. Bisa Sodara lihat screenshot nya.

Bagaimana tricks blog membuat tombol maximize dan minimize pada widget blog? Yuk kita bahas bersama..

Pertama, tentukan dulu widget mana yang akan Sodara beri tombol maximize dan minimize.

Sebagai contoh kasus, Ayas akan meletakkan tombol ini pada widget yang berjudul "Friend's Text Link" (bisa dilihat contohnya pada footer).

Menuju ke 'Layout' - 'Edit HTML'. Download dulu template Sodara.

Centang pada 'expand template widget'

Cari kode widget yang telah Sodara tentukan. Sebagai contoh, Ayas mau pake trik ini pada widget di sidebar Ayas yang judul 'Friend's Text Link', maka Ayas mencari kode seperti ini :

title='Friend's Text Link'

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='Friend's Text Link' 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 berhuruf tebal adalah awal dan akhir dari kode widget Sodara.

Tidak perlu bingung, perhatikan saja pada kode berwarna merah.

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('<img onclick="document.getElementById(&quot;' + rnd + '&quot;).style.display = &quot;inline&quot;" src="http://i28.tinypic.com/8xq3jb.png" style="float:right;margin-right:0px;cursor:hand;"/>');
document.write('<img onclick="document.getElementById(&quot;' + rnd + '&quot;).style.display = &quot;none&quot;" src="http://i26.tinypic.com/300bfis.png" style="float:right;margin-right:2px;cursor:hand;"/>');
/* ]]> */ </script><data:title/></h2>
<script type='text/javascript'> /* <![CDATA[ */ document.write('<div id="' + rnd + '" style="display:inline;">'); /* ]]> */ </script>

Kemudian copy kode ini :

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

Paste kode tersebut di ATAS ato Sebelum kode :

</b:includable>

Sehingga, keseluruhan kode akan menjadi seperti ini :

<b:widget id='HTML2' locked='false' title='Friend's Text Link' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>

<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('<img onclick="document.getElementById(&quot;' + rnd + '&quot;).style.display = &quot;inline&quot;" src="http://i28.tinypic.com/8xq3jb.png" style="float:right;margin-right:0px;cursor:hand;"/>');
document.write('<img onclick="document.getElementById(&quot;' + rnd + '&quot;).style.display = &quot;none&quot;" src="http://i26.tinypic.com/300bfis.png" style="float:right;margin-right:2px;cursor:hand;"/>');
/* ]]> */ </script><data:title/></h2>
<script type='text/javascript'> /* <![CDATA[ */ document.write('<div id="' + rnd + '" style="display:inline;">'); /* ]]> */ </script>

</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>

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


Kalo dah, silahkan disimpan, trus lihat hasilnya. Silahkan coba, apakah tombol maximize dan minimize pada widget blog Sodara sudah berfungsi dengan baik. Klo belum, silahkan diteliti lagi, apakah ada kode untuk membuat tombol maximize dan minimize pada widget blog Sodara yang kurang.

Klo sudah berfungsi dengan baik, happy blogging aza..!!!

20 comments:

  1. Tip yang sangat menarik.....pertama tama kaget juga kok kursor saya ada hurufnya..hehehe...sip deh....

    ReplyDelete
  2. wah keren2 nih tutorialnya...

    ReplyDelete
  3. makasih triknya. Sekalian promosi blog saya http://gamercomputer.blogspot.com

    ReplyDelete
  4. wew,keren sob...
    btw,link saya kok blom d pasang???

    ReplyDelete
  5. oke juga nich...unik...
    cobain ahh...

    ReplyDelete
  6. makasih buat tutorx..
    bermanfaat banget bg aku,,
    boleh tukeran link gak mas..

    ReplyDelete
  7. This blog that I'm looking for
    blog is always up to date ...
    thankz also for their knowledge
    successful only for the blogger
    search

    ReplyDelete
  8. Mas mau tanya, gmn agar pertama kali muncul dalam minimize langsung??? Trimaskaih atas perhatiannya.

    Nb: tlg bls di blogq y.

    ReplyDelete
  9. koq aq gak bisa buat minimize/max widget ya mas..pusing nih..ajarin donnk..makasih....

    ReplyDelete
  10. @Hen pada

    <script type='text/javascript'> /* <![CDATA[ */ document.write('<div id="' + rnd + '" style="display:inline;">'); /* ]]> */ </script>

    Silahkan ganti 'inline' dengan 'none'

    @Logending klo boleh tahu, kesulitannya dimana?

    ReplyDelete
  11. Maksih gan Atas Ilmunya,ini sangat berguna buat dava yang bru mengenali bloger,izin copas Artikelnya,klo Da Waktu mampir Di www.davasiappatahhati.co.cc.
    Gan Baner Dah Saya pasang Silahkan Cek dihttp://www.davasiappatahhati.co.cc/2010/07/baner-teman.html
    Klo agan Berminat Follow balik jga,mungkin itu akan membuat Dava lebih merasa bangga bila telah d Follow ma agan....
    makasih.

    ReplyDelete
  12. mantabb....bos...
    maksih tips nya visit back ya......

    ReplyDelete
  13. dapat ilmu lagi nih disini, terima kasin sam, matur nuwun

    ReplyDelete
  14. hmmm
    bisa di coba nich entar di blog kita.

    ReplyDelete
  15. Makasih infonya gan dah ane terapin di blog ane, izin copas ya gan...

    ReplyDelete
  16. Wow. Artikelnya sangat informatif. Silahkan visit blog newbie saya ya http://fanny7xdism.blogspot.com/

    ReplyDelete
  17. gan saya mau bertanya,
    bagaimana kalo widget nya itu tertutup seperti di minize seperti Friend's Text Link seperti yang di bawah blog agan, kalo ane udah coba malah terbuka. bantuan nya gan saya newbie :(

    ReplyDelete
  18. Sudah saya coba dblog saya yang kedua gan kalo yang ini. :)
    Thanx

    ReplyDelete
  19. Gan. Kenapa pas saya coba diblog saya lagi. hasilnya kebuka duluan yah? (maximize).
    Harusnyakan dy nutup dulu --"

    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