/ / Cara Membuat Like Box Facebook Melayang 2016

Cara Membuat Like Box Facebook Melayang 2016

Edit

Cara Membuat Like Box Facebook Melayang

Pop up Facebook
Klik Gambar untuk Memperbesar
Gak kerasa bentar lagi Tahun Baru 2014 nih, maaf yah pembaca saya baru bisa update lagi. Kemarin saya habis pindah kerja ke Kantor lama saya dan langsung disuruh jadi Kuli IT, so pembaca bisa bayangin gimana sibuknya kalo jadi kuli *alesan* :p
Gak pake lama dan basa-basi, pada kesempatan kali ini saya akan buat tutorial cara membuat like box melayang pada Blog sobat. Tutorial ini khusus untuk Blogspot aka Blogger.com yah, so kalo blog kalian menggunakan wordpress tunggu aja tutorial dari saya ya :)
Langsung aja berikut cara bikin kotak like facebook melayang :
1. Login ke halaman dashboard blogger kamu.
2. Setelah berada dalam halaman dashboard kamu, silahkan pilih salah satu blog yang ingin kamu sisipkan kotak like facebook melayangnya :
Cara Agar Artikel Tidak Bisa di Copy Paste Untuk Blogspot
Klik Gambar untuk Memperbesar
3. Setelah mengikuti langkah 2, selanjutnya klik “Tata Letak” yang berada pada sisi kiri.
tata letak
Klik Gambar untuk Memperbesar
4. Setelah melakukan langkan no.3 , kamu akan melihat layout blog kamu seperti contoh blog saya ini :
Tambah Gadget
Klik Gambar untuk Memperbesar
Klik “Tambah Gadget” maka akan keluar Pop-up window, lalu klik “HTML/Javascript” seperti yang ditunjukan tanda panah di bawah :
gadget pop up
Klik Gambar untuk Memperbesar
Lalu akan tampil window berikut :
konfigurasi HTML
Klik Gambar untuk Memperbesar

