Menu Navigasi Buttom
Fitur menu button melayang / stiky memungkinkan blog yang anda kelola menjadi lebih cantik serta membuat keefektifan dalam menempatkan link - link tertentu pada button tersebut. Bentuk menu navigasi didesain dengan cantik dan menawan agar pengguna tidak terganggu saat berselancar pada blog yang anda miliki.
Fungsi Menu Navigasi Bottom
Selain mempercantik penampilan blog, Menu Navigasi Bottom juga berfungsi sebagai menu kedua dari navigasi utama blog. Artinya, menu - menu yang telah anda buat tidak serta - merta menumpuk pada navigasi utama. Anda dapat menempatkan link - link tersebut pada menu navigasi bottom.
Info Menu Navigasi Bottom
Awalnya saya mendapatkan kode menu ini hasil dari inspect salah satu blogger indonesia. Namun saya modif kembali agar tampilan sesuai dengan keinginan saya. Anda boleh memodifikasi kembali kodenya karena kode yang saya bagikan bersifat free.
Sebelum mempraktekkannya, saya harap anda sudah membackup template yang akan dimodifikasi. Mengapa demikian? Sebab, jika nanti terdapat hal-hal yang tidak anda inginkan seperti kode tidak cocok, salah menempatkan kode, lupa menempatkan kode, template error, atau bahkan template rusak maka anda masih memiliki cadangannya.
Cara Membuat Menu navigasi bottom
- Masuk ke dashboard blog
- Lalu masuk ke menu tema blog
- Kemudian klik edit HTML Cari kode ]]></b:skin> atau </style>
- lalu tambahkan kode CSS dibawah ini tepat diatas kode ]]></b:skin> atau </style>
/* menu bottom faronesia.com */
#faromobile {
position:fixed;
bottom:0;
width:100%;
height:60px;
background:#fff;
z-index:990;
color:#f9690e;
box-shadow: 0 -5px 5px rgba(0 , 0 , 0 , 0.12);
}
#faromobile a{
color:#f9690e;
text-decoration:none;
}
.faromobile-button {
width: 20%;
float: left;
text-align: center;
padding: 5px 0;
font-size: 15px;
position: relative;
}
.faromobile-button span {
width: 100%;
font-size: 2em;
color: #fff;
margin: .1em;
float:left;
}
.faromobile-button svg{
width:24px;
height:24px;
vertical-align:middle;
text-align: left;
position:absolute;
left:30%;
bottom:-32px;
cursor:pointer;
}
.faromobile-button svg path{
fill:#f9690e;
}
.home-mobilemenu:before {
border-radius:100%;
background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.07,4.93C17.22,3 14.66,1.96 12,2C9.34,1.96 6.79,3 4.94,4.93C3,6.78 1.96,9.34 2,12C1.96,14.66 3,17.21 4.93,19.06C6.78,21 9.34,22.04 12,22C14.66,22.04 17.21,21 19.06,19.07C21,17.22 22.04,14.66 22,12C22.04,9.34 21,6.78 19.07,4.93M17,12V18H13.5V13H10.5V18H7V12H5L12,5L19.5,12H17Z' fill='%23ffffff'/%3E%3C/svg%3E") center /21px no-repeat;transition:0.3s cubic-bezier(0.175,0.885,0.32,1.275),padding 0.3s ease,margin 0.3s ease;
position:absolute;
content:"";
height:30px;
width:30px;
left:30%;
bottom:-30px;
background-color:#f9690e;
box-shadow: rgba(74, 74, 74, 0.5) 0 1px 3px, rgba(45, 45, 45, 0.1) 0 0 0 6px;
}
.home-mobilemenu.round{
border-radius: 34px;
cursor: pointer;
}
#faromobile{
display:block!important;
- Kemudian cari kode </body>
- Selanjutnya, letakkan kode html dibawah ini tepat diatas kode </body>
<div id='faromobile'>
<div class='faromobile-button'>
<a aria-label='teman' href='https://www.faronesia.com/'><svg viewBox='0 0 24 24'>
<path d='M12,23A1,1 0 0,1 11,22V19H7A2,2 0 0,1 5,17V7C5,5.89 5.9,5 7,5H21A2,2 0 0,1 23,7V17A2,2 0 0,1 21,19H16.9L13.2,22.71C13,22.9 12.75,23 12.5,23V23H12M13,17V20.08L16.08,17H21V7H7V17H13M3,15H1V3A2,2 0 0,1 3,1H19V3H3V15Z'/>
</svg>
</a>
</div>
<div class='faromobile-button'>
<a aria-label='tanggapan' href='https://www.faronesia.com/'><svg viewBox='0 0 24 24'>
<path d='M12,23A1,1 0 0,1 11,22V19H7A2,2 0 0,1 5,17V7C5,5.89 5.9,5 7,5H21A2,2 0 0,1 23,7V17A2,2 0 0,1 21,19H16.9L13.2,22.71C13,22.9 12.75,23 12.5,23V23H12M13,17V20.08L16.08,17H21V7H7V17H13M3,15H1V3A2,2 0 0,1 3,1H19V3H3V15Z'/>
</svg>
</a>
</div>
<div class='faromobile-button'>
<a aria-label='home' href='https://www.faronesia.com/'><span class='home-mobilemenu round'/></a>
</div>
<div class='faromobile-button'>
<a aria-label='dislaimer' href='https://www.faronesia.com/'><svg viewBox='0 0 24 24'>
<path d='M12,23A1,1 0 0,1 11,22V19H7A2,2 0 0,1 5,17V7C5,5.89 5.9,5 7,5H21A2,2 0 0,1 23,7V17A2,2 0 0,1 21,19H16.9L13.2,22.71C13,22.9 12.75,23 12.5,23V23H12M13,17V20.08L16.08,17H21V7H7V17H13M3,15H1V3A2,2 0 0,1 3,1H19V3H3V15Z'/>
</svg>
</a>
</div>
<div class='faromobile-button'>
<a aria-label='privacy policy' href='https://www.faronesia.com/'><svg viewBox='0 0 24 24'>
<path d='M12,23A1,1 0 0,1 11,22V19H7A2,2 0 0,1 5,17V7C5,5.89 5.9,5 7,5H21A2,2 0 0,1 23,7V17A2,2 0 0,1 21,19H16.9L13.2,22.71C13,22.9 12.75,23 12.5,23V23H12M13,17V20.08L16.08,17H21V7H7V17H13M3,15H1V3A2,2 0 0,1 3,1H19V3H3V15Z'/>
</svg>
</a>
</div>
</div>
- Selesia, simpan template
Catatan:
- Ubah link menu yang ditandai dengan warna Merah sesuai dengan keinginan anda
- Ubah kode icon svg yang ditandai dengan warna Oren dengan keinginan anda. Anda bisa mendapatkan kode icon svg secara gratis di materialdesignicons.com.
Request tutorial lain?silahkan masuk ke halaman Tanggapan
Demikianlah mengenai Cara Membuat Menu navigasi bottom Melayang Pada Blog semoga bermanfaat untuk para pembaca dimanapun anda berada. Jika menurut anda artikel ini bermanfaat jangan lupa share karena dengan share artikel ini sama halnya anda berpartisipasi dalam mengembangkan website faronesia.com.