Kali ini D-G BLOG akan posting cara membuat menu, namun menunya bukan menu biasa melainkan menggunakan css dan hover. Jadi dijamin keren dan dengan tampilannya lingkaran dan rapi jadi cocok kalian gunakan. Sebelum kalian melihat caranya kalian bisa melihat dulu demonya, seperti dibawah ini
Kalau begitu ini cara membuatnya.
1. Masuk ke www.blogger.com
2. Edit HTML
3. Cari kode ]]></b:skin>
4. Letakan kode berikut diatasnya
.DGBLOG:after {
visibility: hidden;
display: block;
font-size: 0;
line-height: 0;
content: " ";
clear: both;
height: 0;
width: 0;
}
. DGBLOG { display: inline-block; }
* html .hapus { height: 1%; }
. DGBLOG { 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)
}
5. Taruh Kode berikut dibagian yang anda inginkan untuk meletakan menu tersebut
<ul class='system-menu DGBLOG'>
<li><a href="#">
<span class='empat'></span>
<span class='lima'></span>
<span class='enam'></span>HOME1</a></li>
<li><a href="#"><span class='pembuka'>
<span class='satu'></span>
<span class='dua'></span>
<span class='tiga'></span></span>HOME2</a></li>
<li><a href="#"><span class='abot'></span><span class='abit'></span>HOME3</a></li>
<li><a href="#">
<span class='a'></span>
<span class='b'></span>
<span class='c'></span>
<span class='d'></span>HOME4</a></li>
<li><a href="#"><span class='e'></span><span class='f'></span>HOME5</a></li>
</ul>
NB:Kebetulan kode ini bertabrakan dengan kode di template D-G BLOG sehingga menyebabkan menu tersebut tercampur dengan bullet dan teksnya tidak mau hilang. Jadi kalau hal ini terjadi di blog kalian berarti template kalian bertabrakan dengan kode ini;
sumber : http://davidgunawan123.blogspot.com/2013/02/menu-blog-dengan-css.html
Artikel Terkait:
tutorial blogger
- cari template klik disini
- Apa Itu SEO?
- Apa Itu JavaScript
- Kelebihan Dan Kekurangan Blogspot dan Wordpress
- Cara Memberi Password Pada Winrar
- APAKAH BLOGGER ITU PAHLAWAN?
- Cara Memasang Tukeran Link Otomatis Dengan Mistery Linky's Magic Wizard
- efek loading blog dengan animasi keyfames
- 9 Cara Membuat Loading Blog 300% Lebih Cepat
- Cara Memasang Tombol Back to Top diatas Footer pada Blog
- Cara Scan Blog dan Website dari Virus dan Malware
- EFEK SHADOW PADA TEXT DENGAN CSS
- Loading Blog dengan Keyframes dari Bawah ke Atas
- CARA MENGUBAH "JOIN THIS SITE" DENGAN GAMBAR FOLLOWERS 999999999
- cara membuat menu berbentuk lingkaran
- Membuat Efek Sliding
- cara membuat tooltip di blog
- cara membuat read more dan add coment
- cara membuat menu navigasi
- cara membuat gambar poting berputar saat di sorsot mouse
- Pentingnya & Manfaat bahasa inggris bagi seorang blogger
- Pengertian Tentang Komentar Kentut Pada Blog
- Cara Membuat Kotak Judul Postingan Jadi Menarik
- Cara Memasang Embed Link di bawah Postingan Blog
0 Comments
