Tutorial 127 : Background Berbeza antara Admin dan Pembaca.

Assalamualaikum.

Di pagi yang syahdu ibarat musim sejuk di bumi Bangi ini nak tulis tutorial yang simple lagi menarik untuk dipelajari oleh anda semua. Kali ini nak ajar untuk bezakan background komen antara penulis blog/admin dengan komen pembaca. Dengan cara ini memudahkan korang membalas komen dan memudahkan reader korang melihat komen korang. Tak la juling biji mata nak cari komen pembaca dan komen korang. Contohnya seperti gambar di bawah :

Cuba perhatikan, komen aku background berbeza dengan komen pembaca.

Sangat sistematik kan?

Jom ikuti cara mudah untuk melakukan tutorial ini. Sekiranya code yang aku suruh cari tak ada, kemungkinan besar template korang tidak sesuai. Harap maklum.

BAHAGIAN 1 ( setting )

1. Sign in Blogspot > Design > Edit Html > Tick Expand Widget Templates

2. Cari code di bawah, Ctrl F sahaja dan paste code di bawah dalam kotak find then tekan enter!

<dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>

kalau tak jumpa code di atas, cari yang ini pula :

<dd class='comment-body'>

3. Copy code di bawah dan paste di atas code yang korang cari tadi.

<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>

4. Cari lagi code di bawah,  Ctrl F sahaja

<dd class='comment-footer'>

5. Dah jumpa? Copy di bawah, dan paste di atas code yang korang cari tadi ( nombor 4 )

</b:if>

6. Kalau korang tak jumpa code <dd class='comment-footer'> korang cari code ini pula :

<span class='deleted-comment'><data:comment.body/></span> <b:else/> <p> <data:comment.body/> </p> </b:if> </dd>

7. Dan paste code </b:if> di bawah code tadi.( nombor 6 )



Rehat kejap. Penat ye cari code. Agak panjang sikit tutorial ini. Baca elok-elok ye.





BAHAGIAN 2 ( meletakkan fungsi background )

1. Selepas korang membuat tutorial bahagian 1, korang kena buat bahagian 2 untuk meletakkan fungsi background tersebut. Ikuti langkah-langkah seterusnya.

2. Cari code di bawah, Ctrl F sahaja dan paste code di bawah dalam kotak find then tekan enter!

]]></b:skin>

kalau tak jumpa code tersebut, cari code ini pula :

</style>

3. Pilih sama ada korang nak letakkan warna atau background di dalam kotak komen. Pilih satu sahaja.


4. Copy code fungsi warna atau fungsi background dan paste di atas code yang korang cari di langkah Nombor 2 tadi.


Untuk Meletakkan Fungsi Warna Sahaja :

.comment-body-author {
background: #F455A5;
background-repeat: repeat;
border: 1px solid #F455A5;
padding: 5px;
}

Untuk Meletakkan Fungsi Background Sahaja :

.comment-body-author {
background-image:url(URL BACKGROUND GAMBAR);background-position: top center;
background-repeat: repeat;
border: 1px solid #F455A5;
padding: 5px;
}

4. Apa yang korang perlu ubahsuai?

#F455A5 - untuk warna background korang. 
#F455A5 - untuk warna border korang
URL BACKGROUND GAMBAR - tukar kepada URL gambar korang

1px - ketebalan border korang ( lagi banyak bilangan lagi tebal ) 
solid - jenis border korang boleh tukar kepada dashed, dotted
Nak ambil code warna boleh ke SINI

5. Preview, jika tiada sebarang error dan masalah. Boleh SAVE. Dan lihatlah hasilnya.

Buatlah dengan tekun ye. Tak jadi jangan nagess.