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 |
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 */5. Selanjutnya tambahkan kode dibawah ini tepat diatas atau sebelum kode </body>
.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}
<div class="backtotop hide"><span></span>Atas</div>6. Terakhir simpan template.
<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>
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