Download Now Download Themes Gratis WordPress Responsive!

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 Google+.

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

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

WebHostingPad

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

Hostgator

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

  • Zaid

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

      • Zaid

        Yah.. jelasin dong gan,, ntar atur aturnya saya coba coba belajar gan. plisss mau bisa buat begitu

  • ananda kiki khyla

    maaf ka kok di saya tulisannya sama sekali gak muncul yah ? apa tempalte saya yang gak suport ?

Must Read...!
Theme WordPress Pictorial Responsive Free

Pictorial adalah Sebuah tema wordpress gratis elegan yang memberikan tekanan pada konten mengutamakan gambar,...

7 Font Grafiti Terbaik Download Gratis

7 Font Grafiti Terbaik Download Gratis untuk anda pecinta dunia grafity bisa menggunakan beberapa...

Close