Tutorial Membuat Floating Image Back To Top Dan Back Bottom

Masih Ingat Back To Top? Tetapi tidak ada back bottom? Posting saya sebelumnya di blog saya yang lain yaitu "Tutorial Membuat Back To Top,Auto Down,Back Bottom"Juga membahas tentang back to top.Nah kali ini,admin akan membahas cara membuat floating image hanya back to top dan back bottom.Back to top dan bottom ini mempermudah pengunjung untuk melihat laman atas/bawah secara simple tanpa harus menggunakan scorll/penggulungan layar.
Mungkin blog lain sudah menyediakan tutorial tombol back to top ini? tapi apakah lengkap dengan back bottom? atau tidak memakai floating image yang simple?disini saya akan memberitahukan tutorial yang mudah.sebenarnya,untuk membuat tombol back to top dan back bottom dengan floating image ini,sobat hanya perlu menambahkan link pada floating image nya saja.Ikut saja langkah-langkah berikut :

• Login ID/Akun Sobat
• Baca Basmallah :)
• Dashboard >> Template >> Edit HTML
• Copy-pastekan code css berikut tepat diatas code ]]></b:skin> 

#floating-atas-bawah {
position:fixed; _position:absolute; bottom:5px; right:5px; clip:inherit;
z-index:+1000;} 

• Sudah Selesai? Jangan beranjak dahulu.Copy Code Berikut tepat dibawahcode </head>

<div id='floating-atas-bawah'>
<a href='#' title='Ke Atas'><img border="0" src='http://sites.google.co
m/site/ruangsc/imgsb/keatas.png'/></a>
<a href='#footer' title='Ke Bawah'><img border="0" src='http://sites.google.com/site/ruangsc/imgsb/kebawah.png'/></a> </div>

NOTE :

• Warna Merah adalah URL Gambar dari back to top dan back bottom tersebut.Jika tak tertarik dengan gambar,silahkan ganti url gambar tersebut.
• Jika Back bottom tidak bekerja,gantilah #footer Dengan #bottom

Jika diawali dengan basmallah,insya allah pekerjaan akan terlaksanakan dengan baik :) 

Allahamdulilah..