Dengan membuat dan memasang Menu Tab View yang penempatannya di sidebar blog, akan memudahkan pengunjung melihat artikel anda yang lainnya yang otomatis akan meningkatkan pageview blog anda. Bagaimana cara membuat menu tab view di sidebar blog tanpa Edit Html? simak tutorialnya dibawah ini dan screenshotnya tampak seperti ini.
Cara Membuat Menu Tab View Di Sidebar Blog :
1. Login ke blogger.com
2. Pilih Tata Letak => Tambah Gadget => HTML/Javascript, letakkan kode berikut ini
<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 1</a>
<a>Judul 2</a>
<a>Judul 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>
Keterangan : untuk warna biru isi dengan judul dan widget apa aja
3. Simpan
Simak juga postingan sebelumnya mengenai cara membuat daftar isi accordion di sidebar blog.
Silahkan anda coba untuk tutorial diatas, semoga bermanfaat.
