Tunggu Sebentar...

2/20/2017

Box Facebook Berjalan Ala Mastamvan

Baca Juga



Agar Website AA SCIENCES Rutin Update Artikel Terkait Dunia SHARING PENGALAMAN atau hal lainnya, Mohon Bantu Donasinya Akhy dan Ukhti, Caranya pun Mudah. Akhy dan Ukhti hanya cukup Meng-Klik Iklan Dibawah ini ataupun Iklan yang Berada Dimana Saja. Salam Ukhuwah dan Saling Peduli Sesama yaa Akhy dan Ukhti :)

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

Box Facebook Berjalan Ala Mastamvan
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 :

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.

Artikel Terkait

Seorang Pelajar yang Ingin Berbagi Ilmu Pengalaman yang diketahui nya kepada seluruh Umat Manusia, dan Semoga Ilmu yang ia bagikan tersebut bermanfaat. Amin

================================================================
~ Jika ingin men Copy Paste harap masuk kan sumber link artikel saya di postingan sobat
~Dilarang Berkomentar link aktif , jika ada yang memasuk kan link aktif maka kami akan Hapus dan kami anggap Spam
~ Komentar lah dengan Bahasa yang Baik dan Relevan dengan sesuai artikel terkait tersebut . Terimakasih
================================================================
EmoticonEmoticon