Membuat Sticky Floating Fixed Footer WordPress

Jika pada tutorial sebelumnya saya mebahas Tutorial Membuat Widget Fixed Pada WordPress , Tutorial kali ini saya akan membahas bagaimana cara membuat sticky floating footer pada wordpress, tutorial kali ini bukan menggunakan plugins, tapi menggunakan kode script yang sederhana dan kode css yang simple. Sticky floating ini tampil di footer dan terlihat menonjol, karena footer ini menggunakan posisi fixed jadi jika halaman di scroll keatas maupun kebawah maka akan mengikut.

Mengapa menggunakan Fixed Footer Bar ?

Anda dapat menggunakannya untuk mendapatkan lebih banyak perhatian dari pengunjung pada posting Anda , tulisan populer , email opt – in atau apapun yang Anda ingin tampilkan.

Ini adalah bar statis yang dapat memutar konten menggunakan beberapa jQuery sangat sederhana. dan ini fixed footbar ini karena tidak menggunakan plugins maka  sangat ringan dan bekerja dengan cukup baik .

Baca : Cara Membuat note Schedule Header Pada WordPress

Bagaimana Cara Membuat Floating Footer Bar di WordPress?

Buka file footer.php Anda dan tambahkan kode berikut tepat sebelum penutupan </body> .

<div class="fixedBar"> <div class="boxfloat"> <ul id="tips"> <li><a href="https://www.centerklik.com/themes/">Template Responsive wordpress gratis Best design</a></li> <li><a href="https://www.centerklik.com/list-tutorial-wordpress/">Daftar Tutorial wordpress terlengkap dan terbaik dan gratis</a></li> </ul> </div> </div> </body>

Buka file style.css dan tambahkan code berikut untuk mempercantik tampilan floating fixed footer.

.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;}

Sekarang tambahkan lagi kode jQuery simple berikut. Buka file footer.php Anda dan menambahkan script ini. fungsi jQuery ini untuk me random setiap item yang anda tambahkan, jadi setiap anda membuka halaman lain maka secara otomatis akan berganti-ganti.

<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>

Semoga artikel diatas dapat membantu anda dalam membuat pesan notifikasi tanpa menggunakan plugin pada footer seperti situs-situs terkenal yang pernah anda kunjungi. 🙂

Baca : Plugin terbaik membuat pesan notifikasi bar wordpress