Membuat Tab Menu di Sidebar Blog
Membuat Tab Menu di Sidebar Blog
- Beberapa waktu yang lalu bang aan pernah disinggung mengenai cara
membuat tab menu di sidebar blog oleh salah seorang sahabat Super-Bee
yang berasal dari negara tetangga yaitu Malaysia, melalui fibox yang
berada pada halaman utama blog Super-Bee ini. Pertanyaan beliau
sebenarnya tidak begitu bang aan mengerti karena bahasa mereka dengan
bahasa indonesia yang kita gunakan sedikit berbeda. Bang aan pikir
maksud dari pertanyaan beliau membuat tab menu dropdown
yang berada di bawah header, namun setelah bang aan tanyakan lagi
ternyata tab menu yang berada di sidebar blog yang memiliki multi
fungsi. Kemudian bang aan jawab aja bahwa bang aan belum memposting
tutorial membuat tab menu seperti itu.
Nah pada kesempatan ini, sekalian menjawab pertanyaan sahabat Super-Bee dari negara jiran tersebut, bang aan menyempatkan diri membuat tutorial blogger mengenai tab menu multi fungsi yang berada di sidebar. Untuk lebih jelasnya lihat screnshoot dibawah ini
Sebelum kita masuk ketutorial membuat tab menu ini, penting sekali bang aan himbau kepada sahabat Super-Bee agar terlebih dahulu mendownload templatenya, hal ini dilakukan untuk berjaga-jaga jika nanti dalam pengerjaan membuat tab menu terjadi kesalahan, karena kode yang akan ditambahkan lumayan banyak. Jika sudah mendownload templatenya, berikut tutorial cara membuat tab menu di sidebar blog.
1. Login ke Account bogger Anda
2. Untuk dasbor blogger baru
Klik template > Edit HTML > Klik Lanjutkan > Beri ceklis/centang pada kotak kecil Expan template widget
Untuk dasbor blogger lama
Klik rancangan > Edit HTML > Beri ceklis/centang pada kotak kecil Expand template widget
3. Cari kode ]]></b:skin> (gunakan ctrl + f atau F3 untuk mempermudah pencarian)
4. Jika sudah dapat masukkan kode berikut ini tepat diatas ]]></b:skin>
5. Kemudian cari kode </head> jika sudah dapat, tambahkan kode berikut ini dibawah </head>
6. Kemudian simpan template Anda.
7. Langkah selanjutnya klik tambah gadget atau add gatget dan pilih opsi HTML/Javascript
8. Selanjutnya copy-paste kode berikut ini kedalamnya
Perhatikan kode yang saya beri tanda wana diatas :
Demikianlah cara membuat tab menu di sidebar blog yang dapat saya sampaikan, semoga bermanfaat. Pastikan bahwa Anda selalu mengunjungi blog Super-Bee untuk mendapatkan informasi update mengenai tutorial dan cara membuat blog serta informasi lainnya.
Nah pada kesempatan ini, sekalian menjawab pertanyaan sahabat Super-Bee dari negara jiran tersebut, bang aan menyempatkan diri membuat tutorial blogger mengenai tab menu multi fungsi yang berada di sidebar. Untuk lebih jelasnya lihat screnshoot dibawah ini
Sebelum kita masuk ketutorial membuat tab menu ini, penting sekali bang aan himbau kepada sahabat Super-Bee agar terlebih dahulu mendownload templatenya, hal ini dilakukan untuk berjaga-jaga jika nanti dalam pengerjaan membuat tab menu terjadi kesalahan, karena kode yang akan ditambahkan lumayan banyak. Jika sudah mendownload templatenya, berikut tutorial cara membuat tab menu di sidebar blog.
1. Login ke Account bogger Anda
2. Untuk dasbor blogger baru
Klik template > Edit HTML > Klik Lanjutkan > Beri ceklis/centang pada kotak kecil Expan template widget
Untuk dasbor blogger lama
Klik rancangan > Edit HTML > Beri ceklis/centang pada kotak kecil Expand template widget
3. Cari kode ]]></b:skin> (gunakan ctrl + f atau F3 untuk mempermudah pencarian)
4. Jika sudah dapat masukkan kode berikut ini tepat diatas ]]></b:skin>
div.TabView div.Tabs
{
height: 30px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 98px; /*Lebar Menu Utama Atas*/
text-align: center;
height: 30px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #BDBDBD; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Verdana", Serif; /* Font Menu Utama Atas */
font-weight: bold;
color: #000; /* Warna Font Menu Utama Atas */
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #E6E6E6; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #BDBDBD; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #E6E6E6; /* Warna background Kotak Utama */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
5. Kemudian cari kode </head> jika sudah dapat, tambahkan kode berikut ini dibawah </head>
<script type='text/javascript'>
//<![CDATA[
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);
// ----- Tabs -----
var Tabs = TabView.firstChild;
while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
var Tab = Tabs.firstChild;
var i = 0;
do
{
if (Tab.tagName == "A")
{
i++;
Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
Tab.className = (i == id) ? "Active" : "";
Tab.blur();
}
}
while (Tab = Tab.nextSibling);
// ----- Pages -----
var Pages = TabView.firstChild;
while (Pages.className != 'Pages') Pages = Pages.nextSibling;
var Page = Pages.firstChild;
var i = 0;
do
{
if (Page.className == 'Page')
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
Page.style.overflow = "auto";
Page.style.display = (i == id) ? 'block' : 'none';
}
}
while (Page = Page.nextSibling);
}
// ----- Functions -------------------------------------------------------------
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
//]]>
</script>
6. Kemudian simpan template Anda.
7. Langkah selanjutnya klik tambah gadget atau add gatget dan pilih opsi HTML/Javascript
8. Selanjutnya copy-paste kode berikut ini kedalamnya
<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 300px;">
<a>Tab 1</a><a>Tab 2</a><a>Tab 3</a></div>
<div class="Pages" style="width: 300px; height: 300px;">
<div class="Page">
<div class="Pad">
Tab 1.1 <br />Tab 1.2 <br />Tab 1.3 <br /></div>
</div>
<div class="Page">
<div class="Pad">
Tab 2.1 <br />Tab 2.2 <br />Tab 2.3 <br /></div>
</div>
<div class="Page">
<div class="Pad">
Tab 3.1 <br />Tab 3.2 <br />Tab 3.3 <br /></div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script><span style="font-size: 50%">Widget edited by <a href="http://super-bee.blogspot.com/" target="_blank" rel="follow">cara membuat blog</a></span>
Perhatikan kode yang saya beri tanda wana diatas :
- Untuk kode yang saya beri tanda warna merah (300) adalah ukuran lebar dan tinggi tab menu. Sesuaikan lebar dan tingginya pada blog Anda
- Untuk kode yang saya beri tanda warna biru merupakan judul tab menu yang akan ditampilkan. Sesuaikan dan isi dengan yang Anda inginkan.
- Untuk kode yang saya beri tanda warna hijau merupakan isi dari menu. Anda dapat menambahkan link, gambar, banner atau daftar isi blog.
Demikianlah cara membuat tab menu di sidebar blog yang dapat saya sampaikan, semoga bermanfaat. Pastikan bahwa Anda selalu mengunjungi blog Super-Bee untuk mendapatkan informasi update mengenai tutorial dan cara membuat blog serta informasi lainnya.
