Cara Membuat Tombol Menu di Sidebar
Kali ini saya akan posting mengenai cara membuat tombol menu di sidebar yang saya copas dari www. Maskolis.com. Tombol ini sangat keren sehingga tidak salah kalau ente coba pasang di blog sobat. Selain menarik untuk menghias blog widget ini juga dapat meminimalisir banyaknya widget yang akan di pakai di sidebar. Widget ini bisa mengcover beberapa link sobat dalam satu widget. Bagi yang ingin mencoba memasang dapat mengikuti tutirial di bawah ini
1. Login ke akun Blogger
2. Pilih Tata Letak => Tambahkan GadgetKali ini saya akan posting mengenai cara membuat tombol menu di sidebar yang saya copas dari www. Maskolis.com. Tombol ini sangat keren sehingga tidak salah kalau ente coba pasang di blog sobat. Selain menarik untuk menghias blog widget ini juga dapat meminimalisir banyaknya widget yang akan di pakai di sidebar. Widget ini bisa mengcover beberapa link sobat dalam satu widget. Bagi yang ingin mencoba memasang dapat mengikuti tutirial di bawah ini
1. Login ke akun Blogger
3. Pilih HTML/JavaScript
4. Copy kode di bawah ini:
<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/AVvXsEhnN26fLab88HGv-J223oD6b5ep-Y0OhSNouua_j-UbHZu2IxIiU2Tt_8QJxDS3BJDft96xDwGHt5KDv5SY05b7cgem-n4qHhTEkWZAaEb1zkvAoX5fPvMMkI1tuzPYLnUF3S0YPYKkC6A/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/AVvXsEjNBA_xEDUivtyuOg7joqK8rJa3I-A4k5rQVChqUQKUYA87TF5aQbvGlDhQMkYnTQSGIVS9RZPvKGOJW_Mlnbrt0Z2vv3GU1uIpTJU-sQ7lLcLnF6mM1E1LjaTxdFboQJseKaREXWsBs5A/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 kontendi 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>
Ket: Yang berwarna kuning silahkan ganti dengan judul tab dan isi konten Sobat. Isi konten misalnya: kode script iklan, script artikel, komentar atau script widget lainnya.
Untuk warna dan ukuran pixelnya bisa di sesuaikan dengan keinginan Sobat.
5. Klik simpan.
No comments :
Post a Comment