Membuat Floating Menu di Samping Blog




Membuat Floating Menu di Samping Blog

Cara Membuat Menu Floating Blogger

Di kesempatan kali ini saya akan share mengenai cara membuat menu floating blogger, Nah floating menu ini letaknya di sebelah kiri blog, menu floating ini saya rasa sangat simple dan tidak membuat blog 
menjadi lambat, untuk masalah bentuk dari floating menu ini anda bisa melihat di blog saya.

jika anda ingin melihat fungsi dari floating menu ini, bisa anda arah kan kursor mouse ke sebelah kiri blog saya, maka terbuka menu floating tersebut dan jika anda jauhkan cursor mouse tersebut maka akan menutup halaman menu floating, 

wahh gimana keren dan simple bukan, jika anda memang ingin membuat nya, maka anda bisa mengikuti 
langkah-langkah di bawah ini

Cara membuat menu floating

  1. Pastikan anda sudah masuk pada dasbhor milik anda sendiri
  2. Kemudian Masuk pada bagian Editor template , pilih Menu Template => Edit HTML.
  3. Temukan kode ]]></b:skin> (cara cepat pencarian tekan CTRL+F)
  4. Salin kode di bawah ini dan pastekan di atas kode ]]></b:skin> 
    /* 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. Nah langkah terakhir anda cari lagi kode </body>
  6. Salin kode di bawah ini dan pastekan di atas kode </body>
    <div class='menu'>
    <div class='menuItem satu'><img alt='floating' src='http://2.bp.blogspot.com/-PuFv46n1fiY/VD8kp0LNOEI/AAAAAAAAEdk/33UGe7rEHqo/s1600/home-icon.png'/><span><a href='http://www.mizipedia.com/' title='Home'>Home</a>
    </span></div>
    <div class='menuItem dua'><img alt='floating' src='http://1.bp.blogspot.com/-8T0QtbqLsRY/VD8kqMKe0mI/AAAAAAAAEdo/UfQr6-y9WPE/s1600/options-2-icon.png'/><span><a href='http://www.mizipedia.com/' title='Tools'>Tools</a>
    </span></div>
    <div class='menuItem tiga'><img alt='floating' src='http://1.bp.blogspot.com/-HmHTcKntw5g/VD8kp5LcY7I/AAAAAAAAEdg/ihfDB-SOQ54/s1600/information-icon.png'/><span><a href='http://www.mizipedia.com/' title='Category'>Category</a>
    </span></div>
    <div class='menuItem empat'><img alt='floating' src='http://3.bp.blogspot.com/-SFnKcrXOnEA/VD8ksNcrJOI/AAAAAAAAEd8/7-bLxGmuI60/s1600/tag-gray-icon.png'/><span><a href='http://www.mizipedia.com/' title='Label'>Label</a>
    </span></div>
    <div class='menuItem lima'><img alt='floating' src='http://2.bp.blogspot.com/-XIZBSkqoseE/VD8ksLd8-AI/AAAAAAAAEd4/mbr1mDTiGps/s1600/search-lense-icon.png'/><span><a href='http://www.mizipedia.com/' title='Search'>Seacrh</a></span></div>
    <div class='menus'>
    </div>
    </div>
  7. Jika sudah anda terapkan, maka anda  klik simpan template, dan lihat hasilnya.
  Note: anda ganti http://www.mizipedia.com/ dengan URL blog milik anda.
Nah bagaimana mudah bukan untuk membuat nya, Demikian penjelasan saya pada hari ini semoga bermanfaat untUk anda dan selamat mencoba. oh ya jika ada yang kurang jelas bisa anda tanyakan langsung.

Share Google URL Shortener: Get Short URLloading short url

Bila Anda merasa memang artikel-artikel di blog ini bisa bermanfaat, maka Anda bisa membantu memberikan donasi melalui Paypal Dana hasil dari donasi akan digunakan untuk memperpanjang domain mizipedia.com - Terima kasih.

Comment Policy Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Peraturan Berkomentar di mizipediacom
1. Berkomentarlah dengan Relevan dan Sopan
2. Jangan Spam
3. Tidak Porn dan Sara
4. Berkomentar dengan link tanpa relevan maka akan otomatis terhapus
5. Semua komentar pasti akan saya baca dan dibalas. Show Emoticon. Klik ==>

+ Follow
Join on this site

with Google Friend Connect