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 saat 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 Blogger
Kaprikornus tau kan kini maksudnya, dengan menambah fitur ini maka pengunjung tidak akan kesulitan saat membaca artikel dan sudah hingga bawah kemudian ingin kembali ke atas tanpa harus menggulir mouse, hal ini sangat mempunyai kegunaan apa lagi jikalau artikel yang ditulis cukup panjang.
Nah kemudian bagaimana cara menciptakan tombol back to top pada platform blogger atau blogspot? Tenang ibarat biasa saya akan berikan panduannya bagaimana cara menciptakan tombol back to top. Berikut yaitu langkah-langkahnya:
Sebelum kita memulai pastikan pada blog Anda sudah terpasang isyarat jquery
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/j4vascript'/>
Atau
<script type="text/j4vascript" 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 kemudian Edit HTML
- Cari kode </head>, selanjutnya copy dan paste isyarat diaatas tadi daerah diatas kode </head>
- Terakhir simpan
Selanjutnya kita pasang widget Back to Top di bloga, berikut yaitu langkah-langkahnya:
- Pada halaman blog pilih Tata Letak
- Lanjut klik tambah gadget
- Pilih HTML JavaScript
- Copy dan paste isyarat 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/AVvXsEhWsaReCuIJvQVqgBcz3jfBm_f6oyVpFmHvoOAJaW_RgK1Irhk2E8x3lg1oRf7idLRFIx8GjkDEut5a_WLIqMSfltvW21GTYKVZLdYm05n8AjW9hp-7Ul8s5a-FEdMUSvyhVkrpn6T2oNw/s1600/back+to+top.png" />
<script type="text/j4vascript">
/*****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>
- Terakhir Simpan
Kode yang berwarna merah yaitu gambar back to top, Anda sanggup mengganti dengan gambar yang diinginkan atau dengan isyarat dibawah ini:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZfDjKW0wDmQFU8tVbL_RejDmMdxrK2Llk1HNlLgKhWYB-oVtkdD69h-Am6z9L1kaBkqXW4DrNmBgrxxWT-QFllJC3a07Lpl0UCFNCon97XuUAM35LLm4-G8HRwkUBk4Qc0AKVPkfgv0U/s1600/back+to+top.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFFx-uq3qgyVoY9t-A8hIGK6I34BiiZzYaUdFokv2YGQAWSkTYfl7F8bV9i_8lk0Ka0E-wNw35FXt8Vp65lnF4t1p2y_lKDnpkKMfeYbCn1pg46kAR7dW-uQZQcvuKnUa1a9bZ0l0nk2U/s1600/back+to+top.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-ItaeRkDiLHYjtKKQPAHLgbPTcMZk33mDm69dM4PZwozsqArzOVqISmaii0IFSfq5qnqul9SSvf2E1hCN-ct22mbF2tGgTBLtCZ7shvhUEHtKjpkFnmmHfUf2kQC_KKLhEPax-W1zwHU/s1600/back+to+top.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxXkd4xTn6EtPCmzHcSxT8YnCIR3uxY1gpWkDB4CiA6OSKnCUHiOyCMZmGMrBJDk6qnzN3uZAjps1nEhVZojnlZJ9EM-ejnj_5hAZpDrlLnS-hWz8hDh6tOj9zkatqxiuCYqQaEH7s3Yg/s1600/back+to+top.png
Nah untuk Anda yang ingin menciptakan tampilan blognya lebih bagus dan lezat di pandang oleh pengunjung sehingga pengunjung betah berlama-lama di blog Anda, coba pasang widget keren koleksi kami, silahkan kunjungi halaman Kumpulan Widget Keren Untuk Mepercantik Blogger
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYMBnu0f2nJWC4wqOT3rmP1z6Yxv1z7Quj3frLJKuqPdnPFOzNmsdMU6IjGQBIodM0ks1BW60EV3VmBe8MNY2QTjJ8ZRxEOkON-Zoq2y9__eqqqx_pStPKoiq6eA4N0chasGr84PvOzL0/s1600/back+to+top+button.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigrLG-oP2lyrhe0pPlu888I_DmI95_8wBFx10t0UbyGCsowR1XzFToaE7gGdbT_dq1SsJikveqOZczDCG-be7qmEakge3ptk75VWqPYXIpxWHvQx7vssQdMsO-ddNpJ8UvBzZ3L-l0WZQ/s1600/back+to+top+button.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUyWnVvhguB0hvb_2QCfRIPeNx-d2-D0XPVPmXLn6iUEJxxz0MhJoQj9N0gfjWuKE6RNY6xdUaljm9YYfaP-HC90OJprap5NgLjLXCeSnc_gxr53RP0MShJZYkg4T0G684Pd4KPlaK7f8/s1600/back+to+top+button.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDuaSo6H4vtvitwpaXsxLpe4wGVHz7Wo58W1bIIomVDg0JxEGqyC_7PYJU1QZ-JyzzONodSpcuGSt2cBe7zACpZTDFTdiLkQUQj15L3uKazXliqTw2khVdu-BufLTCVRsSfeESZfGbqf4/s1600/back+to+top+button.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWsaReCuIJvQVqgBcz3jfBm_f6oyVpFmHvoOAJaW_RgK1Irhk2E8x3lg1oRf7idLRFIx8GjkDEut5a_WLIqMSfltvW21GTYKVZLdYm05n8AjW9hp-7Ul8s5a-FEdMUSvyhVkrpn6T2oNw/s1600/back+to+top.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvhqPrKiFvLwp8pJLylZIHrYK7XPDfRNbw1PlmSJnt-MavQG7gqqomsxdKglGFsiqNba19vy9j5o18BCgbqTVCbxSCTUm7I1aWHQe1hTrRxzYtLRvZBy7O1HeBlmriSGMkYrTdCAQq0Us/s1600/Back-To-Top.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSCj2d0V_dgq9tNIM-gJwouwlBMRskZe0vmjR0RGiqIiyHcN0QIDWTGGs-m45cTS_19y9xQLCoIJyz6vntphdF2FODD6etAKKG_FL7NrZAjgnEnW7g2VzB_cTLfVMsdsoGPTU7SASBLFM/s1600/back-to-top-button.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-TYV9ArtIa1dxGkOdMZq9OAXkVeczIfhIzYTsRnKRqCIGOor7wbuRvo7IiT2AQAt2cQRM4O5XsYauoLd3wvKVHtlQc8g4ZkLq6unZg3-qlDc3qJ1yrE1YdwyT2bQrmO3MfGLgQRIQhhY/s1600/back-to-top-button.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioSKZzAZsFnU5RDIa5VG30ke_735O9j9XR5b4bBSWgs_WYSrcqSZ0d_7H761TrOxrrLkAlOAMC06Q5qaKGCSRcEuqfHxh1okuUMd0F0RO4dYdqA2L7DmUojX3cpT8Dg6FfBFnSqMQ8P50/s1600/back-to-top-button.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJMTmWX79zGgI6BUA4tKsgYaEHbQqP2ogUAFE9vgx8sh8hVbZ2Uvslp5N3UszYoJd_ugUegyGtsoqUZ6jw-mE1BW_M3p8EDm_NZTaCUZSWq1IXPX80NEvlDj5ucBNGJEIi_xrv_4gEe9k/s1600/Back-To-Top.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZyH6K6LPhTXfvVKLJT-oybmV06cCoq9IJ-ynu8lSRIkHjApBRRmJO8lfN8pg6v6hRjdu9Ti7_23vHftfBAYHlrIMCyOYhrU3P6MgnBOp2kxqC87reQTS7ptlpcUqrdzG2REGbXyTFC_M/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 memperlihatkan kenyamanan dan fasilitas pada pengunjung tapi sanggup memperlihatkan pengaruh dan warna yang berbeda. Nah jikalau Anda ingin berguru blog silahkan kunjungi halaman Panduan Cara menciptakan Blogger dan Optimasi Seo
Sumber http://www.giribig.com/