Menyembunyikan Tampilan Navbar (Navigation Bar) Di Blogger- Navbar atau navigation bar adalah sebaris menu yang berada di bagian paling atas blog. Navbar ini mempunyai beberapa fungsi yang diantaranya adalah untuk keluar-masuk akun Google, membuat entri baru, dan sebagainya. Meskipun kelihatannya fungsinya bagus, tapi banyak blogger yang menyatakan bahwa navbar ini tidak professional.
Ada pikiran untuk menonaktifkan navbar? Sebenarnya mudah saja untuk menonaktifkan navbar, kita hanya perlu ke menu tata letak. Namun, setelah saya cek kesana-kemari, ternyata menghapus navbar termasuk ke dalam pelanggaran dalam TOS (term of service) Blogger. Sanksi pelanggaran TOS blogger adalah banned. Apabila kita menggunakan cara ini, maka otomatis blog kita tidak akan terbanned karena kita hanya menyembunyikan navbar, bukan menonaktifkannya. Untuk menyembunyikan navbar, ikuti langkah-langkah berikut ini:
1. Kunjungi Template > Edit HTML.
2. Cari ]]></b:skin>. Untuk mempermudah, tekan Ctrl+F.
3. Jika sudah ketemu, letakkan kode berikut tepat diatasnya:
#navbar-iframe,#navbar { display: none !important; }
4. Simpan Template.
Membuat Tombol Back To Top Biasa Yang Melayang- Setelah tadi saya mempublikasikan tutorial tentang membuat back to top dengan efek bounce, sekarang saya akan mempublikasikan tutorial membuat back to top yang lebih sederhana lagi. Apa maksudnya sederhana lagi? maksudnya adalah ketika tombol back to top ditekan, maka halaman suatu blog akan langsung menuju ke halaman teratas tersebut.
Masih kurang paham? contoh sederhananya adalah Doraemon yang menggunakan pintu kemana saja untuk pergi ke mana-mana. Jadi kurang lebih gambarannya seperti contoh Doraemon diatas. Saya rasa tidak perlu saya terangkan lebih jauh lagi. Untuk membuat tombol back to top biasa yang melayang, ikuti langkah-langkah berikut ini:
1. Kunjungi Template > Edit HTML.
2. Cari kode </body>. Jika sudah ketemu, letakkan kode berikut tepat diatasnya.
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Scroll/Back to Top"><img src="http://icons.iconarchive.com/icons/taytel/orb/32/arrow-up-icon.png" /></a>
Catatan:
Untuk yang
warna merah, ganti URL gambar back to top dengan URL gambar yang lain. Tapi jika Anda ingin menggunakan URL gambar seperti yang tertera pada kode diatas, tidak masalah.
3. Simpan Template.
Membuat Tombol Back To Top Dengan Efek Bounce Di Blogger- Back to top adalah sebuah tombol sederhana yang fungsinya adalah untuk kembali ke halaman teratas blog. Jadi, misalkan terdapat sebuah blog yang sangat panjang isi konten (artikel)nya, kemudian karena si pengunjung blog malas untuk menggunakan scrolling pada mouse untuk kembali ke halaman teratas, mereka dapat menggunakan tombol back to top ini.
Apa maksud dari efek bounce? Coba pikir, bounce dalam bahasa Inggris berarti memantul. Jadi, back to top dengan efek bounce adalah back to top yang mempunyai efek pantulan. Jadi, cara kerjanya adalah ketika tombol back to top diklik, maka otomatis halaman blog akan langsung ke bagian teratas halaman lalu disanalah terjadi efek pantulan. Nah, untuk membuatnya, silakan Anda ikuti langkah langkah berikut ini:
1. Kunjungi Template > Edit HTML.
2. Cari kode </head>. Letakkan kode jQuery berikut tepat diatasnya.
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/>
Apabila blog Anda sudah memiliki kode jQuery, lewati langkah ini karena blog tidak boleh memiliki lebih dari satu kode jQuery.
3. Masih pada kode
</head>, letakkan kode berikut tepat diatasnya.
<script type='text/javascript'>
$(function() { $(window).scroll(function() { if($(this).scrollTop()>100) { $('#BounceToTop').fadeIn(); } else { $('#BounceToTop').fadeOut(); } });
$('#BounceToTop').click(function() { $('body,html').animate({scrollTop:0},800) .animate({scrollTop:25},200) .animate({scrollTop:0},150) .animate({scrollTop:10},100) .animate({scrollTop:0},50); }); });
</script>
4. Simpan template. Sekarang kunjungi Tata Letak > Tambahkan Gadget > HTML/JavaScript.
5. Letakkan kode berikut pada kolom konten (judul abaikan saja):
<style type='text/css' scoped='scoped'>
#BounceToTop{position:fixed; bottom:0px; right:3px; cursor:pointer;display:none}
</style>
<div id='BounceToTop'><img alt='Back to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRlis88pp4WL8NFkDrmCWgLSNhPgDqR6zmU3dLAYbTAJWX-buBTOHwisNSURRlXmLvlFUVCZ-tP6X3-Lii52jNPMuEwD5coqTOo7SdpYXL1Sa_YfuLA2SHfoqlddKxfI3qgp3EJAa5bpQ/s1600/arrow-up_basic_blue.png'/></div>
6. Klik simpan. Sekarang, kunjungi blog Anda untuk melihat hasilnya.
P.S: Tombol back to top ini menggunakan efek fade in dan fade out yang artinya akan muncul perlahan. Maksudnya muncul perlahan adalah tombol back to top baru akan terlihat apabila halaman blog di scroll.
