Menu Accordion Untuk Penempatan Widget Atau Iklan

TutorNesia ~ Salah satu fungsi dari accordion menu selain memperingkas tampilan blog, juga dapat memperindah blog, seperti juga fungsi tabber atau tab view, jadi blog Anda akan kelihatan lebih ringkas dan rapi. Tutorial ini sudah agak lama, saya hanya memperbaharui tampilan menu-nya saja. Anda bisa letakkan menu accordion ini pada sidebar blog. Untuk melihat DEMO disini, bagaimana? Bagi teman-teman yang mau mencoba, berikut ini cara membuatnya.

1. Login ke Blogger dengan akun Anda
2. Masuk ke Layout, pilih HTML/Javascript
3. Kemudian masukkan kode berikut ini ke dalamnya.

Background Warna Terang

<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/AVvXsEgLHG12NWGzBcEu6txn68oZTYu0xuk5vIuxklhMBcM2mIoxaOCLDfOQqgiKOaILopsdTVbQn_AgzVMAO-yA2Sp7j14LSLHcLNY9ztQP0740h_H3Wo09FJ97ALJD4BSCjv9grSsXV-svVf0/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/AVvXsEi7Y8o577Qw3ZwlrrGIOrcDQGr_28j1ueUsF94T_xvtUZ4afyYScbHrwD4tt76G952zrPt_puOSQumKDG7KUQm3BCFy48q0NiZAlMAwkLrKNUyQuOJjvp1BWMT-q3BcxW4opgU0q1j6Q9I/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>

Background Warna Hitam

<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/AVvXsEjfpxyRrUE537-OBT2iH8bKchd0UowCB4CjRuibcSEldZZ4pciSsvDAfty44YAdkKyfFcEhRMVgoSS-keIOTCWPid8y4j4hK2HpkEebWqoSzbn367X-5ZH_esCRTbqd8TUn_-P5bav-ZIE/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/AVvXsEj5jMxTt3e858RC-a6SPyMqTzts6XSJjQMKTpT2XPaSmCDvXSN4px7Fg10O-SN2haib6BKO8LJDQhFkgy8Oz9D_eF-tXOPbaYLfArdprZTwupJMtHS7Vr_y4BuSPgK_ebkcbFOk6A_whK4/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>

Keterangan:

Title: Judul heading menu accordion
Isi konten: Silahkan Anda isi dengan widget yang akan dipasang (bisa tulisan, script iklan maupun script widget)

Saya menyisipkan kedua kode dengan Background berbeda, jadi sahabat tinggal pilih mana saja yang sahabat inginkan. Setelah selesai memasang menu Accordion, langsung menuju Edit HTML, dan temukan kode ini.

<b:include name="quickedit">

Setelah ketemu langsung hapus saja kode tersebut, alasannya adalah biar pada CHKME tidak menurunkan nilai SEO.

Sumber Berita Ini: Menu Accordion Untuk Penempatan Widget Atau Iklan

Riio Cyber-Art

Blog ini berisi informasi mengenai dunia blogging dan internet dari berbagai sumber, jika anda menyukai dan mau dapatkan Update berita terbaru, harap ikuti blog ini dengan memasukan Email anda atau mengikuti Twitter/Facebook, dengan begitu anda secara otomatis akan mendapatkan Update Berita terbaru disini.

Menu Accordion Untuk Penempatan Widget Atau Iklan

Sumber Berita Ini: Menu Accordion Untuk Penempatan Widget Atau Iklan

Update Artikel Terbaru

Entri Populer