Untuk membuat menu tab view tanpa edit html ini, akan memudahkan pengunjung melihat dan mencari artikel blog anda yang lainnya dan yang jelas akan menambah jumlah pageview halaman blog anda. Sudah banyak blogger yang ngebahas menu tab view ini, namun Ermawati akan share juga mungkin anda masih membutuhkan dalam memasang menu tab view di blog kesayangan anda. Cara membuat menu tab view di blogspot tidaklah sulit, karena tanpa harus masuk ke edit html dan nantinya anda hanya memasukkan ke dalam kotak tab view menu kode-kode yang yang akan ditampilkan, misalnya tutorial blog, photoshop, coreldraw, ya pokoknya sesuai selera anda deh widget apapun juga boleh dimasukin. Ya udah sekarang simak aja bagaimana cara membuat dan memasang menu tab view di sidebar blog.
Cara membuat menu tab view tanpa edit html :
1. Seperti biasanya login ke Blogger.com
2. Pada dashboard anda pilih aja Tata Letak => Tambah gadget
3. Lalu anda pilih aja HTML/Javascript
4. Anda copy kode dibawah ini dan paste ke dalam HTML/Javascript
<style type="text/css">
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:8px; 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: 5px 5px}
</style>
<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>
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 300px;" class="Tabs">
<a>Judul Menu 1</a>
<a>Judul Menu 2</a>
<a>Judul Menu 3</a>
</div>
<div style="width:300px; height:250px; " class="Pages">
<div class="Page">
<div class="Pad">
Isi menu tab 1
</div>
</div>
<div class="Page">
<div class="Pad">
Isi menu tab 2
</div>
</div>
<div class="Page">
<div class="Pad">
Isi menu tab 3
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
5. Simpan
Keterangan :
Silahkan anda otak-atik sendiri sesuai keterangan yang sudah Ermawati kasih tanda merah diatas.
Semoga tutorial blog mengenai cara membuat menu tab view tanpa edit html ini dapat bermanfaat, see you.
