Memodifikasi Followers Blog Widget Blogger

Anda merasa bosan dengan tampilan Followers Blog Widget bawaan orisinil 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 dapat Anda lihat pada gambar di atas, atau pada Followers Blog Widget blog Kompi Ajaib yang ada di bawah (Footer).

Berbeda kan?...itu alasannya yakni sudah aku modifikasi. Cara Memodifikasi Followers Blog Widget Blogger sebenarnya gampang-gampang susah.

Langkah Pertama

Biarkan dulu Followers Blog Widget bawaan orisinil Blogger yang sudah Anda terapkan di blog Anda, alasannya yakni ada isyarat yang mesti dilihat. Klik kanan pada halaman blog Anda >> Klik View Page Source >> Cari title dari widget tersebut, contohnya "Followers" (tanpa tanda kutip). Gunakan CTRL + F Pada keyboard untuk memudahkan pencarian. Setelah ketemu, scroll ke bawah sehingga Anda menemukan isyarat menyerupai 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 isyarat yang aku marking di atas, isyarat itu yang kita perlukan untuk memodifikasinya. 

Langkah Kedua

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

Memodifikasi Followers Blog Widget Blogger

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


Sumber https://www.kompiajaib.com/

0 Response to "Memodifikasi Followers Blog Widget Blogger"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel