15 Maret, 2013
Kali ini saya akan membahas Cara Membuat Menu Tabview Accordion Keren Di Blog, ,Tapi Sebelumnya klik tombol
dulu ya...Dan kami mohon bantuannya dukung channel Youtube baru kami untuk hal yang bermanfaat
.. Terima kasih Yaa atas perhatiannya, Selamat melanjutkan membaca,kritik dan saran isikan di dan

Dykrullah : Cara Membuat Menu Tabview Accordion Keren Di blog.

menu accordion keren Kali ini saya berkesempatan lagi untuk share tutorial blog yaitu Membuat menu tabview keren di blog. Apa itu Menu Tabview Accordion yang saya maksud? Apa Yaaa

Menu Tabview Accordion

Adalah Menu tab yang memungkinkan memasang beberapa widget dalam satu area,dengan kata lain berguna untuk menghemat ruangan di blogspot sobat semua.Selain itu blog sobat akan terkesan dinamis dengan Tabview ini. Salah satu Website yang menggunkan Widget ini adalah MagetanIndah[dot]com.heheBagus kan Sob,hehe

Cara Memasang Tabview Accordion Di Blog

Cara Pemasangan nya sangat mudah di banding ngerjain tugas Ujian yang gak kelar-kelar,hahaCape Dech

  1. Login ke Akun blogger Sobat
  2. Masuk Ke Layout Dan Klik Add HTMLHTM/Javascript
  3. Copy Kode Di bawah ini.
  4. <br />



    <style type="text/css">



    #accordion{width:100%;margin:auto;border:0px solid white}



    #accordion h2{padding:5px 10px;background-color:#ccc;background-image: url(http://1.bp.blogspot.com/-qtI_UsPdZwc/Tmzg5K8eADI/AAAAAAAABrU/ScrT9X8fBBY/s1600/arrow_right.gif);background-repeat: no-repeat;background-position: right center;color:#000;font:normal 11px Tahoma;border-bottom:1px solid #FFF;cursor:pointer;}



    #accordion .content{font:normal 11px Arial;padding:5px 10px;background:#eee;}



    #accordion .content ul {list-style:none;margin:0 0 0;padding:0 0 0;}



    #accordion .content li {background-image: url(); background-repeat: no-repeat;background-position: left center;margin:0;padding:2px 0 3px 0;text-indent:0px;border-bottom:1px dotted #ccc;line-height:1.3em;}



    #accordion .content li a:hover {text-decoration:none;color:#000;}



    #accordion h2.active{background-color:#bbb;background-image: url(http://2.bp.blogspot.com/-9If6SXYDklM/Tmzg4W8YwuI/AAAAAAAABrQ/XlCiTeVqtq0/s1600/arrow_down.gif);background-repeat: no-repeat;background-position: right center;font-weight:bold;}



    </style><br />



    <script type="text/javascript" src="http://yourjavascript.com/121511228073/accordion-menu.js"></script><br />
       1:  
       2: <script type='text/javascript'>
       3: $(function() {
       4: $('#accordion .content').hide();
       5: $('#accordion h2:first').addClass('active').next().slideDown('slow');
       6: $('#accordion h2').click(function() {
       7: if($(this).next().is(':hidden')) {
       8: $('#accordion h2').removeClass('active').next().slideUp('slow');
       9: $(this).toggleClass('active').next().slideDown('slow');
      10: }
      11: });
      12: });
    </script><br />



    <div id="accordion">



    <h2>



    Judul Widget 1</h2>



    <div class="content">



    Isi atau kode HTML konten 1<br />



    </div>



    <div id="accordion">



    <h2>



    Judul Widget 2</h2>



    <div class="content">



    Isi atau kode HTML konten 2<br />



    </div>



    <div id="accordion">



    <h2>



    Judul Widget 3</h2>



    <div class="content">



    Isi atau kode HTML konten 3<br />



    </div>



    <div id="accordion">



    <h2>



    Judul Widget 4</h2>



    <div class="content">



    Isi atau kode HTML konten 4<br />



    </div>



    <div id="accordion">



    <h2>



    Judul Widget 5</h2>



    <div class="content">



    Isi atau kode HTML konten 5<br />



    </div>



    </div>



    </div>



    </div>



    </div>



    </div>




  5. Isi Judul Widget dengan Judul Yang di inginkan, Isi Kode HTML Konten dengan kode yang ingin di tampilkan. Catatan tambahan jika sobat hanya ingin menampilkan 3 widget saja hapus widget4 dan 5,dan juga sebaliknya jika sobat ingin menambah tabviewnya tambahkan lagi mulai dari kode H2 sampai kode BR.


  6. Tambahan lagi Ganti background dengan menganti background color di atas.



