-->


Tab Navigasi Blog dengan CSS3

tab navigasi yang sering dipasang di blog-blog tu selain mempercantik wajah blog itu sendiri, juga berguna untuk mempersingkat kita mengklik tujuan html yang akan kita tuju. Dan button atau tombol dari tab navigasi ini sekarang udah fresh dan bagus lho. Apalagi dengan CSS 3 kita bisa buat segala. Tak terkecuali trik ini. Bila ingin tampil elegan, tinggal tambahin aja button yang 3D .. pasti keren kok ntar jadinya. Yaudah langsung aja kita liat prikitiewnya ::-->>
1. Masuk ke Blogger dengan ID dan Pass kalian
2. Klik lagi Rancangan
3. Klik Edit HTML
4. Centang Expand Widget Template
Cari kode disamping ini ]]></b:skin>
5. Cara carinya dengan menekan Ctrl + F bebarengan .. ntar ada kotak kecil di bawah .. langsung isikan aja kode itu :: ]]></b:skin>
6. Setelah ketemu -- sekarang saatnya meletakkan kode dibawah ini persis diatas kode ]]></b:skin> :

.glossymenu li {
float:left;
}
.glossymenu li a {
float: left;
display: block;
color:#ffffff;
text-decoration: none;
font-family: sans-serif;
font-size: 12px;
font-weight: bold;
padding:0 0 0 16px;
/* Artikelnya di www.1001tawa.blogspot.com
------------------------------------------ */
height: 46px;
line-height: 46px;
text-align: left;
cursor: pointer;
}
.glossymenu li a b {
float: left;
display: block;
padding: 0 8px 0 8px;
}
.glossymenu li.current a,
.glossymenu li a:hover {
color: #00bfff;
background: url(http://4.bp.blogspot.com/-y5a5nU4YGsY/TiOsTircitI/AAAAAAAAAOo/iTewxkbyxSE/s200/button.png) repeat-x;
background-position: left;
padding: 0 8px 0 8px;
}
.glossymenu li.current a b,
.glossymenu li a:hover b {
color: #00bfff;
}


Kemudian cara membuat menunya biar ntar bisa tampil di halaman blog ::
Kalian tinggal copas kode dibawah ini persis diatas kode
<div id='header-wrapper'>
karena ntar letaknya persis di Header Top alias Header paling atas sendiri ..
Neh kodenya ::-->>

<ul class='glossymenu'><li class='current'><a href='URL Blog kalian disini'>Home</a></li>
<li><a href='URL artikel blog kalian'>Contoh 1</a></li>
<li><a href='URL artikel blog kalian'>Contoh 2</a></li>
<li><a href='URL artikel blog kalian'>Contoh 3</a></li>
<li><a href='URL artikel blog kalian'>Contoh 4</a></li>
<li><a href='URL artikel blog kalian'>Contoh 5</a></li>
<li><a href='URL artikel blog kalian'>Contoh 6</a></li>
<li><a href='URL artikel blog kalian'>Contoh 7</a></li>
</ul>


Gimana ?? masih penasaran .. langsung aja klik contoh dibawah ini ::-->>

Blogger Yang Baek, Meninggalkan Jejak Berupa Komentar

Agan jadi Cuapers ke 2, CONGRATULATE !

Andree bl00m hobby ngeTweet [agi ngeComment]

hasil na beda, gan ???
"http://mariogmg.blogspot.com/"
mohon d cek...

Andree bl00m hobby ngeTweet [agi ngeComment]

terima kasih sebelum na....

:10 :11 :12 :13
:14 :15 :16 :17
:18 :19 :20 :21
:22 :23 :24 :25
:26 :27 :28 :29
:30 :31 :32 :33
:34 :35 :36 :37
:38 :39 :40 :41
:42 :43 :44 :45
:46 :47 :48 :49
:50 :51 :52 :53
:54 :55 :56 :57
:58

Jangan lupa ada emo Kaskus diatas CommentBox Ini. Langsung dicoba gan ? Entar ane kasih cendol dah.

Protected by Copyscape Web Plagiarism Software
English French German Spain Italian DutchRussian Portuguese Japanese Korean Arabic Chinese Simplified