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 ^^
[Read More...]


Link Exchange





Bagi sobat blogger yang ingin melakukan link exchange dengan saya, silahkan copy script dibawah.
Jika anda memasang link saya di main page maka saya juga akan memasang link anda di main page blog saya, jika link saya ingin di pasang dipostingan blog silahkan isi form dibawah. secara otomatis link anda akan terpasang.
selanjutnya saya akan mengecek di blog anda, jika tidak ada link saya disana maka saya terpaksa harus menghapus link anda.

bagi sobat yang ingin bertukar link, silahkan berkomentar.
thanks sebelumnya mau bertukar link dengan saya ..
salam kenal ...


Link     : http://sofyansniper.blogspot.com

Title    : SoFyan NgeBlog


atau scipt berikut :


<li><a href="http://sofyansniper.blogspot.com">SoFyan NgeBlog</a></li>



[Read More...]


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