Memodifikasi Followers Blog Widget Blogger

Anda merasa bosan dengan tampilan Followers Blog Widget bawaan asli Blogger? Atau mungkin tampilan Follower Blog Blogger-nya tidak sesuai dengan theme blog? Jangan bingung, saya share cara Memodifikasi Followers Blog Widget Blogger sehingga sesuai dengan theme blog Anda.

Sebagai contoh bisa Anda lihat pada gambar di atas, atau pada Followers Blog Widget blog Kompi Ajaib yang ada di bawah (Footer).

Berbeda kan?...itu karena sudah saya modifikasi. Cara Memodifikasi Followers Blog Widget Blogger sebenarnya gampang-gampang susah.

Langkah Pertama

Biarkan dulu Followers Blog Widget bawaan asli Blogger yang sudah Anda terapkan di blog Anda, karena ada kode yang mesti dilihat. Klik kanan pada halaman blog Anda >> Klik View Page Source >> Cari title dari widget tersebut, misalnya "Followers" (tanpa tanda kutip). Gunakan CTRL + F Pada keyboard untuk memudahkan pencarian. Setelah ketemu, scroll ke bawah sehingga Anda menemukan kode seperti di bawah ini. 


<div id="div-65y5uikkmesc" 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'] = "#256ead";
    skin['ALTERNATE_BG_COLOR'] = "transparent";
   
    skin['CONTENT_BG_COLOR'] = "transparent";
    skin['CONTENT_LINK_COLOR'] = "#256ead";
    skin['CONTENT_TEXT_COLOR'] = "#666666";
    skin['CONTENT_SECONDARY_LINK_COLOR'] = "#256ead";
    skin['CONTENT_SECONDARY_TEXT_COLOR'] = "#666666";
    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-65y5uikkmesc",
     height: 260,      site: "09038553348108515803",      locale: 'en' },
     skin);
  </script>
</div>

Perhatikan kode yang saya marking di atas, kode itu yang kita perlukan untuk memodifikasinya. 

Langkah Kedua

Copy kode di bawah ini ke gatget HTML/JavaScript baru.


<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>
<!-- Define the div tag where the gadget will be inserted. -->
<div id="div-fhp4mq2cq3gj" style="width:285px;border:1px solid #fff;"></div>
<!-- Render the gadget into a div. -->
<script type="text/javascript">
var skin = {};
skin['BORDER_COLOR'] = 'transparent';
skin['ENDCAP_BG_COLOR'] = 'transparent';
skin['ENDCAP_TEXT_COLOR'] = '#666666';
skin['ENDCAP_LINK_COLOR'] = '#1da7e7';
skin['ALTERNATE_BG_COLOR'] = 'transparent';
skin['CONTENT_BG_COLOR'] = 'transparent';
skin['CONTENT_LINK_COLOR'] = '#1da7e7';
skin['CONTENT_TEXT_COLOR'] = '#666666';
skin['CONTENT_SECONDARY_LINK_COLOR'] = '#1da7e7';
skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#999999';
skin['CONTENT_HEADLINE_COLOR'] = '#1da7e7';
skin['NUMBER_ROWS'] = '4';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderMembersGadget(
 { id: 'div-fhp4mq2cq3gj',
   site: '09725433856921720255' },
  skin);
</script>

Ganti kode yang berwarna merah dengan kode warna merah pada langkah pertama, begitu juga dengan kode yang berwarna orange. Dan kode yang diblok kuning itu untuk merubah tampilan warna dari widget tersebut, silahkan sesuaikan dengan warna thema blog Anda. Angka 4 yang berwarna merah itu untuk memberikan jumlah baris photo follower kita. Angka 285 untuk mengatur lebar widget, silahkan sesuaikan dengan lebar sidebar atau footer blog Anda. Kode #fff untuk warna border luarnya, silahkan sesuaikan dengan keinginan Anda.

Memodifikasi Followers Blog Widget Blogger

Demikian sharing cara Memodifikasi Followers Blog Widget Blogger kali ini mudah-mudahan bermanfaat. Selamat berkreasi...

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments