Blogger yorumlarını özelleştirmek

Okuyucularımızın blogumuz veya yayınlarımız hakkındaki düşüncelerini paylaşabilmeleri için blog yorumları blogumuzun temel ve vazgeçilemez parçalarından biridir.

Yorumlarımızı belli bir sıraya koymak için onları birbirinden ayırmak ve iyi tanımlamak gerekir.Yanı bir yorumun nereden başlayacağı ve nerede biteceği okuyucularımız için belirtmemiz gerekir aksi halde birbirine karışmış yorumları okuyucular okumaktan kaçabilir.

Bunu üç şekilde yapabiliriz:

1-Yorumlar arasına çizgi koymak

2-Yorumları ayıran ayıraç veya resim eklemek

3-Yorumları tam özelleştirmek hem arkaplan rengini değiştirmek hem de yorumlar arasına sınır yanı çizgi koymak.

1-Yorumlar arasına sınır veya çizgi koyun:

             



Adım 1:Şablon>HTML'yi düzenle kısımlarına tıklayın ve alttaki kodu bulun.Kodu bulduktan sonra kodun solundaki siyah ok işeretine tıklayın:

<b:skin>...</b:skin>

Adım 2:Şimdi CTRL+F kombinasyonu kullanarak alttaki kodu bulun:

]]></b:skin>

Adım 3:Aşağıdaki kodu kopyalayıp adım 2 de bulduğumuz kodun hemen üstüne yapıştırın:

Eğer yeni yorum sistemi kullanıyorsanız(Cevaplanabilir yorumlar):

.comment-block {border-bottom: 1px solid #000000;}.comments .continue { border-top: 0px solid #000;}

Eğer eski yorum sistemi kullanıyorsanız(Cevaplanamaz yorumlar):

#comments-block .comment-footer {border-bottom:1px solid #000000;}

Not:Sınır veya çizgi rengini değiştirmek için 000 ile belirtilen değerleri,çizgi kalınlığını değiştirmek için 1px ile belirtilen 1 rakamını değiştirin.

Adım 4:Şablonu kaydettin.

2-Yorumlar arasına ayıraç veya resim eklemek:

             



Adım 1:Şablon>HTML'yi düzenle bölümlerine gidin ve CTRL+F kullanarak alttaki kodu bulun:

]]></b:skin>

Adım 2:Alttaki kodu üste bulduğunuz kodun hemen üstüne yapıştırın:

Eğer yeni yorum sistemini kullanıyorsanız:

.comment-block {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4JJSblp43_MfyJWdlZft9RaU_T6oa6vmUZGspzd3JJ3zvRhPTqOoQeWkLYcl18WK1wMuZHBlzeFFUpX73TpuxUOGtnGfhmAY52Xn05sxH8qGvM5rtB5YXiEcjYOPU_F-bAXRtWye8FkTm/s1600/74.gif);background-repeat:no-repeat;background-position:center bottom;padding-bottom:30px;margin-top: -10px;}.comments .continue {border-top: 0px solid #000;}

Eğer eski yorum sistemi kullanıyorsanız :

#comments-block .comment-footer {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4JJSblp43_MfyJWdlZft9RaU_T6oa6vmUZGspzd3JJ3zvRhPTqOoQeWkLYcl18WK1wMuZHBlzeFFUpX73TpuxUOGtnGfhmAY52Xn05sxH8qGvM5rtB5YXiEcjYOPU_F-bAXRtWye8FkTm/s1600/74.gif);background-repeat:no-repeat;background-position:center bottom;height: 50px;
}

Not:Yeşil renkle belirtilen yere istediğiniz resim url'sini ekleyebilirsiniz.Height yazan kısım ise yüksekliktir.Ve bu yükseklik yüklediğiniz resim pikselinden daima 30 px büyük olmalı.Mesela diyelim 20 px lik bir resim mi eklediniz,height yanı yükseklik 50 px olmalı.Bunu yapmamızın amacı resmin yorum tarihini kapatmasını engellemektir.

Adım 3:Şablonu kaydettin.


3-Tam özelleştirme hem yorumların arkaplan rengini değiştirme hemde yorumlar arasına çizgi koyma:


                                       



Adım 1:Şablon>HTML'yi düzenle kısımlarına tıklayın ve CTRL+F kombinasyonunu kullanarak alttaki kodu bulun:

]]></b:skin>

Adım 2:Yukarıda bulduğunuz kodun hemen üstüne alttaki kodu ekleyin:

.comment-block {background:#F9F9F9; /* Background Color */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; /* Background color behind the replies */border-left: 4px dotted #E6E6E6; /* Border on the left side of replies */}.comment-content {padding:2px 10px 10px 10px;color:#444444; /* Font Color in Comments */}.datetime a {font-style:italic;font-size:9px;margin-left: 2px;}.comments .comments-content .user a{color:#1982D1; /* Author's name color */font-size: 12px; /* Author's name size */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 #000;}.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;}

Adım 3:Şablonu kaydettin.