Membuat Widget Follower Blog Valid HTML5 dan Responsive

Cara Membuat Widget Follower Blogger Valid HTML5 dan Responsive - Bagi anda yang blognya tetap valid html5 meskipun menggunakan widget follower ini silahkan nanti ikuti tutorial saya , widget follower default dari blogger tidak valid , maka dari itu kita perlu memodifikasinya supaya valid html5 , salah satu keuntungan memasang widget follower adalah untuk meningkatkan jumlah pengikut atau follower blog kita , sehingga nantinya jika kita mengeposkan suatu artikel, maka yang menjadi follower kita secara otomatis akun melihat tampilan postingan yang baru kita publish di dasbhornya , sehingga dapat menguntungkan kita untuk menambah visitor dari widget ini . berikut demo widget followernya

Demo Widget Follower Valid

Cara Membuat Widget Follower Blog Valid HTML5

1. Pertama masuk dulu ke dasbhor anda , kemudian Tambahkan widget Followers(lewati langkah ini kalau sudah ada) Untuk menambahkannya klik Tata Letak => Tambahkan Gadget => Gadget Lainnya => Pengikut  
2. Kedua ,  Jika anda sudah membuat widget followernya kemudian bukaklah blog anda , kemudian buka inspect elemen untuk mozilla dan Ctrl + U bagi anda yang menggunakan google Chrome
3. Ketiga , di dalam halaman opensource tadi carilah kode renderMembersGadget ( untuk mempermudahkan pencarian silahkan klik Ctrl+F secara bersamaan ) kemudian Perhatikan pada kode id dan site.( yang saya kotaki )  seperti pada gambar di bawah ini:

Langkah 4 : Buat widget baru HTML/JavaScript, simpan kode ini : 

<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>
<div id="div-1qqll6zljz2v8" style="width:300px;border:1px solid #ff4800;"></div>
<script type="text/javascript">
var skin = {};
skin['FACE_SIZE'] = '42';
skin['BORDER_COLOR'] = '#000';
skin['ENDCAP_BG_COLOR'] = '#ff0000';
skin['ENDCAP_TEXT_COLOR'] = '#fff';
skin['ENDCAP_LINK_COLOR'] = '#f0ff00';
skin['CONTENT_BG_COLOR'] = '#ddd';
skin['CONTENT_LINK_COLOR'] = '#0027cf';
skin['CONTENT_TEXT_COLOR'] = '#333333';
skin['CONTENT_HEADLINE_COLOR'] = '#007b03';
skin['NUMBER_ROWS'] = '4';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderMembersGadget(
 { id: 'div-1qqll6zljz2v8',
   site: '10529399206683092414'},
  skin);
</script>

Yang perlu anda perhatikan sebelum mengganti 2 kode ID dan 1 site, dengan kode yang didapat dari page source (Langkah 3).

Modifikasi Tampilan Widget Followers

Setelah anda berhasil membuat widget follower valid , maka langkas selanjutnya adalah memodifikasi sesuai keinginan soobat, buka kembali widget yang tadi dibuat (Langkah 4), edit warna dan pengaturannya. Untuk memudahkan editing lihat panduan gambar dan keterangannya :

sumber : blog.kangismet.net

1. ENDCAP_LINK_COLOR
2. ENDCAP_BG_COLOR (Background atas / contoh gambar warna merah)
3. ENDCAP_TEXT_COLOR (tulisan : With Google Friend Connect)
4. BORDER_COLOR (garis dibawah blok merah)
5. CONTENT_HEADLINE_COLOR (Tulisan Member 530)
6. CONTENT_LINK_COLOR (tulisan More dan Sign in)
7. Garis pinggir, ganti kode warna #ff4800
8. FACE_SIZE (ukuran avatar)
9. CONTENT_BG_COLOR (background bawah)
10. CONTENT_TEXT_COLOR (tulisan Already a member?)

Kode skin['NUMBER_ROWS'] = '4'; adalah berapa baris avatar ditampilkan. Ganti angka 4 sesuai keinginan. Sesuaikan juga lebar widget dengan mengganti kode 300px.

Cara Membuat Widget Follower Blog Valid HTML5

Untuk Mengubah Widget Follower Blogger tersebut supaya responsive adalah dengan cara megubah ukuran lebarnya , Silahkan anda ganti width:300px dengan width:auto

Demikian Sharing saya tentang Cara  Membuat Widget Follower Blog Valid HTML5 dan Responsive Semoga tutorial tersebut bagi anda , jika ada pertanyaan silahkan berkomentar dibawah heheh , selamat mencoba kawan semoga berhasil

• Tweet
• Share
• Share
• Share
• Share

About Penulis

Terima kasih atas kunjungannya, jangan lupa baca juga beberapa artikel di bawah ini dan semoga bermanfaat untuk sobat.

Related Post