Selamat Malam, emang kalau nge-bahas tutorial seputar blogger tidak ada habisnya. Contoh saja postingan pada malam ini, mungkin saja agak jadul dan bisa dibilang sederhana akan tetapi efek yang dihasilkan lumayan baguslah. Ya "Tombol Back To Top" siapa sih tidak tau fungsi dari tombol ini, sudah jelas sesuai dengan namanya "Back To Top" Yakni kembali ke atas. Udah jauh baca artikelnya sampe ke akar malas nge-scroll tinggal klik aja "Tombol Back To Top" Udah Ke atas, Ga ribetkan hehehe.
Berikut Tutorialnya :
- Pertama Masuk Ke Dashbor Blog Kalian,
- Kemudian Klik Menu Template,
- Lalu Klik Menu Edit Template,
- Setelah itu Letakkan Kode Dibawah Ini diatas Kode
</style>
#BackToTop{background:#888;text-align:center;position:fixed;bottom:10px;right:10px;cursor:pointer;width:30px;height:20px;padding:5px;display:none;border-radius:2px}
#BackToTop:before{content:"";position:absolute;bottom:5px;right:5px;width:0;height:0;border-style:solid;border-width:0 15px 20px;border-color:transparent transparent #444;line-height:0;transition:all .5s ease-out}
#BackToTop:hover:before{content:"";position:absolute;bottom:5px;right:5px;width:0;height:0;border-style:solid;border-width:0 15px 20px;border-color:transparent transparent #ddd;line-height:0}
#BackToTop:after{content:"";position:absolute;bottom:5px;right:11px;width:0;height:0;border-style:solid;border-width:0 9px 12px;border-color:transparent transparent #888;line-height:0}- Kemudian Masukan Javascript Ini diatas
</head>
<script type='text/javascript'>
$(function(){$(window).scroll(function(){if($(this).scrollTop()>100){$('#BackToTop').slideDown(200);}else{$('#BackToTop').slideUp(300);}});
</script>
- Jika sudah, klik save template
- Kemudian, Klik Menu Tata letak > Tambahkan Widget > Pilih Widget HTML/Javascript
- Lalu masukan kode pemanggil Back To Topnya kedalam widget tersebut
<div id='BackToTop'></div>
- Jika sudah, klik save widget dan lihat hasilnya
Note : Kode Pemanggil Back To Topnya Bisa Juga Tidak Dipasang Di Widget Tapi Langsung Pasang Di Template, Terserah Kalian Mau Naruhnya Dimana Asal Jangan Di Bagian-Bagian Awal Template, Bisa Bagian Pertengahan Atau Akhir.
Semoga Bermanfaat
^_^
