cbox

close
chat YM
Home » » Cara Memasang Tombol Kembali Ke Atas Dan Kembali Turun Pada Blog

Cara Memasang Tombol Kembali Ke Atas Dan Kembali Turun Pada Blog

den zuaz | 03.43 | 17comments
Kali ini saya sedikit share Cara Memasang Tombol Kembali Ke Atas Dan Kembali Turun Pada Blog  yang lengkap dengan tombol kembali ke beranda / home dan muat ulang / reload yang saya dapat dari salah satu blog / website dengan alamat url www.ozanhacker.com.

Tips dan trick ini sudah saya peragakan disalah satu blog saya. singkat cerita mari kita simak saja Cara Memasang Tombol Kembali Ke Atas Dan Kembali Turun Pada Blog berikut ini.

Cara Memasang Tombol Back to Top

Memasang tombol kembali ke atas atau memasang tombol back to top ini mungkin bagi blog saya ini sangat diperlukan, karena untuk menyikapi blog yang terlalu memanjang kebawah, mungkin masalah ini tidak akan ditemui jika kita memasang template yang sudah menyertakan widget ini, tetapi jika belum ada kita bisa memasangnya sendiri, karena jika tidak ada tombol back to top akan membosankan pembaca blog kita, apalagi jika menggunakan mouse yang kebetulan keadaannya sudah letoy (hehe…) atau lebih parahnya lagi sudah tidak ada scroll nya lagi, itu akan membuat mereka capek untuk mengakses blog kita, maka alternatifnya adalah membuat tombol back to top atau tombol kembali ke atas.

Ada dua cara pembuatan tombol back to top ini, berikut penjelasannya:
(Sebelum memasuki penjelasan, download terlebih dahulu template anda, sebagai asuransi tamplate anda...hehe...)

Cara Pertama:
Untuk cara pertama ini sangat simple, karena tampilannya sederhana, anda hanya perlu menambahkan kode berikut sebelum kode </body>


<!-- Bact to top By Ozan Hacker -->
<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img src='http://3.bp.blogspot.com/-tIcrAJXd0SQ/TbbzlODegZI/AAAAAAAAAeo/JFTR2FkHHTw/s1600/Untitled-2.png'/></a>



Untuk penjelasannya, anda login dulu ke blogger anda lalu Ikuti tahap-tahap berikut ini:

1.      Pilih Rancangan
2.      EDIT HTML ( Centang Expand Template Widget )
3.      Cari Kode </body> ( Untuk lebih cepat mencari gunakan Ctrl+F )
4.      Simpan kode berikut sebelum atau di atas kode </body>


<!-- Bact to top By Ozan Hacker -->
<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img src='http://3.bp.blogspot.com/-tIcrAJXd0SQ/TbbzlODegZI/AAAAAAAAAeo/JFTR2FkHHTw/s1600/Untitled-2.png'/></a>




5.      Lalu simpan tamplate, SELESAI dan lihat hasilnya…

Keterangan:
  • Kode warna kuning adalah posisi tombol berada
  • Kode warna merah adalah URL gambar tombol (silahkan anda ganti dengan URL gambar anda bila ingin menyesuaikan  gambarnya dengan selera anda)


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.

    #Enjoy{display:scroll;position:fixed;bottom:1px;right:1px;z-index:99}
    #Enjoy a{filter:alpha(opacity=65);-moz-opacity:0.65;opacity:0.65;border:0}
    #Enjoy img{border:0}
    #Enjoy a:hover{filter:alpha(opacity=100);-moz-opacity:1;opacity:1}



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).

Jangan lupa komentarnya… Untuk artikel ini jika ada yang mau menambahkan cara yang lainnya aku tunggu…

Sumber: http://www.ozanhacker.com 

Posted by : den zuaz - Author Zuaz'Z Creator™

Artikel Cara Memasang Tombol Kembali Ke Atas Dan Kembali Turun Pada Blog ini diposting oleh den zuaz. Terimakasih atas kunjungan Sobat serta kesediaan Sobat membaca artikel ini. Kritik dan saran dapat Sobat sampaikan melalui kotak komentar. Apabila Sobat berminat silakan copy paste artikel ini dan mohon untuk mencantumkan sumbernya dengan menyertakan script di bawah ini:

Hormat saya: den zuaz

Bagikan artikel ini sobat :
Pemberitahuan:
Mohon maaf apabila komentar Sobat dari Facebook tidak bisa saya jawab semua, dikarenakan sulit untuk memoderasi komentar dari Facebook, bila sobat ada pertanyaan yang ingin lansung saya jawab, silakan Sobat berkomentar dari id Blogger.
Komentar Sahabat
17 Komentar Sahabat

17 comments:

