Cara Membuat Menu Tab View Tanpa Edit HTML Berdasarkan Label Blog

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://IndoINT.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://IndoINT.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://IndoINT.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
Sumber http://tips-erma.blogspot.com/

Share this post