Langsung ke konten utama

Memasang Metro Menu CSS3 Untuk Blogger

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 {
    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;
}
Langkah selanjutnya masih di edit HTML , sekarang cari kode <body> dan masukan kode dibawah ini tepat dibawah kode <body>
<ul class="metro-menu left">
 <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>
Posisi menu diatas berada di sisi sebelah kiri , kalau sobat ingin menempatkan menu di posisi sebelah kanan rubah tulisan left menjadi right .
Contoh :  "  <ul class="metro-menu left"> " menjadi " <ul class="metro-menu right"> "

Label:

Komentar

  1. Rohis FacebookKamis, September 19, 2013

    mas sy sdh buka demox tp ko gk ada penampakan menu diatas... *smile

    BalasHapus
    Balasan
    1. Staff AdministratorKamis, September 19, 2013

      Hehe..mas Rohis...murah Smile ya...ting!....

      Hapus
    2. Sopala MultapaKamis, September 19, 2013

      Rohis : letakan atau arahkan mouse di samping kiri layar sob .. saya fikir muncul ko !!

      Mas Bud : kenapa gak pake Keep mas ..kayak cesar gitu hihi

      Hapus
    3. Mas AndesSabtu, September 21, 2013

      manteb ih smilenya klenting klenting :) hihihi

      Hapus
    4. Sopala MultapaSabtu, September 21, 2013

      wkwkwkwk .. klenting teh apa ???

      Hapus
  2. Staff AdministratorKamis, September 19, 2013

    Baca dulu tutornya ya kang..blm sempet liat demonya..
    Soale masih di tp gawe an nih.... :)

    BalasHapus
    Balasan
    1. Sopala MultapaKamis, September 19, 2013

      oks mas .. ingat letakan disamping kiri ya mas hehe

      Hapus
    2. Staff AdministratorMinggu, September 22, 2013

      Oce..kang udah ketemu...
      Sempet salaman lagi...wkwk :D

      Hapus
  3. AnonimKamis, September 19, 2013

    wah master hebat banget nih.

    BalasHapus
    Balasan
    1. Sopala MultapaJumat, September 20, 2013

      noh yg dibawah yg master mah hehe .. saya mah master cologne ..!!

      Hapus
    2. Staff AdministratorMinggu, September 22, 2013

      Sy mastar gawang... :)

      Hapus
  4. UnknownKamis, September 19, 2013

    Wah keren tu mas khususnya blog dengan nuansa metro UI tapi asal jangan metro mini aja hehehehe

    BalasHapus
    Balasan
    1. Sopala MultapaJumat, September 20, 2013

      bisa-bisa ... pap sipapap metropolitan oweo hehe

      Hapus
  5. Imron FhatoniKamis, September 19, 2013

    walah menunya bagus sob baru pertama berkunjung nie..

    salam kenal ya :)

    BalasHapus
    Balasan
    1. Sopala MultapaJumat, September 20, 2013

      Lumayan sob ..
      terimakasih kunjungannya sob ..!!

      Hapus
  6. AnonimKamis, September 19, 2013

    cocok nih kang lagi demam metro :) hehe

    BalasHapus
  7. AnonimJumat, September 20, 2013

    setelah lihat demonya pertama sih nggak tahu kalau menunya ternyata tersembunyi, setelah kursor diarahkan ke sisi kiri ternyata baru nongol, keren juga kang Ruly :)

    BalasHapus
    Balasan
    1. Sopala MultapaJumat, September 20, 2013

      iya sob saya gak sertakan screenshotnya pasti sedikit bingung !!

      Hapus
    2. Staff AdministratorMinggu, September 22, 2013

      Bingung sedikit gpp kok kang...
      Asal jgn bikin ling lung...hehe :)

      Hapus
  8. Kang IsmetJumat, September 20, 2013

    akur kang.. awalna bingung mana demona :) sigana screenshootna kedah didamel didieu ngarah teu bingung

    BalasHapus
    Balasan
    1. Sopala MultapaJumat, September 20, 2013

      Muhun nyaeta kang .. saya kira gak bikin bingung kang !!
      muhun urang damelkeun ah meh teu linglung ....

      Hapus
    2. Beben KobenJumat, September 20, 2013

      di kode ieu
      .metro-menu {
      . . .
      width: 70px;
      opacity:0.1;
      }
      bakal katingali jigana teh...wekekekk

      Hapus
    3. Sopala MultapaJumat, September 20, 2013

      iya kang katingali .. tapi keun we meh lieur nu ningalina heuheu

      Hapus
  9. UnknownJumat, September 20, 2013

    mantep mas Ruly.. salam kenal

    celco-blog.blogspot.com

    BalasHapus
  10. Beben KobenJumat, September 20, 2013

    kurang metro brooo...hihihi, tp mantap lah \m/

    BalasHapus
    Balasan
    1. Sopala MultapaJumat, September 20, 2013

      Naun atuh nya kang ben .. Metdut we atuh hehe

      Hapus
    2. Beben KobenJumat, September 20, 2013

      ieu kerek metro...!!!
      designrshub.com/2013/07/responsive-metro-style-navigation-menus.html
      how about det bro??? awesome right?
      kkkKKKkkkkk...

      Hapus
    3. Sopala MultapaJumat, September 20, 2013

      mahal di si canyon mah

      Hapus
    4. Beben KobenJumat, September 20, 2013

      aok weh...kkkk

      Hapus
  11. UnknownJumat, September 20, 2013

    Keren bner :)

    BalasHapus
  12. UnknownJumat, September 20, 2013

    Wah menunya malu malu ya mas ..he h e..keren mas ..

    BalasHapus
  13. Beben KobenSabtu, September 21, 2013

    ada yg kurang sreg...
    .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 ;)

    BalasHapus
  14. Imron FhatoniSenin, September 23, 2013

    ini baru yang namanya keren mas Ruly :-d

    BalasHapus
  15. UnknownKamis, September 26, 2013

    yah ampun saya tambah bingung lama ga ngeblog :p

    BalasHapus
  16. AnonimSenin, September 30, 2013

    wah keren nih :>) , sdh ane coba dan hasilnya poolll (h)

    BalasHapus

