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

---