Cara Pasang Floating Bar di Bagian Header dan Footer

Apakah perlu menggunakan plugin untuk membuat sticky floating bar di bagian header, sidebar, ataupun di  footer? Pertanyaan ini sering diajukan oleh para blogger yang belum pernah memasang atau membuat floating bar sebelumnya. Kamu bisa membuatnya tanpa plugin. Dengan menambahkan  beberapa baris script kode HTML dan CSS, kamu sudah bisa memasangnya

Sticky floating bar ini biasanya digunakan seperli layaknya papan pengumuman atau pemberitahuan penting dari blog untuk diketahui para pembaca atau pengunjung.  Misalnya menuliskan judul artikel tertentu yang sedang trend, atau memberitahukan bagaimana cara mendapatkan email newsletter, membuat headline news, rekomendasi artikel, dan yang lainnya, tergantung kebutuhan. Tak hanya sebagai papan pengumuman, bisa juga diisi untuk menempatkan tombol tombol sharing, menampilkan notification, menampilkan recent post, menempatkan menu navigasi, dan masih banyak lagi.

Berbagai modifikasi dapat kamu buat jika kamu lebih mengenal html atau css lebih jauh. Misalnya ingin dibuat scrolling, transparan,mengambang, jenis warna, gambar, merubah ukuran font dan jenisnya, tulisan berjalan, berbagai modifikasi lainnya untuk mempercantik penampilannya.  Sebenarnya kalau kamu mau lebih praktis, kamu bisa saja menginstall plugin untuk membuat sticky floating bar, misalnya Plugin Pippity, Wibiya Toolbar, dan plugin-plugin yang sejenis. Tapi biasanya, terlalu banyak plugin juga dapat memberatkan kecepatan loading blog. Jadi, kalau saya lebih baik menggunakan sedikit script html dan css tambahan, supaya tidak memberatkan.

Di artikel ini, saya hanya akan memberikan informasi tentang bagaimana cara pasang sticky floating bar sederhana saja. Saya tidak akan menjelaskan bagaimana cara memodifikasi secara lebih jauh.

MENAMBAHKAN BARIS KODE SCRIPT STICKY FLOATING BAR DI FILE PHP

Nah sekarang, saya akan memberikan sedikit script yang harus ditambahkan ke dalam file dimana kamu akan menempatkan floating bar. Kalau kamu akan menempatkannya di bagian bawah halaman blog, maka kamu dapat memasukkan kode script floating bar di file footer.php. Jika akan memasang di bagian header, maka kamu harus menempatkannya di header.php. Lihat contoh penampilan sticky floating bar pada gambar di bawah ini:

contoh footer floating sticky bar blog

Tempatkan kode berikut ini tepat sebelum  penutup body statement dari masing-masing file php tersebut diatas.

<div>
<div>
<ul id="tips">
<li><a href="http://www.infodari.com/">Infodari Link adalah Item Pertama</a></li>
<li><a href="http://www.wordpress.org/">WordPress.org is the Second Item Kedua</a></li>
</ul>
</div>
</div>

Kamu dapat menambahkan list sebanyak yang kamu inginkan. Script tersebut hanya akan menampilkan satu list atau item dari setiap halaman.

UNTUK MODIFIKASI PENAMPILAN FLOATING BAR TAMBAHKAN KODE SCRIPT DI STYLE.CSS

Langkah berikutnya adalah kamu harus memasukkan gaya penampilan floating bar yang kamu inginkan, dengan menambahkan kode script ke dalam file style.css. Copy dan paste kode script sticky floating bar di bawah ini:

.boxfloat{text-align:center; width:920px; margin:0 auto}
#tips, #tips li{margin:0; padding:0; list-style:none}
#tips{width:920px; font-size:20px; line-height:120%;}
#tips li{padding: 15px 0; display:none}
#tips li a{color: #fff;}
#tips li a:hover{text-decoration: none;}

Sedikit penjelasan tentang script diatas:

Disitu kita akan memiliki fixedBar div. Disitulah kita akan mengkostumisasi warna dan atribut lainnya yang diperlukan. Dan yang terpenting, jangan lupa untuk menuliskan class posisinya, yaitu fixed;element.

Karena lebar .fixedbar div adalah 100%, maka kita harus membuat wrap. Silahkan sesuaikan keinginan anda, seberapa lebar, ukuran, warna dan gaya lainnya.

MENAMBAHK KODE SCRIPT JQUERY JIKA MENGINGINKAN ADANYA ANTRIAN PUTARAN YANG DITAMPILKAN

Setelah itu, tambahkan sedikit jQuery code. Buka file footer.php, dan tambahkan script di bawah ini, di bagian akhir. Sedikit snippet ini akan menampilkan satu item pada setiap halaman yang diloading dari semua list yang kamu buat tadi diatas.

<script type="text/javascript">
this.randomtip = function(){
var length = $("#tips li").length;
var ran = Math.floor(Math.random()*length) + 1;
$("#tips li:nth-child(" + ran + ")").show();
};

$(document).ready(function(){
randomtip();
});
</script>

Kamu harus pastikan bahwa kamu memiliki jQuery yang diproses. Kebanyakan wordpress theme biasanya mempunya paling sedikit function yang menggunakan jQuery. Jika tidak, makan kamu harus meloading jQuery ini di bagian header.

Jika terjadi masalah, coba telusuri permasalahan pada script. Misalnya, jika seharusnya kamu menempatkan script di atas script lain, diantara keduanya, atau bahkan di bagian bawah script. Kamu bisa coba trying error dulu.

Jika kamu hanya ingin menampilkan satu item dan tidak melakukan pengulangan atau perputaran dari banyak item, maka kamu tidak perlu menambahkan script diatas.

Catatan penting:

Lakukan back up sebelum mengerjakan!!! Jika akan mengotak-atik kode script diatas, sebaiknya buat copy setiap file yang akan dirubah. Copy pastekan isi file aslinya ke notepad, atau anda dapat langsung mengcopy atau mendownload file yang bersangkutan melalui cpanel. Hal ini dilakukan agar jika terjadi kesalahan atau error, kamu bisa mereplace atau menempatkan kembali file asli sebelumnya.

Oke, sekian dulu informasi mengenai bagaimana cara membuat floating bar ini. Semoga mudah dimengerti, dan semoga berhasil ya!

Comments

comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Human Captcha Verification : * Time limit is exhausted. Please reload CAPTCHA.

%d bloggers like this: