×

search by faronesia.com

FARONESIA
Profesional and Specialist WebDesign by Faronesia

Selain tutorial, kami juga menyediakan layanan penambah follower untuk akun Instagram dan Tiktok anda dengan harga terjangkau. Ayo buruan order sekarang juga!!!

Layanan Media

Cara Membuat Menu navigasi bottom Melayang Pada Blog

Faronesia.com - Halo sobat blogger, di bulan maret dan april ini banyak sekali yang sudah merequest tutorial membuat menu buttom melayang pada blog. Sebenarnya tutorial ini sudah ada yang membuatnya. Namun, disini saya kan merealisasikan permintaan anda di faronesia.com.

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(&quot;data:image/svg+xml,%3Csvg viewBox=&#39;0 0 24 24&#39; xmlns=&#39;http://www.w3.org/2000/svg&#39;%3E%3Cpath d=&#39;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&#39; fill=&#39;%23ffffff&#39;/%3E%3C/svg%3E&quot;) 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:&quot;&quot;;
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.
Buka komentar
Tutup komentar
  1. blognya keren kang, banyak tutorial menariknya hhe

    BalasHapus

1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata kata.
2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini.
3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar 1 per 1.
5. Komentar selalu di moderasi.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Modifikasi Tampilan Website Anda

Gunakan jasa kami, berikan kesan bahwa website anda professional.

Pesan Sekarang
Notifikasi pengguna

Aktifkan javascript dibrowser anda agar mendapatkan fitur jelajah yang lebih baik di situs kami.

Tetap selalu terhubung dengan kami untuk menjadi bagian dari Faronesia, caranya cukup dengan menekan tombol dibawah ini.

Tutup