Kode di atas cocok untuk blog yang berbackground terang atau putih jika blog sobat berbackground gelap/hitam coba dengan kode di bawah ini





<br />



<style type="text/css">



#accordion{width:100%;margin:auto;border:0px solid white} #accordion h2{background-color:#5f5e5e;background-image:url(http://2.bp.blogspot.com/-w2rXmKKoIWw/TyAHgaAoNyI/AAAAAAAAEvo/EQb_qVUputU/s1600/arrow_right.gif);background-repeat:no-repeat;background-position:right center;color:#d0cfce;font:normal 11px Tahoma;border-bottom:1px solid #323333;cursor:pointer;padding:5px 10px} #accordion .content{font:normal 11px Arial;background:#333;padding:5px 10px} #accordion .content li{background-image:url();background-repeat:no-repeat;background-position:left center;text-indent:0;border-bottom:1px dotted #595959;line-height:1.3em;margin:0;padding:2px 0 3px} #accordion .content li a:hover{text-decoration:none;color:#ff3c00} #accordion h2.active{background:#5f5e5e;background-image:url(http://3.bp.blogspot.com/-DAMBJVFbFmM/TyAHg2YnFAI/AAAAAAAAEvs/n6uvhcqO7V8/s1600/arrow_down.gif);background-repeat:no-repeat;background-position:right center;font-weight:700} </style><br />



<script type="text/javascript" src="http://yourjavascript.com/121511228073/accordion-menu.js"></script><br />
   1:  
   2: <script type='text/javascript'>
   3: $(function() {
   4: $('#accordion .content').hide();
   5: $('#accordion h2:first').addClass('active').next().slideDown('slow');
   6: $('#accordion h2').click(function() {
   7: if($(this).next().is(':hidden')) {
   8: $('#accordion h2').removeClass('active').next().slideUp('slow');
   9: $(this).toggleClass('active').next().slideDown('slow');
  10: }
  11: });
  12: });
</script><br />



<div id="accordion">



<h2>



Title 1</h2>



<div class="content">



Isi konten 1<br />



</div>



<div id="accordion">



<h2>



Title 2</h2>



<div class="content">



Isi konten 2<br />



</div>



<div id="accordion">



<h2>



Title 3</h2>



<div class="content">



Isi konten 3<br />



</div>



<div id="accordion">



<h2>



Title 4</h2>



<div class="content">



Isi konten 4<br />



</div>



<div id="accordion">



<h2>



Title 5</h2>



<div class="content">



Isi konten 5<br />



</div>



</div>



</div>



</div>



</div>



</div>






Ok setelah itu tinggal klik save dan lihat blog sobat,,semoga bermanfaat,hehe

,
Posted by: Ady Sukrul Fadhlilah , Updated at: 14.22

+ komentar + 4 komentar

Makasih Bro Buat Tutorialnya.. :D

DYKRULLAH Mengucapkan Terimakasih Kepada Bocah Poris Blog's | Tips Trik Tutorial Blogger Pemula dan SEO atas Komentarnya di Cara Membuat Menu Tabview Accordion Keren Di Blog
22 Maret 2013 14.50

kunjungan perdana :)
mampir kalau berkenan gan :)

DYKRULLAH Mengucapkan Terimakasih Kepada Bmaster Aditama atas Komentarnya di Cara Membuat Menu Tabview Accordion Keren Di Blog
1 Januari 2014 11.57

kalo otomatis dri widget bawaan bloggernya gmna gan?

DYKRULLAH Mengucapkan Terimakasih Kepada Aditia Novit atas Komentarnya di Cara Membuat Menu Tabview Accordion Keren Di Blog
4 Januari 2014 21.35

Sama Sama Sob,, Terima kasih telah membaca Cara Membuat Menu Tabview Accordion Keren Di Blog

Aditia Novit > Bawaan blogger sob? gak ada sob,klo bawaan cman 1,cman related atau recent aj,,ga bisa di bat acordion,,atau jika ribet bisa cari template yang sudah ada acoedionnya kayak contoh di atas mungkin lebih cepet..

Posting Komentar