Friday, 14 June 2013

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.

KATEGORI:
arrow_back
arrow_forward

20 komentar

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

makasih atas ilmunya ,jadi tambah pengetahuan nih.

This comment has been removed by a blog administrator.

owh, iya sama sama
makasih juga sudah berkunjung

biar melayang caranya gimana Gan. . .

kalau kode script diatas sudah terpasang, kalo blognya dibuka pasti langsung muncul melanyang

isin cobain cara membuat nya sob, thanks infonya

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

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

owh begitu
makasih ya sudah sempat berkomentar

This comment has been removed by the author.

sudah di coba tapi tak bisa di buka untuk di Like

masak tidak bisa?
coba hapus lalu pasang ulang lagi

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

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

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

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