Tab View Menu Pada Blog (Kolexi Blogspot)

Tab View Menu, merupakan satu widget yang bisa menyimpan beberapa widget lain dalam jumlah banyak, tergantung dari kebutuhan si pemasang. Dalam Blog kami ini (Kolexi Blogspot) memiliki Tab View Menu sebanyak 3 widget, diantaranya kami letakkan pada tampilan "awal halaman Blog", akhir dari setiap "posting/artikel" dan pada "sidebar". Tab View Menu yang akan kami bagikan ini adalah Tab View Menu yang ada pada awal halaman Kolexi Blogspot. Pada halaman kali ini, sengaja kami bagikan dikarenakan adanya permintaan dari sahabat kami "mas Iskaruji". Senang sekali mendapatkan permintaan, dan senang sekali rasanya bisa membantu. Sebelumnya, kami juga memohon maaf kepada mas Iskaruji, dikarenakan baru saat ini bisa mempublikasikan permintaanya untuk membantu memodifikasi template iskaruji.com.

Berikut ini adalah script dari Tab View Menu, yang sama persis dengan Tab View Menu pada awal halaman kami (Kolexi Blogspot). Anda bisa merubah ukuran lebar, tinggi ataupun menambah script lain sesuai keinginan.

Langkah Pertama
Dasbor >> Rancangan >> Edit HTML >> Beri Tanda Centang Pada Kotak Bertuliskan Expand Template Widget (cekbox).

Langkah Kedua
Simpan template anda terlebih dahulu (menghindari kerusakan tampilan template anda), kemudian silahkan letakkan kode CSS berikut diatas kode ]]></b:skin>

div.Tab div.Tabs
{
height: 22px;
overflow: hidden;
}
div.Tab div.Tabs a
{
float: right;
display: block;
width: 90px; /* Lebar Menu Utama Atas */ text-align: center;
height: 22px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
background-color: #ccc;
border: 1px solid #fff; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Arial", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #000; /* Warna Font Menu Utama Atas */
}

div.Tab div.Tabs a:hover
{
background-color: #92A117;
}
div.Tab div.Tabs a.Active
{
background-color: #92A117; /* Warna background Menu Utama Atas */
}

div.Tab div.Pages
{
clear: both;
border: 1px solid #fff; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #fff; /* Warna background Kotak Utama */
}
div.Tab div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.Tab div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

Langkah Ketiga
Letakkan Script HTML berikut dibawah kode <div id='content-wrapper'>

----------------------------------------------------------------------------------------------------

<b:if cond='data:blog.homepageUrl == data:blog.url'>

<form action='tabview.html' method='get'>
<div class='Tab' id='Tab'>
<div class='Tabs' style='width: 686px;'>
<span style='font-size:13px;color:#000000;padding:8px;'><b>Welcome</b></span>
<a><span style='font-size:11px;'>About Us</span></a>
<a><span style='font-size:11px;'>Guestbook</span></a>
<a><span style='font-size:11px;'>Sharelinks</span></a>
<a><span style='font-size:11px;'>Exchange Rate</span></a>
<a><span style='font-size:11px;'>New Comment</span></a>
</div>
<div class='Pages' style='width: 684px; height: 220px;'>

<div class='Page'>
<div class='Pad'>

<table style='text-align: left;'><tbody>
<tr> <td valign='top'>
<div style='background: #fff; border: 4px solid #fff; height: 148px; overflow: auto; padding: 10px; width: 399px;'>
<ul style='text-align: justify;'>

Kolexi.Blogspot.com adalah Media Informasi yang menyediakan berbagai macam koleksi diantaranya Widgets (Script Gadget Blogspot), Tutorial (For all), dan Kumpulan Kata-kata Bijak, serta tambahan mengenai informasi Lowongan Kerja dari Lokasi Admin Kolexi Blogspot bekerja saat ini (Always Update).<br/>

