Cara Membuat Menu Floating Yang Keren Di Samping Blog

Cara Membuat Menu Floating Yang Keren Di Samping Blog - Selamat datang di blog Mr Ivanchan, sebelumnya mohon maaf baru bisa mempublikasikan tutorial selanjutnya kali ini karena saya sibuk dengan kegiatan kuliah. Dan kali ini Saya akan membagikan tutorial tentang Cara Membuat Menu Floating Yang Keren Di Samping 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 kalian juga dapat memanfaatkan daerah kosong pada template yang kalian gunakan apabila pada bagian kiri template kalian terdapat bagian yang kosong dapat kalian manfaatkan untuk dipasang menu berikut.

Berikut tutorial untuk Cara Membuat Menu Floating Yang Keren Di Samping Blog :

• Login ke Akun Blogger.com
• Lalu pilih Tema

• Pilih Edit HTML

• Kemudian kita cari kode terlebih dahulu dengan cara tekan CTRL+F lalu ketik ]]></b:skin>
• Setelah itu copy script di bawah ini, lalu paste tepat di atas kode ]]></b:skin>

 /* Menu Navigasi (Floating) Blog Mr Ivanchan */
.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;}

Seperti yang ada di bawah ini :

• 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='https://www.mrivanchan.tk/'>Home</a></span></div>
<div class='menuItem dua'><i class='fa fa-comments icon-large'/><span><a href='https://www.mrivanchan.tk/p/contact-us.html'>Contact Us</a></span></div>
<div class='menuItem tiga'><i class='fa fa-bug icon-large'/><span><a href='https://www.mrivanchan.tk/error404'>Bugs</a></span></div>
<div class='menuItem empat'><i class='fa fa-life-ring icon-large'/><span><a href='https://www.mrivanchan.tk/p/privacy-policy.html'>Privacy Policy</a></span></div>
<div class='menuItem lima'><i class='fa fa-exchange icon-large'/><span><a href='https://www.mrivanchan.tk/p/disclaimer.html'>Link Exchange</a></span></div>
<div class='menuItem enam'><i class='fa fa-bullhorn icon-large'/><span><a href='https://www.blogger.com/follow.g?blogID=337447232187138573'>Forum On Blog</a></span></div>
</div>

Keterangan :

#Kode warna Merah ganti dengan url Situs Blog / Website

#Kode warna Hijau ganti dengan url Contact Us
#Kode warna Biru ganti dengan url Bugs
#Kode warna Orange ganti dengan url Privacy Policy
#Kode warna Kuning ganti dengan url Link Exchange
#Kode warna Biru Muda ganti dengan url Forun On Blog

Seperti yang ada di bawah ini :

• Setelah itu cari kode </head> dengan cara CTRL+F
• 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'/>

Seperti yang ada di bawah ini :

Catatan :

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

• Terakhir kita tinggal klik Simpan Tema
• Hasilnya

Demikian tutorial yang kali ini dapat bagikan tentang Cara Membuat Menu Floating Yang Keren Di Samping Blog. Semoga bermanfaat bagi kalian semua. Bila ada terjadi kesalahan pada blog kalian atau tidak work di blog/website kalian silahkan untuk berkomentar di bawah artikel ini yang sudah disediakan atau bisa mengirim pesan lewat laman Contact Us. Mohon maaf bila ada kata - kata atau kalimat yang sulit dipahami bagi kalian semua. Terima kasih atas kunjungannya...

Regards,

Mr Ivanchan

BloggingTips & Triks

Share This :