Cara Membuat Tombol Back To Top Di Blog


Back Top Top Button adalah salah satu fitur pada situs web blog yang sering digunakan untuk jalan pintas bagi pengunjung menjangkau bagian konten atau menu paling atas situs blog kita, tanpa kita melakukannya secara manual.
Tutorial Buat Tombol Back To Top

Pada dasarnya fitur ini tidak dimiliki oleh template bawaan blog blogger. Namun kita bisa memasangnya secara manual dengan menempatkan sedikit kode html, javascript, dan css di dalam html template blog anda.

Fitur yang saya akan jelaskan disini mempunyai kelebihan sendiri, lebih unik, dan jika di tekan akan kembali ke tampilan konten paling atas secara lembut, juga memiliki efek yang ibaratnya seperti pantulan bola yang dilempar ke bawah. Maaf saya bingung menjelaskannya, intinya jika anda ingin memiliki fitur ini pada blog anda, silahkan ikuti tutorial di bawah ini. Untuk tampilan tombol versi saya, silahkan lihat gambar di bawah ini.

Tombol Back To Top Button


Memasang Tombol Back To Top Button

Pertama-tama anda masuk terlebih dahulu ke akun blogger anda. Lalu pilih menu Tema, setelah itu pilih Edit HTML. Dari sini anda tinggal cari kode html </body> dan masukan kode html di bawah ini tepat di atas kode yang sudah anda cari tadi

<div id='Backtotop' style='display: block;'>
<span class='Back to top' title='Back to top'/>
</div>

Setelah itu, tempelkan kode CSS di bawah ini tepat di bawah kode </b:skin>. Berguna untuk mempercantik tampilan tombol Back To Top blog anda.

<style type='text/css'>
#Backtotop{
	position:fixed;
	background:#b50800;
	text-align:center;
	bottom:1px;
	right:15px;
	cursor:pointer;
	width:35px;
	height:40px;
	border-radius:5px 5px 0 0;
	padding:2px;
	display:none;
	transition:all .3s ease-out;
}
.Back.to.top:before{
	content:&quot;&quot;;
	position:absolute;
	bottom:7px;
	right:7px;
	width:0;
	height:0;
	border-style:solid;
	border-width:0 12px 32px 12px;
	border-color:transparent transparent #FFFFFF transparent;
	line-height:0;
	transition:all .3s ease-out;
}
.Back.to.top:after{
	content:&quot;&quot;;
	position:absolute;
	bottom:6px;
	right:7px;
	width:0;
	height:0;
	border-style:solid;
	border-width:0 12px 15px 12px;
	border-color:transparent transparent #b50800 transparent;
	line-height:0;
	transition:all .3s ease-out;
}
#Backtotop:hover{
	background:#b50800;
}
</style>

Dan agar tombol Back To Top Button ini berfungsi dengan baik, kita tambahkan sedikit kode javascript ke dalam html template blog. Tempelkan kode di bawah ini tepat di atas kode penutup kepala, yaitu di atas kode </head>.

<script type='text/javascript'>
$(function(){$(window).scroll(function(){if($(this).scrollTop()&gt;100){$(&#39;#Backtotop&#39;).slideDown(200);}else{$(&#39;#Backtotop&#39;).slideUp(300);}});$(&#39;#Backtotop&#39;).click(function(){$(&#39;body,html&#39;).animate({scrollTop:0},800).animate({scrollTop:25},200).animate({scrollTop:0},150).animate({scrollTop:10},100).animate({scrollTop:0},50);});});
</script>

Langkah terakhir, jika semua cara atau tutorial di atas di lakukan dengan benar dan sama percis seperti yang saya jelaskan, seharusnya akan berhasil. Tinggal anda klik Simpan Tema untuk menyimpan perubahan pada kode HTML template blog anda.

Bagaimana ?, mudah bukan melakukannya. Jika cara-cara di atas masih gagal tinggal anda tanyakan langsung pada kotak komentar artikel di bawah ini. Semoga bermanfaat.

Wassalam !.

No comments:

Sebelum menuliskan komentar, Anda harus baca syarat dibawah ini :
1. Tidak diperbolehkan menaruh link aktif,
2. Tidak boleh ada unsur huru hara dan pornograpi,
3. Jika membuat spam, komentar Anda akan dihapus, dan
4. Silahkan bertanya dan berbagi pikiran dengan kalimat yang baik dan membangun.

AK NEW SITE. Powered by Blogger.