 |
| Cara Membuat Widget Pengkut Yang Valid HTML5 |
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 |
<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
