Sunday

Cara Membuat Menu Floating Keren

Selamat datang di Blog taharonqi.blogspot.com, kali ini saya akan sedikit berbagi cara bagaimana membuat menu floating disamping blog yang tentunya keren (kalau menurut saya sih), ini saya kasih screenshotnya sobat :


Oke tanpa memperbanyak perkataan langsung saja berikut ini adalah langkah-langkah membuatnya :
  • Login ke Akun Blogger sobat
  • Pilih Template
  • Klik Edit HTML
  • Cari kode berikut ]]></b:skin> (gunakan CTRL+F untuk memudahkan)
  • Masukkan kode berikut diatas kode ]]></b:skin>

/* Menu Navigasi Keren */
.menu {text-shadow:none;position: fixed;height: 100%;width: 55px;background: #2c3e50;transition:width 1s;overflow: hidden;font-family: 'Offside', sans-serif;z-index: 99;left:0;top:0}
.menu:hover {width: 210px;}
.menuItem span {position: absolute;left:80px;top:20px;transition:color 1s;color:rgba(255,255,255,0);}
.menu:hover .menuItem  span {color:rgba(255,255,255,1);}
.menuItem {color:#fff;position: relative;padding: 20px;transition:border .5s, background .2s;}
.menuItem a {color:#fff;}
.menuItem:hover {background: #34495e;cursor: pointer;}
.satu {border-left:5px solid #000000;}
.satu:hover{border-left:20px solid #000000;}
.dua {border-left:5px solid #000000;}
.dua:hover {border-left:20px solid #000000;}
.tiga {border-left:5px solid #000000;}
.tiga:hover {border-left:20px solid #000000;}
.empat {border-left:5px solid #000000;}
.empat:hover {border-left:20px solid #000000;}
.lima {border-left:5px solid #000000;}
.lima:hover {border-left:20px solid #000000;}

  • Kemudian cari kode </body> (gunakan CTRL+F untuk memudahkan)
  • Masukkan kode berikut diatas kode </body> 

<div class='menu'><div class='menuItem satu'>1<span><a href='http://taharonqi.blogspot.com/'>Menu 1</a></span></div><div class='menuItem dua'>2<span><a href='http://taharonqi.blogspot.com/'>Menu 2</a></span></div><div class='menuItem tiga'>3<span><a href='http://taharonqi.blogspot.com/'>Menu 3</a></span></div><div class='menuItem empat'>4<span><a href='http://taharonqi.blogspot.com/'>Menu 4</a></span></div><div class='menuItem lima'>5<span><a href='http://taharonqi.blogspot.com/'>Menu 5</a></span></div></div>
Keterangan :
Tulisan warna merah : Ganti sesuai keinginan sobat
Tulisan warna kuning : Ganti dengan URL keinginan sobat
Tulisan warna ungu   : Ganti dengan nama menu keinginan sobat

  • Klik pratinjau jika tidak ada kesalahan klik simpan dan lihat hasilnya
Mungkin itu saja yang dapat saya bagi pada kesempatan, semoga bisa bermanfaat buat sobat-sobat semua dan luangkanlah waktu untuk berkomentar demi kemajuan blog ini, terima kasih.

18 comments:

  1. mantaff kang, sayangnya saya lagi gk ada keinginan otak atik html :D

    ReplyDelete
    Replies
    1. hehehe,,,karna blognya sudah bagus ya neng
      :-D

      Delete
    2. aduh kok ada mbak dwi disini hehe .. mungkin juga mas ongki ..utak-atik html bikin pusing ..

      Delete
    3. hehehe iya memang mbak..
      pusing tujuh keliling utak atik HTML tu
      :-D

      Delete
    4. sudah lama saya juga gak utak atik itu HTML...paling banter utak atik bon utang, saya paling ahli hehe

      Delete
    5. waaah kebanyakan utang ya mas....

      hehehhehee

      Delete
  2. asyik juga ya kalau menu navigasi bisa dibuat floating, jadi lebih keren blog nya ya mas :)

    ReplyDelete
    Replies
    1. ya mungkin begitu mbak :-D
      thanks da mampir mbak

      Delete
  3. ngoprek html,...menarik sih. tp sy rada was2, ntar malah ancur...hehehe

    ReplyDelete
    Replies
    1. kalau dilakukan dengan teliti pasti ndak hancur mbak
      hehehe

      Delete
  4. keren mas informasinya...terima kasih...
    bisa saya coba nih kapan2 :)

    ReplyDelete
    Replies
    1. sama-sama mas
      silakan dicoba dan semoga berhasil
      :-D

      Delete
  5. keren nich mas triknya :) dan saya juga tertarik dengan script yg ada lampunya, itu, hehehe ;)

    ReplyDelete
    Replies
    1. hehehe, ya ntar kapa-kapan saya share mbak
      :-D

      Delete
  6. Ilmu yang bermanfaat ...
    ntar saya praktekkan deh sob

    follow blog saya ya sob
    http://infoejaman.blogspot.com

    ReplyDelete
    Replies
    1. oke meluncur
      jangan lupa follow blog saya juga sob

      Delete
  7. nak try juga lah nanti.

    p/s terima kasih krn sudi follow

    ReplyDelete