Weblog Kumpulan Tugas, Kumpulan Makalah, Tutorial Blogger, Info SEO, Tips & Trick.

Cara Memasang Fanspage Facebook Melayang di Blog

Cara Memasang Fanspage Facebook Melayang di Blog

Fanspage facebook melayang di blog

Membuat fanspage Facebook melayang di blog terbaru 2014 dengan tampilan lebih keren dan elegan di mata pengunjung dan sudah valid HTML5. Tidak seperti pada postingan saya yang lalu tentang cara memasang fanspage Facebook di blog, pada kesempatan kali ini saya akan memberikan tutorial tentang cara memasang atau membuat fanspage Facebook melayang di blog. Widget yang akan saya bagikan ini sudah diberi efek melayang, jadi Anda tidak perlu khawatir widget ini nantinya akan memakan space yang besar di blog anda.

Berikut adalah langkah-langkahnya :
1. Login ke akun blog Anda
2. Pilih Tata Letak
3. Kemudian Klik Tambahkan Gadget => Pilih HTML/javascript.
4. Copy Kode di bawah ini dan pastekan di HTML/javascript tadi. kemudian simpan/save !!!
<style type='text/css'>
   #kotak-facebook {
position:fixed !important;
position:absolute;
bottom:-1000px;
left:50%;
margin:0px 0px 130px -182px;
width:auto;
height:auto;
padding:16px;
box-shadow: 0px 0px 7px #222;
background-color:#FFFFFF; font:normal 1em Cambria,Georgia,Serif;
color:#111;
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;
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
border-radius:10px;
cursor:pointer;
}
</style>
<script src='http://tugasku4u.googlecode.com/files/tombol-close-menu.js'/></script>
<div id='kotak-facebook'>
<font size="3"><b>Bantu Like Dong Sobat... ^_^</b></font size>
<br/>
<div class="fb-like-box" data-href="http://www.facebook.com/tugasku4u" data-width="292" data-height="250" data-show-faces="true" data-stream="false" data-header="false"></div><a class='close' href='#'>&times;</a></div>
Keterangan:
#FFFFFF = ganti dengan warna background yang Anda sukai
Bantu Like Dong Sobat... ^_^ = ganti dengan kata-kata yang Anda sukai
http://www.facebook.com/tugasku4u = ganti dengan URL Fanspage sobat.

5. Simpan, kemudian pilih Template => Edit Template
6. Cari kode <body>, Untuk mempermudah mencari silahkan tekan ctrl+F pada keyboard dan silahkan tulis kode di atas.
7. Setelah dapat, copy dan letakkan kode di bawah ini tepat di bawah kode <body>. Anda bisa melihat contohnya pada gambar di bawah...
<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>

Memasang Fanspage Facebook Melayang di Blog

Keterangan:
Kode di atas ditambah jika Anda belum memasang Fanspage pada sidebar blog Anda, tapi jika sudah... abaikan saja.
Jika ada yang kurang dimengerti, silahkan berkomentar di blog ini....
8. Simpan template Anda, Selesai... lihat blog Anda !!!

Semoga postingan Tutorial ini bisa bermanfaat bagi teman-teman blogger semua...
Baca juga Cara melaporkan blog copas ke Google
. Jika Anda masih ingin membaca Tutorial dan Tips Blog seperti diatas, silahkan buka DAFTAR ISI di blog ini. Terima kasih...

Tolong bantu saya klik Tombol Vote ini...


Irfandy Rahman | | 49 komentar

49 komentar

kalau ditambahin Follow Twitter caranya gimana ya?? Thx..

Balas

Itu ditambahin lagi kode script gan, dilain waktu saya akan bahas... :)

Balas

Matur nuwun gan... saya dapat tambahan ilmu hari ini setelah baca postingannya.

Balas

Gan, ko ane gak bisa ya gan ?

Balas

Agan sudah pasang kode fanspagenya tidak di template blog sobat ???

Balas

koq ane malah keluat tombol X doang???

Balas

Tutorial di atas berhasil jika sudah memasang script Facebook pada template, jika belum memasang coba baca tutorial di atas dengan judul cara memasang like fanspage FB di blog.

atau

Mungkin alamat fanspagenya salah gan...
coba diperhatikan baik2...

Balas

gan kalau ganti warna lai apa kode nya

