Cara Mudah Membuat Floating Button di Sisi Blog sumber: Klik Tujuh

Home »TUTORIAL»Cara Mudah Membuat Floating Button di Sisi Blog

Cara Mudah Membuat Floating Button di Sisi Blog

Posted on 8:36 PM by Damar Yosa Aji

Sidebar pada blog adalah sebuah space atau daerah tempat kita dapat menaruh widget-widget yang sering (umum) dipakai. Tapi bagaimana jika tidak ada lagi space di sidebar padahal kita ingin menambahkan lagi objek atau widget baru?

Berikut ini saya akan berbagi sedikit tips mudah untuk membuat floating button (tombol melayang) di sisi kanan atau kiri blog. Copy script dibawah dan masukkan di template blog anda, dimanapun asalkan masih diantara <body> dan </body>

Kanan atas

1 2	<a style="position: fixed; top: 5px; right: 5px;" href="#"> <img src="image1.gif" alt="" /></a>

Kanan Bawah

1 2	<a style="position: fixed; bottom: 5px; right: 5px;" href="#"> <img src="image2.gif" alt="" /></a>

Kiri Atas

1 2	<a style="position: fixed; top: 5px; left: 5px;" href="#"> <img src="image3.gif" alt="" /></a>

Kiri Bawah

1 2	<a style="position: fixed; bottom: 5px; left: 5px;" href="#"> <img src="image4.gif" alt="" /></a>

Untuk code : a href=”http://indose7en.blogspot.com/” Ganti dengan link yang ingin anda tuju.

Untuk code : style=”display:scroll;position: fixed; top:5px;right:5px;” Untuk top:5px adalah jarak dari atas 5 pixel dan right:5px adalah jarak dari kanan 5 pixel, ganti sesuai keinginan anda.

Untuk code : img src=”image1.gif” Ganti code di dalam tanda petik dengan link gambar button anda.

Dan dari sini anda dapat memodifikasi code-code diatas untuk mendapatkan floating button sesuai keinginan anda.

UPDATE :

Contoh anda dapat menambahkan properti transparan pada style image. Begini contohnya : Anda dapat menaruh code style=”display:scroll;position: fixed; top:5px;right:5px;” menjadi style “div” dengan cara :

1	<div style="display:scroll;position: fixed; top:30px;right:5px; ">

Dan masukkan script ini dibawah code “div” tersebut. Untuk link tujuan a href=”http://indose7en.blogspot.com/” dan link image button src=”image1.gif” silahkan ganti sesuai keinginan.

1
2

<a href="#" target="_blank"><img style="opacity:0.4;filter:alpha(opacity=40)"

src="image1.gif" width="32" height="32" border="0"

onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"

onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40"></a>

Kemudian jangan lupa tutup code tersebut dengan menambahkan script ini.

</div>

Anda dapat menaruh banner, gambar, text atau contohnya anda dapat menaruh beberapa tombol sekaligus pada satu sisi kanan atau kiri blog anda seperti yang saya lakukan di sisi kanan atas blog ini.

Semoga bermanfaat

Kritik komentar dan saran kalian sangat ditunggu bro, Bagi yang lebih mengetahui bisa share, ok..

Klik Tujuh