Memasang Metro Menu CSS3 Untuk Blogger - Pada kesempatan kali ini saya akan kembali berbagi sebuah menu " Metro CSS3 " yang cukup atraktif untuk melengkapi tampilan sebuah template . Metro menu dengan CSS3 ini akan terlihat ketika kursor diarahkan di samping kiri atau kanan template. untuk lebih jelasnya silahkan brada lihat demonya dibawah ini
See Demo
Menanggapi berbagai komentar yang kebingungan akan demonya saya mencoba sertakan screenshotnya . Pada screenshot diatas (gambar A) ketika kursor belum diarahkan kesisi sebelah kiri dan pada ( gambar B ) setelah kursor diarahkan kesisi sebelah kiri . Artinya Metro Menu akan muncul ketika kita mengarahkan / meletakan kursor kesebelah kiri template. Mudah-mudahan penjelasan ini tidak membingungkan lagi y hehe.
Kustomisasi
- Masuk pada Edit HTML
- Cari kode ]]></b:skin>
- Masukan kode Dibawah ini dan simpan tepat diatas kode ]]></b:skin>
.metro-menu {Langkah selanjutnya masih di edit HTML , sekarang cari kode <body> dan masukan kode dibawah ini tepat dibawah kode <body>
background: #000;
bottom: 0;
list-style: none outside none !important;
margin: 0 !important;
padding: 20px 0 0 !important;
position: fixed;
top: 0;
transition: all 0.2s linear 0s;
-moz-transition: all 0.2s linear 0s;
-webkit-transition: all 0.2s linear 0s;
-o-transition: all 0.2s linear 0s;
width: 76px;
opacity:0;
}
.metro-menu.left {left: -60px;}
.metro-menu.left:hover {left: 0;}
.metro-menu.right {right: -60px;}
.metro-menu.right:hover {right: 0;}
.metro-menu:hover {
right:0;
opacity:1;
}
.metro-menu > li {
background-position: 50% 10px;
background-repeat: no-repeat;
cursor: pointer;
height: 84px;
position: relative;
text-align: center;
}
.metro-menu li > a {
color: #FFFFFF;
display: block;
font-family: "Segoe UI",arial,helvetica;
font-size: 11px;
line-height: 1.2 !important;
padding: 61px 0 10px;
text-decoration: none;
}
.metro-menu > li.home {
background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEqKG3OXRlwnr4TkbJ7XaQ7doRoSBJFOgLl2Js26zp3BPOGPSn8Kv9z6Q_H2VwqVnodv4Re-VUuru4MwYjy7-w5Msdx8OCi9fXvlcGz_Dk5eiclIks8p_DE6lhOuRKSe9EcJ5hGldkb1QM/s1600/home.png");
}
.metro-menu > li.refresh {
background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZyRyY2WODPHn1SHEHUO0QhsBMfdVwo3DxJUGEObU2vePL6V18Fxaww68Mz5oB4uUMOMyQe1b6aAM1qSEVKgD09FiwG05DvAvZ27e1PMH54KhujsHavgGxHeRwvamz07X78irNNiNj0Lpu/s1600/refresh.png");
}
.metro-menu > li.download {
background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxz_XOlL8UZ_ybrCH2gEoH0laIgfkg1yrDb5kQHT-HZ1J-GrkTOhH8pRxzU5jXE_yYFEkPqIzLCASZOyWBI1pnv9PupzqnMTHUlvCERsFbHpj3FqFDWGTg0w4uciL2wKUSQ1N2zOGKie9l/s1600/download.png");
}
.metro-menu > li.back {
background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ0Pu1TEzyIK9J9-3mgWPOVCgnDiHvAqrTZR61UrXYLrf5ZqNExqEH0CzJqt97sTy04bpDe76dqZbx1tQckaqaFTcHuW1NF2-nkMbzE1VxogOLbc5upkc448qzfRvXgS4RDFIToGPpSgDH/s1600/back.png");
}
.metro-menu > li.next {
background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghTntlcWqbGBFWP7L88ptlvspYVjInQE5z3KPUr6-9SuotrbUm3-zMlCzBLk1wqS3HgxZOn41f_lelTrGpUSjNpv2iquVU7DhLjhFKDUPdo841c1l5dMvUmn7KwFDGN31XfDjMxQKSzWNP/s1600/next.png");
}
.metro-menu > li:hover {
background-color: #232323;
}
<ul class="metro-menu left">Posisi menu diatas berada di sisi sebelah kiri , kalau sobat ingin menempatkan menu di posisi sebelah kanan rubah tulisan left menjadi right .
<li class="home"><a href="#">Home</a></li>
<li class="refresh"><a href="#">Refresh</a></li>
<li class="download"><a href="#">Download</a></li>
<li class="back"><a href="#">Back</a></li>
<li class="next"><a href="#">Next</a></li>
</ul>
Contoh : " <ul class="metro-menu left"> " menjadi " <ul class="metro-menu right"> "
mas sy sdh buka demox tp ko gk ada penampakan menu diatas... *smile
BalasHapusHehe..mas Rohis...murah Smile ya...ting!....
HapusRohis : letakan atau arahkan mouse di samping kiri layar sob .. saya fikir muncul ko !!
HapusMas Bud : kenapa gak pake Keep mas ..kayak cesar gitu hihi
manteb ih smilenya klenting klenting :) hihihi
Hapuswkwkwkwk .. klenting teh apa ???
HapusBaca dulu tutornya ya kang..blm sempet liat demonya..
BalasHapusSoale masih di tp gawe an nih.... :)
oks mas .. ingat letakan disamping kiri ya mas hehe
HapusOce..kang udah ketemu...
HapusSempet salaman lagi...wkwk :D
wah master hebat banget nih.
BalasHapusnoh yg dibawah yg master mah hehe .. saya mah master cologne ..!!
HapusSy mastar gawang... :)
HapusWah keren tu mas khususnya blog dengan nuansa metro UI tapi asal jangan metro mini aja hehehehe
BalasHapusbisa-bisa ... pap sipapap metropolitan oweo hehe
Hapuswalah menunya bagus sob baru pertama berkunjung nie..
BalasHapussalam kenal ya :)
Lumayan sob ..
Hapusterimakasih kunjungannya sob ..!!
cocok nih kang lagi demam metro :) hehe
BalasHapusiya nyaeta mas ... !!
Hapusnyaeta teh naon kang.. aing kagak tau :D huhuhu,,
Hapusehmm ibarat kata apa y ???
Hapusartinya : ya gitu deh
Ya gitu juga deh :)
Hapussetelah lihat demonya pertama sih nggak tahu kalau menunya ternyata tersembunyi, setelah kursor diarahkan ke sisi kiri ternyata baru nongol, keren juga kang Ruly :)
BalasHapusiya sob saya gak sertakan screenshotnya pasti sedikit bingung !!
HapusBingung sedikit gpp kok kang...
HapusAsal jgn bikin ling lung...hehe :)
akur kang.. awalna bingung mana demona :) sigana screenshootna kedah didamel didieu ngarah teu bingung
BalasHapusMuhun nyaeta kang .. saya kira gak bikin bingung kang !!
Hapusmuhun urang damelkeun ah meh teu linglung ....
di kode ieu
Hapus.metro-menu {
. . .
width: 70px;
opacity:0.1;
}
bakal katingali jigana teh...wekekekk
iya kang katingali .. tapi keun we meh lieur nu ningalina heuheu
Hapusmantep mas Ruly.. salam kenal
BalasHapuscelco-blog.blogspot.com
salam kenal kembali sob ...
Hapuskurang metro brooo...hihihi, tp mantap lah \m/
BalasHapusNaun atuh nya kang ben .. Metdut we atuh hehe
Hapusieu kerek metro...!!!
Hapusdesignrshub.com/2013/07/responsive-metro-style-navigation-menus.html
how about det bro??? awesome right?
kkkKKKkkkkk...
mahal di si canyon mah
Hapusaok weh...kkkk
HapusKeren bner :)
BalasHapusbener keren :)
HapusWah menunya malu malu ya mas ..he h e..keren mas ..
BalasHapusiya hehe malu-malu mau mas hehe
Hapusada yg kurang sreg...
BalasHapus.metro-menu {
...
width: 76px;
...
}
jika kita mau memanjangkan area tersebut, maka jarak hover ke area itu ikut dengan jarak yg ada kan?
cerdiknya begini...
.metro-menu {
...
width: 75px !important;
...
}
.metro-menu:hover {
width: 300px;
}
dengan tambahan kode tersebut, maka panjang konten yg akan di sorot tetap sepanjang 75px, akan tetapi pas di hover akan berubah menjadi 300px
try it ;)
sip kang ben ... !!
Hapusini baru yang namanya keren mas Ruly :-d
BalasHapusyah ampun saya tambah bingung lama ga ngeblog :p
BalasHapuswah keren nih :>) , sdh ane coba dan hasilnya poolll (h)
BalasHapus