Pada hari rabu tepatnya tanggal 8 juli 2020 saya mendapatkan notifikasi gmail tentang request tutorial cara membuat tombol seperti Faronesia. Yang dimkasud tombol melayang adalah tombol donasi yang berada dipojok kanan atas dibawah header blog Faronesia. Pada blog faronesia anda akan menemukan tombol tersebut dengan title donasi, sebenarnya tombol tersebut bisa diubah fungsinya sesuai kebutuhan anda dengan cara yang cukup mudah yaitu mengubah link tujuan dan mengubah iconnya saja.
Beberapa Keuntungan Memasang tombol melayang seperti Faronesia Pada Blog yang mungkin tidak anda ketahui diantaranya, membuat blog terlihat lebih profesional, memberikan kemudahan ruang navigasi kepada pengguna/pengunjung, tampilan blog menjadi lebih anggun, memperbesar peluang sistem pemasaran blog, dan masih banyak lagi keuntungan yang anda dapatkan dari memasang tombol melayang.
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 Tombol Melayang Multifungsi pada Blog
- Masuk ke dashboard blog
- Lalu masuk ke menu tema blog
- Kemudian klik edit HTML
- Cari kode seperti ini ]]></b:skin> atau </style>
- Tempelkan kode CSS dibawah ini tepat diatas kode ]]></b:skin> atau </style>
/* button melayang by faronesia.com */
.faronesiabutton{
position:fixed;
float:left;
z-index:50;
top:60px;
right:-2px;
width:auto;
font-size:15px;
padding:5px;
border-radius:10px 0 0 10px;
border: 2px solid #0081ff;
background:#ffffff;
text-align:center;
box-shadow: 5px 5px 5px rgba(0 , 0 , 0 , 0.12) , 0 5px 5px 5px rgba(0 , 0 , 0 , 0.12);
}
.faronesiabutton:hover{
opacity: .5
}
.faronesiabutton a{
font-weight:600;
font-size:16px;
color:#0081ff;
margin:5px;
}
.faronesiabutton svg{
width:24px;
height:24px;
vertical-align:-12px;
margin-right:5px;
float:left;
}
.faronesiabutton svg path{
fill:#0081ff;
}
- Lakukan Minifier pada css tersebut Disini (jika diperlukan)
- Selanjutnya, tempelkan kode html berikut ini setelah kode <div id='wrapper'> atau <div id='post-wrapper'>. Jika anda bukan pengguna viomagz silahkan cari kode yang hampir mirip.
<div class='faronesiabutton'>
<a href='https://www.faronesia.com/'>
<svg viewBox='0 0 24 24'>
<path d='M12 2A10 10 0 1 0 22 12A10 10 0 0 0 12 2M15 10H11V11H14A1 1 0 0 1 15 12V15A1 1 0 0 1 14 16H13V17H11V16H9V14H13V13H10A1 1 0 0 1 9 12V9A1 1 0 0 1 10 8H11V7H13V8H15Z'/>
</svg>
</a>
</div>
- Ganti teks yang berwarna merah menjadi link tujuan
- Ganti kode icon yang berwarna jingga dengan icon yang anda inginkan
- Daftar icon svg lengkap Disini
- Setelah itu klik simpan dan lihat hasilnya
Demikianlah mengenai Cara Membuat Tombol Melayang Multifungsi 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.