Cara Membuat Menu Floating Keren Di Samping Blog

Selamat datang agan atau aganwati kali ini bertemu dengan saya di pertemuan kali ini, kali ini saya akan memberikan sedikit tips tentang blogging yaitu tutorial membuat menu navigasi floating keren di samping kiri blog. Menu navigasi floating merupakan menu pada blog yang dimodifikasi dengan muncul ketika diarahkan pointer pada menu tersebut sehingga akan menampilkan menu yang sudah anda atur sedemikian rupa.


Ditambah juga dengan efek floating yang memungkinkan menu tersebut dapat tampil dengan efek float atau mengambang dalam pengertian bahasa. Sehingga anda juga dapat memanfaatkan daerah kosong pada template yang anda gunakan apabila pada bagian kiri template anda terdapat bagian yang kosong dapat anda manfaatkan untuk dipasang menu berikut.


Berikut tutorial untuk membuat menu floating keren di samping kiri blog :

Demo

Langkah

1. Login ke akun blog anda masing-masing,

2. Pada dashboard pilih menu template,

3. Temukan kode ]]></b:skin> , dengan cara

Ctrl

+

F

,

4. Setelah itu copy script di bawah ini, lalu paste tepat di atas kode ]]></b:skin>,

 /* 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;} 

5. Selanjutnya cari kode </body> dengan cara

Ctrl

+

F

, lalu copy script di bawah ini, lalu paste tepat di atas kode </body>,

 <div class='menu'>
<div class='menuItem satu'><i class='fa fa-home icon-large'/><span><a href='http://renaldyways.blogspot.com/'>Home</a></span></div>
<div class='menuItem dua'><i class='fa fa-comments icon-large'/><span><a href='http://renaldyways.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://renaldyways.blogspot.com/error404'>Bugs</a></span></div>
<div class='menuItem empat'><i class='fa fa-life-ring icon-large'/><span><a href='http://renaldyways.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://renaldyways.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://renaldyways.blogspot.com/p/forum-on-blog.html'>Forum On Blog</a></span></div>
</div> 

6. Setelah itu cari kode </head> dengan cara

Ctrl

+

F

,

7. Lalu copy script di bawah ini, setelah itu paste tepat di atas kode </head>,

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

Jika sudah terdapat script tersebut dalam blog Anda, maka tidak perlu ditambahkan!

8. Simpan template.


Demikian artikel tentang cara membuat menu floating keren di samping kiri blog semoga artikel ini membantu anda, jangan lupa like, share dan google+nya, serta tinggalkan komentar anda, terima kasih.

Share this