Cara Membuat Menu Tab View Tanpa Edit HTML Di Blog - Sebenarnya menu tab view ini dibuat untuk menghemat space dan yang lebih utama untuk meningkatkan pageview blog karena pengunjung dengan mudah melihat menu yang ada berdasarkan label/kategori blog. Sebaiknya memasang menu tab view ini diletakkan di sidebar blog supaya lebih jelas terlihat oleh pengunjung untuk mencari artikel blog yang mereka butuhkan. Sekarang lihat bagaimana cara membuat / memasang menu tab view tanpa edit html di blogspot/blogger.
Cara Membuat Menu Tab View Tanpa Edit HTML
1. Login ke blogger.com
2. Pilih Tata Letak => Tambah Gadget => HTML/Javascript
3. Masukkan kode berikut ke dalam HTML/Javascript
<style type="text/css">
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Lebar Kotak Tab */
height: 22px; /* Tinggi Menu Utama Atas */
text-align: center; /* Posisi Teks Menu Tab */
margin: 5px 0px 0px 3px; /* Posisi Kotak Tab */
background-color: #484848; /* Warna background Kotak Tab */
padding-top: 2px; /* Spasi Atas */
border: 1px solid #ffffff; /* Warna border kotak Tab */
border-bottom: 1px solid #ccc; /*Warna border bawah kotak tab */
font-family: "Arial, Helvetica, sans-serif", Arial; /* Font Kotak Tab */
font-weight: 900; /* Ketebalan Teks kotak tab */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #736F6E; /* Warna background utama kotak tab */ }
div.TabView div.Pages
{
clear: both;
border: 1px solid #cccccc; /* Warna border Kotak Konten */
overflow: hidden;
background-color: #ffffff; /* Warna background Kotak konten */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 5px; /* Jarak teks dalam kotak content */
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 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><span style="color: #fff">Photoshop</span></a>
<a><span style="color: #fff">CorelDraw</span></a>
<a><span style="color: #fff">Blogging</span></a>
</div>
<div style="width: 290px; height: 200px;" class="Pages">
<div class="Page">
<div class="Pad">
<script style="text/javascript">
var numposts = 100;
var standardstyling = true;
</script>
<script type='text/javascript' src='https://drive.google.com/uc?export=download&id=0B04_nOTSYkOuS0d2TGpqUzVWeHc'></script>
<ul>
<script src="http://tips-erma.blogspot.com/feeds/posts/default/-/photoshop?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
</div>
</div>
<div class="Page">
<div class="Pad">
<script style="text/javascript">
var numposts = 100;
var standardstyling = true;
</script>
<script type='text/javascript' src='https://drive.google.com/uc?export=download&id=0B04_nOTSYkOuS0d2TGpqUzVWeHc'></script>
<ul>
<script src="http://tips-erma.blogspot.com/feeds/posts/default/-/coreldraw?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
</div>
</div>
<div class="Page">
<div class="Pad">
<script style="text/javascript">
var numposts = 100;
var standardstyling = true;
</script>
<script type='text/javascript' src='https://drive.google.com/uc?export=download&id=0B04_nOTSYkOuS0d2TGpqUzVWeHc'></script>
<ul>
<script src="http://tips-erma.blogspot.com/feeds/posts/default/-/blogging?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
</div>
</div>
</div></div></form>
<script type='text/javascript'>
//<![CDATA[function tabview_aux(TabViewId,id){var TabView=document.getElementById(TabViewId);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);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)}function tabview_switch(TabViewId,id){tabview_aux(TabViewId,id)}function tabview_initialize(TabViewId){tabview_aux(TabViewId,1)}
//]]>
</script>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
Keterangan :
1. Kode warna coklat merupakan keterangan dari kotak menu (silahkan diubah)
2. Kode warna biru silahkan ganti dengan Url blog anda
3. Kode warna merah silahkan ganti dengan label blog anda