Cara Membuat Kotak Like Facebook Menarik Di Blog

Cara Membuat Kotak Like Facebook Menarik Di Blog. Ini adalah salah satu widget yang bisa melayang di blog. Melayang disini bukan seperti burung twitter. Tetapi bisa berjalan mengikuti arah halaman yang berada dibawahnya jika di scroll. Cara ini memang cocok untuk menghis blog anda agar lebih menarik. Supaya lebih cepat membuatnya, anda harus sudah mempunyai FP atau Fans Page di Facebook. Jika belum punya, baca di Cara Membuat Fan Page Facebook.

Like Box Jona Rendra

Kurang lebih seperti diatas lah kotak like facebook menarik yang akan tampil di blog anda. Tapi itu FP punya saya. Kalau anda ingin harus mempunyai HTML Fans Page anda. Jebih jelas mengenai cara membuat atau memasang widget yang menarik ini, silahkan anda simak pada tutorial dibawah ini.

Cara Membuat Kotak Like Facebook Menarik Di Blog

1. Login ke akun blogger anda, pada dashboard pilih blog anda lalu masuk ke Tata Letak
2. Klik tambah gadget pada kolom yang mana saja. Karena widget ini melayang dan tidak menempel pada kolom widget
3. Cari, lalu pilih widget yang bernama HTML/Javascript
4. Copy kode dibawah ini lalu editlah sendiri sesuai ketentuan ketentuan dibawah.
<style type='text/css'>

#like-facebook {

position:fixed !important;

position:absolute; /* IE6 */

bottom:-1000px;

right:10%;

margin:0px 0px 0px -182px;

width:auto;

height:auto;
padding:16px;
-webkit-box-shadow: 0px 0px 7px #222;
-moz-box-shadow: 0px 0px 7px #222;
box-shadow: 0px 0px 7px #222; background-color:#E3E3E3; font:normal 1em Cambria,Georgia,Serif;
color:#111;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomright: 20px;
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;}
#kotak-facebook a.close {
position:absolute;
top:-10px;
right:-10px;
background:#333;
font:bold 16px Arial,Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:#fff;
border:2px solid #fff;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
cursor:pointer;
}
</style>
<script src='https://jonarendra.googlecode.com/files/Tombol-Close-Jona-Rendra.js'/></script>
<div id='kotak-facebook'>
<font size="3"><b>Bantu saya untuk klik like ya...</b></font size>
<br/>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/id_ID/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like-box" data-href="http://www.facebook.com/jonarendra" data-width="292" data-height="400" data-show-faces="true" data-stream="false" data-border-color="green" data-header="true"></div>
<a class='close' href='#'>&times;</a></div>
Keterangan :
  • Kalimat yang berwarna biru bisa anda ganti dengan kalimat yang muncul diatas kotak like facebook nantinya 
  • Rangkaian kode HTML yang berwarna merah ini harus anda ganti dengan kode like facebook anda sendiri
Kode yang merah itu adalah kode Like Box punya saya. Kalau anda mau mudah, edit saja jonarendra di www.facebook.com/jonarendra dengan nama fans page anda. Apabila anda ingin editan sendiri, anda harus mendapatkan HTML nya di Cara Mengetahui Kode HTML Fans Page Facebook.

5. Klik Save/Simpan

Kode HTML diatas sudah dilengkapi dengan CSS dan tombol close. Supaya tampilannya jadi lebih menarik maka saya tambahkan atribut atribut tersebut. Mau melihat live preview nya? Buka HTML Editor, lalu paste dan preview.

Bagaimana? apakah anda sudah berhasil membuat like facebook yang menarik? Sekian dulu postingan Cara Cara saya yang berjudul Cara Membuat Kotak Like Facebook Menarik Di Blog, semoga bermanfaat untuk anda dan jika ada pertanyaan silahkan poskan komentar.

19 comments for "Cara Membuat Kotak Like Facebook Menarik Di Blog"

  1. bermanfaaat sekali gan,,,,silahkan berkunjung balik di blog saya
    http://dhanicyx.blogspot.com

    ReplyDelete
  2. makasih atas ilmunya ,jadi tambah pengetahuan nih.

    ReplyDelete
    Replies
    1. owh, iya sama sama
      makasih juga sudah berkunjung

      Delete
  3. This comment has been removed by a blog administrator.

    ReplyDelete
  4. biar melayang caranya gimana Gan. . .

    ReplyDelete
    Replies
    1. kalau kode script diatas sudah terpasang, kalo blognya dibuka pasti langsung muncul melanyang

      Delete
  5. isin cobain cara membuat nya sob, thanks infonya

    ReplyDelete
    Replies
    1. ya sama sama
      makasih juga sudah berkomentar di artikel saya yang berjudulCara Membuat Kotak Like Facebook Menarik Di Blog

      Delete
  6. Sukses gan, Ane udh pasang di blog ane...
    Makasih... ^_^

    ReplyDelete
  7. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. sudah di coba tapi tak bisa di buka untuk di Like

      Delete
    2. masak tidak bisa?
      coba hapus lalu pasang ulang lagi

      Delete
  8. caranya mangganti kode dengan kode like gimana terdapat dimana kode like itu aya buka diprofil fane page saya kok adanya kode uRL diatas cuma ini

    https://www.facebook.com/SDITPRACI?ref=hl please balas

    ReplyDelete
    Replies
    1. -_- URL beda dengan kode HTML
      kalau kode HTML fans page anda bisa dapatkan dengan membaca postingan Cara Mengetahui Kode HTML Facebook Page

      Delete
  9. Terimakasih sob, tutorialnya.. Berguna buat ane.. :)

    ReplyDelete

Post a Comment

Berkomentarlah dengan baik dan benar, dilarang SPAM!
Tata Tertib Berkomentar