Author Floating Facebook Page's Widget | Blogsaya04

Floating Facebook Page's Widget

   Floating Facebook Page's Widget atau dalam bahasa indonesia itu halaman facebook yang melayang merupakan salah satu cara ampuh untuk menghemat tempat pada suatu halaman web/blogspot.




   Oke Sob kali ini Blogsaya04 mau share cara memasang widget yang satu ini.
Berikut langkah-langkahnya :

1. Login Blogger (bagi pengguna blogger)
2. Masuk ke "Tata Letak"
3. Tambah Gadget ===> HTML/JavaScript
4. Masukkan kode di bawah ini :


<!-- FB melayang tombol close --!>
<style type='text/css'>
#kotak-facebook {
      position:fixed !important;
      position:absolute; /* IE6 */
      bottom:-900px;
      right:10%;
      margin:0px 0px 0px -182px;
      width:310px;
      height:auto;
      padding:16px;
       -webkit-box-shadow: 0px 0px 7px #222;
      -moz-box-shadow: 0px 0px 7px #222;
      box-shadow: 0px 0px 7px #222;  background-color:#FFFFFF; font:normal 1em Cambria,Georgia,Serif;
      color:#111;
    -webkit-border-top-left-radius: 20px;
    -webkit-border-bottom-right-radius: 20px;
    -moz-border-radius-topleft: 20px;
    -moz-border-radius-bottomright: 20px;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;}
    #kotak-facebook a.close {
      position:absolute;
      top:-10px;
      right:-10px;
      background:#333;
      font:bold 16px Arial,Sans-Serif;
      text-decoration:none;
      line-height:22px;
      width:22px;
      text-align:center;
      color:#fff;
      border:2px solid #fff;
      -webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
      -moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
      box-shadow:0px 1px 2px rgba(0,0,0,0.4);
      -webkit-border-radius:10px;
      -moz-border-radius:10px;
      border-radius:10px;
      cursor:pointer;
    }
</style>
    <script type='text/javascript'>
    $(window).bind("load", function() {
         // animasikan nilai top saat halaman telah selesai dimuat
         $('#kotak-facebook').animate({bottom:"50px"}, 1000);
        // hilangkan kotak pesan saat tombol (x) di klik
         $('a.close').click(function() {
             $(this).parent().fadeOut();
         return false;
         });
    });
    </script>
    <div id='kotak-facebook'>
<p style=" margin-right:10px;  font-size:15px; color:#000000;"> Mohon bantuannya kak, <blink> Thank's...!!! </blink> </p>
<!-- Mulai --!>

--------------------- MASUKKAN HTML SOBAT DI SINI ------------------

<!-- Selesai --!><a class='close' href='#'>&times;</a>
<p style=" float:right;  margin-right:35px;  font-size:10px;" >Powered By <a style=" font-size:10px; color:#3B78CD; text-decoration:none;" href="https://www.facebook.com/"> Facebook </a> , <a style=" font-size:10px; color:#3B78CD; text-decoration:none;" href="http://blogsaya04.blogspot.com/2014/01/floating-facebook-pages-widget.html"> Get this widget</a></p>
    </div>


5. Masukkan HTML halaman Facebook sobat setelah kode  <!-- Mulai --!>
6. Simpan dan lihat hasilnya


   Semoga bermanfaat Sob...


.
Share this article :
Share on FB Tweet Share on G+

Ditulis Oleh : Zufar Muzakki

Zufarmuzakki Anda sedang membaca artikel berjudul Floating Facebook Page's Widget yang ditulis oleh Zufar Muzakki dan diterbitkan di Blogsaya04. Maaf, Jika anda ingin mengcopy artikel tersebut, mohon untuk juga menyertakan live link-nya. Terima kasih atas kerja samanya.

Zufar Muzakki Blogsaya04 Updated at : 10:12 PM

0 komentar:

Poskan Komentar

Jadilah pengunjung yang baik, mohon berkomentarlah sesuai topik...!

Back to top