-->
» » » » Membuat Tombol Back to Top Down Home Refresh

Membuat Tombol Back to Top Down Home Refresh

on


Cara Membuat Tobol Back to Top, Down, Home, Refresh - Sahabat blogger pada postingan yang lalu bang dadan pernah membuat artikel tentang Cara Membuat Tombol Back to Top dengan JQuery, nah untuk kali ini bang dadan akan coba share artikel tentang Cara Membuat Tobol Back to Top, Down, Home, Refresh, artikel ini sebenarnya mempunyai fungsi sama seperti pada postingan sebelumnya, namun ada penambahan tiga link lagi yaitu page down, refresh dan home. gambar dibawah ini adalah screen shoot nya.

Cara Membuat Tombol Back to Top Down Home dan Refresh dibawah blogCara Membuat Tombol Back to Top Down Home dan Refresh dibawah blog

Untuk DEMO nya sobat bisa lihat pada bagian bawah blog ini. dan bagi sobat yang ingin memasang nya di blog silahkan ikuti langkah - langkahnya berikut ini:

Cara Membuat Tombol Back to Top, Down, Home, dan Refresh
1. Login ke akun blogger
2. Menuju dasbor/rancangan
3. Pilih Template dan Klik Edit HTML
4. Cari kode ]]></b:skin>  dan copy kode dibawah ini tepat diatasnya

Berikut kodenya:

#Enjoy{display:scroll;position:fixed;bottom:1px;leftt: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}

5. Kemudian cari kode <body> dan tempatkan kode berikut tepat diatasnya

Berikut kodenya:

<div id='Enjoy'><button><a href='http://bangdadan.blogspot.com' title='Beranda'><span style='font-size: large;'><b>Ω</b></span></a></button>
<button><a href='#' onclick='window.location.reload()' title='Reload Page'><span style='font-size: large;'><b>&#8634;</b></span></a></button>
<button><a href='#top' title='Back to Top'><span style='font-size: large;'><b>&#8679;</b></span></a></button>
<button><a href='#footer' title='Page Down'><span style='font-size: large;'><b>&#8681;</b></span></a></button></div>

Keterangan:
Ganti URL yang berwarna merah dengan URL Blog sobat

6. Selanjutnya klik simpan template
Selesai dech..!!

Tambahan:
Bila sobat ingin mengganti buton-buton tersebut dengan gambar, silahkan sobat ganti kode yang berwarna orange dengan kode dibawah ini:

<img src='URL Gambar'/>

Silahkan sobat ganti tulisan yang berwarna merah dengan URL Gambar sesuai keinginan sobat..!!

Catatan:
Bagi sobat yang tidak ingin belajar dan tidak mau pusing, dan ingin tombolnya sama persis kaya punya bang dadan, gampang aja sob, sobat cukup ganti kode pada no.5 di atas dengan kode dibawah ini:

<div id='Enjoy'>
<a href='http://bangdadan.blogspot.com' title='Beranda'><img src='https://lh4.googleusercontent.com/-NLRRkrf1Xjg/UOcXcopujMI/AAAAAAAABKw/udtVFEWd3PA/w497-h373/black-windows.png'/></a>
<a href='#' onclick='window.location.reload()' title='Reload Page'><img src='https://lh4.googleusercontent.com/-WGNwP0p-4eM/UOcX6kFiBTI/AAAAAAAABLM/zKCXBXK59QY/w497-h373/repeat.png'/></a>
<a href='#top' title='Back to Top'><img src='https://lh4.googleusercontent.com/-VSMRm-IZGzU/UOcUjxXZIkI/AAAAAAAABJ8/U0Uv5yumzu0/w78-h78/next00.png'/></a>
<a href='#footer' title='Page Down'><img src='https://lh6.googleusercontent.com/-la1BjEMLTwY/UOcUjwVn5VI/AAAAAAAABJ4/HnXjFTOIzd4/w78-h78/next0.png'/></a>
</div>

Nah mungkin cukup sekian dulu pembahasan artikel tentang Cara Membuat Tombol Back to Top, Down, Home, dan Refresh. mudah - mudahan artikel ini bisa bermanfaat bagi sobat semua. Selamat mencoba dan succes selalu buat sahabat semua..!!
Labels: blogger tutorial, template hack, Widget

Thanks for reading Membuat Tombol Back to Top Down Home Refresh. Please share...!

14 Comments on Membuat Tombol Back to Top Down Home Refresh

  1. anndianaJanuary 5, 2013 at 7:34 AM

    Selain buat kembali manfaat lainnya apa mas Dadan?

    ReplyDelete
  2. Dadan DRJanuary 5, 2013 at 2:39 PM

    Kalau tutorial di atas mungkin hanya 4 itu sob, kembali ke atas, ke bawah, ke homepage dan reload page.
    Tapi sobat jg bisa nambahin lagi sesuai keinginan sobat. coz itu hanya sebatas widgate.

    ReplyDelete
  3. UnknownJanuary 6, 2013 at 12:09 AM

    saya coba ya sob, heee

    ReplyDelete
  4. Dadan DRJanuary 6, 2013 at 12:12 AM

    Silahkan sob,, semoga sukses. semangatt..!!!

    ReplyDelete
  5. UnknownJanuary 6, 2013 at 12:49 AM

    cuy, saya gk berhasil. susah....di kebawahin kembali lgi ke ats

    ReplyDelete
  6. Dadan DRJanuary 6, 2013 at 1:15 AM

    Susah dimana nya sob ??

    ReplyDelete
  7. anndianaJanuary 6, 2013 at 4:55 PM

    Wah, coba ah mas Dadan, keren kali yah..makasih, maaf komentar terdahulu keapus semua , intensenya error

    ReplyDelete
  8. Dadan DRJanuary 6, 2013 at 4:57 PM

    Oh iya gak apa2 sob, oy Sialhkan dicoba sob,, semoga bermanfaat..!!

    ReplyDelete
  9. UnknownJanuary 8, 2013 at 8:32 PM

    cuy, koq gk bisa ke bawah? ke atas ok

    ReplyDelete
  10. Dadan DRJanuary 8, 2013 at 9:06 PM

    coba cari kode templatenya kalau punya saya footer, coba cari punya ente. kalau nggak coba pake kode ini: #footbar

    ReplyDelete
  11. Kamikaze Prime ™March 27, 2013 at 12:28 PM

    Mkasih bang, \m/

    ReplyDelete
  12. BagioMay 29, 2013 at 6:31 AM

    Terimakasih bang infonya sangat membantu

    ReplyDelete

Back To Top