UP
    Latest News
Home » Blog » Cara Membuat Tombol Back to top dan Go to down (kembali ke atas dan turun ke bawah)

Cara Membuat Tombol Back to top dan Go to down (kembali ke atas dan turun ke bawah)
Diposkan oleh di
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 ....




No comments:

Post a Comment