Membuat Widget Follower Melayang

Apa itu Follower melayang ??? Yang dimaksud adalah memodifikasi widget follower agar melayang seperti gambar. Untuk membuat widget seperti itu tidaklah sulit, asalkan brother mengikuti langkah-langkahnya dengan benar. Langsung saja, ini caranya :


1. Log In dulu ke akun blogger sobat
2. Pada tab dasbor sobat pilih Rancangan
3. Pilih Elemen Laman dan pilih Tambah Gadget
4. Tambahkan HTML/JavaScript

Tapi sebelumnya, brother harus mengetahui log ID, Site ID, dan Div ID brother...caranya gampang kok, 

pertama buka dulu blog brother ( yaitu masukkan alamat blog sobat pada address bar lalu ENTER )

kedua setelah blog brother selesai terbuka tekan CTRL + U lalu cari script berikut dengan cara menekan 

CTRL + F

holder.postFeed =      untuk mendapatkan Blog ID


<div id="div-         untuk mendapatkan Div ID

site: "                       untuk mendapatkan Site ID

Selanjutnya, brother tinggal copas aja kode berikut pada gadget HTML/javascript

<style type="text/css">

#float-reog{
background-color:#61380B;
position:absolute;
visibility:hidden;
z-index:100;
border:2px
#FFFFFF groove;
-moz-border-radius:8px;
padding-top:6px;
padding-left:1px;
padding-bottom:3px;
padding-right:1px;
-moz-opacity:0.63;
filter:alpha(opacity=63);opacity:0.63;
}
#float-reog a img{
color:transparent;text-decoration:none;border:none;
}
</style>

<script language="javascript">

/***************************************************************
* Floating Top Bar script - Dynamic Drive (http://www.dynamicdrive.com)
* Sliding routine by Roy Whittle (http://www.javascript-fx.com/)
* Simplified Floating by !CrazyDavinci! (http://crazydavinci.net)
* This notice must stay intact for legal use.
* Visit http://www.dynamicdrive.com/ for full source code
***************************************************************/
startX = parseInt(screen.width/2)+500;startY = parseInt(screen.height/2)-110
function iecompattest(){return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body}
function staticbar(){
ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
d = document;
el= d.getElementById("float-reog");
barheight= el.offsetHeight;
function ml(id){
el.style.cssText="visibility:visible;width:75px";if(d.layers)el.style=el;
el.sP=function(x,y){this.style.right=x+"px";this.style.top=y+"px";};
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.x = startX;el.y -= startY;return el;
}
window.stayTopright=function(){
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("stayTopright()", 10);
}
ftlObj = ml("float-reog");stayTopright();
}
if (window.addEventListener) window.addEventListener("load", staticbar, false);
else if (window.attachEvent) window.attachEvent("onload", staticbar);
else if (document.getElementById) window.onload=staticbar </script>

<div id ="float-reog" align="center">
<div style='margin-right:2px;'>
<script type="text/javascript">
        if (!window.google || !google.friendconnect) {
          document.write('<script type="text/javascript"' +
              'src="http://www.google.com/friendconnect/script/friendconnect.js">' +
              '</scr' + 'ipt>');
        }
      </script>
<script type="text/javascript">
      if (!window.registeredBloggerCallbacks) {
        window.registeredBloggerCallbacks = true;

       

       
        gadgets.rpc.register('requestReload', function() {
          document.location.reload();
        });

       
        gadgets.rpc.register('requestSignOut', function(siteId) {
         
          google.friendconnect.container.openSocialSiteId = siteId;
          google.friendconnect.requestSignOut();
        });
      }
    </script>
<script type="text/javascript">
   
    function registerGetBlogUrls() {
      gadgets.rpc.register('getBlogUrls', function() {
        var holder = {};
       
         
         
         
            holder.postFeed = "http://www.blogger.com/feeds/1556753456876567070/posts/default";
         
         
         
            holder.commentFeed = "http://www.blogger.com/feeds/1556753456876567070/comments/default";
         
          holder.currentBlogUrl = "http://www.master-pedia.co.cc/";
          holder.currentBlogId = "1556753456876567070";
       
        return holder;
      });
    }
  </script>
<script type="text/javascript">
  if (!window.registeredCommonBloggerCallbacks) {
    window.registeredCommonBloggerCallbacks = true;

    gadgets.rpc.register('resize_iframe', function(height) {
      var el = document.getElementById(this['f']);
      if (el) {
        el.style.height = height + 'px';
      }
    });

   
    gadgets.rpc.register('set_pref', function() {});

    registerGetBlogUrls();
  }
  </script>
<div id="div-l6hqnfo5g8dd" style="width: 100%; "></div>
<script type="text/javascript">
    var skin = {};
    skin['FACE_SIZE'] = '32';
    skin['HEIGHT'] = "260";
    skin['TITLE'] = "Followers";
    skin['BORDER_COLOR'] = "transparent";
    skin['ENDCAP_BG_COLOR'] = "transparent";
    skin['ENDCAP_TEXT_COLOR'] = "#666666";
    skin['ENDCAP_LINK_COLOR'] = "#000000";
    skin['ALTERNATE_BG_COLOR'] = "transparent";
   
    skin['CONTENT_BG_COLOR'] = "transparent";
    skin['CONTENT_LINK_COLOR'] = "#000000";
    skin['CONTENT_TEXT_COLOR'] = "#666666";
    skin['CONTENT_SECONDARY_LINK_COLOR'] = "#000000";
    skin['CONTENT_SECONDARY_TEXT_COLOR'] = "#999999";
    skin['CONTENT_HEADLINE_COLOR'] = "#cc6600";
    skin['FONT_FACE'] = "normal normal 100% Georgia, Serif";
    google.friendconnect.container.setParentUrl("/");
    google.friendconnect.container["renderMembersGadget"](
    {id: "div-l6hqnfo5g8dd",
     height: 260,
    
    
    
     site: "09168847146575049542",
     
     locale: 'in' },
     skin);
  </script>

</div>
</div>

Ket : Ganti Kode Berwarna biru cerah dengan  dengan Site ID brother
                 Kode warna kuning dengan alamat blog brother
                 kode warna  Merah dengan  div ID brother
                 Kode warna Hijau dengan Site ID brother

Terakhir tinggal di save/ di simpan.

selesai, Selamat Mencoba.

Artikel Terkait