Followers Support di Blog Berbahasa Indonesia

Setelah di launching sekitar bulan Agustus lalu, ternyata banyak juga yang belum mengetahui layanan ini. Sayangnya tidak semua blog support akan layanan ini, terutama blog berbahasa Indonesia. Nah, saya akan sedikit berbagi tentang bagaimana cara agar Followers Support di Blog Berbahasa Indonesia. Followers bekerja layaknya aplikasi Feed Reader pada umumnya, tentunya anda bisa menentukan sendiri Feed Blog mana saja nantinya yang ingin ditampilkan sebagai blog favorite bacaan anda, kita juga bisa memasang Widget Followers ini, menampilannya pada pembaca agar mereka juga tahu siapa saja yang telah mem-follow link blog kita. Sekilas cara kerjanya mirip seperti blog reactions pada Technorati dan widget Mybloglog ya :)

Sebenarnya supaya Follower ini support dengan blog kita, yang perlu dilakukan adalah mengganti setting bahasa pada dasboard kamu ke bahasa English dan kemudian set juga pilihan English pada halaman Settings - Formatting - Language (bahasa), selese! Jadi pake trik apa-apa, Mudah ya? Ok, jika layanannya sudah muncul langsung saja buat widget follower ini, caranya tinggal masuk ke halaman layout > add gadget > follower, beres...!!! Jangan lupa untuk memfollow saya disni.

Masih belum puas dengan tampilan widgetnya? Ok, saya akan share lagi ney tentang bagaimana cara memodifikasinya agar kelihatan lebih nyaman. Trik saya saya dapetin dari o-om sebenernya, maklum saya tidak "jago" dalam urusan beginian, jadi cuma comot sana-sini dan edit-edit dikit, he..he..!

Kita lihat contoh modifikasi berikut ya:



Kita akan mencoba memodifikasinya supaya tampilannya menjadi seperti dibawah ini:



Menarik bukan? Mari kita praktekan ilmu dari master ini ya???

Langsung saja kita menuju halaman Edit HTML, dan jangan lupa utuk mendownload full template kamu dulu untuk menjaga-jaga jika terjadi error. Untuk menambahkan border (garis tepi) pada gambar, pertama masuk halaman Edit HTML, kemudian copi-paste semua kode CSS dibawah, Sebaiknya letakan kode tersebut dibawah kode <b:skin><![CDATA[.

/* Follower Modified
----------------------------------
*/
.follower-grid {width:150px;}
.follower {width:32px; height:32px; float:left; margin:2px;}
.follower-img {float: left; border:1px solid #222; margin-top: 2px;
margin-right: 2px; margin-bottom: 2px; margin-left: 2px;}
.follow-this {margin:0.5em 0.5em 0.5em 0; font-weight:bold;}
.followers-canvas {margin:0.5em 0.5em 0.5em 0; font-weight:bold;}


Jika sudah langsung di Save saja, dan pada halaman Edit HTML, kita beri tanda centang pada Expand Widget Templates, Kemudian cari kode tercetak tebal sesuai warna hijau di bawah ini:

<b:widget id='Followers1' locked='false' title='ini sesuai dengan title masing-masing'
type='Followers'>
<b:includable id='main'>
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/> (<data:totalFollowerCount/>)</h2>
</b:if>


<div expr:id='data:widget.instanceId + &quot;-wrapper&quot;'>
<b:if cond='data:followingLinkPresent'>
<div class='follow-this profile-link item-control following-follow-this'>
<a expr:href='&quot;javascript:_FollowersView._openPopup(\&quot;&quot; +
data:followUri + &quot;\&quot;);&quot;'>
<data:followThisMessage/>
</a>
</div>
<div class='follow-this profile-link item-control
following-stop-following-this'>
<a expr:href='&quot;javascript:_FollowersView._openPopup(\&quot;&quot; +
data:followUri + &quot;\&quot;);&quot;'>
<data:stopFollowingMessage/>
</a>
</div>
</b:if>

