Facebook Like Box Di Blogspot

Banyak cara agar sebuah postingan bisa tersebar kemana - mana yang salah satunya adalah lewat Facebook. Facebook memang banyak memberikan plugin bagus untuk bisa ditampilkan atau dikombinasikan dengan berbagai macam blog yang salah satunya adalah Blogspot. Blogspot sendiri memberikan kebebasan berkarya bagi siapa saja untuk merubah bentuk tampilan halam blog agar terlihat cantik, atau istilahnya adalah bebas berkreasi dengan syarat menguasai bahasa pemrograman minimal HTML. Tapi jangan takut, sekarang banyak teman - teman yang berbaik hati membagikan ilmunya komplet dengan source code-nya, jadi tinggal COPY-PASTE dan mengikuti langkah demi langkah yang dianjurkan maka mempercantik blog akan terasa lebih mudah. Kali ini saya ingin membagikan ilmu saya juga tentang bagaimana membuat Facebook Like Box di blogspot seperti contoh dibawah ini.

FACEBOOK LIKE BOX DI BLOGSPOT

Langsung saja ikuti langkah - langkah dibawah ini :

1. Seperti biasa Login Account Blogspot anda..!!!
2. Lalu masuk ke Design ---> Edit HTML dan centang Expand Widget Templates (Jangan lupa membackup template anda sebelum editing HTML)
3. Lalu cari kode ]]></b:skin> dan letakkan kode dibawah ini tepat diatasnya

.fb_like_box {
    margin-top:10px;
    -moz-border-radius:10px 10px 10px 10px;
    border-radius:10px;
    background-color:#3B5999;
    border:3px solid #2B2B2B;
    margin-bottom:10px;
    padding:10px 7px;
    width:500px;
    }
    .fb_like_top {
    overflow:visible;
    padding:0;margin:0 0 5px;
    width:349px;
    height:24px;
    background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHcUrMGdkvRfjL1N0B1231bz3JX6Abo4iTzx741uNZMPWaIOjAJbgzkHKrummfiUDOxnxz1qDfE6MQcZ_F2sWgHBs_X9VHhwekv3aMvZoO7lBoiu518VAXKY_MIGqUsRQ-86NnSypfpzA/") no-repeat scroll left top transparent;
    }
    .fb_like_button_holder {
    -moz-border-radius:10px 10px 10px 10px;
    border-radius:10px;
    background:none repeat scroll 0 0 #FFFFFF;
    padding:12px 12px 0 12px;
    width:480px;
    height:42px;
    }

    .fb_like_top a {
    height:24px;
    width:114px;
    background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpDBplNwBa0dTYhphRaqPPvbcRyB8952i0bGMLRdv07bD9D-PDr1LvBWidR3oFR84lRC2isJDYuOTf7wbLcRnrLwI0OODc4Ead-exqk62fz5X6CGCBtO9yaXpfpR7HLlMsapK61beQpA/") no-repeat scroll left top transparent;
    display:block;
    margin-left:380px;
    text-indent:-5000px;
    }

4. Setelah itu cari kode <data:post.body/> kemudian letakkan kode dibawah ini tepat dibawahnya

<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='fb_like_box'>
    <div class='fb_like_top'><a href='' rel='nofollow' target='_new' title='Become a fan'>Become a Fan</a></div>
    <div class='fb_like_button_holder'>
    <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px;height:30px;'/>
    </div>
    </div>
    </b:if>

5. Terakhir, simpat template anda dan lihat hasilnya...

BagaiMana... Gampang Gak?

Oke Selamat Mencoba..

Semoga Tidak Berhasil... Sukurin....