Cara Membuat Widget Pengkut Yang Valid HTML5

Cara Membuat Widget Pengkut Yang Valid HTML5

Widget follower atau pengkit yang terdapat pada blog merupakan widget yang sangat penting,widget ini biasanya digunakan seseorang untuk melihat post baru yang ada didalam blog tersebut dengan cara mengikutinya atau mem-follow blog tersebut.Namun permasalhannya adalah widget yang satu ini tidak valid HTML5 nya,maka dari itu disini saya akan membantu anda untuk Membuat Widget Pengikut Yang Valid HTML5,silahkan simak postingan kali ini baik baik.

Anda juga dapat memodifikasi widget tersebut dengan senang hati,mulai dari ukuran,warna font sampai warna background dari widget ini dapat anda ubah sesuai dengan ukuan sidebar dan warna blog yang anda gunakan.Widget follower ini pada dasarnya tidak vaid HTML5,namun jika dimodifikasi dan dirubah sedikit dapat menjadi valid HTML 5,mungkin bagi anda yang belum mengerti dapat mencoba cara yang saya sampaikan di post ini,adan dapat mengecek blog anda apakah sudah valid HTML5 disini,silahkan cek terlebih dahulu widget follower asli bawaan blog anda disitu,apakah akan valid HTML5.

Mungkin anda akan menjawab tidak karena widget follower bawaan blogger memang tidak valid HTML5,namun jangan khawatir karena disini saya akan memberi tahu caranya agar widget follower tersebut valid HML5,yaitu sebagai berikut :

1.Pertama-tama logn terlebih dahulu ke blogger
2.Kemudian masuk ke tab Tata Letak
3.Tambahkan widget
4.Pilih Gadget lainnya kemudian pilih pengikut.(jika sudah ada anda tidak perlu menambahkan)
5.Kemudian buka blog anda
6.tekan CTRL + U untuk melihat source halaman
7.Kemudian Tekan CTRL + F untuk membuka panel search dan masukan kode renderMembersGadget
8.Kemudian akan muncul gambar berikut

Perhatikan kode yang saya tandai diatas

9.Kemudian buat widget baru dengan memasukan kode berikut

<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>
<div id="div-4769418095313647753" 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-4769418095313647753',
   site: '17038536110807365684'},
  skin);
</script>

Ubahlah kode yang berwarna merah dengan ID anda dan juga gantilah kode yang berwarna hijau dengan kode site yang anda temukan tadi

10.Simpan

11.Kemudian,hapuslah widget follower bawaan blog yang sebelumnya anda buat

12.Hapuslah kode <b:include name='quickedit'/>  untuk membuat valid HTML5

Itu adalah cara yang dapat digunakan untuk merubah widget follower menjadi HTML5,bagi anda yang ingin memodifikasi warna widget tersebut silahkan ikuti tutorial berikut ini

berikut adalah keterangan gambarnya

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?)

SIlahkan adna ubah sendiri kodenya,dan sekian ulasn yang dapat saya sampaikan semoga berguna bagi anda .Dan terima kasih sudah membaca post saya kali ini.

Source Kode Dan Gambar : Blog Kang Ismet