agung wicaksono mengatakan...

mas, untuk ke bawahnya kok gak bisa ya? dari nama footbar, footer, sampe copyright tetep ga bisa. emang tau nama laman bawah pada template liatnya dimana ya?
saya tunggu komentarnya.
mampir nih di agungnisme.tk
terimakasih n salam kenal:)

den zuaz mengatakan...

@_agung wicaksono: Mohon maaf Sob, Untuk tombol ke bawahya saya belum punya solusinya Sob, di blog saya sendiri hanya berfungsi di halaman utama saja, kalau di halaman postingan tidak berfungsi,,

Bila saya sudah dapat solusinya akan saya bagikan tutorialnya,,
Salam kenal juga dari saya,, ^_^

agung wicaksono mengatakan...

wah, back to down punya njenengan juga ga bisa tuh.

agung wicaksono mengatakan...

horee, punyaku udah bisa lho:p
otak atik ndiri, tapi juga berkat jasa njenengan mas. terimakasih:)

Anonim mengatakan...

thanks gan,,udah jadi di blog ane,,kunjungi ya,,

den zuaz mengatakan...

@_agung wicaksono & gopar-it: Sama-sama Sob,,

Senang bila artikel ini bermanfaat bagi Sobat,, ^_^

Jusman Amin mengatakan...

mantap artikelnya,, 100% bekerja di blog saya,,

PT. Dimarco mengatakan...

terima kasih Mas Bro Berguna, saya Coba Pasang Di Blog Saya

bayu si angin mengatakan...

thanks ilmunya di tunggu kunjungan baliknya
kalu bisa folow,, berbagi link juga boleh / benner,,!

di Forza SKK
http://anginskk.blogspot.com/

Anonim mengatakan...

Thanks sob share ilmunya kunjungin balik ya...

Anonim mengatakan...

Keren blognya sobat tuto nya lengkap lagi. Salam sukses selalu

Anonim mengatakan...

keren zob izin praktek..

Anonim mengatakan...

keren sob postingan ny...
n tempate blogny

Bos Informasi mengatakan...

bisa dicoba nih gan

paimung mengatakan...

makasih bro. mau coba nih..... tapi yang tombol kebawahnya mana nih bro???

salam kena bro....

cloninggo.blog mengatakan...

mantep ditunggu kunjunganya

proladies mengatakan...


cara menggugurkan kandungan dengan alkohol
cara menggugurkan kandungan dengan jeruk nipis
cara menggugurkan kandungan dengan paracetamol
cara menggugurkan kandungan dengan buah nanas
cara menggugurkan kandungan dengan buah durian
cara menggugurkan kandungan dengan buah strawberry
cara menggugurkan kandungan dan mempercepat haid
obat pelancar haid
jual obat pelancar haid
harga obat pelancar haid
obat pelancar haid cytotec
cara agar mudah datang bulan
cara mudah mengatasi datang bulan
cara mudah untuk cepat datang bulan
obat cepat datang bulan di apotik
obat untuk mendatangkan haid
obat pelancar haid
jual obat pelancar haid
harga obat pelancar haid
obat pelancar haid cytotec
obat pelancar haid
obat pelancar haid resep dokter
obat pelancar haid di apotik kimia farma
obat pelancar haid untuk remaja
obat pelancar haid menses
efek samping obat pelancar haid
obat untuk mendatangkan haid

Luangkanlah Sedikit Waktu Sobat Untuk Memperindah Blog Ini Dengan Berkomentar,, (^_^)

PERINGATAN,,!!!
Bagi Sobat Yang ingin berkomentar, mohon sesuaikan dengan tema pada postingan, dan saya mohon untuk tidak mencantumkan link (URL) pada komentar karena akan saya anggap spam dan mohon maaf apabila saya hapus komentar Sobat,,!!!

Pilih Bahasa Sobat

English French German Spain Italian Dutch

Russian Portuguese Japanese Korean Arabic Chinese Simplified
Designed By: den zuaz

Baca Juga Artikel Lainya Ya

Tuker Link Banner Yook

Bagi Sahabat Blogger Yang Bersedia Untuk Bertukar Banner Dengan Blog Zuaz'Z Creator Silakan Copy Code Di Bawah Ini Untuk Dipasang Di Blog Sobat
Email: dideardana@gmail.com
Banner Zuaz'z
..::: Like this yoo :::..
..::: Award Dari Sahabat :::..

Friendship Award
Dwi Semakin Sukses

banner coa-coba
den zuaz

^_^ iklan kosong ^_^

 
Copyright © 2012. Zuaz'Z Creator™ - All Rights Reserved
..::: Template designed by den zuaz | Powered by Blogger | Thanks for visiting :::..