Cara Baru Membuat Fanspage Facebook Tampil Melayang di Blog

Pemberitahuan!!

Mohon dengan sangat Untuk Tidak Melakukan Copy-Paste pada Artikel ini. Tindakan tersebut sangat dibenci oleh Blogger. Sehingga Jika Anda melakukan Co-Pas Artikel, kemungkinan besar Blog Anda akan TERHAPUS dari GOOGLE tanpa saya melapor kepada google DMCA. Sayangilah Blog Anda. Terima kasih.

Cara Baru Membuat Fanspage Facebook Tampil Melayang di Blog

Malam ini Saya akan mencoba membagikan Cara Baru Membuat Fanspage Facebook Tampil Melayang di Blog yang sebenarnya adalah cara lama para blogger senior. Tetapi sesuai permintaan dari Sobat NEYZ GROSIR yang menanyakan hal ini, Cara Baru Andie akan menulisnya lagi pada artikel ini

Seperti halnya Menghubungkan Blog dengan Fanspage Facebook, untuk menghubungkan dan membuat halaman penggemar anda tampil di blog, maka anda perlu membuat sebuah halaman penggemar dahulu, lihat di Cara Baru Membuat Fanspage Facebook. Namun jika anda sudah memilikinya, sekarang saatnya melakukan tahapan dibawah ini.

Cara Baru Membuat Fanspage Facebook Tampil Melayang di Blog


1. Login dahulu ke “akun blogger” anda

2. Pilih opsi “Tata Letak”

3. Klik “Tambahkan Gadget” disebelah kanan layar anda
Cara Baru Membuat Fanspage Facebook Tampil Melayang di Blog

4. Setelah muncul menu baru, pilih “HTML/JavaScript”
Cara Baru Membuat Fanspage Facebook Tampil Melayang di Blog1

5. “Copy Paste Kode dibawah ini” kedalam Kotak Widget Tersebut
<style type="text/css">
#topbar{
position:absolute;
padding-left:260px;
background-color: transparancy;
width: 300px;
visibility: hidden;
z-index: 100;
}
</style>
<script type="text/javascript">
var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 30 //set x offset of bar in pixels
var startY = 5 //set y offset of bar in pixels
var verticalpos="fromtop" //enter "fromtop" or "frombottom"
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar").style.visibility="hidden"
}
function staticbar(){
barheight=document.getElementById("topbar").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id){
  var el=d.getElementById(id);
  if (!persistclose || persistclose && get_cookie("remainclosed")=="")
  el.style.visibility="visible"
  if(d.layers)el.style=el;
  el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
  el.x = startX;
  if (verticalpos=="fromtop")
  el.y = startY;
  else{
  el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
  el.y -= startY;
  }
  return el;
}
window.stayTopLeft=function(){
  if (verticalpos=="fromtop"){
  var pY = ns ? pageYOffset : iecompattest().scrollTop;
  ftlObj.y += (pY + startY - ftlObj.y)/8;
  }
  else{
  var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
  ftlObj.y += (pY - startY - ftlObj.y)/8;
  }
  ftlObj.sP(ftlObj.x, ftlObj.y);
  setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("topbar");
stayTopLeft();
}
if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
</script>
<br />
<div class="clear">
</div>
<div id="topbar">
<div style="text-align: right;">
<a href="" onclick="closebar(); return false"><img src="http://4.bp.blogspot.com/-9MWyoN5VsJM/TivTpPyUuhI/AAAAAAAABL0/ldO739MTRBg/s1600/close3.png" /></a></div>
<center>
<div style="background: #fff;">
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like-box href="https://www.facebook.com/Andieshinigamiblogspotcom" width="250" show_faces="true" border_color="" stream="false" header="true"></fb:like-box>
</div>
</center>
</div>

6. Ganti tulisan yang berwarna Hijau dengan “URL Fanspage Facebook” anda, contoh dibawah adalah URL pada Halaman Penggemar blog Cara Baru Andie
Cara Baru Membuat Fanspage Facebook Tampil Melayang di Blog2

7. Klik save dan lihat perubahan yang terjadi. Jika berhasil, maka akan tampak seperti gambar blog saya dibawah ini.
Cara Baru Membuat Fanspage Facebook Tampil Melayang di Blog3

Terkadang templete dan blog seseorang berbeda beda karena sudah ada pengeditan HTML sebelumnya. Jika langkah diatas gagal atau hanya berwarna putih, atau ada juga yang di close tidak bisa, saya sarankan mencoba langkah kedua untuk mengatasinya dalam tutorial cara menampilkan facebook dan twitter melayang di blog

