Customize Google+ Follower

Assalamualaikum dan Salam Sejahtera, sebelum ni aku ada war-warkan yang Google telah melancarkan widget Google+ Follower. Kali ni aku nak kongsikan dengan u all. Bagaimana nak "Customize Google+ Follower" agar tampilannya serasi bersama dengan interface template u all.

Customize Code Google+ Follower Widget.

<b:widget id='PlusFollowers1' locked='false' title='Google+ Followers' type='PlusFollowers'>
<b:includable id='main'>
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<b:if cond='data:profileUrl != &quot;&quot;'>
<div style='margin-left:10px;'>
<div class='g-plus' data-action='followers' data-height='300' data-source='blogger:blog:followers' expr:data-href='data:profileUrl' expr:data-width='data:width'/>
<script type='text/javascript'>
(function() {
window.___gcfg = {&#39;lang&#39;: &#39;<data:language/>&#39;};
var po = document.createElement(&#39;script&#39;);
po.type = &#39;text/javascript&#39;;
po.async = true;
po.src = &#39;<data:plusOneApiUrl/>&#39;;
var s = document.getElementsByTagName(&#39;script&#39;)[0];
s.parentNode.insertBefore(po, s);
})();
</script>
</div>
</b:if>
</b:includable>
</b:widget>

Okay di atas ni adalah full code bagi widget "Google+ Follower" yang aku ambil secara manual di ruangan "Edit HTML" blog aku. And kali ni aku nak ajar u all, macam mana nak customize widget tersebut agar ianya serasi bersama dengan template blog u all.

1. 1st u all nampak tak barisan code yang aku highlight dengan warna merah tu ?. Okay kalau u all nak tau. Code tulah aku ubah untuk jadikan widget tu seperti yang u all lihat dalam blog aku ni.
2. Okay code pertama adalah <div style='margin-left:10px;'>, code ni aku tambah sebab aku nak kekanankan sedikit widget tersebut. Ini kerana widget tu agak kekiri bila aku masukkan dalam blog aku ni. Yang ni u all ubah jerlah ikut suka u all, kalau u all rasa ada apa-apa code style yang u all nak tambah just tambah kat situ jer CSS Code. Owh terlupa pula aku. Barisan code ni u all kena tambah sendiri tau. Code ni tak dak dalam code asal. Penutup code tu adalah </div> yang kat bawah tu.
3. data-height tu adalah code untuk ketinggian widget u all. U all boleh ubah mengikut citarasa u all lah. Macam aku, aku ubahlah supaya tak banyak gambar pengguna G+ aku terpampang wanted disitu. Sebabnya gambar-gambar depa tu terlebih besar sudah.
4. data:width tu plak u all ubahlah kepada nombor seperti ini 300 or less (kurang). Tu untuk kurangkan kelebaran widget tersebut. Kalau diikutkan width yang sebenar bagi widget tu kalau tak silap aku 980.

Setakat ni. Itu jer lah kot tutorial aku kali ni. Hope ianya dapat membantu u all yang terasa benda alah tu besar sangat. Itu jer cara yang aku dapat untuk mencantikkan widget tersebut.