Advertising

Cara Membuat Tab View Pada Blogger



Siomponk.Com - Dalam sebuah blog, sebuah menu sangatlah penting terutama untuk membagi bagian tertentu sehingga lebih kelihatan rapi. Tetapi jika terlalu banyak menu tentu akan membuat kurang rapinya sebuah blog, maka dari itu diperlukannya Membuat Tab View agar lebih maksimal dan rapi.

Pada postingan saya kali ini, saya akan membahas Cara Membuat Tab View Pada Blogger. cara ini bisa anda pasang pada Widget Sidebar Blog, atau pada halaman depan atau home. Untuk membuat menu Tab View ini sebenarnya agak panjang karena kodenya juga lumayan banyak, jadi perhatikan langkah-langkah dibawah ini:

- Login kedalam dashboard blog anda (blogspot)
- Menuju Edit HTML pada template blog anda
- Copy dahulu template anda kedalam notepad, sebagai backup template
- Pasang kode berikut ini DIATAS kode </head>
<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>
- Kemudian letakkan kode berikut di DIATAS kode ]]></b:skin>
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: 3px;
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: 3px 5px;
}
- Lalu Simpan Template
- Kemudian menuju menu Tata Letak
- Kemudian tambahkan widget dengan format HTML / Javascript
- Masukkan kode berikut ini pada widget tersebut
<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 300px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>

</div>
<div class="Pages" style="width: 300px; height: 250px;">
<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />
</div>
</div>
<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />

</div>
</div>
<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
- Lalu Simpan

KETERANGAN:
  • Kode berwarna merah adalah lebar dan tinggi menu, anda dapat menyesuaikan dengan template anda.
  • Kode berwarna biru merupakan judul menu.
  • Yang berwarna ungu, merupakan isi dari menu.
Nah, demikianlah postingan saya kali ini tentang Cara Membuat Tab View Pada Blogger, adapun Tab View pada halaman depan (home) prinsipnya sama, tapi anda memasangkan kode yang ada pada widget diatas dipasangkan pada template anda.
Semoga postingan saya ini dapat bermanfaat untuk anda.
Salam...


▶ INFO ARTIKEL :
OLEH:
LABEL: Tips Blog,
JUDUL: Cara Membuat Tab View Pada Blogger
URL: http://www.siomponk.com/2015/03/cara-membuat-tab-view-pada-blogger.html
Loading...

Written by : - Part Time Blogger

author-photo Hal terpenting dalam pacaran adalah bukan dari Perbedaan Umur...
Tapi yang terpenting adalah Perbedaan Kelamin...

Follow On : Facebook | | Blogger

0 Response to "Cara Membuat Tab View Pada Blogger"

Poskan Komentar

PERATURAN BERKOMENTAR:

- Gunakan BAHASA yang baik dalam berkomentar
- Dilarang SPAM dalam berkomentar
- Dilarang SARA dan SARU dalam berkomentar
- Dilarang OOT dalam berkomentar

Jika terdapat hal demikian pada komentar anda, kami akan menghapus komentar anda tersebut.