Customized tampilan "Blogger Followers" Di Blogger

Customized Blogger Followers - Terus terang, saya kurang nyaman dengan tampilan standar Blogger Followers. Bila anda perhatikan, terlihat link menuFollow this blog yang berada diatas, kemudian diikuti informasi jumlah followers dan link View all dibawahnya. Sekilas memang tidak terlalu mengganggu, tapi namanya juga selera, tentu saja terasa ada yang kurang.

Jika anda sependapat dengan saya, tidak ada salahnya untuk mencoba memodifikasi tampilan standar Followers ini agar nampak lebih manis. Jika Followers anda belum support di mode indonesia, silahkan klik disini untuk cara menampilkanya.

Lihat sample modifikasi tampilan dibawah:

Anda bisa melihat perubahan diatas, dimana link tertata rapi, serta sedikit sentuhan border (garis tepi) pada setiap photo.

Bila anda pada area mode sedang login, link Manage akan tetap pada posisi menggantikan Link View All. jadi jangan kuatir pada perubahan kodingnya :)

Mari kita coba memodifikasinya:

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 by o-om.com)
----------------------------------
*/
.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;}

Jangan lupa simpan dulu perubahan diatas. (Sebenarnya kode CSS diatas bisa anda modifikasi sesuai keperluan, jadi saya masukan saja kode CSS Followers secara lengkap jika suatu waktu anda ingin memodifikasinya)

Kita lanjutkan mengedit kode utamanya, disini agak rumit karena akan banyak kode yang harus anda perhatikan.

Pertama tuju ke halaman Edit HTML, jangan lupa 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 != ""'>
<h2 class='title'><data:title/> (<data:totalFollowerCount/>)</h2>
</b:if>

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

<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='"this.onerror=null;this.src=\"" + data:anonFollowerImageUrl + "\";"' expr:onload='"setAttributeOnload(this, \"src\", \"" + data:follower.imageUrl + "\")"' 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 saya modifikasi dibawah ini: