Membuat Simple Accordions

Diposkan oleh Hery Prasetyo Friday, January 8, 2010
بسم الله الرحمن الرحيم

Setelah mencoba mengikuti kontes SEO bertema Aku Cuma Seorang Blogger Yang Cinta SEO. kini HAPIA Mesir ingin berbagi tip membuat simple accordion. secara tidak sengaja tip ini HAPIA Mesir temukan diSimplex Design.

Sudah lama HAPIA Mesir ingin postingkan, tapi baru sekarang terlaksana. whatever, Simple Accordions contohnya adalah seperti berikut, atau cek disini:

Membuat simple accordions
Berikut caranya :

- Login keBlogger.
- Langsung menuju "Tata Letak" - "Edit HTML".
- Cari code </head> .
- Copy Paste code berikut dibawah code </head>.

<script src='http://hapiajavascript.googlecode.com/files/accordion-sidebar.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;.accordion h2:first&quot;).addClass(&quot;active&quot;);
$(&quot;.accordion div:not(:first)&quot;).hide();
$(&quot;.accordion h2&quot;).click(function(){
$(this).next(&quot;div&quot;).slideToggle(&quot;slow&quot;)
.siblings(&quot;div:visible&quot;).slideUp(&quot;slow&quot;);
$(this).toggleClass(&quot;active&quot;);
$(this).siblings(&quot;h2&quot;).removeClass(&quot;active&quot;);
});
});
</script>

<style type='text/css'>
.accordion {width: 330px;border-bottom: solid 1px #C4C4C4;}
.accordion h2 {background: #333 url(http://1.bp.blogspot.com/_QeR8kbaWhLU/S9H5BJY99AI/AAAAAAAAAqE/Gp-ImphwK6c/s320/arrow-square.gif) no-repeat right -51px;padding: 7px 15px;margin: 0;font: bold 120%/100% Arial, Helvetica, sans-serif;color:#fff;border: solid 1px #c4c4c4;border-bottom: none;cursor: pointer;}
.accordion h2:hover {background-color: #666;}
.accordion h2.active {background-position: right 5px;}
.accordion div {background: #fff;margin: 0;padding: 10px 10px 20px;border-left: solid 1px #c4c4c4;border-right: solid 1px #c4c4c4;}
</style>


- Simpan Template.

Langkah Kedua :

- Masuk "Elemen Laman".
- Tambah gadget dan pilih HTML/JavaScript.
- Copy paste code berikut :

<div class='accordion'>

<h2>JUDUL 1</h2>

<div>
ISI CONTENT 1
</div>

<h2>JUDUL 2</h2>

<div>
ISI CONTENT 2
</div>

<h2>JUDUL 3</h2>

<div>
ISI CONTENT 3
</div>

<h2>JUDUL 4</h2>

<div>
ISI CONTENT 4
</div>
</div>


- Simpan.

Happy blogging.



Jika postingan ini dirasa berguna bagi yang lain. silahkan share untuk berbagi.

Dapatkan Update Terbaru Dari HAPIA Mesir, Masukan Email Anda :

HAPIA Mesir Readers

Bookmark and Share

Direkomendasikan Untuk Dibaca :

16 Responses to Membuat Simple Accordions

  1. Jaka Utama Says:
  2. pertamax dah diamankan

     
  3. mas doyok Says:
  4. yg jadi nilai lebih om abu tuh jika tab lain diklik yg lain minimize, kalau ini iya gak?

     
  5. HAPIA Mesir Says:
  6. mas doy@ kl ni g sob...manual...
    iya yg di kang abu farhan lebih enak...

     
  7. Rock Says:
  8. Makasih sobat... langsung di coba...

     
  9. Si Gaptek Says:
  10. maKasih infonya zob.

     
  11. Fais cWaKep Says:
  12. terimah kasih udah share infonya.

     
  13. LL Says:
  14. Mantabs nich...

     
  15. asep canda Says:
  16. makasih atas infonya ya sob

     
  17. Ganex Ni'am Says:
  18. blog yang bagus,..terus semangat

     
  19. hitsuke Says:
  20. bagus tapi terlalu simple...heheh

    Thanks.  
    Regard,

    Hitsuke

     
  21. thank you, i have put smile too for you !

     
  22. iswady Says:
  23. layak untuk dicoba

     
  24. Banana Says:
  25. syukron infonya kawan :)

     
  26. Ibnu Radinas Says:
  27. syukran tipsnya akhi.. jazakumullah khair..

     
  28. Model accordions tuh contohnya spt apa ya...? Hehehe, penasaran nih.

     
  29. Rizky2009 Says:
  30. kaya nya g ocok trik ini aq pasang di blog q

     

Post a Comment