Artikel Terbaru :
Home » » Cara Membuat Like Fanspage Melayang Di Blog

Cara Membuat Like Fanspage Melayang Di Blog

Wednesday, December 19, 2012 | 7komentar

Cara Membuat Like Fanspage Melayang Di Blog
Kali ini saya akan sare Cara Membuat Like Fanspage facebook Melayang Di Blog dengan 2 cara atau 2 style yang bisa anda pilih sesuai keinginan
Langsung saja yaaa ;-) silahkan ikuti langkah-langkah berikut ini:
Contoh style box pertama sebagai berikut:

  •  Login ke akun Blogger
  •  Tata Letak (Layout), pilih add gadget.
  •  Pilih HTML, copy kode berikut :
Lihat Code
     <style type="text/css">
        #topbar{
        position:absolute;
        padding-left:-100px;
        background-color: transparancy;
        width: 300px;
        visibility: hidden;
        z-index: 200;
        }
        </style>
        <script type="text/javascript">
        var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
        var startX = 25 //set x offset of bar in pixels
        var startY = 25 //set y offset of bar in pixels
        var verticalpos="fromtop" //enter "fromtop" or "frombottom"
        function iecompattest(){
        return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
        }
        function get_cookie(Name) {
        var search = Name + "="
        var returnvalue = "";
        if (document.cookie.length > 0) {
        offset = document.cookie.indexOf(search)
        if (offset != -1) {
        offset += search.length
        end = document.cookie.indexOf(";", offset);
        if (end == -1) end = document.cookie.length;
        returnvalue=unescape(document.cookie.substring(offset, end))
        }
        }
        return returnvalue;
        }
        function closebar(){
        if (persistclose)
        document.cookie="remainclosed=1"
        document.getElementById("topbar").style.visibility="hidden"
        }
        function staticbar(){
        barheight=document.getElementById("topbar").offsetHeight
        var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
        var d = document;
        function ml(id){
        var el=d.getElementById(id);
        if (!persistclose || persistclose && get_cookie("remainclosed")=="")
        el.style.visibility="visible"
        if(d.layers)el.style=el;
        el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
        el.x = startX;
        if (verticalpos=="fromtop")
        el.y = startY;
        else{
        el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
        el.y -= startY;
        }
        return el;
        }
        window.stayTopLeft=function(){
        if (verticalpos=="fromtop"){
        var pY = ns ? pageYOffset : iecompattest().scrollTop;
        ftlObj.y += (pY + startY - ftlObj.y)/8;
        }
        else{
        var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
        ftlObj.y += (pY - startY - ftlObj.y)/8;
        }
        ftlObj.sP(ftlObj.x, ftlObj.y);
        setTimeout("stayTopLeft()", 10);
        }
        ftlObj = ml("topbar");
        stayTopLeft();
        }
        if (window.addEventListener)
        window.addEventListener("load", staticbar, false)
        else if (window.attachEvent)
        window.attachEvent("onload", staticbar)
        else if (document.getElementById)
        window.onload=staticbar
        </script>
        <br />
        <div class="clear">
        </div>
        <div id="topbar">
        <div style="text-align: right;">
        <a href="" onclick="closebar(); return false"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0exlnXV7UItseVcLiYhzntAIH7QYsjNrTSPysPevHuBBkHgTcpoXrng-4ZWa0Oj6jDcBr1ls_BuDXGHSQFAyHXsyOi1ujokzAWTWxEQhXiMzOU_wVaaeh8gebvKTEkqmULjS7FeBFFWvs/s1600/close3.png" /></a></div>
        <center>
        <div style="background: #fff;">
        <iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2F//www.facebook.com/pages/Siti-saleha/422921667774550&amp;width=300&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false&amp;appId=285523954858712" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"></iframe>
        </div>
        </center>
        </div>
  •  Simpan Gadget
Catatan : Tulisan yang berwarna merah ganti dengan script fanspage anda jika punya, jika tidak ganti url fanspage yang berwarna blue dengan URL fanspage anda dan script warna merah yang isi nya "300px" tersebut adalah untuk merubah ukuran.

Untuk style ke 2
Atau cara yang ke 2 di bawah ini:
Contoh hasilnya :


langkah"nya sama seperti contoh yang pertama yang membedakan adalah style box nya dengan code berikut

Lihat Code
<!-- FB melayang tombol close ala RaxterBlog awal --!>
<style type='text/css'>
#kotak-facebook {
position:fixed !important;
position:absolute; /* IE6 */
bottom:-1000px;
right:10%;
margin:0px 0px 0px -182px;
width:auto;
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:#a3cea5; 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 src='http://raxterblog.googlecode.com/files/tombolclosemenu.js'/></script>
<div id='kotak-facebook'>
like nya dooong...! :)
<br/>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com/pages/Siti-saleha/422921667774570?ref=hl&amp;width=290&amp;height=260&amp;colorscheme=#7fff85&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=true' style='border:none; overflow:hidden; width:290px; height:260px;'/></iframe>
<a class='close' href='#'>&times;</a></div>
<!-- FB melayang tombol close ala RaxterBlog akhir --!>

Catatan:
Untuk code yang berwarna kuning adalah warna becround box nya bisa di ganti dengan warna yang di inginkan
Dan untuk yang berwarna orange adalah tulisan judul box nya
Untuk code biru adalah ukuran lebar panjang box nya
Tulisan yang berwarna merah ganti dengan URL fanspage anda

selamat mencoba
Share this article :

ARTIKEL TERKAIT:

7 comments:

  1. Mantap sob, thank infonya telah berbagi share

    ReplyDelete
  2. Makasih infonya, pas sy pasang boxnya aja yg keliatan, knapa yach? tp makasih lho...

    ReplyDelete
    Replies
    1. mungkin kamu kurang teliti atau karna templatemu tidak cocok untuk code" di atas

      Delete
  3. mas ga bisa nih untuk yg like box seperti punya mas,
    yg like box nya berada di bawah kanan.
    tolong srannya dng

    ReplyDelete
    Replies
    1. hanya ada 2 kemungkinan kenapa anda tidak berhasil
      1. pernah memakai like box fp yg lain solusinya hapus dulu kode" nya yg dulu
      2. kurang teliti dalam memraktekan cara" di atas
      semoga membantu :)

      Delete
  4. Untuk style yang ke 2...
    Agar box nya muncul di tengah2 blog, gmn caranya mbak?
    Lebih suka muncul ditengah sepertinya. Lagian di sebelah kiri blog saya ada gambar slide, box fanspage jadinya terbenam..

    ReplyDelete

Silahkan tinggalkan komentar sobat , tapi mohon jangan Nyepam ya..! Komentar dengan menyertakan LINK / ANCHOR TEXT atau promosi produk tertentu akan saya hapus karena blog ini bukan tempat untuk mempromosikan produk yang dijual di blog anda.

 
Support : Copyright © 2011. Tips Trik Blog | Dan Cara Buat Website - All Rights Reserved
Template Modify by Siti Saleha
Proudly powered by Blogger| Thanks For Visiting