Cara Memasang Like Box Slide di Blog

MurliCyber    10/03/2015    Blogger , Tutorial    Comment   

Like box slide - Kalian pasti tau kan apa itu like box? okay kalau belum tau akan saya jelas kan sedikit, like box adalah sebuah plugin dari facebook yang pengguna nya bisa membuat widget fanspage nya sendiri, widget ini kemudian akan di letakkan di website, supaya pengunjung bisa meng like fanspage nya tadi, tentu saja jika pengunjung meng like fanspage nya tadi, pengunjung bisa mengetahui postingan terbaru dari fanspage tadi, dan di tambah lagi jika widget fanspage ini di letakkan di website kamu, likers nya akan semakin bertambah

Ternyata banyak juga kegunaan dari like box ini, widget like box ini sudah saya modifikasi sedikit, jadi ketika blog kamu di buka, widget like box ini akan muncul secara slide di halaman blog kamu, saya tambahkan javascript supaya like box nya akan muncul secara slide

DEMO

Untuk memasang nya langsung aja ikuti tutorial di bawah ini

1. Login ke blogger

2. Letakkan kode di bawah ini di atas kode ]]><b:skin

#boxslide {
    position: fixed!important;
    position: absolute;
    top: 70px;
    z-index: 999;
    right: -1000px;
    width: 300px;
    margin: 296px 0 0 -182px;
    height: auto;
    font: normal 12px Arial,Sans-Serif;
    padding: 8px 10px 20px 10px;
    background-color: rgba(255, 255, 255, 0.56);
    line-height: 1em;
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.4);
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,.4);
    box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
#boxslide h2 {
    font-size: 14px;
    line-height: 16px;
    font-weight: 700;
    margin-bottom: 5px;
    text-transform: uppercase;
    padding: 8px;
    border-bottom: 1px solid #eee;
}
#boxslide h2:after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 150px;
    height: 1px;
    background: #e1a66c;
}
#boxslide a.close{position:absolute;bottom:0;left:0;background-color:transparant;font:normal bold 20px Arial,Sans-Serif;text-decoration:none;line-height:22px;width:22px;text-align:center;color:#444;transform:rotate(0);cursor:pointer}
#boxslide a.close:hover{transform:rotate(360deg);color:#efb16f;}

3. Kemudian letakkan html di bawah ini di bagian tata letak, pilih Widget html/javascript

<div id='boxslide'>
<h2>Like us</h2>
isi kode like box kamu disini
    <a class='close' href='#'>x</a>
</div>

Kode yang di tandai,di isi dengan kode fanspage kamu sendiri

4. Kemudian cari kode </body> letakkan kode di bawah ini di atas kode tadi

<script type='text/javascript'>
$(window).bind("load", function() {

    // animasikan nilai top saat halaman telah selesai dimuat
    $('#boxslide').animate({right:"5px"}, 1000);

    // hilangkan kotak pesan saat tombol (x) diklik
    $('a.close').click(function() {
        $(this).parent().fadeOut();
        return false;
    });

});
</script>

5. Simpan template kamu, kemudian lihat hasil nya

Untuk mengambil kode like box nya, silahkan Kesini

Sekian Tutorial kali ini semoga bermanfaat.