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 .
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
Anda Terbantu artikel ini? Silahkan bergabung dengan centerklik di Twitter dan Facebook+.
Daftar isi Tutorial WordPress Terlengkap GratisRegister Now: TOP 10 Hosting
Dapatkan Hosting Murah dengan Kualitas Terbaik. For Serious Blogger! View Deals
maaf ka kok di saya tulisannya sama sekali gak muncul yah ? apa tempalte saya yang gak suport ?
Salam kenal gan, mantep ni web. Akhirnya nemu juga web yang khusus membahas mempercantik web berbasis wordpress. mau tanya mastah, cara buat recent post dan popular post seperti web ini gimana ya?
Coba cek di postingan ane yang ini aja gan. disini
kalo mau pengen mau kayak punya ane, ane nggak pakek plugin gan, jelasinya panjang. css nya juga panjang. untuk ngepasin di masing-masing theme juga beda-beda. 🙂
Yah.. jelasin dong gan,, ntar atur aturnya saya coba coba belajar gan. plisss mau bisa buat begitu