Cara Membuat Tab Menu Accordion

Setelah sebelumnya saya sudah menuliskan bagaimana Cara membuat daftar isi accordion dengan mudah ,saat ini saya akan membuat sesuatu yang ...


cara membuat menu accordionSetelah sebelumnya saya sudah menuliskan bagaimana Cara membuat daftar isi accordion dengan mudah,saat ini saya akan membuat sesuatu yang masih berhubungan dengan accordion juga,yaitu cara membuat tab menu accordion,biasanya menu ini di taruh di side bar blog.

Menurut saya banyak manfaat nya dari tab menu accordion ini,selain untuk meringkas gadget baru,menu ini akan terlihat elegan dan tidak memakan banyak ruangan di blog kita,seperti halnya daftar isi accordion,tab menu accordion ini cara kerjanya relatif sama,yaitu sistem buka tutup.

Untuk cara mebuat menu accordion ini sobat bisa ikuti langkah-langkahnya seperti yang saya terangkan di bawah ini;

  • Pertama masuk ke akun blog milik sobat ( ya ia laah,,masa milik orang lain ).
  • Berikutnya masuk ke tata letak>> tambah gadget baru>> HTML/Java script.
  • Taruh kode di bawah ini ke dalam widget HTML tersebut.



<style type="text/css">
#accordion{width:100%;margin:auto;border:0px solid white}
#accordion h2{padding:5px 10px;background-color:#ccc;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCsfj7pH7I6uq-ATExYMdJlcSGyVJqCGFDfJ9YGUiE76PFyX08VYF_PrVzzf6KW2XkosET-wyvvTtpWfLQSpDuQTHCVk8saF-lKitbk78PbOaMjdPny7Tc5iq5ZVCg1zM08o52VQyBHRI/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikHY9gGqOlHdtlMwqWNmEq1sajj0fAC8riKNubTYGzMokufvohchSiNwWG6O9s6e_BEBclrx9EfbSeOnyrgCk1ymDCmuDgD_HuhGWpgeoQy_dFinQbRwRpUMTNNCVYeYm2vrvXDk24ii8/s1600/arrow_down.gif);background-repeat: no-repeat;background-position: right center;font-weight:bold;}
</style>
<script type="text/javascript" src="http://yourjavascript.com/121511228073/accordion-menu.js"></script>
<script type='text/javascript'>
$(function() {
$('#accordion .content').hide();
$('#accordion h2:first').addClass('active').next().slideDown('slow');
$('#accordion h2').click(function() {
if($(this).next().is(':hidden')) {
$('#accordion h2').removeClass('active').next().slideUp('slow');
$(this).toggleClass('active').next().slideDown('slow');
}
});
});
</script>
<div id="accordion">
<h2>Title 1</h2>
<div class="content">
Isi konten 1
</div>
<div id="accordion">
<h2>Title 2</h2>
<div class="content">
Isi konten 2
</div>
<div id="accordion">
<h2>Title 3</h2>
<div class="content">
Isi konten 3
</div>
<div id="accordion">
<h2>Title 4</h2>
<div class="content">
Isi konten 4
</div>
<div id="accordion">
<h2>Title 5</h2>
<div class="content">
Isi konten 5
</div>
</div></div></div></div></div>



  • Terakhir simpan.

KETERANGAN;
TitelJudul heading accordion
Isi conten = Silahkan Anda isi dengan widget yang akan dipasang (bisa tulisan, script iklan maupun script widget)

Script di atas bagus di gunakan untuk blog yang background nya berwarna terang seperti blog saya ini
Jika blog Sobat yang mempunyai warna gelap atau hitam, tinggal diganti kode css-nya,. Lebih lengkapnya seperti kode di bawah ini :  

