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
Artikel ini hanyalah simpanan cache dari url asal penulis yang berkebarangkalian sudah terlalu lama atau sudah dibuang :
https://jeritanblog.blogspot.com/2016/06/menu-bulatan-di-blogger.html
PING BABAB : Raksasa Aggregator Malaysia
