Cara Membuat Tab Menu pada Gadget

Unknown - Selasa, 06 November 2012 - 07:00 wita
Melanjutkan Cara Membuat Tab Menu di Blog yang scriptnya disimpan pada Template :z; sekarang dengan cara lain yaitu langsung disimpan pada Widget yang bagi saya pribadi lebih gampang saat mau edit [setting] dibandingkan dengan yang sebelumnya :w;


Caranya sebagai berikut :
  • Masuk Account Blogger dengan ID kawan
  • Pada Dasbor pilih Tata Letak - Tambah Gadget - HTML/JavaScript
  • Copas Script berikut kedalamnya


<style type="text/css">
div.TabView div.Tabs
{height: 30px;overflow: hidden}
div.TabView div.Tabs a {float:left; display:block; width: 73px; /* Lebar Menu Utama Atas */
text-align:center ; height: 30px; /* Tinggi Menu Utama Atas */
padding-top:5px; vertical-align:middle; border:1px solid #95CAFF; /* Warna border Menu Atas */
border-bottom-width:0; text-decoration: none;font-size:12px; font-family: "Arial";/* Font Menu Utama Atas */}
div.TabView div.Tabs {background:#FFF;color:#000;border:1px solid #95CAFF;text-decoration:none;}
div.TabView div.Tabs a:hover{background:#585858;color:#FFF;border:1px solid #95CAFF;text-decoration:none;}
div.TabView div.Tabs a.Active{border:1px solid #00F; background:#95CAFF; color:#00F;font-style: normal;border:1px solid #95CAFF;text-decoration:none;/* Warna background Menu Utama Atas */ }
div.TabView div.Pages {clear:both; border:1px solid #95CAFF; /* Warna border Kotak Utama */ overflow:hidden; background-color:#95CAFF; /* 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 Tab 1</a>
<a>Judul Tab 2</a>
<a>Judul Tab 3</a>
<a>Judul Tab 4</a>
</div>
<div style="width:300px; height:250px;" class="Pages">
<div class="Page">
<div class="Pad">
Tab 1 - SIMPAN DISINI FILE KAWAN
</div>
</div>
<div class="Page">
<div class="Pad">
Tab 2 - SIMPAN DISINI FILE KAWAN
</div>
</div>
<div class="Page">
<div class="Pad">
Tab 3 - SIMPAN DISINI FILE KAWAN
</div>
</div>
<div class="Page">
<div class="Pad">
Tab 4 - SIMPAN DISINI FILE KAWAN
</div>
</div>
</div></div></form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

  • Simpan Blog kawan :q;
  • Cara setting / Edit sama seperti sebelumnya



Berbagi Artikel :

Cara Membuat Tab Menu pada Gadget
Rate this posting:
{[["☆","★"]]}

Kalau pada Artikel Cara Membuat Tab Menu pada Gadget
kurang jelas atau ada Artikel, Link yang tak jalan / rusak bisa disampaikan lewat Komentar
mudah-mudahan saya bisa segera memperbaiki
---ooOOOoo---
P.pw - Shorten urls and earn money!

Artikel Menarik Lainnya

About me


Saya hanyalah Manusia Biasa ingin memberi kan yang Terbaik, walau itu belum tentu Terbaik bagi Kawan....

15 Komentar pada : “Cara Membuat Tab Menu pada Gadget”

  1. Terima kasih , berhasil ....
    www.edisukarman.com

    BalasHapus
  2. Balasan
    1. Saya juga belum ngerti apa yang dimaksud :x;

      Hapus
  3. agan punya ane berantakaaan,soal lbr tinggi diisi berapa gan,trus pada kata 'Tab 1 _isi file sobat"
    tab 1 apa diisi judl tabnya trus file yg mau dimasukin itu langsung byk? :b;

    BalasHapus
    Balasan
    1. Lebar dan tinggi sudah ada diatas dan dibawah <a>Judul Tab 1</a> sedangkan untuk <b>Tab-1 simpan file kawan disini </b>ganti dengan isi judul tadi misalnya script Daftar isi :q;

      Hapus
    2. bro, itu kalau udah masukan tulisan daftar isi (menggantikan judul tab 1), linknya gmana ya? :)

      Hapus
    3. Kalau untuk Judul tidak pakai Link kawan, lihat tuh contohnya disidebar :f; misalnya Daftar Isi pada teks berwarna merah [tab-1 simpan file kawan disini] diganti dengan script Daftar Isi :x;

      Hapus
  4. saya belum mengerti cara masukan file ke bagian yg gan berikan, ini file yang mana gan?
    oiya gan, saya suka tab yg ada bagian" didalmnya spt kolom search, id yg ada di blog ini. mohon penjelasannya.

    BalasHapus
    Balasan
    1. file disini maksudnya script, seperti contohnya di sidebar Blog saya ini :i;
      Navbar Menu itu cuma pada Judulnya saya ganti dengan image contoh :
      <li><a href='http://blogbego-creation.blogspot.com/2011/12/template-blogger.html' title='Template Gratis'><b> Template Gratis </b></a></li>
      Template Gratis adalah judul saya ganti dengan :
      <img border='0' height='40' src='http://2.bp.blogspot.com/-_z9Yi4tsb9g/UpGzqqI5t8I/AAAAAAAAJJU/C4jDPEDze5M/s400/Blogger+Template.png' width='40'/>

      Hapus
  5. terima kasih gan atas penjelasannya. semoga selalu sukses..

    BalasHapus
  6. gan lok mau tabnya membuka new windows gmana caranya tolong saya gan please

    BalasHapus
    Balasan
    1. mungkin yang kawan maksud Link terbuka di tab baru, kalau benar caranya seperti ini : letakkan diatas <b:skin></b:skin> kode berikut
      <base target='_blank'/>

      Hapus
  7. maksud dari simpan file itu,,postnya atau url nya gan,,
    dan kok filenya ikut di barnya,,tidak di belakangan muncul saat di klik,,,
    mohon penjelasannya gan !!!

    BalasHapus
    Balasan
    1. saya kurang ngerti maksudnya, mungkin tabnya tak berfungsi alias isinya semua di tab 1, kalau itu maksudnya coba perhatikan setelah simpan file disini ada </div></div> apa sudah sama dengan <div><div> pembukanya

      Hapus

BERIKAN KOMENTAR SESUAI TOPIK
DENGAN BAHASA YANG SOPAN,
JANGAN MENGHINA, SARA / ETNIS DAN SPAM ATAU PAKAI NAMA ANONIM

Klik Emoticon untuk melihat Kodenya

Dapatkan Update Terbaru
BlogBego Creation di Email Kawan





BANNER [300x250]
© 2013 - BLOGBEGO CREATION | Powered by Blogger
Design Template by : Blogger Edan