» » Menu Blog Dengan CSS

Menu Blog Dengan CSS

Diposkan oleh Unknown - Feb13 Comment
D-G BLOG Menu Keren

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
Memang di blog lain ada yang mengeshare seperti ini namun yang saya share disini sudah saya edit sedikit sedikit sesuai keinginan saya.
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;
Dengan begitu maka menu tersebut akan terpasang, jadi sekarang kalian dapat memvariasikan menu di blog kalian.
Semoga artikel ini bermanfaat.
Sekian dari D-G BLOG
Terima kasih
Jika kurang mengerti comment.

Related Post:


Facebook Comments
13 Blogger Comments


13 comments

Reply
Unknown
February 12, 2013 at 7:38 AM delete

mantep nih...
http://mdf-blog.blogspot.com

�
Reply
Unknown
February 12, 2013 at 7:47 AM delete

@boy rohman: tnx

�
Reply
Farhan Breaker
February 12, 2013 at 9:08 AM delete

kerenn...
http://farhanbreaker.blogspot.com/

�
Reply
Jurnalwempy
February 12, 2013 at 9:15 AM delete

Mansetabbb nih infonya. Cocok buat anak-anak muda yang dinamis dan penuh inspirasi. hehe. keep bloggin bro

�
Reply
Vahlepi Blogger Hape
February 12, 2013 at 9:56 AM delete

wah kereeen sobb ...
Pengen coba :D

mampir :)

�
Reply
selamat belanja.com
February 12, 2013 at 9:57 AM delete

keren banget tu gan :D
tapi buat blogger aja ya ?

�
Reply
Unknown
February 12, 2013 at 10:03 AM delete

@farhan:tnx
@vandebuy:haha iya
@vahlepi:silakan
@selamat belanja.com: mungkin wordpress bisa

�
Reply
Unknown
February 12, 2013 at 2:15 PM delete

indahnya berbagi...infonya bagus gan..tapi terlalu ramai untuk ukuran blog saya...
mampir ya gan, tks:
http://kelilingriau.blogspot.com/2013/02/intip-keindahan-aceh-lewat-iloveaceh.html

�
Reply
Unknown
February 12, 2013 at 5:07 PM delete

@kasri:samasama
@ade putra: seep

�
Reply
Unknown
February 13, 2013 at 7:57 AM delete

@Jepri: ia bro :D

�
Reply
Anonymous
March 13, 2013 at 8:44 AM delete

kk..
kalo mau nagutr gambarnya tu bagaimana??

�
Reply
Unknown
March 17, 2013 at 8:32 PM delete

@ĊǺŋĐrǺ_ǺŘyǾz: tinggal ganti link gambarnya bos

� �

Post a Comment - Back to Content

Poskan Komentar
Blog Ini Doffolow
Tolong Berkomentar Yang sopan
Rank Alexa : 180rb +
[+] D-G RULE[+]
- Jangan Spam
- Berbicara Sopan
- Kalau bisa jangan Out Of Topic
- Promosi Jangan Berlebihan
Silakan Berkomentar


Like Fanspage D-G Blog

 
Selamat Datang Di D-G Blog, Kini Hadir Dengan Tampilan Baru. Silakan Dibaca Dan Sedot Ilmunya Serta Silakan Tinggal Comment Di Blog Ini.Terima Kasih.FOLLOW THIS BLOGVALID HTML5