Membuat Floating Menu di Samping Blog

Written By PENDIDIDKAN Wednesday, October 15, 2014 Add Comment Edit

Membuat Floating Menu di Samping Blog - Sebelumnya saya telah mengulas menu floating diatas header, kali ini saya akan mengulas kembali mengenai Floating menu namu kali ini bukanlah diats haeder namun di samping Blog. Tentunya ada tahu kan floating menu, sedikit mengingat apabila kita scroll Blog sampai kebawah menu ini akan selau diatas.

Floating menu di Samping Blog ini apabila anda mengarahkan cursor pada menu tersebut akan membuaka namu apbila anda menjauhkan cursor maka akn menutup, bagi anda yang tertarikberikut ini langkah mudahnya :

Membuat Floating Menu di Samping Blog
1. Login keakun Blogger
2. Pilih Template » klik Edit HTML
3. Selanjutnya anda cari kode ]]></b:skin>
4. Kemudian anda terapkan kode dibawah ini diatasnya :

/* Menu Navigasi Floating*/
.menu {text-shadow:none;position: fixed;height: 100%;width: 65px;background: #09005A;transition:width 1s;overflow: hidden;font-family: 'Offside', sans-serif;z-index: 99;left:0;top:0}
.menu:hover {width: 220px;}
.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 #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;}

5. Selanjutnya anda cari kode </body> dan anda terapkan kode bibawah ini sebelumnya :

<div class='menu'>
<div class='menuItem satu'><img alt='floating' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-KDrZWSvwvs4obD-jCjOJGJHgasnFhJgdSFEnp9kOmvmWt5J-XT-85yJBtUJ0_QHvRxuNkTIwmHRD4JYbQlxIUL4aKXckg-YFnOo1emwO0Xz18s7Z1NGYdLoCIKhTntwDXqbPXS5Wa2A/s1600/home-icon.png'/><span><a href='http://aak-share.blogspot.com/' title='Home'>Home</a>
</span></div>
<div class='menuItem dua'><img alt='floating' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpbqAw2ooe5V35EHgX6I8U57bwz2YESkPSpNJ0jrsHvh0tgpI8StpmnU_4jPWgXLW1Xz8WPzlX4G_Il2hLRN9KjMcZ6jRfCioRyktmh6WxS7jGO3MxJptdju-nwycQ9fkZcdpdPTYbcXo/s1600/options-2-icon.png'/><span><a href='http://aak-share.blogspot.com/' title='Tools'>Tools</a>
</span></div>
<div class='menuItem tiga'><img alt='floating' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcUdFlmwUKFenLvLUEtErJFlOgmOV5T51BVfUHjQEJoKLvgyfzTJdIxFQ9hA5IH76R_RWq3FHdjnKvgB7qgBGbZAqAz0-YdX2F4DdFFJjMnoR-573-7p05stPZJMoOYadFlF_7VkXeoN0/s1600/information-icon.png'/><span><a href='http://aak-share.blogspot.com/' title='Category'>Category</a>
</span></div>
<div class='menuItem empat'><img alt='floating' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5lvNLedYKFTzxskQq5TxXs0AZW19yHV3CoTN6qFs1Mqf_x32vLzZXf6CjQjkEav7smpWK-W_im08x-IStFFzdsY-mABMlVlV9cCWu8ayf3YKdVtMceQFXoTOEIpqS54MyvP83vD3Z-cQ/s1600/tag-gray-icon.png'/><span><a href='http://aak-share.blogspot.com/' title='Label'>Label</a>
</span></div>
<div class='menuItem lima'><img alt='floating' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHhyphenhyphen0CmKLwqOLs1ilK-l2ed3jnVWq1jk4xpfPvrfy8-pNhFW8EHa7iZK5UK7pnXBJXIgn0NYD3pGDpvTRgaSGn7o_IS3nxBkcH0JoHN8CToDo4iHGmfZBuZO16UooV8ruOFwzEqYjV6P0/s1600/search-lense-icon.png'/><span><a href='http://aak-share.blogspot.com/' title='Search'>Seacrh</a></span></div>
<div class='menus'>
</div>
</div>

Note :
Silahkan anda ganti kode warna merah dengan URL anda.

6. Simpan Template

Demikian Membuat Floating Menu di Samping Blog, semoga bermanfaat!