Halo teman-teman gimana kabarnya? baikkan? sekarang dalam postingan/articles kali ini blog oto website akan membahas tentang Membuat Dan Memasang Menu Tab View Di Blog, pasti udah pada tau dong? bagi yang belum tau akan saya jelaskan sedikit apa maksud postingan/articles kali ini.
Menu Tab View adalah salah satu widget yang bisa di bilang praktis yang bisa kita jadikan satu tempat di blog kita seperti kita menjadikan daftar isi, label, statistik, dan lain-lain.
Jadi kita menjadikannya satu widget simple contohnya sobat bisa lihat di gambar samping, dan mungkin bisa sobat lihat juga di widget blog ini(jika blog ini masih menggunakannya)
jadi di tab menu widget saya hanya memberi tiga kategori seperti daftar isi, label, dan statistik!
sebenarnya tabnya bisa kita tambah tergantung pemilik blog, tapi kalo blog ini cukup hanya tuga saja.
sobat juga bisa membuat menu tab view sobat dan dapat memberikan kategori tab view sobat sendiri, gimana apa sobat berminat membuat menu tab view??? hayo berminat tidak?hehehe....
Jika sobat berminat sobat hanya tinggal menambahkan kode script di element HTML dan menambah kode script di widget,
oke dah tidak panjang-panjang lagi karna saya juga sudah kehabisan kata-kata hehehe....
bagi sobat yang berminat kita lansung bahas aja ya, silahkan sobat ikuti langkah-langkah berikut!

1.Pertama-tama silahkan sobat login ke blog sobat blogger.com.

2.Jika sudah masuk pada menu tab di atas klick Rancangan ➮ Edit HTML.

3.Pada Kotak Edik HTML sekarang sobat cari kode </head> jika kesulitan mencarinya coba baca Cara Cepat Mencari Kode HTML.


4.Bila sudah ketemu, sekarang copy kode scrip berikut dan paste/letakkan di atas kode tadi, ya'itu 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>

5.Masih dalm kotak HTML, sekarang cari kode ]]></b:skin> jika sudah ketemu sekarang letakkan kode script berikut di atas kode tadi.

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;
}

6.Sekarang simpan.

7.Tinggal satu langkah lagi, sekarang pada menu tab klick Rancangan ➮ Tambah Gadget ➮ Pilih HTML/Java Script ➮ pada kolom HTML/Java Script copy kode di bawah ini dan pastekan ke dalamnya.

<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>

8.Simpan, dan lihat hasilnya!

Keterangan:
a.
Silahkan sobat sesuaikan sendiri kode script pada nomer 2.
Seperti warna border dan jenis font huruf, dan lainnya.
Untuk melihat kode warna sobat bisa melihat di sini Kode Waran V1 - Kode Warna V2 dan Kode Warna V3.
Untuk melihat macam-macam jenis font huruf sobat bisa lihat di sini Macam-Macam Jenis Font Huruf.

b.
Silahkan sobat ganti teks waran merah dengan judul tab/menu sobat seperti Daftar Isi/labe/Statistik/Lain sebagainya.
Ganti warna biru dengan kode link/script/gambar yang sobat suka.


untu memasukkan daftar isi blog sobat kedalam Menu Tab View ada 2 cara, silahkan sobat pilih cara mana yang sobat suka!

cara a;



<br />
<a href='LINK URL'>JUDUL</a>
<br />
<a href='LINK URL'>JUDUL</a>
dan seterusnya . . .

contoh:

<br />
<a href=' http://otowebsite.blogspot.com/2011/12/cara-membuat-e-mail-di-g-mail.html ' > Cara Membuat E-mail Di G-mail</a>
<br />
<a href=' http://otowebsite.blogspot.com/2011/12/cara-membuat-e-mail-di-yahoo.html ' > Cara Membuat E-mail Di Yahoo</a>
dan sterusnya . . .

atau cara b;


<li><a href='LINK URL' >JUDUL</li>
<li><a href='LINK URL' >JUDUL</li>
dan seterusnya . . .


contoh;

<li><a href=' http://otowebsite.blogspot.com/2011/12/cara-membuat-e-mail-di-g-mail.html ' > Cara Membuat E-mail Di G-mail </li>
<li><a href=' http://otowebsite.blogspot.com/2011/12/cara-membuat-e-mail-di-yahoo.html ' > Cara Membuat E-mail Di Yahoo</li>
dan seterusnya.

Gimana sudah ngerti kan???

Bagaimana apakah berhasil menerapkannya di blog sobat? silahkan tinggalkan komentar atau tanggapan sobat tentang postingan/articles kali ini!

Poskan Komentar Blogger Disqus

  1. trusbagaiman utnuk memasukan materinya

    BalasHapus
  2. @stkipmuning urangsunda Untuk memasukkan script gnti Tab 1.1 dst dengan script yang ingin di masukkan.

    BalasHapus
  3. untuk memasukan label gimana ?

    via email : rendydwipradana@gmail.com

    BalasHapus
  4. @Rendy Dwi PradanaUntuk memasukkan nama label secara manual sama saja, seperti cara di atas!

    <br />
    <a href='http://URL LABEL'>Nama Label</a>
    <br />
    <a href='http://URL LABEL'>Nama Label</a>
    dan seterusnya . . .

    BalasHapus
Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Penting:
Jika Anda mengajukan pertanyaan klik 'Subscribe by email' link di bawah form komentar untuk mengetahui komentar balasan.

Khusus untuk membalas komentar disarankan menggunakan tombol balas/reply di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur.

Dilarang Meninggalkan Link Aktif, Link Aktif Terpaksa Akan Saya Hapus Dari Komentar.

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

Konversi Kode di Sini! Daftar Member Aktif

 
Top