Cara Membuat Tombol Back To Top Di Blogger
tombol back to top merupakan fitur untuk memudahkan para pengunjung blog
untuk kembali ke bagian atas blog / artikel, akan lebih efektif jika
anda menggunakan pada blog atau website yang memiliki artikel yang panjang atau komentar yang banyak sehingga
pembaca atau pengunjung blog tidak melakukan scroll atau menggeser lagi
ke atas, hanya cukup dengan satu klik tombol back to top mereka akan
langsung kembali ke bagian atas secara otomatis.
Memasang tombol back to top memang sudah bukan hal ane lagi telah banyak designer template yang telah otomatis menambahkan fitur ini ke dalam template buatannya, salah satunya template viomagz buatang mas sugeng ini.
meskipun begitu, mungkin saja template yang anda gunakan tidak mendukung fitur ini, nah untuk itulah saya akan membagikan tutorial cara memasang atau membuat tombol back to top di blogger.
Tombol back to top ini memiliki desain yang cukup sederhana namun keren karna menggunakan icon font awesome.
ketika seseorang melakukan scroll atau menggulir halaman blog ke bawah, tombol back to top akan muncul secara otomatis pada bagian pojok bawah sebelah kanan blog.
dilengkapi dengan efek smooth scroll sehingga ketika anda mengklik tombol ini maka akan melakukan scroll ke atas dengan efek scroll halus.
jika anda berminat dengan tombol back to top ini silahkan simak tutorial di bawah ini
Cara Membuat Tombol Back To Top Di Blogger
1. silahkan login terlebih dahulu akun blogger anda
2. kemudian pada menu dasbord klick tema > edit html
3. Letakkan script css dibawah ini sebelum kode
4. kemudian tambahkan script di bawah ini tepat sebelum code <head>
5. klick simpan tema
Akhir kata
nah itulah tadi tutorial cara membuat tombol back to top di blogger, semoga artikel ini bermanfaat bagi kalian semua.
jika ada pertanyaan, saran ataupun kritik mengenai artikel ini silahkan ajukan pada kolom komentar di bawah atau dengan mengajukannya pada halaman contact admin.
thanks to caramanual.com
Memasang tombol back to top memang sudah bukan hal ane lagi telah banyak designer template yang telah otomatis menambahkan fitur ini ke dalam template buatannya, salah satunya template viomagz buatang mas sugeng ini.
meskipun begitu, mungkin saja template yang anda gunakan tidak mendukung fitur ini, nah untuk itulah saya akan membagikan tutorial cara memasang atau membuat tombol back to top di blogger.
Tombol back to top ini memiliki desain yang cukup sederhana namun keren karna menggunakan icon font awesome.
ketika seseorang melakukan scroll atau menggulir halaman blog ke bawah, tombol back to top akan muncul secara otomatis pada bagian pojok bawah sebelah kanan blog.
dilengkapi dengan efek smooth scroll sehingga ketika anda mengklik tombol ini maka akan melakukan scroll ke atas dengan efek scroll halus.
jika anda berminat dengan tombol back to top ini silahkan simak tutorial di bawah ini
Cara Membuat Tombol Back To Top Di Blogger
1. silahkan login terlebih dahulu akun blogger anda
2. kemudian pada menu dasbord klick tema > edit html
3. Letakkan script css dibawah ini sebelum kode
]]></b:skin> atau </style>/* Back to top button caramanual.com */
.scroll-top-wrapper {
position: fixed;
opacity: 0;
visibility: hidden;
overflow: hidden;
text-align: center;
z-index: 99999999;
background-color: #777777;
color: #eeeeee;
width: 50px;
height: 48px;
line-height: 48px;
right: 30px;
bottom: 30px;
padding-top: 2px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.scroll-top-wrapper:hover {
background-color: #888888;
}
.scroll-top-wrapper.show {
visibility:visible;
cursor:pointer;
opacity: 1.0;
}
.scroll-top-wrapper i.fa {
line-height: inherit;
}4. kemudian tambahkan script di bawah ini tepat sebelum code <head>
<!-- Back to top button caramanual.com -->
<div class="scroll-top-wrapper">
<span class="scroll-top-inner">
<i class="fa fa-2x fa-arrow-circle-up"></i>
</span>
</div>
<link href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function(){
$(document).on( 'scroll', function(){
if ($(window).scrollTop() > 100) {
$('.scroll-top-wrapper').addClass('show');
} else {
$('.scroll-top-wrapper').removeClass('show');
}
});
$('.scroll-top-wrapper').on('click', scrollToTop);
});
function scrollToTop() {
verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
element = $('body');
offset = element.offset();
offsetTop = offset.top;
$('html, body').animate({scrollTop: offsetTop}, 500, 'linear');
}
</script>5. klick simpan tema
Akhir kata
nah itulah tadi tutorial cara membuat tombol back to top di blogger, semoga artikel ini bermanfaat bagi kalian semua.
jika ada pertanyaan, saran ataupun kritik mengenai artikel ini silahkan ajukan pada kolom komentar di bawah atau dengan mengajukannya pada halaman contact admin.
thanks to caramanual.com
Belum ada Komentar untuk "Cara Membuat Tombol Back To Top Di Blogger"
Posting Komentar
Jika Ada Yang Ingin Anda Tanyakan Terkait Artikel Ini Silahkan Bertanya Melalui Kolom Komentar Dibawah, Atau Dengan Menghubungi Kami Pada Halaman Contact Admin.
1. Centang kotak Notify Me / Beri Tahu Saya untuk mendapatkan notifikasi komentar.
2. Komentar kami moderasi, dan tidak semuanya dipublish.
3. Semua komentar dengan menambahkan link akan dihapus dan tidak akan dipublikasikan.