tanpa basa basi langsung saja ikuti caranya beriktu ini
1. Login ke Account Blogger Anda. 2. Pilih menu Tata Letak >> Edit HTML >> Lanjutkan dan beri tanda centang Expand Template Widget. 3. Cari kode]]></b:skin> dengan Ctrl F atau F3. 4. Letakkan kode dibawah ini diatas /sebelum ]]></b:skin>
nav {
background: #fbfbfb;
border-top: 2px solid #FFFFFF;
overflow: hidden;
position: relative;
width: 100%;
}
nav:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background: white;
}
nav ul {
background: -moz-linear-gradient(left,#666 0%,#666 50%,#41d05f 100%);
background: -webkit-gradient(linear, left top, right top,color-stop(0%,#fbfbfb), color-stop(50%,#fbfbfb),color-stop(50%,#41d05f),color-stop(100%,#41d05f));
list-style: none;
overflow: hidden;
padding: 0 0 0 10px;
width: 960px;
}
nav li {
display: inline;
}
nav a {
color: white;
display: block;
float: left;
font-family: HelveticaNeue, Helvetica, Arial, Sans-Serif;
font-size: 16px;font-weight:800;
padding: 10px 0;
text-decoration: none;
text-align: center;
width: 15%;
-webkit-transition: width 0.12s ease;
-moz-transition: width 0.12s ease;
-o-transition: width 0.12s ease;
transition: width 0.12s ease;
}
nav a:hover {
color: white;
}
nav a:hover span {
border-bottom: 2px solid white;
}
nav .a-home {
background: #ff8400;
z-index: 100;
position: relative;
}
nav .a-forums {
background: #e42b2b;
}
nav .a-videos {
background: #a800ff;
}
nav .a-downloads {
background: #49a7f3;
}
nav .a-contato {
background: #41d05f;
}
nav .a-login {
background: #444;
}
.home nav {
border-bottom-color: #ff8400;
}
.forums nav {
border-bottom-color: #e42b2b;
}
.videos nav {
border-bottom-color: #a800ff;
}
.downloads nav {
border-bottom-color: #49a7f3;
}
.contato nav {
border-bottom-color: #41d05f;
}
nav li:hover a {
width: 20%;
}
nav ul:hover .active {
width: 19%;
}
nav ul:hover .active:hover {
width: 20%;
}
nav li a.active {
width: 20%;
}
.bub
{
-moz-border-radius:50px;
-webkit-border-radius:50px;
background-color:#3CF;
border-radius:50px;
color:#FFf;
font-family:Calibri, Helvetica, sans-serif;
font-size:130%;
font-weight:700;
height:60px;
left:200px;
line-height:1.8em;
position:absolute;
text-align:center;
text-decoration:none;
top:200px;
width:60px;
}
.bub:hover
{
-moz-border-radius:400px;
-moz-transition:ease 1s;
-webkit-border-radius:400px;
-webkit-transition:ease 1s;
border-radius:400px;
height:200px;
left:130px;
top:130px;
width:200px;
z-index:10;
}
.bub i
{
font-size:90%;
position:relative;
text-transform:none;
top:12px;
}
.bub span
{
display:none;
position:relative;
text-decoration:none;
top:80px;
}
.bub:hover span
{
display:block;
}
Kalau
anda sedikit lebih jeli dan teliti melihat kode diatas tentu anda bisa
memodif sesuai keinginan, karena disini hanya dibuat 6 manu tab dengan 6
pilihan warna. Silahkan dicoba untuk membuat lebih dari 6 menu tab
dengan pilihan warna yang lebih kreatif.
5. Selanjutnya letakkan kode dibawah ini tepat di atas kode <div id='content-wrapper'>atau bisa juga di Rancangan >> Tambah Gadget >> HTML/JavaScript (dibawah Header).
6. Sebelum disimpan, ganti dulu tulisan yang berwarna merah sesuai kebutuhan. 8. target="_blank" maksudnya jika link/tab ini diklik maka akan terbuka di Tab Baru / New Tab kalau tidak mau seperti itu, dihapus saja. 9. Simpan, lihat hasilnya Selamat mencoba, semoga berhasil
Post a Comment