Blogger Yorum Bölümüne Resim Ekleme ve Özelleştirme

Blogger yazar yorumlarını değiştirme özelliğinde sizlere daha önce paylaşmış olduğum Blogger Yazar Yorumlarını Değiştirme vardı şimdi bu yazımın içersinde sizlere anlatacağım yorumlar arasına resim nasıl yapılır ve yanıtla ve sil özelliğinde bir kaç adım.Daha öncede söylediğim gibi yazarların gelen ziyaretçilerine yorumları ile cevap vermeleri önemlidir ve yorum bölümünü böyle farklı tarzda yapmakta gelen ziyaretçilerin dikkatini çekebilir ve yorum bırakmalarınada neden olabilir.Şimdi gelelim anlatıma.

1-Blogger Panel Bölümünden Şablon Diyoruz

2-Daha Sonra Karşımıza Çıkan Bölümde HTML'yi Düzenle Diyoruz

3-Son Olarak Witget Şablonlarını Genişlet Kutusunu İşaretliyoruz.

Yorumların aralarına resim ekleme özelliğini nasıl yapacağım ondan başlayalım.

CTRL+F tuşuna basın ve ]]></b:skin> kodunu bulun aşağıdaki kodları üstüne yerleştirin.


.comment-block {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYkPfQFrqA1SfF8EMP2c2i_DVwDpDdLoL6wC1vNrvPylcPnMd0Zm4CjBriTsUJbFLjlUS53TsViN11SZOAzt1C9wkT3XhXGtXWNrbIA9LVTPuAL7Tzby7Q3xA5I-dA4UeF27xfcOzZ15mc/s1600/74.gif);
background-repeat:no-repeat;
background-position:center bottom;
padding-bottom:30px;
margin-top: -10px;
} 

.comments .continue {
border-top: 0px solid $(widget.alternate.text.color);
}


Değiştirebileceğiniz bölümler mavi renk ile taradığım bölüm istediğiniz resim varsa ekleyebilirsiniz.Resim boyutu 500x20 siz kendi boyutunuza göre ayarlayabilirsiniz resmi.

Şimdi gelelim ikinci tasarıma burda yanıtla ve sil seçeneklerini özelleştirme

CTRL+F tuşuna basın ve ]]></b:skin> kodunu bulun aşağıdaki kodları üstüne yerleştirin.


.comment-block {
background:#F9F9F9; /* Arka Plan Rengi*/
border: 1px solid #f1f1f1; /* Border style */
margin-bottom:20px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; 
}

.comments .comment-thread.inline-thread {
background-color: #FAFAFA; /* Arka Plan Rengi ve Cevaplar */
border-left: 4px dotted #E6E6E6; /* Border on the left side of replies */
}

.comment-content {
padding:2px 10px 10px 10px;
color:#444444; /* Yorum Rengi */
}

.datetime a {
font-style:italic;
font-size:9px;
margin-left: 2px;
}

.comments .comments-content .user a{
color:#1982D1; /* Yazar Adı Rengi*/
font-size: 12px; /* Yazar Adı Boyutu*/
padding-left: 10px;
font-weight:bold;
text-decoration:none;
}

.comments .comment .comment-actions a,.comments .comment .continue a{
display:inline-block; 
margin:0 0 10px 10px;
padding:0 15px;
color:#B4B4B7;
text-align:center;
text-decoration:none;
background:#F8F8FB;
border:1px solid #C2C2C5;
border-radius:4px;
height:20px;
line-height:20px;
font-weight:normal;
cursor:pointer;
}

.comments .continue {
border-top: 0px solid $(widget.alternate.text.color);
}

.comments .comments-content .icon.blog-author {
background-image: none;
margin-left: -10px;
}

.comments .avatar-image-container{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width: 40px;
max-height: 40px;
border: 1px solid #F2F2F2;
padding: 1px;
}

.comments .avatar-image-container img{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
max-width: 40px;
height: 40px;
}


Bu kadar özelleştirme yapabileceğiniz yerleri mavi renk ile renklendirdim istediğiniz ton rengi ve boyutta yapabilirsiniz.


http://www.bloggerturkey.com/2013/04/blogger-yorum-bolume-resim-ekleme-ve.html