Sunday, 27 January 2013

Tutorial Add Follower Widget In Blogskin

بِسْــــــــــــــــــمِ ﷲِالرَّحْمَنِ الرَّحِيم


Assalamualaikum dan selamat sejahtera. Tutorial ini telah direquest oleh Kisah Kami dan Syafiqah Poyo. Diingatkan! Tutorial ni manyak susah loo. Auntie cakap sama lu aa.. lu jangan nangis tau kalau tak jadi. Usaha tangga kejayaannye pun. Manyak usaha baru bole mintak auntie tolong sama lu orang. Ok mari kita mula .

Wajib tukarkan dulu dari Classic Template kepada Template Designer. Macam mana nak buat? Rujuk tuto sini
 Lepas tu pergi ke Layout. Add Widget Follower. Add dan Save.
Lepas tu View Blog korang. Tekan ctrl+u (serentak) dan korang akan pergi ke page source korang. Tekan ctrl+f dan cari kod friendconnect. Nanti mesti jumpa punya macam ni.
Korang copy dari kod <script type="text/javascript"> sehingga kod </script> . Jumpa kan? Contoh kod follower saya. 
AMARAN KERAS : Jangan copy kod follower saya ni sebab lain blog lain kod nya. Please.


<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/1561515936190651572/posts/default";
       
       
       
            holder.commentFeed = "http://www.blogger.com/feeds/1561515936190651572/comments/default";
       
          holder.currentBlogUrl = "http://studentkeciktutorial.blogspot.com/";
          holder.currentBlogId = "1561515936190651572";
     
        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-xjg4inw79rwb" 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'] = "#000000";
    skin['ENDCAP_LINK_COLOR'] = "#fa4d7e";
    skin['ALTERNATE_BG_COLOR'] = "transparent";
 
    skin['CONTENT_BG_COLOR'] = "transparent";
    skin['CONTENT_LINK_COLOR'] = "#fa4d7e";
    skin['CONTENT_TEXT_COLOR'] = "#000000";
    skin['CONTENT_SECONDARY_LINK_COLOR'] = "#fa4d7e";
    skin['CONTENT_SECONDARY_TEXT_COLOR'] = "#999999";
    skin['CONTENT_HEADLINE_COLOR'] = "#000000";
    skin['FONT_FACE'] = "normal normal 12px Verdana, Geneva, sans-serif";
    google.friendconnect.container.setParentUrl("/");
    google.friendconnect.container["renderMembersGadget"](
    {id: "div-xjg4inw79rwb",
     height: 260,
   
   
   
     site: "11713768757229479340",
   
     locale: 'en' },
     skin);
  </script>

Paste dulu kod tu di dalam Notepad.
Tukarkan blog korang kepada blogskin balik. Rujuk tuto sini.
Kalau dah, copy kod follower dalam Notepad tu dan paste kan di dalam blogskin korang. Paste dekat bahagian sidebar lah.
Preview and Save. Silakan lompat, menjerit, melolong, melalak dan sebagainya ;)

Faham tak? Jadi tak? Kalau tak, tanya sama auntie looh. Bai bai!

4 comments:

Mumbling online............. said...

thankx..! InsyaAllah aq buat.. (:

♥ Anis said...

@Mumbling online............. hehe welcome c(:

gina mahawira said...

X boleh pun akak :( Apa pulak yg salah.. Dah follow step dari 1 - 8 tapi x boleh..

anis Sk said...

@gina mahawira time preview mmg nmpk tak jd . Save dlu bru preview bru nmpk jd . Ikut step baik2 tau. :)