Membuat Menu Tab View Di Sidebar Blog - Sekedar share, sebenarnya tutor ini sudah sangat mmenjamur di kalangan blogger. Karna memang widget yang satu ini lumayan populer. Penerapan yang mudah dan manfaatnya menjadi unsur pokok widget ini sangatlah digemari. Menu Tab view juga dapat menghemat tempat pada sidebar karna berbasis tab. Widget yang satu ini pun juga sangat mudah di modifikasi. Tak menutup kemungkinan lain waku saya juga akan share tutorial sejenis. Baik, langsung saja ya.
1. Masuk akun Blogger sobat.
2. Klik Template >> Edit HTML.
3. Letakkan kode berikut tepat dibawah ode <head>
<script src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/tabview.js' type="text/javascript"/>
4. Kemudian letakkan kode berikut diatas kode ]]></b:skin>
/* Menu Tab View
----------------------------------------------- */
div.TabView div.Tabs {widht:100%;
padding-top: 0px;
height: 24px;
overflow: hidden;
}
/* Menu Utama */
div.TabView div.Tabs a {
float: left;
display: block;
width: 110px; /* ukuran lebar menu */
text-align: center;
height: 30px; /* ukuran tinggi menu */
padding-top: 7px;
margin-right:4px; /* jarak antarmenu */
vertical-align: middle;
border: 1px solid #ccc; /* warna border menu */
border-bottom-width: 0;
margin:0px;
padding: 5px 0;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:bold;; /* besar hurup menu */
background-color: #4c4c4c; /* warna latar menu */
color: #FFFFFF; /* warna hurup menu */
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-webkit-border-top-left-radius:15px;
-webkit-border-top-right-radius:15px;
}
div.TabView div.Tabs a.Active {
background-color: #FFFFFF; /* warna background menu aktif */
color: #000000;
}
div.TabView div.Tabs a:hover {
background-color: #999999; /* warna background menu hover */
color: #FFFFCC;
font-weight: bold;
}
/* Kotak Utama */
div.TabView div.Pages {
clear: both;
border: 1px solid #CCC; /* warna border kotak utama */
overflow: hidden;
background:#FFFFFF; /* background kotak utama */
}
div.TabView div.Pages div.Page {
height: 100%;
padding: 7px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad {
padding: 5px 0px;
font-size: 12px; /* besar hurup kotak utama */
}
5. Kemudian simpan template anda.
7. Belum selesai broo!! Setelah itu masuk Tata-letak >> Add Gadget >> HTML/JavaScript.
Masukkan kode berikut.
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 100%;" class="Tabs">
Disini letakkan kode untuk menu tab 1
</div>
<div style="width: 99%; height: 200px;" class="Pages">
<!--Awal Menu 1-->
<div class="Page"><div class="Pad">
Disini letakkan kode untuk menu tab 2 </div></div>
<!--Akhir Menu 1-->
<!--Awal Menu 2-->
<div class="Page"><div class="Pad">
Disini letakkan kode untuk menu tab 3 </div></div>
<!--Akhir Menu 2-->
<!--Awal Menu 3-->
<div class="Page"><div class="Pad">
Disini letakkan kode untuk menu tab 4 </div></div>
<!--Akhir Menu 3-->
</div></div></form>
<script type="text/javascript">tabview_initialize('TabView');</script>
<div style="font-size:90%; text-align:right; text-shadow:2px 2px 2px #adadad;"><a href="http://www.artugan.tk/2014/05/membuat-menu-tab-view-di-sidebar-blog.html" target="_blank" title="Tabview Widget">Get This Widget</a></div>
Catatan: Anda bisa berkreasi sendiri pada tahap ini.
8. Save dan lihat hasilnya.
Demikian post dari saya semoga bermanfaat.
Thanks God!!
5 komentar
keren om :D ijin coba :c
BalasTutornya bagus
BalasWah, keren nih :)
Balasntar mau aku pasang di template baru ku sob
Balasbiar ruang tidak terlalu sempit kalo pake tab view sidebar
bener sob.. menghemat ruang bgt :)
Balas✔ Berkomentarlah Dengan Baik dan Sopan.
✔ Mohon Tinggalkan Komentar Sesuai Artikel di Atas.
✘ Dilarang Memasukkan Link Hidup Pada Saat Berkomentar.
✘ Komentar yang bersifat spam, sara dan ancaman akan langsung di hapus.