×

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 Tombol Melayang Multifungsi pada Blog

Faronesia.com - Button atau tombol sudah tidak lepas dari suatu blog maupun website. Fungsi button juga beraneka ragam. Selain itu, tombol juga harus memiliki penampilan desain yang cantik agar pengunjung terpancing untuk mengkliknya. Sudah banyak sekali di google tutorial mengenai cara membuat tombol melayang, namun kali ini saya akan membuat tutorial tombol yang dimaksud adalah tombol melayang versi Faronesia.

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.
Buka komentar
Tutup komentar

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