« »

ADD FLOATING FACEBOOK LIKE BOX VALID HTML 5 IN BLOGSPOT OR BLOGGER


Membuat floating facebook like box valid html 5 di blog blogspot (blogger) - Apa sih floating facebook like box? Saya sedikit kesulitan untuk menggambarkan floating facebook like box dengan kata-kata. Supaya tidak salah paham langsung lihat penampakan dari floating facebook like box. 

Ini nih yang dinamakan floating facebook like box. Perhatikan yang ditunjuk tanda panah!
CARA MEMBUAT FLOATING FACEBOOK LIKE BOX VALID HTML 5 - febrikasetiyawan.com
Gambar 1: floating facebook like box fs
Menarik bukan untuk memberikan sentuhan di blog?

Keunggulan Floating Facebook Like Box ini.
Floating facebook like box yang saya share ini sedikit berbeda dari yang ada di tempat-tempat lain. Keunggulan dari Floating facebook like box di sini adalah sudah valid dengan HTML 5. Script (Coding) floating facebook like box ini bukan murni buatan saya, saya hanya melakukan pengeditan sedikit dari script aslinya (red-punya bang ismet) untuk menghasilkan script yang valid (red-memenuhi persyaratan) HMTL 5. 


Panduan pemasangan di blog
Berikut langkah-langkah pemasangan floating facebook like box di blog Anda:

1. Pastikan Anda sudah memiliki blog di blogspot atau blogger dan login atau masuk atau membuka akun blog Anda. Belum punya akun blog di blogspot atau blogger, Silakan klik DI SINI.

2. Masuk ke bagian Layout (Tata Letak). Lokasi bagian layout (Tata Letak) ini ada di barisan Ikhtisar, Pos (Post), Laman (page), etc. Untuk lebih jelasnya perhatikan gambar berikut:
MEMBUAT FLOATING FACEBOOK LIKE BOX VALID HTML 5 DI BLOG BLOGSPOT febrikasetiyawan.com
Gambar 2: Layout (Tata Letak)

3. Setelah halaman layout (tata letak) muncul, pilih atau klik "tambah gadget" atau "add gadget". Kemudian cari tulisan "HTML/JavaScript", lalu klik tulisan tersebut. Untuk lebih jelasnya perhatikan gambar berikut:
MEMBUAT FLOATING FACEBOOK LIKE BOX VALID HTML 5 DI BLOG BLOGSPOT febrikasetiyawan.com
Gambar 3: Tambah HTML/ JavaScript
4. Copy dan masukkan script (coding) berikut ke kotak HTML/ JavaScript yang muncul setelah mengklik HTML/JavaScript pada langkah nomor 3. Klik DI SINI untuk mendownload script (coding) di bawah ini.

<!--www.febrikasetiyawan.com-->
<style type="text/css" scoped>
.floatinglikebox{background:url(http://3.bp.blogspot.com/-VXmAJdQRHJ8/Tra8E16fZGI/AAAAAAAAClg/o5M632x9qX8/s1600/floatingfb.png) no-repeat scroll left center transparent!important;display:block;float:right;height:270px;padding:0 5px 0 40px;position:fixed;right:-250px;top:20%;width:245px;z-index:99999}.floatinglikebox div{border:none;display:block;position:relative}.floatinglikebox span{bottom:10px;font:10px tahoma,verdana,arial,sans-serif;position:absolute;right:6px;text-align:right;z-index:99999}.floatinglikebox span a{color:gray;text-decoration:none}.floatinglikebox span a:hover{text-decoration:underline}
</style>
<script type="text/javascript">$(document).ready(function(){$(".floatinglikebox").hover(function(){$(this).stop().animate({right:"0"},"medium")},function(){$(this).stop().animate({right:"-250"},"medium")},500)});</script>

<div class="floatinglikebox" style=""><div><iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Ffebrikasetiyawancom&amp;width=251&amp;height=270&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23cccccc&amp;stream=false&amp;header=false&amp;appId=159468740772399" style="border:none; overflow:hidden; width:251px; height:270px; background:#fff;"></iframe><span><a href="http://www.febrikasetiyawan.com/2014/03/membuat-floating-facebook-like-box-valid-html-5-di-blog-blogspot.html" target="_blank">Facebook Like Box</a></span></div></div>
<!--www.febrikasetiyawan.com-->


5. Perhatikan script (coding) diatas! Yang diberi tanda kuning, silakan diganti atau sesuaikan dengan username fans page facebook atau halaman fans facebook Anda

Contoh di atas merupakan username fans page facebook atau halaman fans facebook saya febrikasetiyawan.com yang beralamat asli
https://www.facebook.com/febrikasetiyawancom

Untuk lebih jelasnya perhatikan gambar berikut: Perhatikan yang ditunjuk tanda panah. Yang dimaksudkan username fans page facebook atau halaman fans facebook adalah yang ditunjuk tanda panah tersebut. Username username fans page facebook atau halaman fans facebook saya ini adalah febrikasetiyawan.com. Silakan diganti atau sesuaikan dengan username fans page facebook atau halaman fans facebook Anda. 
MEMBUAT FLOATING FACEBOOK LIKE BOX VALID HTML 5 DI BLOG BLOGSPOT febrikasetiyawan.com
Gambar 4: Username Fans Page Facebook fs

Masih bingung dengan username fans page facebook Anda?
Perhatikan contoh berikut:
Misal alamat fans page facebook Anda

https://www.facebook.com/blogorangcakep

JADI username fans page facebook Anda adalah blogorangcakep

6. Jangan lupa, Klik SAVE setelah langkah-langkah di atas dilakukan.



Selamat Mencoba dan semoga berhasil!



NB: Script (Coding) di atas sudah saya uji di blog saya, dan hasilnya berfungsi dengan baik. Buktinya bisa Anda lihat di gubug saya ini febrikasetiyawan.com. Jika tidak berfungsi, silakan tambahkan script berikut di atas </head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript">
</script>

KLIK DISINI untuk mendownload script (coding) di atas INI.




TAMBAHAN WAWASAN

Apa yang dimaksud HTML5?
Menurut w3schools.com, yang dimaksud HTML5 adalah sebuah standar terbaru pada aturan HTML. Bahasa awamnya adalah generasi terbaru dari perkembangan HTML dan HTML5 ini biasa disebut penyempurnaan dari HTML.

Categories: ,

6 komentar

Silakan, di coba mas :salaman

Iya gan, silakan di coba. Jika ada problem, jangan sungkan2 ditanyakan :cendol

Komentar akan OTOMATIS DIHAPUS jika memberikan komentar mengandung iklan, link aktif, dan perkataan yang tidak sopan. Terima Kasih ^_^