Cara Membuat Tombol Back to top dan Go to down (kembali ke atas dan turun ke bawah)

Satu Lagi articel bagus dari www.sakahayang.com , yaitu Cara Membuat Tombol Back to top dan Go to down (kembali ke atas dan turun ke bawah) , dimana tombol tsb bukan di buat di widget tetapi di edit html yang nantinya akan terpasang di pojok bawah ,,

berikut screen shot nya :

Dan berikut caranya :

Buka template blog, edit HTML, cari kode ]]></b:skin>

Copy paste kode CSS berikut tepat diatas ]]></b:skin>

.kaluhur{background:url(https://sites.google.com/site/sakahayangkuring/img/arrowtopdt6.gif)no-repeat;display:block;_display:none;position:fixed;z-index:9999;text-indent:-9999px;  width:17px;height:17px; overflow:hidden;outline:none;left:8px;bottom:35px}

.kahandap{background:url(https://sites.google.com/site/sakahayangkuring/img/arrowdownqe1.gif)no-repeat;  width:17px;height:17px;display:block;_display:none;  position:fixed;z-index:9999;text-indent:-9999px;  overflow:hidden;outline:none;left:8px;bottom:15px}

yang berwarna merah adalah menunjukkan posisi di sudut kiri bawah, kalau mau dipindah ke sudut kanan bawah maka parameter left ganti dengan right.

Kemudian copy paste kode HTML berikut ke widget dimana saja terserah sobat. Atau bisa juga paste tepat di atas tag </body> pada template sobat.

<a class='kaluhur' href='#' title='go to top' rel='nofollow'>Top</a>

<a class='kahandap' href='#bottom' title='go to bottom'rel='nofollow'>Bottom</a>

Sekarang lihat blog sobat bagian footer, akan kita tandai sebagai batas bawah (bottom) dari blog sobat. Sebagai contoh lihat gambar dibawah, Sakahayang Dot Com Kang Asep akan saya tandai sebagai batas bawah.

Maka saya kasih code sebagai berikut :

<a href="http://www.sakahayang.com" name="bottom">Sakahayang Dot Com Kang Asep</a>

Yang warna merah sesuaikan dengan blog sobat semua. Kode ini diupdate pada template blog. Kode di atas adalah kode HTML.

Biasanya template gratisan selalu ada footer yang menampilkan copyright si pembuat menggunakan XML language bukan HTML seperti diatas. Bila demikian adanya. maka footer template sobat juga pasti menggunakan XML, bisa lihat contoh punya Sakahayang, sobat tinggal sesuaikan saja.

<div id='footer-wrapper'><div id='credits'>

<p align='center'>Copyright &#169; 28 Oct 2011 - 2012 <a  expr:href='data:blog.homepageUrl' name='bottom' title='All Rights  Reserved'><data:blog.title/> Kang Asep</a> | <a  href='http://www.splashytemplates.com/' title='Blogger  Templates'>Blogger Templates</a> Design by <a  href='http://www.splashytemplates.com/2010/09/blogger-templates-sport-style.html'  title='Blogger Templates'>Splashy  Templates</a></p></div></div></div></div>

Lihat expresi XML yang warna merah fungsinya sama dengan expresi HTML pada kode di atas.

Demikian Blog Tutorial singkat ini, semoga bermanfaat ....

Contact Us