Customized tampilan "Blogger Followers"

Customized Blogger Followers - Terus terang, saya kurang nyaman dengan tampilan
standar

Blogger Followers. Bila anda perhatikan, terlihat link menu Follow 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 != &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 saya 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>

Kemudian simpan pekerjaan anda, dan silahkan lihat perubahannya.

 

Jangan lupa untuk mem-follow blog oom

disini atau anda bisa melihat siapa saja yang sudah bergabung di followers
oom

disini. Good Luck ya :)