Balas

Anda bisa melihat kode-kode warna lain di artikel terkait di atas dengan judul "Daftar Kode Warna HTML Pada Blog". Terima kasih....

Balas

gan saya baru belajar di sekolah tentang pemprogaman dasar tolong dibanttu ya! :)

Balas

Oke gan, siap... rajin-rajin saja berkunjung di blog ini. ^_^

Balas

gan, kok gak mau melayang ya ? kok cuma rombol x aja yg kluar ?

Balas

Coba di tambahkan kode yang kedua di atas gan....

Balas

kasih Fotonya dong gan , yg kode dibawah < body > itu .

Balas

Siiipp gan... saya sudah tambahkan fotonya. silahkan dilihat..!!!

Balas

Gan Bagaimana cara bikin kategori sprti blog agan??
mohon bantuannya
saya butuh buat tugas kuliah

Balas

Kategori atau biasa disebut Label, itu cara bikinnya pada saat kita buat postingan gan... Ada pilihan disebelah kiri monitor Anda. disitu ada pilihan LABEL. klik disitu dan buat Label tentang postingan apa yang Anda buat sekarang.

Balas

kok yg ane tetep ga ada ya ?
Tolong isiin kayak gtu dong. ini gw yg twitter nya @reezarenaldy

Balas

Mohon maaf gan... mungkin isi dari template kita berbeda, makanya kode di atas tidak ada di template sobat... atau Anda coba cari kata < /script > dan letakkan kode kedua di atas di bawahnya..!!!

Balas

Gan kalo ditambahin Follow Twitter nya gmna gan ?

Balas

Nanti saya akan bahas gan di blog ini, cara memasang like fanspage FB dengan tombol follow Twitter.

Balas

Mantap gan, tapi yang keluar cuman bantu like doang boxnya gak ada

Balas

Mungkin template blog sobat tidak cocok dengan script ini gan...

Balas

Klik Tambahkan Gadget => Pilih HTML/javascript., ko pas yang diklik disini ga muncul pilih html gan ?

Balas

Wahhh... kok bisa, berarti blogger lagi bermasalah gan.

Balas

gan,kok pas kau nyari kode head gak ada ya ????
paling nemu kode /head

Balas

Setiap ada /head pasti ada head-nya gan, letaknya biasanya kurang lebih dari baris ke 10, cari di bagian paling atas template saja.

Balas

Gan Di Blog Ane Hanya Muncul Tulisan Nya Aja Ama Tanda Exit ( X ) Like Box Nya Tidak Keluar Ni Screenshot Nya Gan : http://prntscr.com/24zcnr Mohon Pencerahan/Solusi Nya Gan

Balas

Mungkin kode kedua diatas belum terpasang gan, atau salah penempatannya... coba lebih diteliti lagi... :)

Balas

Kalau Nambahin Twitter Dan Google + Di Fanz Page Facebook nya gimana gan atau cara nyatuin Fanz Page yg terdiri atas Fanz Page Fb Twitter Goggle +

Balas

kk saya sudah ngelakuin yang kk post
tapi kok gak muncul ya
mohon bantuannya donk...

Balas

Perhatikan baik-baik penempatan kode nomor 2 diatas gan...

Balas

gan, untuk apa template yg pas utk cara ini gan? karena "body" gak ada di edit html ane gan.. tamplate nya apa gan yg ada kode itu?

Balas

Silahkan search di blog ini gan, karena saya juga nyediain template.

Balas

makasih ilmunya mas :) mampir disini

Balas

kok gak bisa sih gan? :( mohon bantuannya >.<

Balas

Coba lebih di teliti penempatan kode kedua di atas gan...

Balas

terima kasih atas informasinya broh..

Balas

informasinya sangat membantu saya yang masih pemula gan..!!

Balas

gan, ane dah berhasil.cuma mau tanya nih, kalau letaknya biar di kanan bawah gimana

Balas

Cari kode ini : margin: 0px 0px 130px -182px;
Kalau sudah ketemu, silahkan atur sesuai keinginan...

Balas

Menarik untuk di coba...gan

Balas

kok saya nggak ada kode body di template//?????

Balas

Komentar yang menyertakan link aktif, iklan, atau titip link, akan dimasukan ke folder SPAM.

Previous Posts Next Posts Homepage