Akhirnya bisa juga update blog ini, sudah lama tidak update blog karena banyak tugas dari sekolah. Maklum kelas baru teman baru dan yang pasti banyak tugas yang menunggu. Sebenarnya pada posting kali ini sekalian saya ngerjain tugas tentang Microcontroller dan PLC. Kalau ada tugas selain itu belum tentu saya bisa online, karena tugas itu saya belum bisa, jadi harus online buat cari tutorialnya.
Kembali ke pokok posting kali ini Cara Membuat Tab Menu dengan CSS3. Seperti yang sobat ketahui banyak sekali tutorial yang membahas cara membuat tab menu, tapi sebagian banyak yang menggunakan jasa image atau foto. Tapi kali ini saya melanjutkan postingan saya yang terdahulu tentan cara membuat tab menu juga, tapi kali ini saya akan berbagi cara yang menggunakan CSS3 tanpa image. Bagaimana cara membuatnya? Silahkan ikuti tutorial di bawah ini:
1. Masuk ke akun Blogger sobat sendiri tentunya.
2. Klik tab Rancangan lalu pilih tab Edit HTML.
3. Centang Expand Template Widget.
4. Cari kode ]]>.
5. Lalu tambahkan kode CSS ini di atas kode tersebut.
.wrapper {6. Cari kode yang mirip seperti ini <div id='header-wrapper'> kadang berbeda tiap template.
width: 100%;
height: 80px;
background : #464646;
background : -webkit-gradient(linear, left top, left bottombottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
border-top: 2px solid #939393;
position: relative;
margin-bottom: 30px;
}
ul {
margin: 0;
padding: 0;
}
ul.menu {
height: 80px;
border-left: 1px solid rgba(0,0,0,0.3);
border-right: 1px solid rgba(255,255,255,0.3);
float:left;
}
ul.menu li {
list-style: none;
float:left;
height: 79px;
text-align: center;
background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );
background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
}
ul li a {
display: block;
padding: 0 20px;
border-left: 1px solid rgba(255,255,255,0.1);
border-right: 1px solid rgba(0,0,0,0.1);
text-align: center;
line-height: 79px;
background : -webkit-gradient(linear, left top, left bottombottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
-webkit-transition-property: background;
-webkit-transition-duration: 700ms;
-moz-transition-property: background;
-moz-transition-duration: 700ms;
}
ul li a:hover {
background: transparent none;
}
ul li.active a{
background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );
background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
}
7. Letakkan kode berikut di atas kode tersebut.
<div class="wrapper">8. Simpan Template Sobat.
<div class="container"><ul class="menu" rel="sam1">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li ><a href="#">Blog</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contacts</a></li>
<li><a href="#">Twitter @insic</a></li>
</ul>
</div>
</div>
Pertamax neh gan,, makasih,,
BalasHapus@Pecandu Wordpress Dan BloggerIya gan, sama2
BalasHapus