Jika pada tutorial yang sebelumnya kita membahas tentang Tutorial Cara Membuat Widget Fixed Pada WordPress , pada Tutorial kali ini saya akan menjelaskan bagaimana cara untuk membuat sticky floating footer pada website berbasis wordpress, tutorial kali ini bukan dengan menggunakan plugins, tapi menggunakan sebuah kode script yang simple dan kode css yang simple. Sticky floating ini akan tampil di footer dan terlihat seperti menonjol, karena footer ini menggunakan bagian fixed jadi jika page di scroll keatas atau kebawah maka akan tetap mengikut.
Mengapa menggunakan Fixed Footer Bar ini?
Anda bisa menggunakannya untuk mendapatkan menarik perhatian dari pengunjung pada postingan Anda , tulisan yang populer , email opt – in ataupun semua yang Anda hendak tampilkan.
Ini merupakan bar statis yang bisa memutar konten memakai beberapa jQuery yang sangat sederhana. dan ini adalah fixed footbar karena tidak memakai plugins maka sangat ringan dan dapat bekerja dengan sangat baik .
Bagaimana Cara Untuk Membuat Floating Footer Bar di WordPress?
Buka file footer.php milik Anda dan tambahkanlah kode seperti berikut ini tepat sebelum bagian penutupan
[php]<strong></body></strong>
<div class=”fixedBar”>
<div class=”boxfloat”>
<ul id=”tips”>
<li><a href=”http://carabisnisonline.co.id/BisnisOnline/belajar-internet-marketing/belajar-seo/”>SEO</a></li>
<li><a href=”http://carabisnisonline.co.id/BisnisOnline/belajar-internet-marketing/tutorial-wordpress/”>Daftar Tutorial wordpress terlengkap dan terbaik dan gratis</a></li>
</ul>
</div>
</div>
</body>[/php]
Bukalah file style.css dan selanjutnya tambahkan code berikut ini untuk memperindah tampilan floating fixed footer.
[css]</pre>
.fixedBar{background: #000; bottom: 0px; color:#fff; font-family: Fjalla one; left:0; padding: 0px 0; position:fixed; font-size:12px; width:100%; z-index:99999; float:left; vertical-align:middle; margin: 0px 0 0; opacity: 0.95; font-weight: bold; height:28px;}
.fixedBar a{font-size:12px; font-weight:400;}
.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:0; display:none}
#tips li a{color: #fff;}
#tips li a:hover{text-decoration: none;}
<pre>[/css]
Sekarang anda tambahkan lagi kode jQuery simple berikut ini. Bukalah file footer.php Anda dan tambahkan script ini. fungsi jQuery ini adalah untuk me random setiap item yang telah anda tambahkan, jadi setiap anda akan membuka halaman lain maka secara otomatis akan menjadi berganti-ganti.
[php]<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>[/php]
Baca juga: TUTORIAL CARA MEMBERI RANGKING PENGUNJUNG KOMENTAR WORDPRESS
