Cara Membuat Tab View Keren Dengan Animasi Naga Dan Petir

Kali Ini Saya Akan Membuat Postingan Tentang Cara Membuat Tab View Keren Dengan Animasi Naga Dan Petir
Tab View Ini Saya buat sendiri dan kode Scriptnya Pun Saya Buat Sendiri Kalau Sobat Ingin Mengcopy Pastekan Postingan Ini Boleh saja Tapi harus dengan sumbernya yaitu saya
乂◕‿◕乂.
Berikut Ini  Kode Cara Membuat Tab View Keren Di Blog:

1. Login ke Blogger.

2. Klik Tata Letak.

3. Klik Edit HTML.

4. Selanjutnya Cari Kode ]]></b:skin> (Gunakan CTRL-F Untuk mempermuadah Pencarian) Copy kode di bawah ini kemudian paste Kode tersebut di atas kode ]]></b:skin>

Klik Show untuk melihat Kodenya:

div.TabView div.Tabs
{
height: 30px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 88px; /* 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: "georgia", Serif; /* Font Menu Utama Atas */
font-weight: bold;
color: blue; /* 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:transparent; /* 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;
}

5. Kemudian Cari Kode </head> (Gunakan CTRL-F Agar mempermudah pencarian) dan Copy  Paste kode berikut di atas kode </head>

Klik Show untuk melihat Kodenya:

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

6. Klik Simpan Template.

7. Selanjutnya klik Tata letak.

8. Klik lagi Element Halaman.

9. Klik Tambah Gadget.

10. Pilih HTML/javascript.

11. Kemudian Copy dan paste Code berikut ke dalamnya.

Klik Show untuk melihat Kodenya:

<div style="background:url(http://petir-project.googlecode.com/files/zuaz-petir.gif) repeat-x bottom center">
<div style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLaFd45p9Ujbedf8pbiYE3rzLgU-5X3wHnptahVc8Y-fV3GanmrDsSdVzhbM41YUI60unBBk26zPqKdb5dZUcEM-8eKzoDjbBxI0-axYx1IrrQZK6ewCAJAx1VhwfrvFeXy3hIR5MEJcRz/)repeat-x bottom center">
<div style="background:url(http://i53.tinypic.com/oiu4n9.gif) no-repeat;">

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 300px;">
<a>Nama Menu 1</a>
<a>Nama Menu 2</a>
<a>Nama Menu 3</a>
</div>
<div class="Pages" style="width: 300px; height: 250px;">
<div class="Page">
<div class="Pad">

=>Isi Menu 1.1

=>Isi Menu 1.2

=>Isi Menu 1.3
</div>
</div>
<div class="Page">
<div class="Pad">

=>Isi Menu 2.1

=>Isi Menu 2.2

=>Isi Menu 2.3</div>
</div>
<div class="Page">
<div class="Pad">

=>Isi Menu 3.1

=>Isi Menu 3.2

=>Isi Menu 3.3</div>
</div>

</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script></div></div></div>

12. Klik SIMPAN.

13. Selesai...

Keterangan:
=> Ubah Kode Yang Berwarna Orange Dengan Keterangan Yang ada di Sebelah Kanan Kode Yang Berwarna Orange.
=> Ubah Kode Yang Berwarna Merah Dengan URL Gambar Yang Kamu Inginkan Kalau Ingin Hasilnya Bagus Jangan Ubah Kode Yang Berwarna Merah.
=> Ubah Tulisan Yang Berwarna Violet/Magenta Dengan Tulisan/Menu Yang Kamu Suka.
=> Ubah Tulisan Yang Berwarna Hijau Dengan Tulisan/Kode Yang Sesuai Dengan Nama Menu Yang Kamu Tulis tadi.


Demikian Toturial Cara Membuat Tab View Keren Dengan Animasi Naga Dan Petir Yang Saya Tulis Semoga Bermanfaat Untuk Sobat Blogger Semua Terima Kasih Dan Selamat Menjalankan Ibadah Puasa.

Anda baru saja membaca artikel yang berkategori Tutorial Blogger dengan judul Cara Membuat Tab View Keren Dengan Animasi Naga Dan Petir. Anda bisa bookmark halaman ini dengan URL http://dyenps.blogspot.com/2012/07/cara-membuat-tab-view-keren-dengan.html. Terima kasih!

Ditulis oleh: Unknown - Saturday, July 21, 2012