Membuat Gambar Melayang untuk scroll halaman Ke Atas dan Ke Bawah

Manjakan sedikit pengunjung blog anda dengan Floating Image atau gambar melayang untuk scroll halaman blog ke atas dan kebawah. Dengan trik ini, pengunjung tidak perlu bersusah payah menarik scroll halaman jika ingin melihat bagian paling bawah blog saat sedang berada di bagian paling atas blog maupun sebaliknya. Agar lebih mengerti tentang Floating Image atau gambar melayang ini, silahkan klik gambar panah ke atas atau kebawah yang ada di sudut kanan bawah blog BLOGGERBUGIS ini. Sudah mengerti maksudnya ??? Jika ingin membuatnya di blog anda, simak Tutorialnya berikut ini :

Membuat Floating Image atau Gambar Melayang untuk perintah ke atas dan ke bawah halaman blog hanya menggunakan sedikit kode HTML. Ini kodenya :

<a href='#footer' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Turun Ke Bawah Halaman'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxfbkeyEgoplGMND4jqAab7muyDShP0cWIbtbi6ib-LUv8Zgmwb7lUGJ1-CBHBnydTEEFGpp-u5AVV6WRsfvXQ62U3FR69ZXa1gjsEq67RUcni-53vBTHLPg-aRsFG8rBXHYqEEij9tciD/s30/Awalk%20Down.png'/></a>

<a href='#' style='display:scroll;position:fixed;bottom:5px;right:43px;' title='Naik Ke Atas Halaman'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjstMjGX6j3j7dMzKOTh9ArvKyYZf4zAU99xKIUEUy4XxM2agIqQtpWaeSrOn2UDuXSuI_6ku51XwYP6eit4mJ7nIRmgIFi_YWGj9Bq9RAwA8PEjYgaG-DjT5tyX6EdZoNjtmx0GWj4WM2z/'/></a>

Copy kode diatas ( Gunakan CTRL + C ) lalu paste diatas kode </body> template anda. Sudah tahu dimana mencari kode </body> di template anda ? Kalau belum, baca 2. CARA MENAMBAH / MENGHAPUS KODE HTML TEMPLATE di artikel BLOGGERBUGIS yg lain dengan klik DISINI.

Jika ingin menambahkan perintah kembali ke BERANDA BLOG yang terlihat dengan gambar RUMAH pada floating image BLOGGERBUGGIS, gunakan kode ini :

<a href='#footer' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Turun Ke Bawah Halaman'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxfbkeyEgoplGMND4jqAab7muyDShP0cWIbtbi6ib-LUv8Zgmwb7lUGJ1-CBHBnydTEEFGpp-u5AVV6WRsfvXQ62U3FR69ZXa1gjsEq67RUcni-53vBTHLPg-aRsFG8rBXHYqEEij9tciD/s30/Awalk%20Down.png'/></a>

<a href='http://blogger-bugis.blogspot.com' style='display:scroll;position:fixed;bottom:5px;right:43px;' title='Beranda BLOGGERBUGIS'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFJhsV3Cp-B60hQkhp0ZuOFmbvfYhDACgIwXI0hvnNMA0TfnCUj2qe19l7EO1XFQtoDyLhTYQ-7NKV9HD1tIbP0qX2AGd5aFYeVtKVkGtt7cN4pKOFdEkQ-oBj9NS5owbdNO3z-SKhMLCi/'/></a>   

<a href='#' style='display:scroll;position:fixed;bottom:5px;right:80px;' title='Naik Ke Atas Halaman'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjstMjGX6j3j7dMzKOTh9ArvKyYZf4zAU99xKIUEUy4XxM2agIqQtpWaeSrOn2UDuXSuI_6ku51XwYP6eit4mJ7nIRmgIFi_YWGj9Bq9RAwA8PEjYgaG-DjT5tyX6EdZoNjtmx0GWj4WM2z/'/></a>

Hasil dari kode diatas persis seperti yang anda lihat di BLOG ini.

Catatan :

Anda bisa mengedit kembali kode yang berwarna MERAH sesuai keinginan anda.

Angka 5, 43, dll adalah pengaturan untuk letak FLOATING IMAGE atau Gambarnya. Anda bisa saja meletakkannya di sebelah kiri bawah, atas, atau dimanapun sesuai keinginan anda dengan mengganti angkanya menjadi lebih besar atau lebih kecil

TURUN KEBAWAH HALAMAN, NAIK KEATAS HALAMAN, BERANDA BLOGGERBUGIS, adalah tulisan yang akan tampil saat Mouse diarahkan pada gambar melayang.

https://...... dan seterusnya adalah alamat / Link dari gambar. Jika anda ingin memakai gambar anda sendiri, ganti alamat / link gambarnya dengan alamat / link gambar anda. Ukuran gambarnya juga terserah anda. Kalau gambar yang dipakai BLOGGERBUGIS ukurannya 30px X 30 px.

Segitu aja bro... Happy blogging...