Download MP3

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK6_Wg1ljVBGB_VZ11dsYncIWHzJGK_RkavOhEXJLz3Fsoznq9jfaSc6cfzfq7gpszuFxqfEXNaD7wklb_88w-UuDwnp5I5Ie7TCnt0H8mfWJ-kuYB38HeX4wmZ_pTAGYJknGbbAOpgyQ/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 Wahid Says:
  12. terimah kasih udah share infonya.

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

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

     
  17. Dd Rasmuson Says:
  18. blog yang bagus,..terus semangat

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

    Thanks.  
    Regard,

    Hitsuke

     
  21. Anonymous Says:
  22. thank you, i have put smile too for you !

     
  23. iswady Says:
  24. layak untuk dicoba

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

     
  27. Abol Ezz Says:
  28. syukran tipsnya akhi.. jazakumullah khair..

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

     
  30. Rizkyzone Says:
  31. kaya nya g ocok trik ini aq pasang di blog q

     

Post a Comment