How to Start a Blog? Panduan Membuat Website Hanya 30 Menit

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.

sticky footer fixed tutorial wordpress

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

Anda Terbantu artikel ini? Silahkan bergabung dengan centerklik di Twitter dan Facebook+.

Daftar isi Tutorial WordPress Terlengkap Gratis
10 top hosting!

Register Now: TOP 10 Hosting

Dapatkan Hosting Murah dengan Kualitas Terbaik. For Serious Blogger! View Deals

Niagahoster

Rp.26.000/Bln Free Domain, Unlimited Space & Bandwidth Get Host

IDCloudhost

Rp.30.000/Bln Free Domain, Unlimited Space & Bandwidth Get Host

Bluehost Hosting

$2.95/Month Free Domain, Unlimited Space & Bandwidth Get Host

iPage Hosting

$1.99/Month Free Domain, Unlimited Space & Bandwidth Get Host

SiteGround Hosting

$3.45/Month Free Domain, Unlimited Space & Bandwidth Get Host

Hostgator

$3.95/Month Free Domain, Unlimited Space & Bandwidth Get Host

4 Comments

Add a Comment

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