Ini juga salah satu variasi menu menggunakan kode CSS tanpa bantuan kode javascript. Menu gaya bunga bisa membuat variasi menu blog anda tampil lebih keren. Menu tampilan bunga sangat baik untuk blog yang berisi catatan harian, jualan produk, gosip selebriti, info filem terbaru, perjalanan (traveling) dan blog yang berisi catatan ilmiah.
Menu gaya bunga bekerja di browser utama seperti IE9, Firefox, Opera, Safari and Chrome dll. Jika anda menghawatirkan penggunaannya tidak terbaca oleh browser itu, segera buang rasa khawatir anda. Pasang menu gaya bunga ke dalam blog anda sekarang.
- HOME
- SALES
Cara Menginstal Menu Gaya Bunga
Sebelumnya kita harus membedakan kode ini ke dalam dua type. Yaitu Kode dalam kategori HTML dan satu kelompok lagi kode dengan kategori HTML. Kode CSS dari menu gaya bunga ini akan diinstal di dalam template blog, sedang kode HTML akan di letakkan di sidebar, atau bisa pula bergabung bersama tulisan dari blog.
Langkah Pertama Kopi paste kode CSS di bawah ini kedalam template blog. Caranya, Login ke blogger, lalu klik Elemen Halaman >>> Edit HTML. Untuk lebih aman, save dulu template anda.
Jangan salah lokasi, paste kode di bawah ini ke dalam kumpulan CSS blog anda tempatnya sebelum tag /skin
ul.flower {padding:0; margin:50px auto; list-style:none;
position:relative; height:300px; width:300px;}
ul.flower li a {display:block; width:100px; position:absolute; left:0;
top:0; background:#888; line-height:100px;font:bold 13px/100px arial,
sans-serif; color:#fff; text-align:center; text-decoration:none;
border-radius:100px 100px 0 100px;
-moz-border-radius:100px 100px 0 100px;
transform-origin: 101px 101px;
-ms-transform-origin: 101px 101px;
-o-transform-origin: 101px 101px;
-moz-transform-origin: 101px 101px;
-webkit-transform-origin: 101px 101px;
}
ul.flower li a b {display:block;
transform:rotate(-40deg);
-ms-transform:rotate(-40deg);
-o-transform:rotate(-40deg);
-moz-transform:rotate(-40deg);
-webkit-transform:rotate(-40deg);
}
ul.flower li a:hover {color:#000; background:#c00;
background-image: -webkit-gradient(linear, 0% 0%, 45% 45%,
from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0)));
background-image: -moz-linear-gradient(-60deg, rgba(255, 255, 255,
0.7), rgba(255, 255, 255, 0));
background-image: -o-linear-gradient(-60deg, rgba(255, 255, 255, 0.7),
rgba(255, 255, 255, 0));
background-image: -ms-linear-gradient(-60deg, rgba(255, 255, 255,
0.7), rgba(255, 255, 255, 0));
box-shadow: -4px -4px 8px rgba(0, 0, 0, 0.4);
-moz-box-shadow: -4px -4px 8px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: -4px -4px 8px rgba(0, 0, 0, 0.4);
}
ul.flower li.p1 a {
transform:rotate(60deg)skew(30deg);
-ms-transform:rotate(60deg)skew(30deg);
-o-transform:rotate(60deg)skew(30deg);
-moz-transform:rotate(60deg)skew(30deg);
-webkit-transform:rotate(60deg)skew(30deg);
}
ul.flower li.p2 a {
transform:rotate(120deg)skew(30deg);
-ms-transform:rotate(120deg)skew(30deg);
-o-transform:rotate(120deg)skew(30deg);
-moz-transform:rotate(120deg)skew(30deg);
-webkit-transform:rotate(120deg)skew(30deg);
}
ul.flower li.p3 a {
transform:rotate(180deg)skew(30deg);
-ms-transform:rotate(180deg)skew(30deg);
-o-transform:rotate(180deg)skew(30deg);
-moz-transform:rotate(180deg)skew(30deg);
-webkit-transform:rotate(180deg)skew(30deg);
}
ul.flower li.p4 a {
transform:rotate(240deg)skew(30deg);
-ms-transform:rotate(240deg)skew(30deg);
-o-transform:rotate(240deg)skew(30deg);
-moz-transform:rotate(240deg)skew(30deg);
-webkit-transform:rotate(240deg)skew(30deg);
}
ul.flower li.p5 a {
transform:rotate(300deg)skew(30deg);
-ms-transform:rotate(300deg)skew(30deg);
-o-transform:rotate(300deg)skew(30deg);
-moz-transform:rotate(300deg)skew(30deg);
-webkit-transform:rotate(300deg)skew(30deg);
}
ul.flower li.p6 a {
transform:rotate(360deg)skew(30deg);
-ms-transform:rotate(360deg)skew(30deg);
-o-transform:rotate(360deg)skew(30deg);
-moz-transform:rotate(360deg)skew(30deg);
-webkit-transform:rotate(360deg)skew(30deg);
}
ul.flower li.center {width:54px; height:54px;position:absolute;
left:72px; top:72px; z-index:100; background:#ff0;
border-radius:50px;
-moz-border-radius:50px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.6), inset 0 0 15px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.6), inset 0 0 15px rgba(0,
0, 0, 0.6);
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.6), inset 0 0 15px
rgba(0, 0, 0, 0.6);
}
Kemudian klik preview, jika tidak ada pesan eror, maka langsung saja save template anda.
Langkah KeduaKlik Elemen Halaman lalu Add Widget HTML/Javascript, dan paste kode di bawah ini.
<div id="info">
<br /><br />
<ul class="flower">
<li class="p1"><a href="/"><b>HOME</b></a></li>
<li class="p2"><a
href="http://medichinesse.blogspot.com "><b>PRODUCTS</b></a></li>
<li class="p3"><a
href="http://wisencare.blogspot.com/2011/05/daftar- "><b>SERVICES</b></a><harga-pengiriman-paket-lewat- pos.html /li>
<li class="p4"><a href="http://medichinesse.blogspot.com/ "><b>SALES</b></a></li>
<li class="p5"><a
href="http://wisencare.blogspot.com/2009/09/contact- "><b>CONTACT</b></a></me.html li>
<li class="p6"><a
href="http://wisencare.blogspot.com/2009/09/contact- "><b>FAQS</b></a></li>me.html
<li class="center"></li>
</ul>
</div> <!-- end of info -->
Lalu save html itu. Kemudian lihat hasilnya. Sudah muncul? Jika ya, maka hal yang perlu segera anda lakukan hanyalah mengganti link dengan link anda sendiri. Tidak susah bukan? Tentu saja Kopi paste tidak sulit. Yang sulit adalah bagaimana merancang menu seperti ini.
Selamat mencoba...
Post title : Cara Membuat Menu Gaya Bunga Dengan Kode CSS
URL post : https://adanggak.blogspot.com/2011/05/cara-membuat-menu-gaya-bunga-dengan.html
URL post : https://adanggak.blogspot.com/2011/05/cara-membuat-menu-gaya-bunga-dengan.html
0 komentar:
Show Emoticons
Posting Komentar