Membuat back to top di blog yang keren dan auto hide – Fasilitas ini hampir rata-rata ada disetiap blog yang pernah saya baca atau lihat, memang fitur ini sangat membantu jika artikel kita itu panjang lebih dari 1000 kata dan apalagi banyak komentar dibawahnya.
Maka wajib bagi pemilik blog untuk memberikan tombol back to top agar memudahkan pengunjung untuk mengakses halaman paling atas pada artikel.
Kadang artikel yang banyak yang berkualitas kita itu membacanya betah jadi kita nyaman berlama-lama membaca artikel tersebut. Bahkan mungkin anda juga mengalaminya yaitu mengulangi atau membaca berulang untuk memahami isi dari artikel tersebut.
Tentang membuat tombol tombol back to top, ada yang aneh...
Apa itu?
Banyak artikel yang saya tulis tentang membuat tombol back to top kalau saya ingat-ingat itu ada tiga tutorial yang saya tulis di blog ini. Ya memang dulu suka mainan kode untuk mengoprek template sana sini. Yang hanya pengen tahu hasilnya saja.
Saya bandingkan dengan cara-cara yang lain yang berasal dari internet kemudian saya dokumentasikan sebagai tutorial pribadi saya sendiri. Tapi kalau diingat-ingat saya sangat sering ngoprek template orang.
Maklum suka makan koding jadi ya tertantanglah sebagai jiwa muda.
Satu hal yg belum terwujud yaitu membuat template dan menjadi mitra adsanse google. Untuk saat ini mau target mitra adsanse dulu kalau sudah baru nyoba membuat template yang simple.
Kembali ke topik agar bahasan kita tidak melebar.
Untuk tombol ini model simplenya seperti pada tampilan blog ini, yaitu auto hide ketika tombol ini sampai di atas jadi seolah-olah ketika dihalaman atas tidak ada tombol bak to topnya..
Silahakn ikuti tutorial ini untuk menerapkan pada template anda, dan baca dengan teliti kadang dalam pemasangan ada yang terlewat sehingga tidak berhasil. Dan juga kadang penempatan kode juga sangat pengaruh terhadap keberhasilan pemasangan,
Maka wajib bagi pemilik blog untuk memberikan tombol back to top agar memudahkan pengunjung untuk mengakses halaman paling atas pada artikel.
Kadang artikel yang banyak yang berkualitas kita itu membacanya betah jadi kita nyaman berlama-lama membaca artikel tersebut. Bahkan mungkin anda juga mengalaminya yaitu mengulangi atau membaca berulang untuk memahami isi dari artikel tersebut.
Tentang membuat tombol tombol back to top, ada yang aneh...
Apa itu?
Banyak artikel yang saya tulis tentang membuat tombol back to top kalau saya ingat-ingat itu ada tiga tutorial yang saya tulis di blog ini. Ya memang dulu suka mainan kode untuk mengoprek template sana sini. Yang hanya pengen tahu hasilnya saja.
Saya bandingkan dengan cara-cara yang lain yang berasal dari internet kemudian saya dokumentasikan sebagai tutorial pribadi saya sendiri. Tapi kalau diingat-ingat saya sangat sering ngoprek template orang.
Maklum suka makan koding jadi ya tertantanglah sebagai jiwa muda.
Satu hal yg belum terwujud yaitu membuat template dan menjadi mitra adsanse google. Untuk saat ini mau target mitra adsanse dulu kalau sudah baru nyoba membuat template yang simple.
Kembali ke topik agar bahasan kita tidak melebar.
Untuk tombol ini model simplenya seperti pada tampilan blog ini, yaitu auto hide ketika tombol ini sampai di atas jadi seolah-olah ketika dihalaman atas tidak ada tombol bak to topnya..
Silahakn ikuti tutorial ini untuk menerapkan pada template anda, dan baca dengan teliti kadang dalam pemasangan ada yang terlewat sehingga tidak berhasil. Dan juga kadang penempatan kode juga sangat pengaruh terhadap keberhasilan pemasangan,
Untuk memasang fitur ini banyak cara yang digunakan mulai hanya pasang html, jquery dan ada yang sampai lengkap ada kode jss atau scriptnya. Tapi tidak lepas dari itu semua namun kualitas hasil tetap akan beda antara kode yang simple dengan kode yang mungkin agak banyak atau rumit.
Pada tutorial membuat back to top di blog yang keren dan auto hide pada blog ini saya sajikan rumus yang agak tidak simple. Alias tidak banyak kode yang harus dipasang. Seperti yang saya bilang tadi biasanya semakin banyak kode yang dipasang pada sebuah template akan terlihat kualitas hasil tampilannya. Tapi itu tidak semuanya.
Seperti yang saya gunakan pada pada blog ini, jika kita scroll ke bawah akan terlihat jelas tapi jika di klik tombolnya akan hilang jika sudah kembali ke atas.
Sebelum anda menerapkan atau mempraktekkan kode dibawah sebagai pengingat yang harus selalu aku ingatkan yaitu backup dulu template anda lalu praktekkan.
Sebelum anda menerapkan atau mempraktekkan kode dibawah sebagai pengingat yang harus selalu aku ingatkan yaitu backup dulu template anda lalu praktekkan.
Langkah-langkah yang harus dilakukan untuk membuat back to top di blog :
1. Masuk dasboard blog, pilih template dan edit html
2. Copas kode dibawah ini, letakkan kodenya diatas <head>
<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");
//]]>
</script>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");
//]]>
</script>
Kode diatas adalah Script Font Awesome yang telah dilengkapi dengan script yang akan meload data font awesome secara async. Jadi tidak akan membebani loading blog anda.
3. Selanjutnya tambahkan kode CSS berikut ini diatas ]]></b:skin> atau </style>.
.smoothscroll-top {position:fixed;opacity:0;visibility:hidden;overflow:hidden;text-align:center;z-index:99;background-color:#09c;color:#fff;width:47px;height:44px;line-height:44px;right:25px;bottom:-25px;padding-top:2px;border-radius:none;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;}
.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;}
Pengaturan pada warnanya hanya perlu anda perhatikan pada warna merah pada #09c dan ganti sesuai warna yang sesuai dengan tema template anda atau terserah suka-suka anda. Setelah itu untuk mengganti warna hovernya sobat ganti pada #3eb2ea, ganti sesuai wana yang sobat inginkan, atau selaraskan dengan warna blog sobat, agar terlihat serasi seperti pengantin baru.
4. Setelah itu langkah terakhir yang harus dilakukan adalah tambahkan kode dibawah ini tepat diatas kode</body>.
<div class='smoothscroll-top'>
<span class='scroll-top-inner'>
<i class='fa fa-2x fa-chevron-up'/>
</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').animate({scrollTop:25},200).animate({scrollTop:0},150) .animate({scrollTop:0},50);
}
//]]>
</script>
<span class='scroll-top-inner'>
<i class='fa fa-2x fa-chevron-up'/>
</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').animate({scrollTop:25},200).animate({scrollTop:0},150) .animate({scrollTop:0},50);
}
//]]>
</script>
Kalau semua kode membuat back to top di blog diatas sudah dimasukkan dengan benar dan sesuai posisi atau letaknya simpan template anda dan lihat hasilnya.
Demikian tutorial membuat back to top di blog semoga tidak kesulitan mengikuti dan menerapkan pada blog anda. Jika kesulitan silahkan komentar dibawah barang kali bisa membantu.
Semoga tutorial yang ringkas ini dapat membantu anda menjadikan tampilan blog anda lebih bagus dan elegan.
salam sukses blogger Indonesia
Semoga tutorial yang ringkas ini dapat membantu anda menjadikan tampilan blog anda lebih bagus dan elegan.
salam sukses blogger Indonesia
Tags:
Tutorial Blog