Cara Membuat Tab Menu Di blogger (Tutorial Blog)

Cara Membuat Tab Menu Di blogger (Tutorial Blog) - Dalam tutorial kali ini saya akan share "cara membuat tab menu" dengan cara ini blog kita bisa lebih efektif dan tidak membuat halaman sidebar kita terlihat penuh, dengan tips ini blog kita akan terlihat simple dan menarik.

Untuk demo seperti gambar di bawah :

Gimana shob tertarik g??? yang atas desain saya sendiri, shobat bisa desain sendiri dengan warna kesukaan shobat. langsung saja berikut tutorial nya :

• Login ke blogger shobat
• Masuk ke menu Tataletak/Layout
• AddGadget =>> Pilih HTML/JavaScript
• Copy kode berikut di dalamnya

<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/AVvXsEhSR19H-Tx68j_qxRTrSa2cfeLFUphO5UbYEpjesMrGtL4SBcnWjsSQjXUwzBi8MQK-T8nXC2hmzmF-V-P_XfGTUj3UXw6uKMDsde4fMCjtcnetj6pIKsfKuJws33NHt6uCz-6ixkZdwZs/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/AVvXsEiqs3lBi0Mt7obNzcRONVldR3t1qbEe90SAaZhsDWRGYC0My1TllUF2kUHUHhlx3t76jvIcc5LSkkVdPjJnHrU85M8Q8EsHsbbmHGmW7rCBax-mKv3FSCv3udmSlquf7Zj1x2zkbt9pMAw/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>Judul Tab 1</h2>
<div class="content">

Isi konten di sini

</div>
<div id="accordion">
<h2>Judul Tab 2</h2>
<div class="content">

Isi konten di sini

</div>
<div id="accordion">
<h2>Judul Tab 3</h2>
<div class="content">

Isi konten di sini

</div>
<div id="accordion">
<h2>Judul Tab 4</h2>
<div class="content">

Isi kontendi sini

</div>
<div id="accordion">
<h2>Judul Tab 5</h2>
<div class="content">

Isi kontendi sini

</div>
</div></div></div></div></div>

Keterangan :
Untuk Script bercetak merah ubah dengan judul konten yang mau shobat tampilkan.
Untuk Script bercetak biru isi dengan Konten shobat yang akan shobat tampilkan pula.

• Langkah terakhir Simpan dan lihat hasilnya

Mudah bukan shob?? 

Demikian saya share Cara Membuat Tab Menu Di blogger (Tutorial Blog), mudah mudahan bermanfaat, bila ada yang shobat belum ngerti tinggalkan komentarnya. atau shobat bisa langsung komentar dan saranya klik contak me :