Menu Bunga Di Blog

Halo temen-temen udah lama nih gak update tips end trik blog apakabarnya nih semua  untuk kali ini deary widodo akan berbagi tips lagi bagaimana cara membuat menu  berbentuk bunga menu ini bisa membuat cantik blog tapi ini memang agak sedikit lebai cubi-cubi kayaknya bagus nih buat blog cewek biar unyuk-unyuk  untuk  menu yang ini bekerja di mozilla, Google Crome yang terbaru ya jagan lama apa kata dunia kalo gak update. langsung aja deh kayaknya udah pada penasaran 1.  Pastinya Login Terlebih dahulu Ke blogger.com 2. silahkan masuk ke rancangan Html 3.  jangan lupa copy paste KODE di bawah ini di atas  ]]></b: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); } 4. Simpan Themplate 5. Silakan Copy Paste Kode Di Bwah Ini Di  Add Widget HTML/Javascript <center> <div id="info"> <ul class="flower"> <li class="p1"><a href="http://widodoclalucyank.blogspot.com/"><b>HOME</b></a></li> <li class="p2"><a href="http://widodoclalucyank.blogspot.com/search/label/Templat%20Blog?max-results=4"><b>Templat Blog</b></a></li> <li class="p3"><a href="http://widodoclalucyank.blogspot.com/"><b>Trik Blog</b></a></li> <li class="p4"><a href="http://widodoclalucyank.blogspot.com/"><b>Visual Basic</b></a></li> <li class="p5"><a href="http://widodoclalucyank.blogspot.com/"><b>CONTACT</b></a></li> <li class="p6"><a href="http://widodoclalucyank.blogspot.com/"><b>Profile</b></a></li> <li class="center"></li> </ul> </div> </center>

Udah Dulu Ya Selamat Mencoba