Cara Membuat Box facebook Berjalan blog

AA Sciences, Aldi Andreansyah - Cara Membuat Box Fanspage Facebook Berjalan Blog, FB, Box Facebook Berjalan kiri kanan Blog, Widget Efek Box Facebook Berjalan Blog.

Cara Membuat Widget Box Facebook Berjalan Kiri/Kanan Blog - Sebuah widget memang lah sangat berpengaruh sekali dalam mempercantik sebuah tampilan khususnya para pengguna website baik itu blogger , wordpress dan forum website lainnya. Dan tidak lah hanya pengguna nya saja yang sangat senang dengan ada nya tampilan website/blog/wordpress agar cantik bila dipandang melainkan para pengunjung pun sangat antusias sekali jika membahas sebuah adanya penambagan widget baik itu widget sosmed,widget fb,widget fb melayang,widget artikel terbaru bahkan widget like box fb berjalan sekalipun yang alhamdulillah AA Sciences membahas widget box fb berjalan tersebut pada posting an kali ini.

Membahas mengenai sebuah widget sosmed terutama yakni widget facebook berjalan melayang, box like facebook ini sebelumnya hanyalah sebuah box saja yang dimana tampilan pada box facebook ini sangat lah minimalis sehingga sakin minimalis nya box fb ini hanyalah berisi sebuah box kecil , nama fanspage, button/tombol, dan sebuah efek nya yang dimana efek nya tersebut berjalan.

Sebelum kita melakukan sebuah penerapan mengenai Cara Membuat Box Facebook Berjalan Blog yang muncul dengan efek baik atas kanan atau atas kiri tampilan,ada kala nya kita membahas mengenai kelebihan dan kekurangan nya terlebih dahulu jika like box facebook berjalan ini diterapkan.

Kelebihan Terpasang nya Like Box facebook Berjalan ini :

1 . Jika kita memiliki sebuah Fanspage terutama fanspage facebook pasti otomatis jika kita memasang like box pada blog kita yang dimana usahakan blog kita tersebut ramai maka keuntungan yang kita dapat adalah like sebuah fanspage yang berubah secara Drastis, dengan mudah nya yang mengunjungi blog kalian tersebut hanya memencet tombol like page saja maka otomatis sudah terhubung pada situs FP facebook kalian.

2 . Memiliki Tampilan yang minimalis yang dapat menyukai pengunjung yang dimana tidak merasa ribet dengan adanya tampilan like box minimalis facebook ini melainkan sedikit terkesima dengan box like FP yang lucu tersebut hehe.

3 . Like box FP facebook ini bertampil melayang sehingga jika kalian khususnya para pengunjung mengunjungi website/blog/wordpress tersebut tidak usah lah susah² mencari pada bagian mana box tersebut berada sehingga pengunjung dapat me like nya hanya dengan melihat icon tersebut yang otomatis tertera pada layar website kalian.

4 . Like FP facebook ini memiliki ciri khas yang disukai para websiter yakni dengan membantu fitur responsive yang dimana jika kita menggunakan pada fitur desktop (pc,laptop,warnet) dan pada fitur seluler (ponsel) maka otomatis tampilan pada like fp facebook ini tak akan berpindah² pada posisi.

Kekurangan Terpasang nya Like Box facebook Berjalan ini :

1 . Kecepatan Loading/Fast Loading akan sedikit terhambat dengan adanya box like facebook ini di karena kan terdapat fitur seperti HTML, CSS, dan Javascript yang memperlambat kinerja loading blog tersebut.

2 . Kita tidak dapat mengetahui jumlah siapa saja yang menyukai fanspage facebook tersebut baik itu teman kita maupun yang bukan. Jika kalian ingin mengetahui siapa saja yang menyukai fanspage kalian maka kalian dapat mencoba ini

Cara Membuat Widget Fanspage Facebook.

3 . Box like fanspage facebook ini setidaknya sedikit meresahkan para pengunjung yang dimana khususnya pengunjung tersebut ialah yang tidak suka dengan tampilan ruwet melainkan ia suka yang simpel saja.

