Cara Membuat Tab View Menu 3 Kolom di Blog

Labor Blog Tutorial Blogger - Sesuai judulnya Tab View Menu 3 Kolom, berarti dalam satu tampilan sidebar widget akan ada 3 buah widget (bisa apa saja, contoh: Buku Tamu, script Top Post atau Komentar, Kumpulan Banner dan sebagainya), cara ini juga akan membuat blog sedikit lebih rapi dan tidak banyak menguras tempat.



Ok, buat teman-teman yang ingin membuat Tab View Menu 3 Kolom ini, silahkan ikuti langkah-langkah di bawah ini :

1. Masuk ke Blogger > Dashboard Blogger > Tata Letak > Tambah Widget > HTML/Javascript.
2. Pastekan kode dibawah ini
<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: #000; /* 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>
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 300px;" class="Tabs">
<a><span style="color: #fff">Tab 1</span></a>
<a><span style="color: #fff">Tab 2</span></a>
<a><span style="color: #fff">Tab 3</span></a>
</div>
<div style="width: 310px; height: 400px;" class="Pages">
<div class="Page">
<div class="Pad"> <a href="http://www.google.com/">mbah google</a>
</div></div>
<div class="Page">
<div class="Pad"> <a href="http://www.google.com/">mbah google</a>
</div></div>
<div class="Page">
<div class="Pad"> <a href="http://www.google.com/">mbah google</a>
</div></div>
</div>
</div>
</form>
<script src="http://airalokadotcom.googlecode.com/files/tab%20view.js">
</script>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
<div style="text-align:right;margin-right:7px;"><a title="Widget Tab View 3 Kolom" style="font:bold 8px Arial,Sans-Serif;color:#666 !important;text-shadow:0px 1px 0px rgba(255,255,255,0.1);opacity:1 !important;visibility:visible !important;display:block !important;" href="http://mubdi-blog.blogspot.com/2013/04/cara-membuat-widget-tab-view-3-kolom.html" target="_blank">&#9658;Get this widget</a></div>

















3. Jika sudah maka lanjutkan dengan mencari kode </head>
4. Lalu copy kode di bawah ini dan pastekan di atas kode </head>
<script type='text/javascript'>
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);
// ----- Tabs -----
var Tabs = TabView.firstChild;
while (Tabs.className != &quot;Tabs&quot; ) Tabs = Tabs.nextSibling;
var Tab = Tabs.firstChild;
var i = 0;
do
{
if (Tab.tagName == &quot;A&quot;)
{
i++;
Tab.href = &quot;javascript:tabview_switch(&#39;&quot;+TabViewId+&quot;&#39;, &quot;+i+&quot;);&quot;;
Tab.className = (i == id) ? &quot;Active&quot; : &quot;&quot;;
Tab.blur();
}
}
while (Tab = Tab.nextSibling);
// ----- Pages -----
var Pages = TabView.firstChild;
while (Pages.className != &#39;Pages&#39;) Pages = Pages.nextSibling;
var Page = Pages.firstChild;
var i = 0;
do
{
if (Page.className == &#39;Page&#39;)
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+&quot;px&quot;;
Page.style.overflow = &quot;auto&quot;;
Page.style.display = (i == id) ? &#39;block&#39; : &#39;none&#39;;
}
}
while (Page = Page.nextSibling);
}
// ----- Functions -------------------------------------------------------------
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
</script>





5. Jika dirasa sudah benar, lalu Save. (Jika dilakukan dengan benar maka hasilnya akan seperti milik saya). Seperti itulah Cara Membuat Tab View Menu 3 Kolom di Blog.



Selamat Mencoba & Berkreasi. Semoga Bermanfaat... ^_^


Cara Membuat Tab View Menu 3 Kolom di Blog Cara Membuat Tab View Menu 3 Kolom di Blog Reviewed by Abdul Hamid on 7/21/2018 03:01:00 PM Rating: 5
Powered by Blogger.