Back to Top
Artikel Terbaru
Home » » Cara Membuat Menu Floating Keren

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.

Dapatkan Update Artikel Terbaru

Follow Us

Di Posting Oleh : Mas Onqi

Hai Kawan ONshare™, perkenalkan saya Onqi dari Gresik Jawa Timur. Kegiatan saya sehari-hari adalah bekerja dan juga kuliah, untuk kegiatan blogging ini adalah kegiatan untuk mengisi waktu luang saja. dan terima kasih kawan ONshare™ sudi mengunjungi blog saya ini.
Artikel Dilindungi Oleh : DMCA.com

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