Otak-atik CSS3 lagi aja yuk gan. Hari kemarin udah buat
Animasi Nemo dan Awan dengan CSS3. Sekarang ane akan tunjukin lagi salah satu kehebatan teknik Cascading Style Sheet atau biasa kita sebut CSS .. ehm, gimana ya ntar jadinya. Kita lanjutin dengan penjelasan dan keterangan singkat tentang topik kita kali ini tentang
Membuat Menu Button Navigasi dengan Animasi CSS3. Di tutor ini ane mo ngebantu agan ngebuatin background menu button untuk link artikel agan-agan sekalian. Bila agan memiliki link dan harus didesain sedemikian rupa, nggak ada salahnya pake trik ini soalnya bagus kok ntar jadinya. Apalagi ada animasinya dikit. Nggak usah ane panjang lebarin ya tulisannya. Tapi cukup praktekkin aja yang ada dibawah ini. Ntar pasti jadi bagus tuh blog agan.
Langsung aja ya gan kita ke prikitiewnya .. Monggo
Pertama kalian masuk ke Edit HTML
Terus cari ]]><b:skin>
Tempel CSS3 dibawah tepat diatasnya
.ca-menu{
padding: 0;
margin: 20px auto;
width: 500px;
}
.ca-menu li{
width: 500px;
height: 100px;
overflow: hidden;
display: block;
background: #FFE4C4;
box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
margin-bottom: 4px;
border-left: 10px solid #000bff;
transition: all 300ms ease-in-out;
}
.ca-menu li:last-child{
margin-bottom: 0px;
}
.ca-menu li a{
text-align: left;
display: block;
width: 100%;
height: 100%;
color: #333;
position:relative;
}
.ca-icon{
font-family: 'WebSymbolsRegular', cursive;
font-size: 20px;
text-shadow: 0px 0px 1px #333;
line-height: 90px;
position: absolute;
width: 90px;
left: 20px;
text-align: center;
transition: all 300ms linear;
}
.ca-content{
position: absolute;
left: 120px;
width: 370px;
height: 60px;
top: 20px;
}
.ca-main{
font-size: 30px;
transition: all 300ms linear;
}
.ca-sub{
font-size: 14px;
color: #666;
transition: all 300ms linear;
}
.ca-menu li:hover{
border-color: #fff004;
background: #000;
}
.ca-menu li:hover .ca-icon{
color: #fff004;
text-shadow: 0px 0px 1px #fff004;
font-size: 50px;
}
.ca-menu li:hover .ca-main{
color: #fff004;
font-size: 14px;
}
.ca-menu li:hover .ca-sub{
color: #fff;
font-size: 30px;
}
Simpan template
NB : ingat centrang dulu Expand Widget Template untuk memback up template agan
Setelah itu biarkan dulu
Kemudian agan masuk di Sidebar bisa kiri atau kanan
Atau bisa di footer ..
Tempelkan HTML berikut di konten kosong yang tersedia
<ul class="ca-menu">
<li>
<a href="http://1001tawa.blogspot.com">
<span class="ca-icon">A</span>
<div class="ca-content">
<font size="3" class="ca-main">Contoh pertama sob.</font>
<font size="3" class="ca-sub">Gimana masih bingung?</font>
</div>
</a>
</li>
</ul>
<ul class="ca-menu">
<li>
<a href="http://1001tawa.blogspot.com">
<span class="ca-icon">B</span>
<div class="ca-content">
<font size="3" class="ca-main">Contoh kedua sob.</font>
<font size="3" class="ca-sub">Gimana masih bingung?</font>
</div>
</a>
</li>
</ul>
<ul class="ca-menu">
<li>
<a href="http://1001tawa.blogspot.com">
<span class="ca-icon">C</span>
<div class="ca-content">
<font size="3" class="ca-main">Contoh ketiga sob.</font>
<font size="3" class="ca-sub">Gimana masih bingung?</font>
</div>
</a>
</li>
</ul>
<ul class="ca-menu">
<li>
<a href="http://1001tawa.blogspot.com">
<span class="ca-icon">D</span>
<div class="ca-content">
<font size="3" class="ca-main">Contoh keempat sob.</font>
<font size="3" class="ca-sub">Gimana masih bingung?</font>
</div>
</a>
</li>
</ul>
Agan jadi Cuapers ke 2, CONGRATULATE !
gmn ini gan cara bkinnya,,,djelasin dund,,,,
TOKO HANDPHONE TERBESAR TERLENGKAP TERMURAH TERPERCAYA NABILA SHOP Produk dijamin asli orginal Dapatkan harga promo meyambuk hari natal tahun baru Nabila Shop Barang yang Kami Tawarkan Semuanya Barang ASLI ORGINAL Ada Garansi Resmi Distributor dan Garansi TAM 2 bebas resiko bebas penipuan.
Semua Produk Kami Baru dan Msh Tersegel dLm BOX_nya.
BERMINAT HUB-SMS 085-757-299-675 ATAU KLIK WEBSET RESMI KAMI http://nabilashop77.blogspot.com
Ready Stock! Samsung Galaxy S4 Mini Rp.2,500.000
Ready Stock! Apple iPhone 5 Rp.2,700.000
Ready Stock! BlackBerry 9380 Orlando - Black.Rp.900.000,-
Ready Stock! BlackBerry Curve 8520 Gemini.Rp.500.000,-
Ready Stock! BlackBerry Bold 9780 Onyx 2.Rp.800.000,-
Ready Stock! Blackberry Curve 9320.Rp.700.000,-
Ready Stock! Samsung Galaxy Note 10.1.Rp.2,500.000.
Ready Stock! Samsung Galaxy Tab 2 (7.0).Rp. 1.000.000
Jangan lupa ada emo Kaskus diatas CommentBox Ini. Langsung dicoba gan ? Entar ane kasih cendol dah.