Cara Membuat Tombol Back To Top di Blog - Tombol Back To Top adalah sebuah tombol yang dapat digunakan untuk mempercepat kembali kepada judul blog setelah selesai membaca di tampilan mode mobile. atau kembali ke atas di blog.
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.
Baca: Cara Membuat Tombol Subscribe 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.
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)
4. Kemudian lanjutkan dengan menambahkan kode pada ]]></b:skin> atau </style> untuk mempercantik tampilan di blog.
5. Selanjutnya tambahkan kode dibawah ini tepat diatas atau sebelum kode </body>
6. Terakhir simpan template.
Sumber kode: http://www.arlinadzgn.com/2016/01/memasang-tombol-back-to-top-di-blog.html
Demikian Cara Membuat Tombol Back To Top di Blog, semoga dengan adanya kode ini pengunjung menjadi lebih mudah.
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.
Baca: Cara Membuat Tombol Subscribe di Blog
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.
Sumber kode: http://www.arlinadzgn.com/2016/01/memasang-tombol-back-to-top-di-blog.html
Demikian Cara Membuat Tombol Back To Top di Blog, semoga dengan adanya kode ini pengunjung menjadi lebih mudah.
