Bloggerda Yazar Yorumlarını Renklendirme

Blog yazarına ait yorumların diğer ziyaretçilerin yorumlarından farklı görünmesini sağlayabilirsiniz.

Birçok blogger kullanıcısının hoşuna gideceğini düşündüğüm bu özellik ile yorumlarınızın rengini, arka planını değiştirebilme imkanınız var.

Bu anlatım bloggerin kullanıcılarına hazır şablonları baz alınarak anlatılmıştır. Eğer farklı bir şablon kullanıyorsanız. Aratmanız gereken kodların benzerlerini bulmaya gayret edin.

Adım 1: Blogger hesabınız ile giriş yapın.
Adım 2: Yerleşim > HTML'yi Düzenle'ye tıklayın ve şablonunuzun yedeğini mutlaka alın.
Adım 3: Widget Şablonlarını Genişlet' e tıklayın. Ctrl+F tuşlarına basın ve aşağıdaki kodu aratın

]]></b:skin>

bulmuş olduğunuz bu kodun üstüne alttaki CSS kodunu yapıştırın;

.author-comments {
background: #ffffff;
color: #000;
border: 2px solid #666666;
padding: 5px;
}

Not: "color" yazı rengini, "background" arka plan renginini değiştirmenize ve "border" yorum alanına çerçeve yapmanıza yarar.

Ekstra: Eğer yorumların arka planına resim yerleştirmek isterseniz yukarıdaki CSS koduna alttaki kodu ekleyebilirsiniz.

background: url(http://kullanilacak-resim-web-adresi.jpg)

Adım 4: Ardından altta verilen kodda kırmızı ile renklendirilmiş alanları temanızda uygun yere yapıştırın. Sadece kırmızı ile renklendirilmiş alanlar temaya eklenecek. Diğer kısımlar referans olması için koda eklenmiştir.

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
der ki...
</dt>

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

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

</b:if>

<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:
comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

Unutmayın sadece kırmızı ile renklendirilmş alanları temanıza eklemeniz gerekiyor. Doğru yere kodu yapıştırmanız adına diğer kısımlar örnek olarak koda eklenmiştir.

Adım 5: Temanızı görüntüleyin ve eğer sorun yoksa, şablonunuzu kaydedin.

Kolay gelsin.

Bu yazıyı beğendiyseniz lütfen Sosyal Ağ tuşları ile destek olun...