Tugasku4u

Weblog Kumpulan Tugas, Kumpulan Makalah, Tutorial Blogger, Info SEO, Tips & Trick.

Cara Memasang Tombol Kembali ke Atas di Blog

Cara Memasang Tombol Kembali ke Atas di Blog

Membuat atau memasang tombol kembali ke atas atau back to top berfungsi untuk mengembalikan posisi dari bawah kembali lagi ke atas dalam sebuah blog, sehingga memudahkan pengunjung suatu blog untuk kembali ke atas tanpa menggunakan scroll.

cara memasang tombol back to top pada blog
Screen shoot tombol back to top

Cara Memasang Tombol Back To Top :
1. Login ke blog kamu.
2. Pilih Tata Letak
3. Tambahkan Gadget
4. HTML/JavaScript => Copy kode di bawah ini.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script><script type='text/javascript'>$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$("#noop-top").fadeIn()}else{$("#noop-top").fadeOut()}});$("#noop-top").click(function(){$("body,html").animate({scrollTop:0},800);return false})});</script><a id='noop-top' style='display: none; position: fixed; bottom: 1px; right:1%; cursor:pointer;font:12px arial;'><span>^</span></a><style type="text/css">#noop-top span{-moz-transition:all .3s ease-in 0s;-webkit-transition:all .3s;-o-transition:all .3s;background-color:#1e5799;background:-moz-linear-gradient(top,#1e5799 0,#2989d8 50%,#207cca 51%,#7db9e8 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#1e5799),color-stop(50%,#2989d8),color-stop(51%,#207cca),color-stop(100%,#7db9e8));background:-webkit-linear-gradient(top,#1e5799 0,#2989d8 50%,#207cca 51%,#7db9e8 100%);background:-o-linear-gradient(top,#1e5799 0,#2989d8 50%,#207cca 51%,#7db9e8 100%);background:-ms-linear-gradient(top,#1e5799 0,#2989d8 50%,#207cca 51%,#7db9e8 100%);background:linear-gradient(top,#1e5799 0,#2989d8 50%,#207cca 51%,#7db9e8 100%);border:3px solid #fff;border-radius:14px 14px 14px 14px;color:#fff;font:bold 56px cursive;height:50px;left:3px;display:block;text-align:center;text-shadow:1px 1px 0 #000;top:-56px;width:50px}#noop-top:hover span{box-shadow:0 0 49px #207cca;height:70px}#noop-top{color:#000;text-shadow:1px 1px 0 #fff;text-decoration:none}</style>
3. Simpan dan lihatlah hasilnya.

Semoga postingan Tutorial Tugasku4u ini bisa bermanfaat bagi sobat semua...
Baca juga Cara Mengubah Tampilan Scrollbar Jadi Keren. Kegunaannya jika scrollbar blog sobat jadi keren yaitu, blog sobat akan semakin kelihatan lebih keren dan elegan... dan pastinya pengunjung juga akan betah dengan blog sobat yang lebih keren dan elegan. Jika Anda masih ingin membaca Tutorial dan Tips Blog seperti diatas, silahkan buka DAFTAR ISI di blog ini.

Tolong bantu saya klik Tombol Vote ini...


Share : Facebook Twitter Google+
Unknown | | 7 komentar

7 komentar

avatar
Shahibullah Rizki Nadia
February 21, 2014 at 7:40 AM delete

min, kalo di buatnya di paling bawah tapi di tengah gimana caranya ya ?
kirim caranya ke email aku ya min,,
shahibullah.rizki@gmail.com

Balas
avatar
Unknown Admin
February 21, 2014 at 8:24 AM delete

Kalau itu lain lagi kodenya gan...

Balas
avatar
Shahibullah Rizki Nadia
February 22, 2014 at 9:08 AM delete

ouh,,, gitu toh,,, kasih tau lah caranya min
maaf merepotkan

Balas
avatar
Unknown Admin
February 22, 2014 at 9:16 AM delete

Nanti saya akan buatkan postingannya gan...

Balas
avatar
Restu Trio Kumara
March 24, 2014 at 4:36 AM delete

mas kalo mau ngerubah background button nya kayakmana ya mas

Balas
avatar
Unknown Admin
March 24, 2014 at 5:02 AM delete

cari kode ini = background-color : #1e5799

Balas
avatar
mczeed
June 2, 2014 at 7:04 PM delete

kalo dikasih tulisan kembali ke atas, itu gimana gan..... soalnya biar tahu..

Balas

Komentar yang menyertakan link aktif, iklan, atau titip link, akan dimasukan ke folder SPAM.

Previous Posts Next Posts Homepage