</ul>
</div>Chat for information<span style='float: left; margin-left: 70px; margin-right: -19px; padding-top: 3px;'><img alt='Yahoo' src='http://i53.tinypic.com/259yb0l.gif'/></span><br/>
<a href="ymsgr:addfriend?YOUR_ID"><img src="http://opi.yahoo.com/online?u=Your_ID&m=g&t=Style_ID" border="0"/></a>
</td> <td style='padding-left: 9PX;' valign='top'>
<div style='background: #fff; border: 4px solid #fff; height: 148px; overflow: auto; padding: 10px; width: 215px;'>
<div align='right' style='border-left: 1px solid #ccc; height:123px; color:#000000;'><b>Articles More</b><br/><br/>
<ul>
<li><a href='#'>Wacana -</a></li>
<li><a href='#'>News -</a></li>
<li><a href='#'>Tips -</a></li>
</ul>
</div>
</div>Chat for request<span style='float: left;margin-right: -19px;padding-left: 75px;padding-top: 3px;'><img alt='Yahoo' src='http://i53.tinypic.com/259yb0l.gif'/></span>
<a href="ymsgr:addfriend?YOUR_ID"><img src="http://opi.yahoo.com/online?u=Your_ID&m=g&t=Style_ID" border="0"/></a>
</td> </tr>
</tbody> </table>

</div>
</div>

<div class='Page'>
<div class='Pad'>

<table style='text-align: left;'><tbody>
<tr> <td valign='top'>
<div style='background: #fff; border: 4px solid #fff; height: 185px; overflow: auto; padding: 10px; width: 644px;'>

<center>WIDGET ANDA DISINI!!</center>

</div>
</td> </tr>
</tbody> </table>

</div>
</div>

<div class='Page'>
<div class='Pad'>

<table style='text-align: left;'><tbody>
<tr> <td valign='top'>
<div style='background: #fff; border: 4px solid #fff; height: 171px; overflow: auto; padding: 10px; width: 190px;'><center><b>BUSSINES</b></center><br/>
<center>
<ul>

</ul>
</center>
</div>
</td> <td style='padding-left: 9PX;' valign='top'>
<div style='background: #fff; border: 4px solid #fff; height: 171px; overflow: auto; padding: 10px; width: 190px;'><center><b>PARTNER</b></center><br/>
<center>
<ul>

</ul>
</center>
</div><div align='right'><a href='http://kolexi.blogspot.com/2011/04/link-exchange.html'>Add Your Link</a></div>
</td> </tr>
</tbody> </table>

</div>
</div>

<div class='Page'>
<div class='Pad'>

<table style='text-align: left;'><tbody>
<tr> <td valign='top'>
<div style='background: #fff; border: 4px solid #fff; height: 185px; overflow: auto; padding: 10px; width: 644px;'>

<center>WIDGET ANDA DISINI!!</center>

</div>
</td> </tr>
</tbody> </table>

</div>
</div>

<div class='Page'>
<div class='Pad'>

<table style='text-align: left;'><tbody>
<tr> <td valign='top'>
<div style='background: #fff; border: 4px solid #fff; height: 185px; overflow: auto; padding: 10px; width: 644px;'>

<center>WIDGET ANDA DISINI!!</center>

</div>
</td> </tr>
</tbody> </table>

</div>
</div>

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

<script type='text/javascript'>
tabview_initialize('Tab');
</script>

</b:if>

Langkah Keempat

Klik tombol Pratinjau, untuk melihat terlebih dahulu hasil sementara dari tampilan template yang telah anda edit. Bila dirasa template anda sudah cocok dan sesuai dengan hati/keinginan anda, silahkan Klik tombol Simpan Template.

Selesai.

Keterangan:
>> Teks warna hijau adalah kode/script untuk menghilangkan/menyembunyikan widget.
>> Untuk teks warna orange, ubah/edit sesuai dengan ID_email anda.

Kolexi Blogspot

Tab View Menu Pada Blog (Kolexi Blogspot)

0 komentar:

Posting Komentar

Paling Banyak Dibaca

Kategori

Brankas