Tutorial : Add Follower Widget Cara Baru (Blogskin)

Assalamualaikum and annyeong. Ok ini merupakan tuto yg kedua utk hari ni. Ngeee :D. Tuto yang ini RIENNA nak ajar korg cara utk tambah follower widget bagi pengguna blogskin. Memandangkan ramai yang tnya rienna pasal ni. So hari ni rienna akan buat tutonya. Sorry lambat =.= . Btw tuto ni tieqa dapat dari blog adik comel kita iaitu HarunoHana. 

Okayy, kebanyakkan pengguna blogskin mesti ada masalah utk tambah follower widgetkan?. Tambahan pulak, skrang ni google friend connect dah takde follower widget macam dulu lagi. So ini agak menyukarkan korg nak dapatkan URL follower widget. Tapi don't worry rienna dah dapat solution-nya. Jom ikut step ni.

contoh follower widget

1. Mula-2 korg kena tukar drTemplate Classic/Blogskin ke Template Designer dulu. 

2. Bila dah convert ke Template Designer korg pergi ke Dashboard > Design > Edit layout

3. Kemudian, korg tambah gadget follower. Bagi yang dah ada tak perlu la tambah. Bagi yang takde tu korg click Add Gadget. 

4. Korg Add Followers. Then Add & Save. Lihat contoh di atas.

5. Bila sudah. Korg view blog. Then tekan Ctrl+ u serentak untuk view page source. Nanti akan keluar page source yang banyak kod HTML tu kan? Okayy jgn pening dengan kod tu..lols. Korg just click Ctrl+f serentak dan cari code friendconnect

click untuk tumbesaran

6.  Ha! nampak tak code yang di-highlight-kan tu? Good. Okay skrang korg cari code yang seakan-akan code kat atas tu.

WARNING

JANGAN COPY CODE INI. SEBAB SETIAP BLOG ADA CODE YANG TERSENDIRI. YANG INI CODE UNTUK FOLLOWER BLOG TIEQA SAHAJA.

Korg copy code bermula dengan <script type="text/javascript"> sehingga locale: 'en'}, skin); </script></div>

Korg bole rujuk code dalam scroll box ni. Cari codes yang seakan-akan dlm box ni.

<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/7689463663459457347/posts/default";

          

          

          

            holder.commentFeed = "http://www.blogger.com/feeds/7689463663459457347/comments/default";

          

          holder.currentBlogUrl = "http://pinkyshawol.blogspot.com/";

          holder.currentBlogId = "7689463663459457347";

        

        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-1yp6oi65g9ti" 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'] = "#222222";

    skin['ENDCAP_LINK_COLOR'] = "#2288bb";

    skin['ALTERNATE_BG_COLOR'] = "transparent";

    

    skin['CONTENT_BG_COLOR'] = "transparent";

    skin['CONTENT_LINK_COLOR'] = "#2288bb";

    skin['CONTENT_TEXT_COLOR'] = "#222222";

    skin['CONTENT_SECONDARY_LINK_COLOR'] = "#2288bb";

    skin['CONTENT_SECONDARY_TEXT_COLOR'] = "#999999";

    skin['CONTENT_HEADLINE_COLOR'] = "#000000";

    skin['FONT_FACE'] = "normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif";

    google.friendconnect.container.setParentUrl("/");

    google.friendconnect.container["renderMembersGadget"](

    {id: "div-1yp6oi65g9ti",

     height: 260,

     

     

     

     site: "02717026770363591205",

     

     locale: 'en' },

     skin);

  </script>

</div>

7. Copy code tu then korg paste dekat Notepad dulu ye. Macam ni :-

8. Lepas tu, korg bole tukar dr Template Designer ke Template Classic semula. 

9. Then korg bole lah copy and paste code dekat Notepad tadi ke dalam Blogskin korg.

10. Preview & save. Klau tak faham. Jgn segan-2 utk bertanya :)