Box Facebook Berjalan Ala Mastamvan

AA Sciences, Aldi Andreansyah - Box Facebook Berjalan, Box Facebook Berjalan Blog Ala Mastamvan, Box Facebook Berjalan bawah kanan blog.

Sebelum²nya AA Sciences pun alhamdulillah sudah membahas widget serupa yakni box facebook berjalan pula yang dimana box facebook tersebut terdapat efek slide dari atas kanan,kiri ke bawah dan ada pula membahas box berjalan ala seocips yang dimana box tersebut hanya memilki fitur tombol like nya saja sehingga dapat mengurangi beban loading (minimalis).

Baca :

• Box Facebook Berjalan Atas ke Bawah
• Box Facebook Berjalan Ala Seocips

Sebuah penambahan suatu widget adalah salah satu hal yang membuat agar tampilan sebuah web/blog tampil cantik dengan adanya widget yang di tambahkan maka sebagian besar akan mengikat para pengunjung dengan adanya widget tersebut.

Salah satu membuat nya widget yakni dengan adanya box facebook berjalan yang dimana box facebook berjalan ini sangat lah cocok sekali di terapakan untuk tampilan sebuah web maupun blog agar sebuah fanspage menambah like dengan adanya like button facebook berjalan tersebut.

Box Facebook berjalan kali ini sangat lah cocok sekali menurut AA Sciences di terapkan di karena kan box ini memilki fitur yang minimalisir dan pula box ini tidak terlalu memakan banyak loading dibanding box facebook berjalan yang sudah AA Sciences bahas sebelumnya, memang box facebook berjalan ala mastamvan ini memang ajiib dah (hehe).

Box facebook berjalan ini memilki kelebihan yakni :

• Responsive ujung kanan bawah.
• Minimalize button.
• Fast fitur.
• Support efek bounce.
• Dan masih banyak fitur lainnya

Yasudah jika kalian sudah penasaran mengenai pembuatan Box Facebook Berjalan Blog Ala Mastamvan, maka langsung saja simak tutor nya di bawah ini :

Cara Membuat Box Facebook Berjalan Blog Ala Mastamvan

Pembuatan CSS nya :

• Pastikan kalian sudahlah Login terlebih dahulu pada akun Blogger kalian.
• Template - > Edit HTML - > CTRL+F (untuk memudahkan pencarian) lalu cari kode </head>.
• Jika sudah ditemukan kode </head> tadi, langsung saja kalian Copy Paste kan Script CSS/Box Facebook Berjalan Blog Ala Mastamvan nya di bawah ini, tepat pada bagian sebelum nya kode </head> nya tadi, berikut script CSS nya :

<style type='text/css'> #fbLikeBox{background-color:#FFFFFF;border:4px solid rgb(210,210,210);bottom:0;border-bottom:0;float:left;height:auto;margin-bottom:0;margin-right:5px;position:fixed;right:0;width:auto;z-index:10} .fbLikeBox-close{color:#333!important;position:absolute;top:1px;right:1px;width:20px;height:20px;line-height:20px;text-align:center;font-size.:11px} .slideUpfbLikeBox{animation-name:slideUpfbLikeBox;-webkit-animation-name:slideUpfbLikeBox;animation-duration:1s;-webkit-animation-duration:1s;animation-timing-function:ease;-webkit-animation-timing-function:ease;visibility:visible!important} @keyframes slideUpfbLikeBox{0%{transform:translateY(100%)}50%{transform:translateY(-8%)}65%{transform:translateY(4%)}80%{transform:translateY(-4%)}95%{transform:translateY(2%)}100%{transform:translateY(0%)}} @-webkit-keyframes slideUpfbLikeBox{0%{-webkit-transform:translateY(100%)}50%{-webkit-transform:translateY(-8%)}65%{-webkit-transform:translateY(4%)}80%{-webkit-transform:translateY(-4%)}95%{-webkit-transform:translateY(2%)}100%{-webkit-transform:translateY(0%)}}

</style>

Catatan :

Kalian dapat menyesuaikan kemauan untuk pewarnaan nya, dengan Kode Warna HTML sesuka kalian.

Pembuatan Jquery nya :

Masih dalam mode template -> maka langsung saja kalian CTRL+F untuk mencari cari kode </body> atau pada umumnya kode ini terletak pada bagian paling bawah pada sebuah templanya berikut Script Jquery nya :

<script type='text/javascript'> function show(target) { document.getElementById(target).style.display = &#39;block&#39;; }

</script>

Pembuatan HTML nya agar widget box facebook berjalan nya muncul :

Masih dalam mode template - > CTRL+F (untuk memudahkan pencarian) - > Cari kode </head> atau </body> atau tepatnya dimana kode tersebut terletak pada bawah atau atas sebuah header dan bawah bagian template, jika sudah di temukan langsung saja pasang script pemanggil (HTML) lalu pasang tepat pada bagian sesudah </head> atau </body>, berikut script HTML nya :

<div class='slideUpfbLikeBox' id='fbLikeBox'> <a class='fbLikeBox-close' href='#fbLikeBox-close-like-box' onclick='hide(&apos;fbLikeBox&apos;)' title='Close'><i class='fa fa-times'/></a> <div class='fb-like-box ' data-header='false' data-height='62' data-href='https://www.facebook.com/aldiandreansyahfanspageofficial' data-show-faces='true' data-stream='false' data-width='187'><span style='height: 62px; width: 187px; '><iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Faldiandreansyahfanspageofficial&amp;width=187&amp;height=62&amp;show_faces=false&amp;colorscheme=light&amp;stream=false&amp;border_color&amp;header=true' style='border:none; overflow:hidden; width:187px; height:62px;'/> </span></div> </div>

Catatan :

Jika kalian tidak menemui atau tidak dapat terpasang widget nya tepat pada bagian header (atas/bawah, maka kalian dapat mengikuti langkah lainnya dengan cara di bawah ini :

Login Blogger - > Tata Letak - > Tambah Gadget - > HTML Javascript - > lalu langsung saja salin Script HTML nya di bawah ini tepat pada Subjek nya, bukan judul nya, untuk judul kosongkan saja, berikut script HTML nya :

<div class='slideUpfbLikeBox' id='fbLikeBox'> <a class='fbLikeBox-close' href='#fbLikeBox-close-like-box' onclick='hide(&apos;fbLikeBox&apos;)' title='Close'><i class='fa fa-times'/></a> <div class='fb-like-box ' data-header='false' data-height='62' data-href='https://www.facebook.com/aldiandreansyahfanspageofficial' data-show-faces='true' data-stream='false' data-width='187'><span style='height: 62px; width: 187px; '><iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Faldiandreansyahfanspageofficial&amp;width=187&amp;height=62&amp;show_faces=false&amp;colorscheme=light&amp;stream=false&amp;border_color&amp;header=true' style='border:none; overflow:hidden; width:187px; height:62px;'/> </span></div> </div>

Oke mungkin cukup sekian mengenai pembuatan box facebook berjalan ala mastamvan yang dapat AA Sciences sampaikan semoga bermanfaat dan menambah wawasan kalian, Amin.

Share this post