13.8.07

Tips : Fonts Colors on Team Blogs

posted under by ilham saibi |
Anda memiliki sebuah blog yang di urusi bareng bareng atau sebuah blog tim?? Di tutorial ini saya akan memberikan sebuah cara bagaimana membedakan postingan dari setiap anggota tim, dengan cara memberikan warna berbeda terhadap postingannya.
Kita anggap saat ini anda memiliki tim dengan 2 orang anggota (hary dan wahyu ). Kita akan mengganti warna post dari setiap anggota tim. Harry berwarna merah dan wahyu berwarna biru.
Masuklah ke bagian Template >> Edit HTML >> expand widget templates.
Didalam css anda, tambahkan kode berikut :
.post-body-harry { color:#ff0000; }
.post-body-wahyu { color:#0000ff; }

Lalu carilah code post-includable, coba lihat code berikut :

<b:includable id='post' var='post'>

....

....

<div class='post-header-line-1'/>

<div class='post-body'>

<p><data:post.body/></p>

<div style='clear: both;'/> <!-- clear for photos floats -->

</div>

<div class='post-footer'>

....

....

</b:includable>


Yang anda lihat diatas adalah bagian header post anda ( bagian yang dikosongkan ), post-body, dan baris pertama post-footer. Sekarang kita akan mengganti code ini, jadi harry dan wahyu akan memiliki warna post yang berbeda.:

<b:includable id='post' var='post'>

....

....

<div class='post-header-line-1'/>


<b:if cond='data:post.author == "harry"'>

<div class='post-body-harry'><p><data:post.body/></p>

<div style='clear: both;'/> <!-- clear for photos floats -->

</div>

<b:else/>

<div class='post-body-wahyu'>

<p><data:post.body/></p>

<div style='clear: both;'/> <!-- clear for photos floats -->

</div>

</b:if>


<div class='post-footer'>

....

....

</b:includable>



lalu savelah template anda

Jika anda memiliki anggota yang lebih dari 2 orang, maka prinsip untuk mengganti warnanya sama dengan yang diatas, anda hanya perlu menambah beberapa statement. Untuk diingat, bahwa nama yang digunakan adalah username dari setiap anggota tim.

Laptop review


top