MEMBUAT FLOATING FACEBOOK LIKE BOX VALID HTML 5 DI BLOG BLOGSPOT

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!

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:

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:

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6BUMjTecwEMiogBkj6OY88rwzAObHx5Dq-jDqWIqAke1ohMLT-MSCn7lweIYc_8Li4U3hDDgVNQlUu1Cp7AQiegEYUu94NrDPDUOddzJle-E6UdEBkcrgaSs9hhWUt4-QHXq0P7gvS5U/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. 

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.