Cara Memasang Tombol Back To Top Di Blog

Cara Memasang Tombol Back To Top Di Blog - Bagaimana cara dengan mudah memasang sebuah tombol berupa back to top di blog ? biasanya kegunaan dan fungsi dari sebuah tombol back to top digunakan ketika pengunjung mengunjungi sebuah blog dan mempergunakannya untuk mengembalikan halaman artikel yang telah discroll dari atas kebawah untuk kembali ke halaman atas artikel anda.

Namun perlu diketahui bahwa tombol back to top ini memiliki peranan cukup penting bagi sebuah blog atau website dengan konten yang banyak dan memiliki halaman yang panjang. Untuk blog yang memiliki banyak informasi pada halamannya, akan membuat konten-konten lain terlewati, tanpa disadari menggulir jauh ke bawah halaman.

Cara Memasang Tombol Back To Top Di Blog

Nah disini saya akan memberikan sebuah tutorial dan cara - cara mudah agar memiliki tombol back to top di blog,simak baik-baik sebagai berikut ini :

Cara Membuat Tombol Back To Top di Blog
Seperti contoh pada blog portalblogspot.net ini, gambar kotak disamping kanan monitor akan keluar jika halaman blog sudah berada pada posisi di bagian bawah dan akan kembali menghilang ketika halaman blog yang dibuka sudah diatas lagi. Cara membuat dan memasang tombol back to top silakan ikuti langkah-langkah dibawah ini.

Langkah-langkah Membuat Tombol Back to Top
1. Silakan login ke blogger, dan pilih pengaturan template.
2. Klik edit html dan cari kode </head> dengan menekan tombol CTRL + F untukmempercepat pencarian kode tersebut
3. Lalu masukan kode di bawah ini tepat diatasnya (jika sudah memiliki kode seperti ini tidak perlu ditambahkan)

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js'/>

4. Kemudian lanjutkan dengan menambahkan kode pada ]]></b:skin> atau </style> untuk mempercantik tampilan di blog.

/* Tombol Back To Top */
.backtotop{display:none}.backtotop{position:fixed;bottom:50px;right:0;cursor:pointer;font-weight:bold;box-shadow:-5px 5px rgba(0,0,0,.1);padding:10px;background-color:#fff;opacity:.6}.backtotop span{background-image:url(https://2.bp.blogspot.com/-QLZM-aUhB6w/VyL3AeOfEfI/AAAAAAAADBU/g6Ff-NvsU_c3ZZn3LM0luDDCRnQjzEK9wCLcB/s1600/icon.png);background-position:0 -272px;background-repeat:no-repeat;height:25px;width:22px;display:inline-block;vertical-align:middle;margin-right:5px }.backtotop:hover{opacity:1}

5. Selanjutnya tambahkan kode dibawah ini tepat diatas atau sebelum kode </body>

<div class="backtotop hide"><span></span>Atas</div>
<script type='text/javascript'>
$(function(){$(window).scroll(function(){$(this).scrollTop()>100?$(".backtotop").fadeIn():$(".backtotop").fadeOut()}),$(".backtotop").click(function(){return $("html,body").animate({scrollTop:0},800),!1})});
</script>

6. Terakhir simpan template.
Pastikan kode yang dicopy diatas tidak mengalami kesalahan.

Demikianlah artikel saya mengenai Cara Memasang Tombol Back To Top Di Blog semoga bisa membantu anda mengembangkan pengelolaan situs di blog/website agar terlihat lebih indah dan keren,Semoga artikel ini bermanfaat untuk anda.Sekian dan terimakasih