Nah mungkin hanya sekian saja mengenai kelebihan dan kekurangan nya yang dapat AA Sciences sampaikan mengenai bila Terpasang nya Like Box facebook Berjalan Ini pada website, blog atau wordpress sekalipun.

Oke langsung saja, jika kalian sudah penasaran, simak langsung tutorial nya di bawah ini mengenai Cara Membuat Like Box facebook Berjalan blog .

Cara Membuat like Box Fanspage Facebook Berjalan Blog :

A . Penerapan pada Tata Letak nya :

1 . Pastikan kalian sudahlah Login terlebih dahulu pada akun Blogger kalian.

2 . Tata Letak - > Tambah Gadget - > HTML Javascript .

3 . Masukkan Script HTML di bawah ini tepat pada kolom subject nya yang berada di bawah kedua yang memiliki ruas yang lebar, melainkan bukan judul, untuk judul kosongkan saja, berikut Script HTML nya :

• Script Like Box Fanspage facebook berjalan dari atas ke kanan nya :

<style> #close { float:left; display:inline-block; padding:1px 6px; background:#A0A0A0; cursor:pointer; } 

/*Fixed Facebook Like Box Aldi Andreansyah*/ 

.fb-btn-aldi {background:rgba(1, 0, 1, 0.2);margin:0;padding:0;text-align:center;position:fixed;bottom:1%;right:0.5%;z-index:9999;box-shadow:0 3px 4px #444;border:1px solid #ccc;display:block;-moz-animation:atas 10s;-webkit-animation:atas 10s;animation:atas 10s;} 

.fb-btn-aldi {padding:5px ;color:#fff;font-size:120%;} 

.fb-btn-aldi a:link, .fb-btn-aldi a:visited {color:#ffcc00;} .fb-btn-aldi a:hover {color:#fff;} 

.fb-btn-aldi2{background:rgba(1, 0, 1, 0.3);-moz-animation:kiri 15s;-webkit-animation:kiri 15s;animation:kiri 15s} 

.fb-btn-aldi2 {padding:3px ;color:#fff;font-size:120%;} 

@-webkit-keyframes atas{ from{transform:translate(0px, -2000px)} to{transform:translate(0px,0px)} } @keyframes atas{ from{transform:translate(0px, -2000px)} to{transform:translate(0px,0px)} } @-webkit-keyframes kiri{ from{transform:translate(-30000px, 0px);} to{transform:translate(0px,0px);} } @keyframes kiri{ from{transform:translate(-30000px, 0px);} to{transform:translate(0px,0px);} } </style> <script> window.onload = function(){ document.getElementById('close').onclick = function(){ this.parentNode.parentNode.parentNode .removeChild(this.parentNode.parentNode); return false; }; }; </script><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/sdk.js#xfbml"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <div class="fb-btn-aldi"><span id='close'>x</span> <div class="fb-btn-aldi2"> <div class="fb-page" data-href="https://www.facebook.com/aldiandreansyahfanspageofficial" data-width="200" data-height="125" data-small-header="true" data-adapt-container-width="true" data-hide-cover="true" data-show-facepile="false" data-show-posts="false"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/aldiandreansyahfanspageofficial"><a href="https://www.facebook.com/aldiandreansyahfanspageofficial">Aldi Andreansyah</a></blockquote> </div></div> </div> </div>

• Script Like Box Fanspage facebook berjalan dari atas ke kiri nya :

<style> #close { float:left; display:inline-block; padding:1px 6px; background:#A0A0A0; cursor:pointer; } 

/*Fixed Facebook Like Box Aldi Andreansyah*/ 

.fb-btn-aldi {background:rgba(1, 0, 1, 0.2);margin:0;padding:0;text-align:center;position:fixed;bottom:1%;left:0.5%;z-index:9999;box-shadow:0 3px 4px #444;border:1px solid #ccc;display:block;-moz-animation:atas 10s;-webkit-animation:atas 10s;animation:atas 10s;} 

.fb-btn-aldi {padding:5px ;color:#fff;font-size:120%;} 

.fb-btn-aldi a:link, .fb-btn-aldi a:visited {color:#ffcc00;} .fb-btn-aldi a:hover {color:#fff;} 

.fb-btn-aldi2{background:rgba(1, 0, 1, 0.3);-moz-animation:kiri 15s;-webkit-animation:kiri 15s;animation:kiri 15s} 

.fb-btn-aldi2 {padding:3px ;color:#fff;font-size:120%;} 

@-webkit-keyframes atas{ from{transform:translate(0px, -2000px)} to{transform:translate(0px,0px)} } @keyframes atas{ from{transform:translate(0px, -2000px)} to{transform:translate(0px,0px)} } @-webkit-keyframes kiri{ from{transform:translate(-30000px, 0px);} to{transform:translate(0px,0px);} } @keyframes kiri{ from{transform:translate(-30000px, 0px);} to{transform:translate(0px,0px);} } </style> <script> window.onload = function(){ document.getElementById('close').onclick = function(){ this.parentNode.parentNode.parentNode .removeChild(this.parentNode.parentNode); return false; }; }; </script><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/sdk.js#xfbml"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <div class="fb-btn-aldi"><span id='close'>x</span> <div class="fb-btn-aldi2"> <div class="fb-page" data-href="https://www.facebook.com/aldiandreansyahfanspageofficial" data-width="200" data-height="125" data-small-header="true" data-adapt-container-width="true" data-hide-cover="true" data-show-facepile="false" data-show-posts="false"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/aldiandreansyahfanspageofficial"><a href="https://www.facebook.com/aldiandreansyahfanspageofficial">Aldi Andreansyah</a></blockquote> </div></div> </div> </div>

4 . Terakhir, Pilih menu Simpan dan Silahkan lihat hasilnya pada blog kalian.

Catatan : Ubah Teks berwarna Biru dengan mengganti URL akun Fanspage Facebook kalian, ingat Fanspage !!! Bukan profil.

B . Penerapan pada Mode Template nya :

1 . Pastikan sudah Login terlebih dahulu pada akun Blogger kalian.

2 . Template - > Edit HTML - > CTRL+F lalu cari kode </body> atau jika kalian susah maka kode ini terletak pada bagian paling bawah template .

3 . Jika sudah ditemukan kode </body> pada bagian paling bawahnya tadi, langsung saja kalian Copy Paste kan Script CSS,HTML,Javascript di bawah ini, tepat pada bagian dalam kode </body> tadi :

• Script Like Box Fanspage facebook berjalan dari atas ke kanan nya :

<style> #close { float:left; display:inline-block; padding:1px 6px; background:#A0A0A0; cursor:pointer; } 

/*Fixed Facebook Like Box Aldi Andreansyah*/ 

.fb-btn-aldi {background:rgba(1, 0, 1, 0.2);margin:0;padding:0;text-align:center;position:fixed;bottom:1%;right:0.5%;z-index:9999;box-shadow:0 3px 4px #444;border:1px solid #ccc;display:block;-moz-animation:atas 10s;-webkit-animation:atas 10s;animation:atas 10s;} 

.fb-btn-aldi {padding:5px ;color:#fff;font-size:120%;} 

.fb-btn-aldi a:link, .fb-btn-aldi a:visited {color:#ffcc00;} .fb-btn-aldi a:hover {color:#fff;} 

.fb-btn-aldi2{background:rgba(1, 0, 1, 0.3);-moz-animation:kiri 15s;-webkit-animation:kiri 15s;animation:kiri 15s} 

.fb-btn-aldi2 {padding:3px ;color:#fff;font-size:120%;} 

@-webkit-keyframes atas{ from{transform:translate(0px, -2000px)} to{transform:translate(0px,0px)} } @keyframes atas{ from{transform:translate(0px, -2000px)} to{transform:translate(0px,0px)} } @-webkit-keyframes kiri{ from{transform:translate(-30000px, 0px);} to{transform:translate(0px,0px);} } @keyframes kiri{ from{transform:translate(-30000px, 0px);} to{transform:translate(0px,0px);} } </style> <script> window.onload = function(){ document.getElementById('close').onclick = function(){ this.parentNode.parentNode.parentNode .removeChild(this.parentNode.parentNode); return false; }; }; </script><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/sdk.js#xfbml"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <div class="fb-btn-aldi"><span id='close'>x</span> <div class="fb-btn-aldi2"> <div class="fb-page" data-href="https://www.facebook.com/aldiandreansyahfanspageofficial" data-width="200" data-height="125" data-small-header="true" data-adapt-container-width="true" data-hide-cover="true" data-show-facepile="false" data-show-posts="false"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/aldiandreansyahfanspageofficial"><a href="https://www.facebook.com/aldiandreansyahfanspageofficial">Aldi Andreansyah</a></blockquote> </div></div> </div> </div>

• Script Like Box Fanspage facebook berjalan dari atas ke kiri nya :

<style> #close { float:left; display:inline-block; padding:1px 6px; background:#A0A0A0; cursor:pointer; } 

/*Fixed Facebook Like Box Aldi Andreansyah*/ 

.fb-btn-aldi {background:rgba(1, 0, 1, 0.2);margin:0;padding:0;text-align:center;position:fixed;bottom:1%;left:0.5%;z-index:9999;box-shadow:0 3px 4px #444;border:1px solid #ccc;display:block;-moz-animation:atas 10s;-webkit-animation:atas 10s;animation:atas 10s;} 

.fb-btn-aldi {padding:5px ;color:#fff;font-size:120%;} 

.fb-btn-aldi a:link, .fb-btn-aldi a:visited {color:#ffcc00;} .fb-btn-aldi a:hover {color:#fff;} 

.fb-btn-aldi2{background:rgba(1, 0, 1, 0.3);-moz-animation:kiri 15s;-webkit-animation:kiri 15s;animation:kiri 15s} 

.fb-btn-aldi2 {padding:3px ;color:#fff;font-size:120%;} 

@-webkit-keyframes atas{ from{transform:translate(0px, -2000px)} to{transform:translate(0px,0px)} } @keyframes atas{ from{transform:translate(0px, -2000px)} to{transform:translate(0px,0px)} } @-webkit-keyframes kiri{ from{transform:translate(-30000px, 0px);} to{transform:translate(0px,0px);} } @keyframes kiri{ from{transform:translate(-30000px, 0px);} to{transform:translate(0px,0px);} } </style> <script> window.onload = function(){ document.getElementById('close').onclick = function(){ this.parentNode.parentNode.parentNode .removeChild(this.parentNode.parentNode); return false; }; }; </script><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/sdk.js#xfbml"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <div class="fb-btn-aldi"><span id='close'>x</span> <div class="fb-btn-aldi2"> <div class="fb-page" data-href="https://www.facebook.com/aldiandreansyahfanspageofficial" data-width="200" data-height="125" data-small-header="true" data-adapt-container-width="true" data-hide-cover="true" data-show-facepile="false" data-show-posts="false"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/aldiandreansyahfanspageofficial"><a href="https://www.facebook.com/aldiandreansyahfanspageofficial">Aldi Andreansyah</a></blockquote> </div></div> </div> </div>

4 . Terakhir, Pilih menu Simpan Template dan lihat hasilnya.

Catatan : Ubah Teks berwarna Biru dengan mengganti URL akun Fanspage Facebook kalian, ingat Fanspage !!! Bukan profil.

Oke mungkin hanya cukup sekian mengenai pembahasan Cara Membuat like box fanspage facebook Box Facebook Berjalan Blog dari kiri atau kanan atas yang dapat AA Sciences sampaikan, semoga bermanfaat dan sekaligus menambah wawasan mengenai penambahan Membuat nya Box Facebook Berjalan Blog dari kiri atau kanan ini ini, Amin.

Share this post