Cara membuat menu Floating keren di blog

Cara membuat menu Floating keren di blog - Kali ini kita akan membahas tentang bagaimana caranya membuat menu floating keren di blog. Pemamfaatan menu floating ini merupakan untuk mengisi kekosongan pada sidebar kiri blog dan sebagai untuk mempercantik Blog atau bahkan untuk melengkapi Blog itu sendiri,

apa itu floating? secara umum floating dapat diartikan mengembang, maksud nya ketika kursor mouse diarahkan pada menu ini, maka secara otomatis menu ini akan mengembang dan memperlkihatkan menu apa saja yang ada didalamnya, singkat cerita fungsi dari menu floating ini pun juga sangat banyak seperti yang disampaikan sebelumnya.

Berikut tutorial bagaimana caranya memasang menu floating keren di blog dengan mudah

1. Login ke akun blogger anda klik Tema > Edit HTML Lalu cari kode ]]></b:skin> setelah ditemukan kemudian pastekan kode dibawah ini tepat diatas kode ]]></b:skin> tadi
   

    /* MENU NAVIGASI (FLOATING) Blog RenaldyWays */
   .menu {text-shadow:none;position: fixed;height: 100%;width: 83px;background: #2c3e50;transition:width 1s;overflow: hidden;font-family: 'Offside', sans-serif;z-index: 99;left:0;top:0}
   .menu:hover {width: 270px;}
   .menuItem span {position: absolute;left:80px;top:40px;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: 40px;transition:border .5s, background .2s;}
   .menuItem a {color:#fff;}
   .menuItem:hover {background: #34495e;cursor: pointer;}
   .satu {border-left:5px solid #16a085;}
   .satu:hover{border-left:20px solid #16a085;}
   .dua {border-left:5px solid #2980b9;}
   .dua:hover {border-left:20px solid #2980b9;}
   .tiga {border-left:5px solid #8e44ad;}
   .tiga:hover {border-left:20px solid #8e44ad;}
   .empat {border-left:5px solid #e67e22;}
   .empat:hover {border-left:20px solid #e67e22;}
   .lima {border-left:5px solid #e74c3c;}
   .lima:hover {border-left:20px solid #e74c3c;}
   .enam {border-left:5px solid #16a085;}
   .enam:hover{border-left:20px solid #16a085;} 

2. Kemudian cari kode </body> dan pastekan kode dibawah ini tepat diatasnya

    <div class='menu'>
   <div class='menuItem satu'><i class='fa fa-home icon-large'/><span><a href='http://Hohoseo.blogspot.com/'>Home</a></span></div>
   <div class='menuItem dua'><i class='fa fa-comments icon-large'/><span><a href='http://Hohoseo.blogspot.com/p/var-servicedomainwww.html'>Contact Us</a></span></div>
   <div class='menuItem tiga'><i class='fa fa-bug icon-large'/><span><a href='http://Hohoseo.blogspot.com/error404'>Bugs</a></span></div>
   <div class='menuItem empat'><i class='fa fa-life-ring icon-large'/><span><a href='http://Hohoseo.blogspot.com/p/blog-page.html'>Privacy Policy</a></span></div>
   <div class='menuItem lima'><i class='fa fa-exchange icon-large'/><span><a href='http://Hohoseo.blogspot.com/p/blog-page_6.html'>Link Exchange</a></span></div>
   <div class='menuItem enam'><i class='fa fa-bullhorn icon-large'/><span><a href='http://Hohoseo.blogspot.com/p/forum-on-blog.html'>Forum On Blog</a></span></div>
   </div> 

3. Belum selesai sampai disitu, cari  lagi kode </head>  setelah ketemu kemudian pastekan kode dibawah ini tepat diatas nya

    <link href='//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/> 

4. Kemudian simpan template dan lihat hasilnya

Jika kode pada nomor 3 sudah ada pada template anda maka anda tidak perlu lagi untuk menambahkan kode tersebut

Demo menu Floating ini dapat anda lihat pada bagian samping kiri blog ini, klik disini

Itulah sedikit artikel tentang bagaimana caranya membuat menu floating keren di blog, dan selamat mencoba, jangan lupa untuk mengshare artikel ini agar lebih banyak orang yang membaca sehingga saya juga semakin termotifasi untuk terus menulis disini.