cara membuat tab menu view

Cara Membuat Menu Tab View

Lantaran punya mas Kendhin g’ bisa diklik tab view nya n koment q juga g’di jawab ma mas kendhin, aq punya inisiatif buat tab view q sendiri. Ya memang sih caranya hampir sama kayak punya mas kendhin tapi scriptnya beda lo.

Tab view itu contohnya seperti ini

Step 1

Login dulu ke blog kamu trus pilih menu Layout –> Edit HTML

Step 2

Cari kode kayak gini
]]>

Kemudian masukkan kode berikut ini sebelum kode ]]> atau kedalam tag CSS.

div.TabView div.Tabs

{

height: 24px;

overflow: hidden;

}

div.TabView div.Tabs a

{

float: left;

display: block;

width: 98px;

text-align: center;

height: 24px;

padding-top: 3px;

vertical-align: middle;

-moz-border-radius-topleft:12px;

-moz-border-radius-topright:12px;

border-top: 1px solid #d9e3ff;

border-left: 1px solid #d9e3ff;

border-right: 1px solid #d9e3ff;

border-bottom: 1px solid #d9e3ff;

font-family: "verdana", Serif;

font-weight: 900;

color: #1E62B6;

}

div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active

{

background-color: #F2F2F2;

}

div.TabView div.Pages

{

clear: both;

border-left: 1px solid #d9e3ff;

border-right: 1px solid #d9e3ff;

border-bottom: 1px solid #d9e3ff;

overflow: hidden;

background-color: #ffffff;

}

div.TabView div.Pages div.Page

{

height: 100%;

padding: 0px;

overflow: hidden;

}

div.TabView div.Pages div.Page div.Pad

{

padding: 3px 5px;

}

Step 3

Pasang kode berikut sebelum kode

kemudian di SAVE ya.

Step 4

Pilih menu Page Elements —> Trus Add Gadget —> pilih yg HTML / JavaScript

inilah script yang harus kamu pasang di widget itu

tabview_initialize(‘TabView’);

Tulisan yang berwarna merah bisa kamu ganti. Cocokkan tinggi (Height) dan Lebar (Weight) nya dengan blog / website kamu. Kemudian sesuaikan juga warna (Color) yang cocok dengan blog / website kamu

oh ya lupa untuk melihat kode – kode warna kalian lihat aja di
1.layout
2.ubah font dan warna

nah disitu setiap kalian klik warna kan ada kodenya kalian copy kode tersebut selamat mencoba

Advertisements

About arifsatria

Opportunity only comes once, so if you have the opportunity to immediately capture. stop dreaming take action .......................
This entry was posted in Blogger Trick. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s