~~~~~~~    ~~~~~~~    ~~~~~~~    ~~~~~~~    ~~~~~~~    ~~~~~~~    ~~~~~~~    ~~~~~~~    ~~~~~~~   

Home » » Cara mudah membuat Like Box menempel pada sisi Blog

Cara mudah membuat Like Box menempel pada sisi Blog

Posted by Dagul on Sabtu, 01 November 2014

Ass...Wr...Wb...

Dan salam sejahtera buat sobat blogger dimanapun anda berada. dicoretan kemarin kita telah belajar membuat Like Box sederhana diblog. Bagi sobat yang berniat mampir silahkan klik saja Cara mudah membuat Like Box diBlog.
Dan kali ini kita akan sama-sama beajar membuat Like Box dengan cara lainnya, yah sedikit kece lah dari yang kemarin. Disamping tampilannya lebih dinamis, kelebihan lainnya yaitu tidak terlalu banyak memakan ruangan disidebar blog kita sobat. "seperti gambar disamping" . Karena like boxnya kan menempel didinding blog kita sob. Sebenarnya langkah-langkahnya hampir sama dengan yang kemarin sobat, cuma ada coding-coding tambahan aja dikit.

Okaylah tanpa berlama-lama yuk kita ikutin tutor berikut:

1. Langkah awalnya masih sama sobat harus sudah punya fans page/halaman diFacebook.
2. Kalau belom ada silahkan sobat ikuti tutor berikut Cara mudah membuat Like Box diBlog.
3. Selanjutnya silahkan sobat copy total kode dibawah
<style type="text/css">
/*<![CDATA[*/
#fbplikebox{display: block;padding: 0;z-index: 99999;position: fixed;}
.fbplbadge {background-color:#3B5998;display: block;height: 150px;top: 50%;margin-top: -75px;position: absolute;left: -47px;width: 47px;background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKpXfFQgSZhSWcahFpzTzVsHifIoKZGdYaOWiI_QHMtowfMrnXzJAB8yl6jveADSE2sH4SJTkz_cTwWKWFZKLv31ruh-y6iFrdjZLKyHVkzWjNJlEXzMKL6HbsX1WyeP0zMuFCycbnXO4/s1600/vertical-right.png");background-repeat: no-repeat;overflow: hidden;-webkit-border-top-left-radius: 8px;-webkit-border-bottom-left-radius: 8px;-moz-border-radius-topleft: 8px;-moz-border-radius-bottomleft: 8px;border-top-left-radius: 8px;border-bottom-left-radius: 8px;}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
    (function(w2b){
        w2b(document).ready(function(){
            var $dur = "medium"; // Duration of Animation
            w2b("#fbplikebox").css({right: -250, "top" : 100 })
            w2b("#fbplikebox").hover(function () {
                w2b(this).stop().animate({
                    right: 0
                }, $dur);
            }, function () {
                w2b(this).stop().animate({
                    right: -250
                }, $dur);
            });
            w2b("#fbplikebox").show();
        });
    })(jQuery);
/*]]>*/
</script>
<br />
<div id="fbplikebox" style="display: none;">
<div class="fbplbadge">
</div>

LETAKKAN KODE FANS PAGE SOBAT DISINI

4. Yang terakhir silahkan sobat login keblog masing-masing.
5. Pilih tata letak, add gadget, pilih HTML/JavaSript dan Simpan deh.

"Selamat mencoba dan semoga bermanfaat"

SHARE :
CB Blogger

Posting Komentar

 
Copyright © 2014 Dagul. All Rights Reserved. Powered by Blogger
Template by Atang Rahman and BelajarCopas