How To Create Buttom Floating Facebook In Blogger

Buttom Floating Facebook Wіdgеt Blogger - Pada kesempatan kali ini kami akan membahas atau membagikan tentang Bagaimana Cara Membuat Buttom Floating Facebook di blogspot.

Buat sobat semua yang belum mengetahui yang kami akan bagikan maka sobat bisa melihat gambar dibawah ini, dan semoga dapat membantu sobat dalam memahami yang akan sobat gunakan dalam blog sobat.

How To Create Buttom Floating Facebook In Blogger

Demo


Siapa yang tidak ingin blog dan fanspage nya di kenal banyak orang, dan ini adalah salah satu cara untuk memperkenalkan fanspage kita kepada pengunjung blog, dengan tetap mengutamakan kenyamanan dalam membaca sebuah artikel.

Floating Facebook ini tidak dapat di close, namun tetap tidak menggangu pembaca blog,berikut adalah script dan cara pemasangan script  Buttom Floating Facebook Wіdgеt Blogger.


Pergi kе Tеmрlаt > Edit HTML
> Cari </style>  atau CTRL + F </style>
> Pastekan Script CSS sebelum Tag </style> atau tepat di atas Tag </style>

 #open-fb{background-color: #00ACD6; 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;}
.close-fb{color: #333!important; position: absolute; top: 1px; right: 1px; width: 20px; height: 20px; line-height: 20px; text-align: center; font-size: 11px;}
.slideUp{
 animation-name: slideUp;
 -webkit-animation-name: slideUp; 

 animation-duration: 1s; 
 -webkit-animation-duration: 1s;

 animation-timing-function: ease; 
 -webkit-animation-timing-function: ease;

 visibility: visible !important;   
}

@keyframes slideUp {
 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 slideUp {
 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%);
 } 
} 

Lalu Paste Script HTML di sebelum Tag </body>

 <div class='slideUp' id='open-fb'>
<a class='close-fb' href='#close-fb-like-box' onclick='hide(&apos;open-fb&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/xidnaxfamily.rtml' data-show-faces='true' data-stream='false' data-width='187'><span style='height: 62px; width: 187px; '><iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fxidnaxfamily%2F&tabs&width=340&height=70&small_header=true&adapt_container_width=false&hide_cover=true&show_facepile=false&appId=234858864125954" width="200" height="70" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>
</span></div></div>
<script type='text/javascript'>

function show(target) {
    document.getElementById(target).style.display = &#39;block&#39;;
}

function hide(target) {
    document.getElementById(target).style.display = &#39;none&#39;;
}
</script> 

Note :
Ubah URL halaman XIDNAX Family menjadi halaman Fanspage sobat.
Ubah Warna di Scipt CSS sesuai keinginan sobat,
Floating Facebook ini berada di sebelah kanan bawah dan sobat bisa merubah nya.

Lalu Save Tеmрlаtе dаn lіhаt hаѕіlnуа dеngаn Me- Refresh Hаlаmаn.

Semoga kalian mеnуukаі widget blоggеr yang satu ini. dan jika sobat berbaik hati jangan lupa untuk membagikan artikel ini ke teman-teman  sobat yang sedang mencari cara untuk menampilkan fanspage mereka di blog nya.

Demikian yang dapat kami bagikan di artikel How To Create Buttom Floating Facebook In Blogger  semoga dapat membantu sobat sekalian, dan jangan lupa untuk selalu berkunjung ke XIDNAX.COM