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 :
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='#'>×</a></div>
#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.
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>
<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>
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...
| 9:28 PM |
48
komentar
48 komentar
kalau ditambahin Follow Twitter caranya gimana ya?? Thx..
BalasItu ditambahin lagi kode script gan, dilain waktu saya akan bahas... :)
Balasijin kopas pak,makasih
BalasMatur nuwun gan... saya dapat tambahan ilmu hari ini setelah baca postingannya.
BalasGan, ko ane gak bisa ya gan ?
BalasAgan sudah pasang kode fanspagenya tidak di template blog sobat ???
Balaskoq ane malah keluat tombol X doang???
BalasTutorial 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.
Balasatau
Mungkin alamat fanspagenya salah gan...
coba diperhatikan baik2...
gan kalau ganti warna lai apa kode nya
BalasAnda bisa melihat kode-kode warna lain di artikel terkait di atas dengan judul "Daftar Kode Warna HTML Pada Blog". Terima kasih....
Balasgan saya baru belajar di sekolah tentang pemprogaman dasar tolong dibanttu ya! :)
BalasOke gan, siap... rajin-rajin saja berkunjung di blog ini. ^_^
Balasgan, kok gak mau melayang ya ? kok cuma rombol x aja yg kluar ?
BalasCoba di tambahkan kode yang kedua di atas gan....
Balaskasih Fotonya dong gan , yg kode dibawah < body > itu .
Balasyg ane ga ada gan -_-
BalasSiiipp gan... saya sudah tambahkan fotonya. silahkan dilihat..!!!
BalasGan Bagaimana cara bikin kategori sprti blog agan??
Balasmohon bantuannya
saya butuh buat tugas kuliah
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.
Balaskok yg ane tetep ga ada ya ?
BalasTolong isiin kayak gtu dong. ini gw yg twitter nya @reezarenaldy
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..!!!
BalasGan kalo ditambahin Follow Twitter nya gmna gan ?
BalasNanti saya akan bahas gan di blog ini, cara memasang like fanspage FB dengan tombol follow Twitter.
Balaskeren amat gan,, salut gue
BalasMantap gan, tapi yang keluar cuman bantu like doang boxnya gak ada
BalasMungkin template blog sobat tidak cocok dengan script ini gan...
BalasKlik Tambahkan Gadget => Pilih HTML/javascript., ko pas yang diklik disini ga muncul pilih html gan ?
BalasWahhh... kok bisa, berarti blogger lagi bermasalah gan.
BalasSetiap ada /head pasti ada head-nya gan, letaknya biasanya kurang lebih dari baris ke 10, cari di bagian paling atas template saja.
Balasmantab gan !
BalasGan 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
BalasMungkin kode kedua diatas belum terpasang gan, atau salah penempatannya... coba lebih diteliti lagi... :)
BalasKalau Nambahin Twitter Dan Google + Di Fanz Page Facebook nya gimana gan atau cara nyatuin Fanz Page yg terdiri atas Fanz Page Fb Twitter Goggle +
Balasbnyak juga kodenya gan
Balaskk saya sudah ngelakuin yang kk post
Balastapi kok gak muncul ya
mohon bantuannya donk...
Perhatikan baik-baik penempatan kode nomor 2 diatas gan...
Balasgan, 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?
BalasSilahkan search di blog ini gan, karena saya juga nyediain template.
Balasmakasih ilmunya mas :) mampir disini
Balaskok gak bisa sih gan? :( mohon bantuannya >.<
BalasCoba lebih di teliti penempatan kode kedua di atas gan...
Balasterima kasih atas informasinya broh..
Balasgan, ane dah berhasil.cuma mau tanya nih, kalau letaknya biar di kanan bawah gimana
BalasCari kode ini : margin: 0px 0px 130px -182px;
BalasKalau sudah ketemu, silahkan atur sesuai keinginan...
Menarik untuk di coba...gan
Balaskren abis gan
Balaskok saya nggak ada kode body di template//?????
Balaswah mantap udh test work gan :D Thanks
BalasKomentar yang menyertakan link aktif, iklan, atau titip link, akan dimasukan ke folder SPAM.