Bagaimana Cara Membuat Widget Floating Like Facebook di Blogspot



facebook pic

Cara Membuat Floating Like Facebook di Blogspot - Floating like facebook adalah sebuah kotak like facebook yang melayang. Bisa sobat liat disamping kanan blog saya.

Gunanya adalah untuk menghemat space dan membuat tampilan blog lebih rapi. Tentunya bisa buat blog sobat makin keren aja.

Okay langsung saja kali ini saya akan share tutorial Cara Membuat Floating Like Facebook di Blogspot.
Buat sobat yang tertarik Langsung ikuti tutorial dibawah :


  • Ø  Cara menambahkan Jquery Plugin 

    1.  Login ke Blogger
    2. Klik Dasbor>Pilih Rancangan>Klik Edit HTML
    3.  Kemudian Cari kode </head>
    4. Tambahkan kode dibawah ini tepat diatas kode </head> tadi
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
    Note : Abaikan langkah diatas jika template sobat sudah terinstall Jquery Plugin

    Ø  Cara Menambahkan Kode HTML pada Widget

    1. Klik Dasbor>Pilih Rancangan>Klik Tambah Gadget>HTML/JavaScript
    2. Copy kode dibawah ini : 

    <script type="text/javascript">
    //<!--$(document).ready(function() {$(".floatinglikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});//--></script><style type="text/css">.floatinglikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9jaaplBewInf94dytxM1ei4Q1oo5IYExNCtKHWJ4KI2S-L7bFG63tPnNu82iubFGLWCWovKC47z4CYnT2a7KzCUdPkDmIuOq771045370I15YqLSssum9A9-9ciP1XaCOt71HiI_wi98/s1600/floatingfb.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 40px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}.floatinglikebox div{border:none;position:relative;display:block;}.floatinglikebox span{bottom: 10px;font: 10px tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}.floatinglikebox span a{color: #808080;text-decoration:none;}.floatinglikebox span a:hover{text-decoration:underline;}</style><div class="floatinglikebox" style=""><div><iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FSoFyan-NgeBlog%2F237859139656866&amp;width=251&amp;height=270&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23cccccc&amp;stream=false&amp;header=false&amp;appId=159468740772399" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:251px; height:270px; background:#fff;" allowtransparency="true"></iframe><span><a href="http://sofyansniper.blogspot.com/2012/08/cara-membuat-floating-like-facebook-di.html" target="_blank">+Get This!</a></span></div></div> 
    4. Ganti http%3A%2F%2Fwww.facebook.com%2Fpages%2FSoFyan-NgeBlog%2F363758240312594 dengan url Facebook Fan Page milik Anda.

    5. Save

     Catatan : Sebelum menyimpan URL Facebook milik anda, sebaiknya ganti dahulu kode-kode yang terdapat pada URL.
    : dengan %3A
    dengan %2F

    Misalkan URL Facebook anda :
    http://www.facebook.com/pages/fbanda/123456
    Anda rubah menjadi
    http%3A%2F%2Fwww.facebook.com%2Fpages%2Ffbanda%2F123456


    Semoga bermanfaat ^^


 
free counters
Return to top of page Copyright © 2010 | Platinum Theme Converted into Blogger Template by HackTutors