Membuat Floating Menu di Samping Blog Membuat Floating Menu di Samping Blog - mizipediacom mizipediacom: Membuat Floating Menu di Samping Blog

KATEGORI










LIVE TV

Iklan Semua Halaman

Membuat Floating Menu di Samping Blog

Sunday, May 21, 2017



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.
Lihat Juga