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, aku share cara Memodifikasi Followers Blog Widget Blogger sehingga sesuai dengan theme blog Anda.

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

Berbeda kan?...itu alasannya sudah aku 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, alasannya ada aba-aba 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 aba-aba ibarat 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 aba-aba yang aku marking di atas, aba-aba itu yang kita perlukan untuk memodifikasinya. 

Langkah Kedua

Copy aba-aba 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 aba-aba yang berwarna merah dengan aba-aba warna merah pada langkah pertama, begitu juga dengan aba-aba yang berwarna orange. Dan aba-aba 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 menunjukkan 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 cita-cita Anda.

Memodifikasi Followers Blog Widget Blogger

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