print this page

1. Temukan kode css ]]></b:skin> Pastekan di atas kode tersebut :


/* Name : Css3 Circle System Menu Author : SYSTEM OF BLOG URL : http://sin1aja.blogspot.com/ */ .hapus:after { visibility: hidden; display: block; font-size: 0; line-height: 0; content: " "; clear: both; height: 0; width: 0; } .hapus { display: inline-block; } * html .hapus { height: 1%; } .hapus { display: block; } ul.system-menu { margin: 0 auto 10px; padding: 0; position: relative; -moz-user-select: none; -webkit-user-select: none; user-select: none; width: 390px } ul.system-menu li { list-style-type: none; margin: 0 5px 0 0; padding: 0; float: left; position: relative; width: 70px; height: 80px; -moz-transition: all 500ms linear; -o-transition: all 500ms linear; -webkit-transition: all 500ms linear; transition: all 500ms linear } ul.system-menu li a { position: absolute; margin: -30px 0 0 -43%; text-decoration: none; font: bold 13px/40px Arial, sans-serif; padding: 0; background: #21D319; color: transparent; -moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px; display: block; width: 50px; height: 50px; text-align: center; top: 45%; left: 50%; outline: none; border: 5px inset #F8FBFC; -moz-box-shadow: 0 0 10px 4px #5E5E5E, inset 0 0 20px rgba(0, 0, 0, 0.52); -webkit-box-shadow: 0 0 10px 4px #5E5E5E, inset 0 0 20px rgba(0, 0, 0, 0.52); box-shadow: 0 0 10px 4px #5E5E5E, inset 0 0 20px rgba(0, 0, 0, 0.52); -moz-transition: all 100ms linear; -o-transition: all 100ms linear; -webkit-transition: all 100ms linear; transition: all 100ms linear } ul.system-menu li a:hover { line-height: 130px; color: #000; border-color: #C5B386; background: #FAC800; -moz-transition-delay: 0.5s; -o-transition-delay: 0.5s; -webkit-transition-delay: 0.5s; transition-delay: 0.5s } ul.system-menu li span.pembuka { position: absolute; left: 50%; margin: 0 0 0 -29%; top: 11px; width: 25px; height: 30px; background: #949596; -moz-box-shadow: 3px -3px 0 0 #ECECEC; -webkit-box-shadow: 3px -3px 0 0 #ECECEC; box-shadow: 3px -3px 0 0 #ECECEC } ul.system-menu li span.satu, ul.system-menu li span.dua, ul.system-menu li span.tiga { position: absolute; background: #F0F0F0; padding: 2px; width: 15px; left: 3px } ul.system-menu li span.satu { top: 5px } ul.system-menu li span.dua { top: 13px } ul.system-menu li span.tiga { top: 22px } .empat, .lima, .enam { position: absolute } .empat { border: 15px solid; border-color: transparent transparent #EEE transparent; top: -7px; left: 10px } .lima { padding: 4px; background: #EEE; height: 5px; top: 22px; left: 14px } .enam { padding: 4px; background: #EEE; height: 5px; top: 22px; left: 28px } .abot, .abit { position: absolute; left: 15px } .abot { width: 20px; height: 20px; background: #EEE; top: 20%; -moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px } .abit { border: 10px solid; border-color: transparent transparent #EEE transparent; top: 33% } .a, .b, .c, .d { position: absolute; padding: 5px; background: #FFF7F7; top: 26% } .a { left: 25px; background: #39FF13 } .b { top: 27px; left: 13px; background: #0070FF } .c { left: 25px; top: 27px; background: #FFE000 } .d { left: 13px } .e, .f { position: absolute } .e { width: 15px; height: 17px; background: rgb(171, 185, 163); top: 35%; left: 32%; border: 2px solid rgb(255, 255, 255) } .f { border: 10px solid; border-color: transparent transparent rgb(255, 255, 255) transparent; top: -2px; left: 30% } ul.system-menu:hover li:not(:hover) { -moz-transform: rotate(360deg) scale(0.7); -ms-transform: rotate(360deg) scale(0.7); -o-transform: rotate(360deg) scale(0.7); -webkit-transform: rotate(360deg) scale(0.7); transform: rotate(360deg) scale(0.7) }

2. Masukan kode HTML nya ke Gadget HTML/Javascript



<ul class='system-menu hapus'> <li><a href="#"> <span class='empat'></span> <span class='lima'></span> <span class='enam'></span>Depan</a></li> <li><a href="#"><span class='pembuka'> <span class='satu'></span> <span class='dua'></span> <span class='tiga'></span></span>Artikel</a></li> <li><a href="#"><span class='abot'></span><span class='abit'></span>Tentang</a></li> <li><a href="#"> <span class='a'></span> <span class='b'></span> <span class='c'></span> <span class='d'></span>Kategori</a></li> <li><a href="#"><span class='e'></span><span class='f'></span>Coretan</a></li> </ul>
 
 
Sekian terimakasih ! 

2 komentar:

Anonim mengatakan...

black hat hadirr

Anonim mengatakan...

\m/ mantap gan !!

Posting Komentar

Copyright © 2012 imagination of the mind / Designer by : M.A.T.A XP