Modifikasi Widget Follower Blog Valid HTML5

Modifikasi Widget Follower Blog Valid HTML5 – untuk membuat widget follower blog agar valid HTML5 sebenarnya tidak susah dan bisa di bilang simple. Namun pada tutorial ini bukan hanya sekedar untuk valid HTML5 saja yang akan saya bahas, melainkan untuk memodifikasi tampilan widget follower blog agar menjadi lebih menarik dan terlihat rapi dengan kondisi valid HTML5. Custom widget follower ini nantinya tidak berbeda pada tutorial yang sudah pernah saya bahas sebelumnya yakni tepatnya pada artikel yang berjudul modifikasi widget like box facebook dan modifikasi widget google+ follower. Seperti itulah nantinya hasil dari modifikasi widget follower blog, cukup menarik bukan. Namun cara penerapannya ke dalam blog agak sedikit berbeda dengan modifikasi widget facebook like box dan modifikasi widget google+ follower tersebut, karena pada kedua widget tersebut seluruh kodenya baik itu CSS maupun HTML langsung di terapkan kedalam widget oleh sebab itulah yang menyebabkan munculnya beberapa jumlah error pada saat validasi HTML5 di W3C. Maka dari itu untuk modifikasi widget follower blog agar valid HTML5 maka perlu memisahkan CSS dan menaruhnya kedalam template blog. Untuk lebih jelasnya, berikut tutorial untuk Modifikasi Widget Follower Blog Valid HTML5.

1. Login ke akun blogger.
2. Selanjutnya pada template pilih Edit HTML.
3. Copy kode berikut ini lalu taruh di atas kode ]]></b:skin>

.widget-follower { width: 280px; height: 140px; border-radius: 3px; position: relative; background: #E9FBE9; padding: 0px 0px 15px 0px; margin:0px auto 10px auto; } 
.widget-follower,.widget-follower:before,.widget-follower:after { background: #E9FBE9; border: 1px solid #52E052; } 
.widget-follower:before,.widget-follower:after { position: absolute; content: ""; bottom: -3px; left: 2px; right: 2px; height: 1px; border-top: none; } 
.widget-follower:after { left: 4px; right: 4px; bottom: -5px; box-shadow: 0 0 2px #52E052; }

4. Copy kode berikut ini lalu pasang ke widget HTML/Javascript.

<div class="widget-follower">
<div style="height:150px;overflow:hidden;">
<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>
<div id="div-7w5ths5ahnit"></div>
<script type="text/javascript">
var skin = {};
skin['BORDER_COLOR'] = '#52e052';
skin['ENDCAP_BG_COLOR'] = '#52e052';
skin['ENDCAP_TEXT_COLOR'] = '#000000';
skin['ENDCAP_LINK_COLOR'] = '#000000';
skin['ALTERNATE_BG_COLOR'] = '#transparent';
skin['CONTENT_BG_COLOR'] = '#transparent';
skin['CONTENT_LINK_COLOR'] = '#e9fbe9';
skin['CONTENT_TEXT_COLOR'] = '#000000';
skin['CONTENT_SECONDARY_LINK_COLOR'] = '#000000';
skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#000000';
skin['CONTENT_HEADLINE_COLOR'] = '#000000';
skin['NUMBER_ROWS'] = '2';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderMembersGadget(
 { id: 'div-7w5ths5ahnit',
   site: '10916685731781888212' },
  skin);
</script>
</div>
</div>

Keterangan:
Ganti tulisan warna merah dengan ID widget follower blog anda.

5. Terakhir tinggal klik Simpan dan lihat hasilnya.

Dari tutorial diatas maka widget follower blog sudah terlihat cukup menarik dan pastinya valid HTML5. Namun apabila ingin membuat ketiga widget tersebut tampil berurutan pada satu ruang widget, antara widget follower blog, widget google+ follower dan widget facebook like box maka anda perlu menambahkan sedikit kode lagi kemudian menaruhnya tepat di bawahnya kode point 4 di atas. Agar lebih mudah copy saja kode berikut ini, lalu ganti ID masing-masing dan taruh di bawah kode widget follower point 4 di atas.

<div class="widget-follower" style="height:100px;">
<div style="height:150px;overflow:hidden;">
<div class="g-person" data-href="//plus.google.com/104093787575230359634" data-theme="dark" data-layout="landscape" data-showcoverphoto="false" data-rel="author"></div>
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</div>
</div>

<div class="widget-follower" style="height:145px;">
<div style="height:150px;overflow:hidden;">
<div class="fb-like-box" data-href="http://www.facebook.com/andestyle" data-width="292" data-show-faces="true" data-stream="false" data-header="false" data-show_border="false"></div> 
</div>
</div>

Dari kode di atas, widget facebook like box juga sudah valid HTML5. Demikian akhir dari tutorial sederhana untuk Modifikasi Widget Follower Blog Valid HTML5, sekian dan selamat mencoba karena hal tersusah adalah salah satu hal yang tidak pernah dicoba.