<style type="text/css">
#accordion{width:100%;margin:auto;border:0px solid white} #accordion h2{background-color:#5f5e5e;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMEf2f5y5nn1qbBuM-jJ0UZqaedmbJv8uD_d8429OIfxqXwcG8MeQOI0bK5XPHDsofrQzsgSJzbyjctx3VzK8khpFDyuwzce54cTNFpxBrTSoH6lN_LMr9QYwO8r23fMRCTdtfvpn3zzo/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeUwjJQ3F-h1y3KMlTu7D5kblfdwRMo8HW9vzdgEz7adS6uMtQCtG42MzTfNV49JZ87rlfcr1Olh7SboOyvn-zOC5947hlgyAVxsaP5b3ZYKc5jXxDV2ZUQ5FVuevLEPohg_NrkDx7Gx4/s1600/arrow_down.gif);background-repeat:no-repeat;background-position:right center;font-weight:700} </style>
<script type="text/javascript" src="http://yourjavascript.com/121511228073/accordion-menu.js"></script>
<script type='text/javascript'>
$(function() {
$('#accordion .content').hide();
$('#accordion h2:first').addClass('active').next().slideDown('slow');
$('#accordion h2').click(function() {
if($(this).next().is(':hidden')) {
$('#accordion h2').removeClass('active').next().slideUp('slow');
$(this).toggleClass('active').next().slideDown('slow');
}
});
});
</script>
<div id="accordion">
<h2>Title 1</h2>
<div class="content">
Isi konten 1
</div>
<div id="accordion">
<h2>Title 2</h2>
<div class="content">
Isi konten 2
</div>
<div id="accordion">
<h2>Title 3</h2>
<div class="content">
Isi konten 3
</div>
<div id="accordion">
<h2>Title 4</h2>
<div class="content">
Isi konten 4
</div>
<div id="accordion">
<h2>Title 5</h2>
<div class="content">
Isi konten 5
</div>
</div></div></div></div></div>

Sekian dan selamat mencoba..
SEMOGA BERMANFAAT...

COMMENTS

BLOGGER: 8
Loading...

Ads 970x90

Nama

allianz,1,andro textile,1,android,6,asmara,1,asuransi,1,award,3,berita,45,bisnis,4,cap kaki tiga,1,commonwealth,2,daftar isi,5,decoder,1,download,15,efek blog,5,elektronik,2,entertainment,3,facebook,18,family,3,flora dan fauna,7,gadet,1,galuh,8,google,17,google adsense,2,google plus,24,hiburan,28,HostingPangeran,1,hotel murah,1,ICAN Education,1,iddetik.com,1,iklan,1,jadwal timnas,1,jasa,1,keindahan alam,2,keluarga,1,kesehatan,1,klasemen,6,komputer,2,kontes,22,kuliner,3,lain-lain,52,Margahayuland 42 tahun membangun,1,maruyungsari,9,olahraga,35,otomotif,9,paket wisata,1,pengalaman,2,persib,2,profil,2,puisi,2,religi,25,review produk,2,sambut brazil,2,seluler,2,software,1,superwash,1,tutorial dan trik blog,74,twitter,4,video,3,widget,1,wisata,5,youtube,11,
ltr
item
BLOG MASHARI: Cara Membuat Tab Menu Accordion
Cara Membuat Tab Menu Accordion
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEityNWqb9TAtYugGiFvulFBksdcq3NWtX0lGaEq8lyjAFEAEH8RL2kOq1UOTab7vBcTzF3voRAaMKgRY8w6G-L80L7H4Y3jrNhIV6GSnGRtsZDbBVgpR_eOlYfl1ZjQ_aAtckGvQazHRd8/s200/menu+accordion.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEityNWqb9TAtYugGiFvulFBksdcq3NWtX0lGaEq8lyjAFEAEH8RL2kOq1UOTab7vBcTzF3voRAaMKgRY8w6G-L80L7H4Y3jrNhIV6GSnGRtsZDbBVgpR_eOlYfl1ZjQ_aAtckGvQazHRd8/s72-c/menu+accordion.png
BLOG MASHARI
https://harysukasuka.blogspot.com/2013/01/cara-membuat-tab-menu-accordion.html
https://harysukasuka.blogspot.com/
https://harysukasuka.blogspot.com/
https://harysukasuka.blogspot.com/2013/01/cara-membuat-tab-menu-accordion.html
true
1510860441598238899
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy