berikut ini adalah tutorial Cara Membuat Menu Bentuk Bunga Dengan CSS di blogspot / WordPress. 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.


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 di masukan 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);
}

(Untuk blogspot) Kemudian klik preview, jika tidak ada pesan eror, maka langsung saja save template anda.

(Untuk WordPress) kli Update file, kode diatas masukan di CSS template anda.

Langkah Kedua Klik Elemen Halaman lalu Add Widget HTML/Javascript, dan paste kode di bawah ini:

<div id=”info”>

<ul class=”flower”>

<li class=”p1″><a href=”/”><strong>HOME</strong></a></li>

<li class=”p2″><a href=”http://lims.web.id/download/”><strong>DOWNLOAD</strong></a></li>

<li class=”p3″><a href=”http://lims.web.id/clients/host/order”><strong>WEBHOSTING</strong></a></li>

<li class=”p4″><a href=”http://lims.web.id/tv-online/”><strong>TV ONLINE</strong></a></li>

<li class=”p5″><a href=”http://lims.web.id/info/network/server/”><strong>SERVER</strong></a></li>

<li class=”p6″><a href=”http://lims.web.id/info/tutorial/”><strong>TUTORIAL</strong></a></li>

<li class=”center”></li>

</ul>

</div>

<!– end of info –>

Note : Untuk Blogspot gantiĀ <strong> ke <b>
Untuk Memasukan dalam postingan tinggal tambahkan kode dibawah ini, ingat memasukannya dalam mode HTML bukan Visual

<style type="text/css"> kode css diatas </style> setelah <div id="info">

Ganti link diatas dengan link website sobat yang ingin di buat menunya .. Semoga berguna.

Demikian Informasi mengenai Cara Membuat Menu Bentuk Bunga Dengan CSS semoga berguna dan bisa bermanfaat buat kita semua.

Baca juga artikel yang mungkin terkait :