The Most Popular Traffic Exchange  Free powerful counter for your website. From creators of EasyHits4U

Saturday, November 24, 2012

Cara Membuat Tombol Back To Top ( Kembali keatas)






Pada malam hari ini saya akan share tutorial blog, yaitu cara membuat tombol back to top | kembali keatas pada blog, sebelumnya sobat tau apa itu back to top ? atau kembali keatas ? widget ini adalah widget yang berfungsi untuk mempermudah pengunjung blog untuk kembali kebagian atas dari blog kita tampa harus mengscroll ke atas apalagi kalau postingan blog kita panjang benar, dan pengunjung ingin kembali keatas dengan cepat, dan inilah peran dari tombol berikut. cara memasang tombol ini juga tidak susah untuk itu dari pada sobat membaca tulisan saya yang kurang bermutu langsung saja ke artikel mengenai cara membuat tombol back to top | kembali keatas pada blog

Ada Dua Cara:
 Yang Pertama Cara sederhana:

pertama sobat yang pasti login ke blogger
kemudian masuk ke bagian template blog sobat
setelah itu cari kode
</body> ( gunakan F3 untuk mempercepat pencarian )
bila sobat sudah menemukan </body> kemudian sisipkan kode dibawah ini tepat di atas kode </body> 




 Untuk kode gambarnya Bisa diganti sesuai keinginan atau bisa di lihat disini
Save Tamplate dan selesai

Cara Kedua :
Tombol back to top pada cara pertama hanya tombol back to top biasa, jika anda ingin yang lebih komplit, anda bisa memekai cara kedua ini:

Tahap-tahapnya sama dengan yang diatas, cuma sekarang anda harus menambahkan kode CSS sebelum kode ]]></b:skin>, berikut penjelasannya:

1.      Cari kode ]]></b:skin> lalu sisipkan CSS berikut sebelum atau diatasnya.


   



2.      Kemudian sisipkan kode berikut ini setelah atau dibawah kode <body>

    <div id='Enjoy'>
    <a href='#' onClick='window.location.reload()' title='Reload page'>
    <img src='
http://i580.photobucket.com/albums/ss248/z33s/refresh.png'/></a>
    <a expr:href='data:blog.homepageUrl'><img src='
http://i580.photobucket.com/albums/ss248/z33s/house.png'/></a>
    <a href='#' title='Ke Atas Halaman'><img src='
http://i580.photobucket.com/albums/ss248/z33s/topopg.png'/></a>
    <a href='#footbar' title='Ke bawah halaman'>
    <img src='
http://i580.photobucket.com/albums/ss248/z33s/down.png'/></a>
    </div>



3.      Lalu simpan tamplate anda, dan lihat hasilnya…

Keterangan:
=> Warna merah adalah gambar untuk tombol-tombolnya
=> Warna kuning adalah posisi tombol

apabila tombol down / ke bawah tidak berfungsi silakan ganti kode yang berwana hijau seperti ketyerangan di bawah:

=> Untuk kode #footbar anda ganti dengan #footer atau #copyright sesuaikan dengan HTML template anda.

Sedikit tambahan lagi untu menentukan tempat tombol berada di sebelah kanan atau kiri blog silakan ganti kode yang berwarna orange left (untuk sebelah kiri) right (untuk sebelah kanan blog anda).

Semoga Berhasil



Anda sedang membaca Artikel tentang Cara Membuat Tombol Back To Top ( Kembali keatas), jika Anda menyukai Artikel di blog ini, silahkan masukkan email Anda dibawah ini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel baru.

7 comments:

Rudy Bond said...

thanks sob

defantri said...

di copy...
tq...

Unknown said...

Terima kasih anyak gan.. :D

salam kenal nih dari anak Bandung

Berita Islam said...

Bisa dicoba di blog yang satu ni, makasih sob tips nya

perlengkapan bayi murah said...

terimakasih buat informasinya , terimakasih banyak ya sangat bermanfaat

perlengkapan bayi murah

streaming film subtitle indonesia said...

sungguh detail penjabaranya , terimakasih banyak gan

streaming film subtitle indonesia

Cara Mudah Mendapat Pagerank said...

terimakasih infonya sob , ijin coba dulu.. semoga berhasil :)

Tip n Trik Copyright © 2011 -- Template created by O Pregador -- Powered by Blogger

Related Posts Plugin for WordPress, Blogger...