Cara membuat back to top, bottom, refresh, dan home dengan CSS

Sudah lama sekali gak mbahas CSS, kali ini saya akan berbagi tentang cara membuat tombol back to top, bottom, refresh, dan home, Tombol ini berfungsi untuk mempermudah pengunjung menavigasi Blog anda dengan mudah,
Tombol ini terdiri dari 4 tombol berjajar dan berposisi (float) di bawah kiri
Tombol ini terdiri dari Bahasa CSS, dan HTML
naah tanpa basa basi lagi
langsung saja langkah langkahnya:

• login ke dashboard blogger anda
• masuk ke template
• pilih edit HTML
• Salin kode dibawah diatas ]]></b:skin>

#bangiz {

position:fixed;_position:absolute;bottom:0px; left:0px;

clip:inherit;

_top:expression(document.documentElement.scrollTop+

document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

#bangiz a

{

filter:alpha(opacity=65);

-moz-opacity:0.65;

opacity:0.65;

border:0;

}

#bangiz img

{

border:0;

}

#bangiz a:hover

{

filter:alpha(opacity=100);

-moz-opacity:1;

opacity:1;

}

• cari kode </body>, copas kode dibawah sebelum kode </body>

 <a name='izurch-bangiz'/>

• simpan template
• pilih tata letak --> tambah gadget / widget
• copas kode berikut

<div id='bangiz'> <table border='0'> <tr> <td><a expr:href='data:blog.homepageUrl' title='Home'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMmnl3qZezS2AypoZUSh4vqGU91qJVSHEGYHWAE042n5a6ULZLsu8WWgyx1DSIDCSy_1swBFVQUPUfCaqjI8tZd4UlfgPIio2P7bAH2gPzfMT8i6kZc6KrF0zABycAJ_uHUGGqICptrU4/s320/home-icon2.png'/></a></td> <td><a href='#' title='back to top'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3WJmKDtMGr7w880qJv7tRHhkNdr_7SJ07nEBunkvgn1o7gNMi9cqD1PySUO3VAs3AtJO8DOvpRWgfzWKrwOxut97x6M1wtkLUz-VZEh8G7Rt_A9njeEyyEtyEZ_ja_9Sju8ywktWcRmA/s320/pre-icon1.png'/></a></td> <td><a href='#izurch-bangiz' title='back to bottom'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxJvBW0n26MiPk-BD7EGVejUyvtBLMsLhTvBkrt5DMIbzYC2IfBknpAvu4WwOnOhq3OcV3QMJsj2nscqTunQPFO43Klvu-TFo61O_ScMkh7iX5ins4U-OttqGLS1oeW8chkF3-Ap46a-g/s320/next-icon2.png'/></a></td> <td><a href='#' onClick='window.location.reload()' title='Reload page'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2okz4ZG5hTWngnLi2OxunzuTbdXRKZgocr4EzmJXtaa2lDCn2-4URtn5jxfSp2jAo3erzuphlw5DILb9f8z7fPhdmJ4pFTyi5yRACLMS4VtFe3VX_QWJdkHfitWQRQnU9e7AVnl1IdZk/s320/refresh-icon1.png'/></a></td> </tr> </table> </div>

• simpan