Hallo sobat blogger sehabis beberapa hari saya tidak mengudate artikel karena memang saya sedang disibukkan untuk persiapan Ujian, akibatnya bisa aku sempatkan waktu aku untuk mengupdate artikel lagi. Pada kesempatan kali ini, akan aku bagikan Tutorial Memasang Tombol Back To Top Dengan imbas Untuk Blog. Tombol back to top yang akan aku bagikan disini yaitu karya mbak Arlina Fitryiani, aku sangat mengagumi karya-karya template beliau yang luar biasa.
Oke, kembali ke topik. memasang tombol back to top pada blog akan menyampaikan kemudahan tersendiri untuk para pengunjung blog. karena mereka tidak perlu bersusah payah memakai mouse mereka jika ingin kembali ke atas halaman. mereka hanya tinggal mengklik tombol back to topnya dan otomatis akan kembali ke atas.
Tombol back to top yang memakai dampak juga menyampaikan kesan yang menciptakan blog sobat lebih menarik untuk para pengunjung, dimana bila para pengunjung mengklik tombol back to topnya, maka tombol ini akan menyampaikan pengaruh terseret ke atas yang membuat pengunjung tertarik untuk memainkannya.
Oke, kalau teman tertarik untuk memasangnya pada blog sobat, beriku langkah-langkahnya
1. sobat harus Login pada blogger terlebih dahulu.
2. sesudah itu, pilih menu Template
3. kemudian kalau teman sudah masuk pada sajian template, klik Edit HTML
4. Carilah instruksi <head> dan letakkan arahan di bawah ini tepat di atas isyarat <head>
Untuk mempermudah pencarian arahan <head>, ]]><b:skim> ataupun </body>, teman bisa memakai fitur Find dengan menekan tombol CTRL + F.
Oke, kembali ke topik. memasang tombol back to top pada blog akan menyampaikan kemudahan tersendiri untuk para pengunjung blog. karena mereka tidak perlu bersusah payah memakai mouse mereka jika ingin kembali ke atas halaman. mereka hanya tinggal mengklik tombol back to topnya dan otomatis akan kembali ke atas.
Tombol back to top yang memakai dampak juga menyampaikan kesan yang menciptakan blog sobat lebih menarik untuk para pengunjung, dimana bila para pengunjung mengklik tombol back to topnya, maka tombol ini akan menyampaikan pengaruh terseret ke atas yang membuat pengunjung tertarik untuk memainkannya.
 |
| Tampilan Tombol Back To Top yang akan di pasang pada blog Untuk warna bisa teman ubah sesuai selera |
Oke, kalau teman tertarik untuk memasangnya pada blog sobat, beriku langkah-langkahnya
1. sobat harus Login pada blogger terlebih dahulu.
2. sesudah itu, pilih menu Template
3. kemudian kalau teman sudah masuk pada sajian template, klik Edit HTML
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>5. Jangan simpan terlebih dahulu template sahabat. Langkah berikutnya masih di Edit HTML, cari isyarat ]]></b:skin> dan letakkan kode di bawah ini tepat di atasnya.
.smoothscroll-top6. Langkah selanjutnya, letakkan aba-aba di bawah ini tepat diatas arahan </body>
position:fixed;
opacity:0;
visibility:hidden;
overflow:hidden;
text-align:center;
z-index:99;
background-color:#2ba6e1;
color:#fff;
width:47px;
height:44px;
line-height:44px;
right:25px;
bottom:-25px;
padding-top:2px;
border-radius:5px;
transition:all 0.5s ease-in-out;
transition-delay:0.2s;
.smoothscroll-top:hover
background-color:#3eb2ea;
color:#fff;
transition:all 0.2s ease-in-out;
transition-delay:0s;
.smoothscroll-top.show
visibility:visible;
cursor:pointer;
opacity:1;
bottom:25px;
.smoothscroll-top i.fa
line-height:inherit;
<div class="smoothscroll-top">7. sesudah semuanya terpasang dengan benar, langkah terakhir, klik Simpan Template.
<span class="scroll-top-inner">
<i class="fa fa-2x fa-arrow-circle-up"></i>
</span>
</div>
<script type='text/javascript'>
//<![CDATA[
$(function()
$(document).on( 'scroll', function()
if ($(window).scrollTop() > 100)
$('.smoothscroll-top').addClass('show');
else
$('.smoothscroll-top').removeClass('show');
);
$('.smoothscroll-top').on('click', scrollToTop);
);
function scrollToTop()
verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
element = $('body');
offset = element.offset();
offsetTop = offset.top;
$('html, body').animate(scrollTop: offsetTop, 600, 'linear');
//]]>
</script>
Untuk mempermudah pencarian arahan <head>, ]]><b:skim> ataupun </body>, teman bisa memakai fitur Find dengan menekan tombol CTRL + F.
Catatan:
Jika blog sahabat sudah terpasang Font Awesome pada langkah nomor 4, Lewati saja langkah nomor ini dan eksklusif ikuti langkah nomor 5Itu tadi tutorial Cara Memasang Tombol Back To Top Dengan efek Seret Untuk Blog, Blogger yang baik selalu meninggalkan jejak. bila sahabat masih bingung dengan tutorial aku, mampu dituliskan pada kolom komentar dibawah artikel. supaya Bermanfaat.
Post a Comment