Menu Bulatan Di Blogger

---

Pada tutorial kali ini saya akan menerakkan bagaimana untuk menerapkan menu bulatan pada blog anda.Untuk melihat demonya bolehlah klik dibawah dan jika berkenan bolehlah terus ikuti langkah2 dibawah dengan berhati-hati supaya x terlepas ^ _ ^


Bagaimana Untuk Tambah Menu Bulatan


Langkah 1) Dari Blogger Dashboard, pergi Templates and klik pada Edit HTML
                     (Jangan lupa Download Copy of your template dahulu )



Langkah  2) Cari kode dibawah ini .
                      (Klik Ctrl dan F untuk bar carian untuk membantu mencari kode)
]]></b:skin>



                     Selepas itu copy kode dibawah dan pastekan di atas kode yang anda cari tadi .


.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) }



Langkah 3) Dari Blogger Dashboard, pergi Layout and klik pada Add a Gadget link




Langkah  2) In the pop-up window, pilih  HTML/JavaScript widget



Langkah 3) Copy-paste kode dibawah ini

<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>

Nota: Tukar # dengan URL page blog yang anda ingin letakkan anda

---