Kurulum: Şablon>Htmlyi Düzenle>Devam Et yolunu izleyerek Widget Şablonlarını Genişlet diyoruz.Ctrl+F yardımı ile aşağıdaki kodu aratın.
]]></b:skin>
Bulduğunuz kodun üzerine aşağıdaki kodu ekleyin.
.comment-bubble {
float : right;
width : 48px;
height : 48px;
background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNXYSQdgq2wBkQmwXHY2XHrPK06luVAkbiEbrhYQjDDuHKu9c00szi-Rd2FOwj8hZb6Fh9XN2xsdulmaqUK_MyecRvTNV4SqGCdFVlX6thHu9RxtDa2EdWXV-IIOd9IMeuJVccnE9hLHHm/s1600/speech+bubble+green.png);
background-repeat: no-repeat;
font-size : 18px;
margin-top : -15px;
margin-right : 2px;
text-align : center;
}
Yükarıdaki kırmızı ile gösterilmiş kodu aşağıda vercegimiz resimlerle yada istediğiniz resimlerle değiştirebilirsiniz.
Şimdiki adımda ise yorum balonu kodunu anasayfamıza eklemeye geldi bunun için aşağıdaki kodları bulun.
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
Eğer kodları bulamadıysanız temanızda sadece bir kısmını örneğin ' post-title entry-title ' kısmını aratıp bulmanız gerekmektedir.
Eğer kodları bulduysanız aşağıdaki kodları hemen sonrasına ekleyin.
<b:if cond='data:post.allowComments'>
<a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' style='color: #ffffff; font-size: 18px; font-weight: bold;'><data:post.numComments/></a>
</b:if>
Kod içerisinde kırmızı ile işaretlediğim yeri kendinize göre ayarlayabilirsiniz.
Şimdi vericek olcağım resimleri css ye eklediğimiz yani ']]></b:skin>' kodundan önce eklediğimiz kodların içinde kırmızı renk ile gösterdiğim kodla kendinize göre isteğinize göre değiştirebilirsiniz.
Almak istediğiniz resmi sağ tıklayıp 'Resim konumunu kopyala' diyip Ctrl+V yardımıyla yapıştırabilirsiniz.










Hiç yorum yok:
Yorum Gönder