Cara Membuat Menu Tabview Part 2

Tampilan blog gue pengen minim tapi berisi, gimana yua..caranya....???? jalan-jalan ah ....siapa tau aja dapet inspirasi...!!.

Pagi ini emang suasanya adem pas kebetulan akhir bulan lagi he....he...lagi boke-bokenya...jiah emang kaga ngaruh.... tapi......setelah w pikir-pikir nemu juga inspirasi berkat jasanya mas ardi33, nih dia nih....soal membuat menu tabview yg menggunakan CSS.... wuh..tadinya w coba ga ada yang cocok eh ternyata nemu juga yang ni...biar ga lupa sengaja gue tulis lagi...

Oke ...kita mulai...pertama siapkan email dan pasword...buat log in, langsung menuju ke Tata letak, nah..... dah gitu pilih edit HTML jangan lupa cheklis Expand Widget Template nya.

Kemudian cari kode seperti ini:
]]></b:skin>
dah ketemu...?, biar gampang teken ctrl + f aja..! nah terus masukkan kode yang disini, ke atas kode yang tadi:

/* CSS for Shade Tabs. die-silver.blogspot.com */

.shadetabs{

padding: 3px 0;

margin-left: 0;

margin-top: 1px;

margin-bottom: 0;

font: bold 12px Verdana;

list-style-type: none;

text-align: left; /*set to left, center, or right to align the menu as desired*/

}

.shadetabs li{

display: inline;

margin: 0;

}

.shadetabs li a{

text-decoration: none;

position: relative;

z-index: 1;

padding: 3px 7px;

margin-right: 3px;

border: 1px solid #778;

color: #2d2b2b;

background: white url(gambar shade.gif) top left repeat-x;

}

.shadetabs li a:visited{

color: #2d2b2b;

}

.shadetabs li a:hover{

text-decoration: underline;

color: #2d2b2b;

}

.shadetabs li a.selected{ /*selected main tab style */

position: relative;

top: 1px;

}

.shadetabs li a.selected{ /*selected main tab style */

background-image: url(gambarshadeactive.gif);

border-bottom-color: white;

}

.shadetabs li a.selected:hover{ /*selected main tab style */

text-decoration: none;

}

.tabcontent{

display:none;

}

@media print {

.tabcontent {

display:block !important;

}

}

/* CSS for Inverted Modern Bricks II Tabs. die-silver.blogspot.com */

.modernbricksmenu2{

padding: 0;

width: 362px;

border-top: 5px solid #D25A0B; /*Brown color theme*/

background: transparent;

voice-family: ""}"";

voice-family: inherit;

}

.modernbricksmenu2 ul{

margin:0;

margin-left: 10px; /*margin between first menu item and left browser edge*/

padding: 0;

list-style: none;

}

.modernbricksmenu2 li{

display: inline;

margin: 0 2px 0 0;

padding: 0;

text-transform:uppercase;

}

.modernbricksmenu2 a{

float: left;

display: block;

font: bold 11px Arial;

color: white;

text-decoration: none;

margin: 0 1px 0 0; /*Margin between each menu item*/

padding: 5px 10px;

background-color: black; /*Brown color theme*/

border-top: 1px solid white;

}

.modernbricksmenu2 a:hover{

background-color: #D25A0B; /*Brown color theme*/

color: white;

}

.modernbricksmenu2 a.selected{ /*currently selected tab*/

background-color: #D25A0B; /*Brown color theme*/

color: white;

border-color: #D25A0B; /*Brown color theme*/

}

.tabcontent{

display:none;

}

@media print {

.tabcontent {

display:block !important;

}

}

/* CSS for Indented CSS Tabs. die-silver.blogspot.com */

.indentmenu{

font: bold 13px Arial;

width: 100%; /*leave this value as is in most cases*/

}

.indentmenu ul{

margin: 0;

padding: 0;

float: left;

/* width: 80%; width of menu*/

border-top: 1px solid navy; /*navy border*/

background: black url(gambar indentbg.gif) center center repeat-x;

}

.indentmenu ul li{

display: inline;

}

.indentmenu ul li a{

float: left;

color: white; /*text color*/

padding: 5px 11px;

text-decoration: none;

border-right: 1px solid navy; /*navy divider between menu items*/

}

.indentmenu ul li a:visited{

color: white;

}

