Home » Ask (Forum) » Cara Membuat Sticky Floating Footer pada WordPress?

Question

Mas, saya mohon bantuannya untuk membuat sticky floating footer pada wordpress ?

Aug 18, 2016 (4 months ago) - Posted by 1 Comment

One Answer

  1. Jihan says:

    Mencoba menjawab.

    Buka file footer.php Anda dan tambahkan kode berikut tepat sebelum penutupan

    <div class="fixedBar">
        <div class="boxfloat">
        <ul id="tips">
        <li><a href="http://www.centerklik.com/themes/">Template Responsive wordpress gratis Best design</a></li>
        <li><a href="http://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>
    Register Member

Your Answer

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