Cara Membuat Tombol Back To Top Di Blogger-Tau gak maksud dari judul diatas apa maksudnya? Mungkin Anda pernah berkunjung ke blog orang lain dan tidak sengaja ketika lagi baca artikel tiba-tiba muncul ikon panah ke atas biasanya berada di pojok bawah dan ketikan kita klik maka akan secara otomasis halaman kembali ke atas. Baca Juga:
Cara daftar Dan Memasang DMCA Di BloggerJadi tau kan sekarang maksudnya, dengan menambah fitur ini maka pengunjung tidak akan kesulitan ketika membaca artikel dan sudah sampai bawah lalu ingin kembali ke atas tanpa harus menggulir mouse, hal ini sangat berguna apa lagi jika artikel yang ditulis cukup panjang.
Nah lalu bagaimana cara membuat tombol back to top pada platform blogger atau blogspot? Tenang seperti biasa saya akan berikan panduannya bagaimana cara membuat tombol back to top. Berikut adalah langkah-langkahnya:
Sebelum kita memulai pastikan pada blog Anda sudah terpasang kode jquery
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
Atau
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
Jika belum pasang terlebih dahulu dengan cara
- Login ke akun blogger
- pada halaman dashboard pilih Template lalu Edit HTML
- Cari kode </head>, selanjutnya copy dan paste kode diaatas tadi tempat diatas kode </head>
- Terakhir simpan
Selanjutnya kita pasang widget Back to Top di bloga, berikut adalah langkah-langkahnya:
- Pada halaman blog pilih Tata Letak
- Lanjut klik tambah gadget
- Pilih HTML JavaScript
- Copy dan paste kode dibawah ini pada kolom HTML JavaScript
<style>
.mbw-back-to-top {
position: fixed;
bottom: 2em;
right: 10px;
text-decoration: none;
padding: 1em;
display: none;
cursor:pointer;
}
</style>
<img class="mbw-back-to-top" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRMrVQ2B68c3w-75M7Ab4tEz-wSv594DZrDKKohcAIrsq6ctOTfKGwCipuYH4MfrKF8c4kwrGsHhoVfSBPOd3iDpaWBbSKeEJlPVs6H_RXO4ZRKBGq0ROR9Wk4AkhUv03zuCE3pdqeaDY/s1600/back+to+top.png" />
<script type="text/javascript">
/*****mybloggersworld.com***/
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.mbw-back-to-top').fadeIn(duration);
} else { //www.mybloggersworld.com
jQuery('.mbw-back-to-top').fadeOut(duration);
}
});
jQuery('.mbw-back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>
Kode yang berwarna merah adalah gambar back to top, Anda dapat mengganti dengan gambar yang diinginkan atau dengan kode dibawah ini:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjLf0kbmLI7oefjDqjuL9WoLIvEpbrjSGJBQeWAy_dNJr16uWG0dWyoBBeQPWV99t9PPXpYvGdrZmuu1tXgAuCmuPRYVynKP8t5FFJcl23UR-S5hqIepJPzwRimZpoHdK4pbu_Kt6OGxo/s1600/back+to+top.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiygvx46Rdlbbcgsr9R5uxgLll7BLGEHf5r9XFNXNTsrYXfkj7sgDYJUIUJL5Co-FfhFvnpGEfOzJIRedckRpaqvj5BpWmr8HzOzGO0bNLw1l8m8qJ6VmTCgR5PlSdl5an7CUBPXOHfd-Q/s1600/back+to+top.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAb-QGI6_XnvtL0ju7Cb7wbrCUEy5NHwva69eAupNNCDn0mc0izheMQUGQ2GlGjrDbWxYyJyxqi7168TdFMcEjz0OdYKYb3dmFtnZ3hZcfPGyGTE9KUVtb17EM7wWSvi0E8DDqx0-9Yn8/s1600/back+to+top.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-OcFJPxNKeOXuJRDyFbI2EHAUNpHlHfB7kLikbebYAIpS1_p3pRYK5awMAAOYAACMnuzOngJ3Jmcy1BJoIx4KTWv26GVDaDSb19v0AUUDjGFSwIfkVPzQq8oy3iFz7Lkkb73gnqwqAiE/s1600/back+to+top.pnghttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZNxuVGdS3fSK9Yh_Fw2LYs7xIQOWjZTwH04Q_nw25-kjn15iTml07J6eKD1VvPikQhEWC1LpelW3KjrUxxuRA4RG8sjFAvA2To-V0NNxdZ0YqLToCNGxFTPRF-IxfkuHCGWiCQxkyjI8/s1600/back+to+top+button.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2AW3nkTMZ7x6ifY8I-RRo3MI19JGotZcckqWTB_J9KzTHLFuahvX34e5bwKZrKuWZGFHcI4_LcvrS9EDuNVW7lHMre2Jvf0IncSIC0jHRLBuN_XHXBjNP_GNU49gbR_sR1D69_B2TcTw/s1600/back+to+top+button.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXhPrBWw26SWLTzgAt837jL0bFhfnmtsaXpCgFnWcRHaTnhWKvZE8Uw_HTSUhJIsvcR5o7E-HFE7CQ4kZPOXyf-HNUPKwETi_MSbWp1ut0M2TCzVxIGjG_-z_8u6c6457ghU5grP-cCFk/s1600/back+to+top+button.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijFMKbFJpIRkkmq2pO7_mMGUjRHRdxEj0ckqmmFqF4pS1UfHpv7ng-QbuJHW-DhFR2aPfIxAL65X4sbTGY4SD3d7w1D2ucWOBvQIBXivXP_EnoMnyxM8Cb1rHzKYj3fNZtONUOFqMmSDY/s1600/back+to+top+button.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRMrVQ2B68c3w-75M7Ab4tEz-wSv594DZrDKKohcAIrsq6ctOTfKGwCipuYH4MfrKF8c4kwrGsHhoVfSBPOd3iDpaWBbSKeEJlPVs6H_RXO4ZRKBGq0ROR9Wk4AkhUv03zuCE3pdqeaDY/s1600/back+to+top.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_9eZhkrCJTC5ijPQUtzfyk6tspD__SafmHCaHhOMutSgHtMDcrtmcx-ANinU7V0VGqV8hwhuzstYfQzNE_j9rh8TfFnpHTF1zd2VBqe0cdel5P9x3VuBlt6Kn4buZRZ-jRI8qLlNii7I/s1600/Back-To-Top.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcDmN1g8qrpdT3buVrBYNNEsBn9qwyxYVNIMCR7atW2KrH2GMpv2Bhhkg7zbkY3ajUz7fQEbbjDDefk0Luq-Ok7fOjeTQ7F3S3hIBdgUOpI8ValmXm7DvtzeEvAGJipxTKXFT6tlfMaT4/s1600/back-to-top-button.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLPZ5Xua-GzR_yaZDtoz5dWo2wZv0w05bH_XbpOdt3sXvJRtp5RTcC8cLSBAjSx0jd7dQNy4rLTplGvPNWtdpvKdrlZVtp02RKu9f08j9N04jfHdKmWmbVB-O5GG3MJOXZsbLadeecwz0/s1600/back-to-top-button.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqnxRdxCkuY0kxro8EHshJUFOmI1NlwLAtiP6LyOym4rFUVZpH4rk7cfSh2lV264ARlL5hg5xDtuGTHHIkUrL0iHZ3m9njyeGUWGWLioCaDUgEmTvovjL-Y9cEKqugFmvStv95VFaqftk/s1600/back-to-top-button.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTyfvBx6qxn-57qFLspo113Y3j9Uw8l35vIXuPUScRGMautC12yJJ7OQY05cgMWUX-BJyWsDBTRCx2wUletRcWHtdz-WvRKdH4GHW2yY9a38vfuSMbYiZZ4ftaYllXq4YsvB932JctLtg/s1600/Back-To-Top.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWQjqqH1_tQ2wGCgGgBcsm-ZUzPPlFWdsAa6K47p2HW2a7tSzHMh4e9ZtIMmRoMUJ7r2D7E946eUcfxCSY-Zl9B8aqDhkbH4G3aivRlR8nDiGmqsfzyDHsruaUOwW9OohxGkTFYIP9mE0/s1600/back_to_top_button.png
Itu dia Cara Membuat Tombol Back To Top Di Blogger, dengan memasang tombol back to top pada blog bukan hanya memberikan kenyamanan dan kemudahan pada pengunjung tapi bisa memberikan efek dan warna yang berbeda. Nah jika Anda ingin belajar blog silahkan kunjungi halaman
Panduan Cara membuat Blogger dan Optimasi Seo
