Kali ini saya akan berbagi tips dan trik Blog yaitu Cara Buat Menu Tab View Unik. Menu ini berfungsi untuk menghemat ruang sidebar blog kamu, dengan Memasang Menu Tab View ini juga memberikan kesan menarik, biasanya jika kita mencari cara membuat menu tab view maka akan di suguhkan dengan cara membuatnya sangatlah rumit, tapi kali ini tidak begitu rumit dan caranya mudah dan simpel aja.Baiklah langsung saja berikut ini caranya,di bawah ini SS nya seperti blog Magetan Indah.
Mau ????? Kalo Mau Ikuti Tutorial Berikut ini.. :D
- Login ke blog kamu.
- Pilih Rancangan,tata letak lalu tambah gadget.
- Isikan code berikut ini.
<style type="text/css">
.blogtabs {padding: 0px !important;border: 0 solid #bbb;}
.blogtabs
h2 {float: left;margin: 0 2px 4px 0;font-size: 12px;padding: 3px
5px;border: 1px solid #ff0000;overflow: hidden;position:
relative;background: #e0e0e0;cursor:pointer;}
html .blogtabs h2.active {background: #F0FFFF;}
.blogtabs .widget-content {border: 1px solid #ff0000;padding: 10px;-moz-box-shadow: 1px 1px 10px #888;
-webkit-box-shadow:1px 1px 10px #888;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;;background: #fff;clear:both;margin:0;}
.btab, #showtabs {display:none;}
</style><br />
<script
type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script><br
/>
<script
type="text/javascript"
src="http://magetan-project.googlecode.com/files/SimpleTabViewJQuery.js"></script><br
/>
<script type="text/javascript">
$(document).ready(function() {
$('#showtabs').simpleBlogTab ({organictabs: 3});
});
</script><br />
<div id="showtabs">
</div>
- Perhatikan gambar di bawah ini.
- Taruh 3 tab yang ingin di masukkan ke menu tab view,sebagai contoh gambar di atas.Maka otomatis akan membuat menu 3 tab.
Diterbitkan Oleh : aanFurqaan aan
Anda sedang membaca artikel tentang Cara Membuat Menu Tab View Unik Tanpa Edit HTML. Oleh Admin, Anda diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya
Jika Anda menyukai Artikel di blog ini, Silahkan
klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di ukang-blogger
0 Comments