Posting Komentar

Postingan populer dari blog ini

Membuat Menu Dengan CSS Border Animation

Setelah beberapa waktu lalu selalu membuat postingan dengan konsep blogazine sebagai ajang pelepas suntuk dan sebagai trick menghindari kejenuhan dalam blogging saat ini saya akan coba share kebiasaan lama yaitu tutorial dalam membuat menu navigasi. Kali menu yang ditawarkan sangat-sangatlah simple , hanya memanfaatkan border dan sedikit animasi hover . SEE DEMO CSS .items{ margin-top:50px; } .items li{ float:left; padding:20px 35px 20px 35px; list-style:none; border:5px solid rgba(255,255,255,0.2); margin-left:10px; -webkit-box-reflect: below 0.5px -webkit-gradient(linear,left top,left bottom,from(transparent),color-stop(75%,transparent),to(rgba(255,255,255,0.4))); } .items li:hover{ border:5px solid rgba(255,255,255,1); -webkit-transition:all ease-in 0.3s;/*Chrome*/ -moz-transition:all ease-in 0.3s;/*Firefox*/ -o-transition:all ease-in 0.3s;/*Opera*/ -ms-transition:all ease-in 0.3s;/*Microsoft*/ } .items li a{ color:#FFF; text-decoration:none
58 komentar
Baca selengkapnya

Membuat Slideout Navigation

Masih Seputar tutorial dalam membuat menu untuk bagian sidebar , namun ini agak sedikit berbeda dari menu tutorial kemaren yang menggunakan system hover , karena kali ini saya menggunakan Push Menu dengan system onclick ( menu akan muncul setelah kita klik tombol / button  tertanda ) dan sekaligus ini jawaban dan request para sahabat.  Baca: Memasang Simple Flat Sidebar  Demosion   Langkah Kustomisasi  Masukan kode CSS dibawah ini sebelum kode </style> .pushmenu { /*this is the nav*/ background: #3c3933; font-family: Arial, Helvetics, sans-serif; width: 240px; height: 100%; top: 0; z-index: 1000; position:fixed; } .pushmenu h3 { color: #cbbfad; font-size: 14px; font-weight: bold; padding: 15px 20px; margin: 0; background: #282522; height: 16px; } .pushmenu a { display: block; /* drops the nav vertically*/ color: #fff; font-size: 16px; font-weight: bold; text-decoration: none; border-top: 1px solid #56544e; b
62 komentar
Baca selengkapnya

Menu CSS3 Dengan Efect Hover

Menu CSS3 Dengan Efect Hover    - Sudah beberapa hari ini diliputi dilema pada background .. susah nentuin yang pas , biarpun pada akhirnya sedikit merasa lega juga dengan yang sekarang ,memang belum puas tapi ya sudahlah . O..ya pada sedikit kesempatan ini saya akan coba share sebuah menu simple CSS3 dengan hover efect yang lumayan bisa diandalkan untuk merubah penampilan template . Untuk lengkapnya silahkan cek demonya . See Demo Komposisi   CSS3  /.....---CSS3 BREWOK---.....\ nav {   font:700 16px/60px 'Lato', sans-serif;   width:90%;   margin:30px auto 0 auto;   background: #374D61 ;   overflow:hidden;   -webkit-border-radius:8px;   -moz-border-radius:8px;   -o-border-radius:8px;   border-radius:8px; } nav ul {   height:60px;   overflow:hidden; } nav ul li {   width:25%;   float:left;   text-align:center; } .item-container {   position:relative;   height:120px;   cursor:pointer;   -webkit-transition: all 0.3s ease; -moz-transition:  
45 komentar
Baca selengkapnya