Diposting oleh
Ghulam Ridho |
Dah lama yah saya gak posting tutorial blog kali ini saya akan memposting tentang cara Cara Membuat Tombol Home, BackToTop, BackToDown, Reload ,Tahukah sahabat bahwasanya ada Icon untuk mempermudah dalam navigasi, Saya akan menjelaskan cara membuat tombol Home, Back to top, Back to down, Refresh..
inilah penjelasannya,
1. Tombol
Home gunanya untuk Kembali ke HomePage.
2. Tombol
Back To Top gunanya untuk kembali ke atas.
3. Tombol
Back To Down gunanya untuk kembali ke bawah.
4. Tombol
Refresh gunanya untuk membuk ulang halaman.
Caranya mudah saya jelaskan tahapannya :
1. Kita menuju Tatak letak/masih bisa di Edit HTML juga(centang tanda Expand...), atau pula sekarang di sebut Rancangan >> edit HTML.
2. Kalau sudah, cari kodeBerikut:
]]></b:skin>
3. Kalau sudah ketemu, copy code berikut dan paste di atas code tadi
#mangetsu {<br />position:fixed;_position:absolute;bottom:0px; right:0px;<br />clip:inherit;<br />_top:expression(document.documentElement.scrollTop+<br />document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }<br />#mangetsu a<br />{<br />filter:alpha(opacity=65);<br />-moz-opacity:0.65;<br />opacity:0.65;<br />border:0;<br />}<br />#mangetsu img<br />{<br />border:0;<br />}<br />#mangetsu a:hover<br />{<br />filter:alpha(opacity=100);<br />-moz-opacity:1;<br />opacity:1;<br />}
Kalau sudah, copy code berikut :
<div id='mangetsu'><br /><table border='0'><br /><tr><br /><td><a expr:href='data:blog.homepageUrl' title='Home'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnD8MgSL7IqULIzuM6DzR8V6onwfEHPmu0CzCK74xd-HPOu9TMemOdpSq1qGtXegOKeh639vT62briqfRl67mv69EWPSIgNuB9tewQ__iOc62ZGI-y_P_LR9sFNW93W_Y1fvur3-FxSKI/s320/home-icon2.png'/></a></td><br /><td><a href='#' title='back to top'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigbk5mq9HKs3phTyhTg4tX0t3Yz6hpMIzbdgxfGLQiZ9TFR5kI2AXldu7psVrL7bU4iNLMzeKD9buzOXedUYfqYAspMNUJF-nBSsvSePbr61YH4VdPO5OEjXtuAuOu1ahXs4iHoP9nR_g/s320/pre-icon1.png'/></a></td><br /><td><a href='#bottom' title='back to bottom'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPUXComwcf4fi2NCoFC5xZXFpHY13-ENeAsuK7M1irF6YOsNleC6gs-AXRx5PvelyufBTbBAif37p-n7k5HhmPxQnwVL024MCtAthgGL3RdzSh2YpfX7rZxvRkHBAqPJz6v7ROyIzHkDM/s320/next-icon2.png'/></a></td><br /><td><a href='#' onClick='window.location.reload()' title='Reload page'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQJZDnGfuFeOpvf0z6FkPWLBt3DWI255Tr8U2CmGFAOUAz9nRK8CoPYCESxPLkzFS5PHz7Q3yPfKVICKsttTWnqlKH9125J87e3PmFcwv7V_mxuJRHRsv0GjfIDVcdvuLt5wnMjmrtOfg/s320/refresh-icon1.png'/></a></td><br /></tr><br /></table><br /></div>
Kalau sudah
di copy, paste code di atas tepat dibawah
code :
<body>
- Lalu Simpan, dan lihat hasilnya.
Jika sahabat ragu-ragu untuk menambahkan widget ini sahabat dapat mengklik tombol Pratinjau untuk mengecek apakah editan saya berhasail atau tidak.
Mudah-mudahan tips ini bermanfaat,wassalam
Sumber : http://magazineforum.blogspot.com/
0 komentar:
Posting Komentar