.indentmenu ul li a.selected{

color: white !important;

padding-top: 6px; /*shift text down 1px*/

padding-bottom: 4px;

background: black url(gambar indentbg2.gif) center center repeat-x;

}

.tabcontentstyle{ /*style of tab content oontainer*/

border: 1px solid gray;

width: 450px;

margin-bottom: 1em;

padding: 10px;

}

.tabcontent{

display:none;

}

@media print {

.tabcontent {

display:block !important;

}

}  

Kode yang berwarna merah itu maksudnya buat di otak-atik kalo anak santri huda bilang dioprek he..he...siapa tau aja pengen berkreasi.....ya ga...??? sampai disini jangan seneng dulu masih ada dua langkah lagi...!!!!

Tugas berikutnya, cari kode yang bergini </head> dah ketemu...?? selanjutnya kita masukkan kedo...ups salah kode maksud gue....berikut sebelum kode tadi, awas sebelum ya....<script type="text/javascript" src="http://www.geocities.com/ridwanox/tabcontent.js"/   

lalu simpan template selesai deh...xixixixixi...

woy...!!! jangan senang dulu masih ada satu langkah lagi....lari ke lapang....takut gempa....eh maksudnya ke page elemen terus pilih tambah gadget yang HTML tentunya.....nah kalo dah gitu masukkin kode berikut ke gadget tadi:

<ul id="countrytabs" class="shadetabs">
<li><a href="http://die-silver.blogspot.com/" rel="country1" class="selected">Tab 1</a></li>
<li><a href="http://die-silver.blogspot.com/" rel="country2">Tab 2</a></li>
<li><a href="http://die-silver.blogspot.com/" rel="country3">Tab 3</a></li>
<li><a href="http://die-silver.blogspot.com/" rel="country4">Tab 4</a></li>
<li><a href="http://hendra104.blogspot.com">Sharing Yuuk...!!</a></li>
</ul>

<div style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px">

<div id="country1" class="tabcontent">
Tab content 1 here<br />
Tab content 1 here<br />
</div>

<div id="country2" class="tabcontent">
Tab content 2 here<br />
Tab content 2 here<br />
</div>

<div id="country3" class="tabcontent">
Tab content 3 here<br />
Tab content 3 here<br />
</div>

<div id="country4" class="tabcontent">
Tab content 4 here<br />
Tab content 4 here<br />
</div>

</div>

<script type="text/javascript">

var countries=new ddtabcontent("countrytabs")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()

</script>

<p><a href="javascript:countries.cycleit('prev')"

style="margin-right: 25px; text-decoration:none">
<img src="rhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimYG8nH5sbQRFdP6uSPOQe73Y9Nv4QiA7DXxa_EJ6sk6RiVPlVOv-0fx3AlQmTKRM9-3vIaxVrJmS2D4naFh25WAQn5icf0vTi8ngYm1FoN-14G5IDODiQJ3zaQYJ-p2kGXWou5MSjg7c/s1600/roundleft.gif" border="0" /> Back</a>
<a href="javascript: countries.expandit(3)">
Click here to select last tab</a>
<a href="javascript:countries.cycleit('next')" style="margin-left: 25px; text-decoration:none">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2uo1tLW7v_aU4fwsJQquzYsoET7-1bio9npkdcKwXKnVu-LFRpzb1XYBH7rbtDbpzNOWN445nVOgzQlk4QzYXTSKaAZaos1Tj51paiU1-M6iaSHg0E5RVYVOawGXPh8-wZpPcZYYLM6s/s1600-h/roundright.gif" border="0" /> Forward</a></p>

<hr />

:) Keterangan :
- Angka atau text yang berwarna ping (450px) adalah ukuran lebar tabview.
- Kode yang berwarna Hijau adalah text yang di Menu utama (Menu Atas).
- Kode yang berwarna merah adalah link alamat tautan yang akan kamu tuju dari tabview tsb.
- Kode yang berwarna oranye adalah isi konten tabview kamu. Kamu bisa mengisinya dengan link, gambar, banner, script dll.
- Untuk menmbahkan jumlah menu maka perhatikanlah text yang berkedip-kedip. tambahkan menu tersebut dibawahnya.

Nah, kalo berhasil jadinya gini sob:

Nah udah ya sampai di sini dulu.....

Yang laennya...