Selanjutnya copy paste kode berikut ke dalam kotak yang ditunjukan oleh panah di atas :
<style type='text/css'>
/* Message Box */
#box-message {
position:fixed !important;
position:absolute;
top:-1000px;
left:50%;
margin:0px 0px 0px -182px;
width:300px;
height:auto;
padding:16px;
background:#fff;
font:normal Dosis, Georgia, Serif;
color:#111;
border:2px solid #333;
-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;
}
#box-message a.close {
position:absolute;
top:-10px;
right:-10px;
background:#fff;
font:bold 16px Arial, Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:#111;
border:2px solid #333;
-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:22px;
-moz-border-radius:22px;
border-radius:22px;
cursor:pointer;
}
#twitterx {
background: #EEF9FD;
padding: 10px;
text-align:center;
border: 1px solid #C7DBE2;
border-top: 0;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type='text/javascript'>
$(window).bind("load", function() {
// Animate Top Value When Page Loaded Completed
$('#box-message').animate({top:"50px"}, 1000);
// Remove Mailbox When Close Button On Click
$('a.close').click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id='box-message'>
<!-- HTML Start -->
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/urlpagekamudisini?ref=hl&amp;width=292&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false&amp;appId=371524026202784" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowtransparency="true"></iframe>
</center>
<!-- HTML End -->
<a class='close' href='#'>&times;</a>
</div>
5.  Ganti tulisan https://www.facebook.com/urlpagekamudisini dengan URL Facebook Fanpage kamu.
6. Klik “Simpan”
Pop up Facebook
Klik Gambar untuk Memperbesar
Gak kerasa bentar lagi Tahun Baru 2014 nih, maaf yah pembaca saya baru bisa update lagi. Kemarin saya habis pindah kerja ke Kantor lama saya dan langsung disuruh jadi Kuli IT, so pembaca bisa bayangin gimana sibuknya kalo jadi kuli *alesan* :p
Gak pake lama dan basa-basi, pada kesempatan kali ini saya akan buat tutorial cara membuat like box melayang pada Blog sobat. Tutorial ini khusus untuk Blogspot aka Blogger.com yah, so kalo blog kalian menggunakan wordpress tunggu aja tutorial dari saya ya :)
Langsung aja berikut cara bikin kotak like facebook melayang :
1. Login ke halaman dashboard blogger kamu.
2. Setelah berada dalam halaman dashboard kamu, silahkan pilih salah satu blog yang ingin kamu sisipkan kotak like facebook melayangnya :
Cara Agar Artikel Tidak Bisa di Copy Paste Untuk Blogspot
Klik Gambar untuk Memperbesar
3. Setelah mengikuti langkah 2, selanjutnya klik “Tata Letak” yang berada pada sisi kiri.
tata letak
Klik Gambar untuk Memperbesar
4. Setelah melakukan langkan no.3 , kamu akan melihat layout blog kamu seperti contoh blog saya ini :
Tambah Gadget
Klik Gambar untuk Memperbesar
Klik “Tambah Gadget” maka akan keluar Pop-up window, lalu klik “HTML/Javascript” seperti yang ditunjukan tanda panah di bawah :
gadget pop up
Klik Gambar untuk Memperbesar
Lalu akan tampil window berikut :
konfigurasi HTML
Klik Gambar untuk Memperbesar

Selanjutnya copy paste kode berikut ke dalam kotak yang ditunjukan oleh panah di atas :
<style type='text/css'>
/* Message Box */
#box-message {
position:fixed !important;
position:absolute;
top:-1000px;
left:50%;
margin:0px 0px 0px -182px;
width:300px;
height:auto;
padding:16px;
background:#fff;
font:normal Dosis, Georgia, Serif;
color:#111;
border:2px solid #333;
-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;
}
#box-message a.close {
position:absolute;
top:-10px;
right:-10px;
background:#fff;
font:bold 16px Arial, Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:#111;
border:2px solid #333;
-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:22px;
-moz-border-radius:22px;
border-radius:22px;
cursor:pointer;
}
#twitterx {
background: #EEF9FD;
padding: 10px;
text-align:center;
border: 1px solid #C7DBE2;
border-top: 0;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type='text/javascript'>
$(window).bind("load", function() {
// Animate Top Value When Page Loaded Completed
$('#box-message').animate({top:"50px"}, 1000);
// Remove Mailbox When Close Button On Click
$('a.close').click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id='box-message'>
<!-- HTML Start -->
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/urlpagekamudisini?ref=hl&amp;width=292&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false&amp;appId=371524026202784" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowtransparency="true"></iframe>
</center>
<!-- HTML End -->
<a class='close' href='#'>&times;</a>
</div>
5.  Ganti tulisan https://www.facebook.com/urlpagekamudisini dengan URL Facebook Fanpage kamu.
6. Klik “Simpan”

THANKS TO BLOG SEOCIPS :)
Share on Google Plus

Pesan Cahya WebShop

TERIMKASIH SUDAH MENGUNJUNGI BLOG KAMI DAN JANGAN LUPA UNTUK TINGGALKAN KOMENTAR DI BAWAH INI YA.

2 komentar:

  1. Cahya WebShop6 April 2016 at 18:46

    Terimakasih Atas kunjungan Anda :)

    ReplyDelete
  2. Anonymous27 April 2022 at 04:17

    Cara Membuat Like Box Facebook Melayang 2016 - Budiawan-Dark >>>>> Download Now

    >>>>> Download Full

    Cara Membuat Like Box Facebook Melayang 2016 - Budiawan-Dark >>>>> Download LINK

    >>>>> Download Now

    Cara Membuat Like Box Facebook Melayang 2016 - Budiawan-Dark >>>>> Download Full

    >>>>> Download LINK VF

    ReplyDelete

Subscribe to: Post Comments ( Atom )

Total Pengunjung