Memasang Icon Shortcut Home, Back to Top and Bottom, dan Refresh dipojok kanan bawah

KONTAK SAYA

Content Kreator Blogger
Awalnya hanya iseng, tapi lama-kelamaan senang juga ngeblog karena nganggur, walaupun susah dapat pulus dari internet, mudah-mudahan kebagian pulusnya dari keisengan ini.

My Blog

Para pengunjung blog kita, tentunya lebih senang jika diberi kemudahan dalam membaca artikel di blog kita, seperti kembali ke atas blog, menuju bagian bawah blog, dll.
Kali ini kita akan mencoba membuat sebuah icon shortcut yang akan selalu tampil di pojok layar yang berfungsi untuk menggulung scroll ke atas dan ke bawah ditambah sebuah icon untuk merefresh halaman blog.

Demonya udah ada di blog ini kok, ada di pojok bawah kanan layar kamu

Masuk ke Tata Letak -> Edit HTML, jangan lupa centang expandnya.
Copy CSS berikut dan pastekan di atas ]]></b:skin>

#mangetsu {
position:fixed;_position:absolute;bottom:0px; right:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }
#mangetsu a
{
filter:alpha(opacity=65);
-moz-opacity:0.65;
opacity:0.65;
border:0;
}
#mangetsu img
{
border:0;
}
#mangetsu a:hover
{
filter:alpha(opacity=100);
-moz-opacity:1;
opacity:1;
}

Kode yang dicetak tebal adalah letak dari widget, "bottom" bisa kamu ganti dengan "top" dan "right" bisa kamu ganti dengan "left" (terserah kamu)
Kalau sudah, cari lagi kode </body> tambahkan kode tepat diatasnya.
Copy kode yang ada dibawah ini!

<table border='0'>
<tr>
<td><a expr:href='data:blog.homepageUrl' title='Home'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrAXyHFNLSUmVvWJrs6aUEdPGTqDNF-d6DWNrkEmF72NDTx64asplkVxTdKJlDhSaVmy2BG0-zlEO2JB_1jNZloGmtEpz1cHzBxcslMeUQKF3A53sj1op7QCNKv6WZoxiKCpEPG3y2AHM/s320/home-icon2.png'/></a></td>
<td><a href='#' title='back to top'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPYUB9UlghyphenhyphenXNVbToSeZq1F5XmkHsW3I8C-PrkVdWO9MgNj9XLJZrZ7F85oN-QTFYbjbyFxWCL9cH-hSa43ITF-WKaYX33hclndkTVDzMcpju08PpYtqFrgM-dJtdvfj1wLbBuzHHvOWs/s320/pre-icon1.png'/></a></td>
<td><a href='#ngisor-dhewe' title='back to bottom'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic_vuhjF5hAeE7bpie0QIz5Uz4o15G0OoNzT5eWk3W70UMxfoaINmDKyK3rYzUcDNacS_KXmbG3GkZyx-zbtxyrWR81QyJG6XG7SFwLSwJs8xNPz2DwsfbVdcCgTXqOWmMHSr-lejDrk0/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/AVvXsEhzMridbD4u-bRomfO6Eb47O2vU-98ewcCKcVUn8QmIsNbOZWB0WzW5IvJt4sX5B9z1LpFi9ONtD5GMjfO66VeeqSpSx64iVloKFzOwEDWawG0Yqb_2V5ZTSkuxFxkRNW9D4bHhFnR4jr8/s320/refresh-icon1.png'/></a></td>
</tr>
</table>
</div>