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
0 komentar:
Posting Komentar