<div class='followers-grid'>
<b:if cond='data:totalFollowerCount == 0'>
<div class='profile-link item-control following-follow-this'>
<data:emptyFollowersMessage/>
</div>
</b:if>
<!--
Relies on the js written out in navbar.gxp
-->
<b:loop values='data:followers' var='follower'>
<div class='follower'>
<a expr:href='data:follower.profileUrl' expr:title='data:follower.displayName'
rel='nofollow'>
<img class='follower-img' expr:alt='data:follower.displayName' expr:height='data:follower.imageHeight'
expr:onerror='&quot;this.onerror=null;this.src=\&quot;&quot; +
data:anonFollowerImageUrl + &quot;\&quot;;&quot;' expr:onload='&quot;setAttributeOnload(this,
\&quot;src\&quot;, \&quot;&quot; + data:follower.imageUrl + &quot;\&quot;)&quot;'
expr:width='data:follower.imageWidth' src='http://img1.blogblog.com/img/blank.gif'/>
</a>
</div>
</b:loop>
<div class='clear'/>
</div>

<div class='followers-canvas profile-link'>
<data:followersFooterMessage/>
<span class='item-control following-not-admin'>
<a expr:href='data:followersUri'>
<data:viewAllMessage/>
</a>
</span>
<span class='item-control blog-admin'>
<a expr:href='data:manageFollowersUri'>
<data:manageFollowersMessage/>
</a>
</span>
</div>

Kemudian ganti semua kode warna merah diatas, dengan melakukan (copy-paste) kode warna merah yang sudah modifikasi dibawah ini:
Kemudian ganti semua kode warna merah diatas,
dengan melakukan (copy-paste) kode warna merah yang
sudah modifikasi dibawah ini:

<div class='followers-grid'>
<b:if cond='data:totalFollowerCount == 0'>
<div class='profile-link item-control following-follow-this'>
<data:emptyFollowersMessage/>
</div>
</b:if>
<!--
Relies on the js written out in navbar.gxp
-->
<b:loop values='data:followers' var='follower'>
<div class='follower'>
<a expr:href='data:follower.profileUrl' expr:title='data:follower.displayName'
rel='nofollow'>
<img class='follower-img' expr:alt='data:follower.displayName' expr:height='data:follower.imageHeight'
expr:onerror='&quot;this.onerror=null;this.src=\&quot;&quot; +
data:anonFollowerImageUrl + &quot;\&quot;;&quot;' expr:onload='&quot;setAttributeOnload(this,
\&quot;src\&quot;, \&quot;&quot; + data:follower.imageUrl + &quot;\&quot;)&quot;'
expr:width='data:follower.imageWidth' src='http://img1.blogblog.com/img/blank.gif'/>
</a>
</div>
</b:loop>
<div class='clear'/>
</div>

<div expr:id='data:widget.instanceId + &quot;-wrapper&quot;'>
<b:if cond='data:followingLinkPresent'>
<div class='follow-this profile-link item-control following-follow-this'>
<a expr:href='&quot;javascript:_FollowersView._openPopup(\&quot;&quot; +
data:followUri + &quot;\&quot;);&quot;'>
<data:followThisMessage/>
</a> -
<span class='item-control following-not-admin'>
<a expr:href='data:followersUri'>
<data:viewAllMessage/>
</a>
</span>

<span class='item-control blog-admin'>
<a expr:href='data:manageFollowersUri'>
<data:manageFollowersMessage/>
</a>
</span> - <data:followersFooterMessage/>
</div>

<div class='follow-this profile-link item-control
following-stop-following-this'>
<a expr:href='&quot;javascript:_FollowersView._openPopup(\&quot;&quot; +
data:followUri + &quot;\&quot;);&quot;'>
<data:stopFollowingMessage/>
</a>
</div>

</b:if>

Jika sudah langsung Save, dan lihat hasilnya!!!

Happy blogging...