Sekian saja tutorial mudah yang berjudul Cara Baru Membuat Fanspage Facebook Tampil Melayang di Blog. anda juga dapat menjumpai tutorial lain seperti Cara Baru dan Mudah Claim Token Technorati yang fungsinya juga sama, yaitu menaikkan traffik blog anda. Semoga menambah referensi bagi anda yang masih belajar. Saya juga masih belajar jadi tetap keep spirit blogger Indonesia. Terima kasih sudah berkunjung dan Salam berbagi.
Share this article :

24 komentar:

  1. Wahhh, bagus juga Sob. Tapi apa mungkin masih terdapat bug pada script di atas ya? Sebab walaupun sudah saya klik tombol 'Close', kotak penggemar yang terpasang masih saja melayang dengan indahnya menutupi artikel. Sehingga akhirnya saya pun agak terganggun dan kesulitan saat membaca artikelnya.

    ReplyDelete
    Replies
    1. Iya sob, terima kasih, ini kodenya sudah saya perbaiki lagi dan saya tambahi dari twitter sekalian.

      Delete
    2. bro, kog gx ada ya , padahal udah aku masukin dengan langkah benar

      Delete
    3. masak tidak keluar sama sekali sob??
      saya sudah coba lho..
      coba perharikan lagi kode url fb anda dengan benar..
      Jika tetap tidak bisa, gunakan cara yang kedua di
      http://cara-baru-andie.blogspot.com/2013/06/cara-menampilkan-facebook-dan-twitter-melayang-di-blog.html

      Delete
    4. keluar , tapi gx melayang kaya punya kamu,

      cuma nempel di satu tempat

      Delete
    5. Oh iya, sudah melayang sob tapi watu di close error sepertinya..
      Coba buka halaman saya saja di http://cara-baru-andie.blogspot.com/2013/06/cara-menampilkan-facebook-dan-twitter-melayang-di-blog.html , itu yang lebih baru dan fresh tanpa Iframe juga

      Delete
  2. Thanks for ur information,, I've been success for making these... :)

    ReplyDelete
  3. brhasil gan, mksh yaa ^^. tp klau di tekan close, fp'a gk mw ke tutup. cmna tu gan??

    ReplyDelete
    Replies
    1. mungin struktur templetenya beda, ganti dan Coba saja ke cara baru selanjutnya gan, yang sudah ada dalam posting saya diatas ( cara menampilkan FB dan twitter melayang )

      Delete
  4. saya punya jadi, tapi yg keluar mlah FP kmu gan X_X

    ReplyDelete
    Replies
    1. wah yang kode berwarna hijau, ganti dengan alamat FP Anda

      Delete
  5. Sangat keren dan berguna sekali infonya ??

    ReplyDelete
  6. keren mas...
    oia mas, kan udah indah neh, yg mau ane tanyain gmn yah spy fans pagenya ngak nongol di navbar, alnya punya ane udah melayang + nongol jg di navbar...

    Mohon Pencerahannya mas...

    terima kasih sebelumnya.... :)

    ReplyDelete
    Replies
    1. yang di navbar dihapus saja gan lewat edit HTML pada pengaturan templete blog..
      untuk mengetahui kode mana yang akan dihapus, blog anda buka di firefox, kemudian klik kanan FP di navbarnya - pilih inspeksi laman, nanti akan ada kode navbar tersebut
      nah kode itu hapus saja di pengaturan templetenya

      Delete
  7. bro di close kok nggak hilang fans pagenya

    ReplyDelete
    Replies
    1. kalau tidak bisa, coba saja cara yang kedua mas ikhsan, silakan menuju link di paragraf akhir yang tertulis membuat fb dan twitter melayang. pasti berhasil

      Delete
  8. gan udah kucoba tapi yang keluar cuma twitter, facebooknya ga keluar?

    ReplyDelete
    Replies
    1. jangan coba yang kode script diatas sob, buka halaman saya yang lain, nampaknya sudah saya kasih link ke post saya yang lain.. silakan coba lagi.

      Delete
  9. ane coba dulu gan, makasih udah share,,

    ReplyDelete
  10. Segera praktekin ahh...
    Makasih mas andi triknya sangat bermanfaat

    ReplyDelete
    Replies
    1. terima kasih juga sob eko sudah mau mampir ke sini

      Delete
  11. wah keren artikelnya gan....
    mantap dah...

    ReplyDelete

Terima Kasih sudah berkunjung,
Berkomentarlah sesuai dengan yang dibahas dan Jangan Memasukkan LINK yaaa..

Salam Berbagi..

 
Support : Google
Copyright © 2013. Cara Baru Andie - All Rights Reserved
Template Created by Creating Website Published by Kompi Ajaib
Proudly powered by Blogger