Blogger Yorum Eklentisi

Yorumlar, bir blogun önemli bir parçasıdır çünkü okuyucular gönderi veya blog hakkındaki düşüncelerini burada ifade eder. Bu nedenle, bu kısmı daha şık, erişilebilir ve düzenli hale getirmek için biraz zaman ayırmak önemlidir.

Yorumlarımızı düzenlemek için, her yorumu kolayca tanımlanabilir hale getirmeliyiz. Böylece, nereden başladığını ve nerede bittiğini kolayca anlayabiliriz. Aksi takdirde, harf karmaşasına dönüşür ve ziyaretçilerimizi kaybedebiliriz. İşte her yorumu ayırarak düzen sağlamanın bazı yöntemleri.

İlk yöntem en basit olanıdır: Yorumlarımızı, her birinin altına bir kenarlık ekleyerek ayıracağız.

Blogger Yorumlarına Ayırıcı/Kenarlık Nasıl Eklenir?

Adım 1.Basit bir ayırıcı eklemek için Şablon > HTML'yi Düzenle bölümüne gidin ve <b:skin>...</b:skin> etiketinin solundaki küçük ok işaretine tıklayın.

Adım 2.Kod alanının içine herhangi bir yere tıklayın ve aşağıdaki kod parçasını bulmak için CTRL + F tuşlarını kullanarak arama yapın:

]]></b:skin>

Adım 3.Aşağıdaki stili tam olarak bunun üstüne yapıştırın:

Eğer yanıt verme seçeneğiyle yorumları sıralı olarak kullanıyorsak:

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

Eğer önceki yorum sistemini kullanıyorsak (yanıt verme seçeneği yoksa):

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

Not: Kenarlığın rengini değiştirmek için kalın yazılmış renk değerini değiştirin ve kalınlığını değiştirmek için 1 değerini artırın/azaltın.

Adım 4. Şablonu kaydedin.

Basit bir kenarlık yerine, yorumlarımız arasında bir ayırıcı/görsel de ekleyebiliriz.

Blogger'da Her Yorum Arasına Nasıl Bir Ayırıcı (Görsel) Eklenir?

Adım 1. HTML'yi Düzenle bölümüne gidin ve aşağıdaki kod parçasını aramak için (CTRL + F) tuşlarını kullanın:

 ]]></b:skin>

Adım 2. Aşağıdaki kodu tam olarak bunun üstüne yapıştırın:

Eğer sıralı yorumlar kullanıyorsak (yanıt verme seçeneğiyle):

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

Eğer önceki yorum sistemini kullanıyorsak (yanıt verme fonksiyonu yoksa):

#comments-block .comment-footer {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj_EPu616Tk3HQlBJlMxh2O4ghLEyas9MG3e_GE4vsQ05JQ1PKmM_8YvsxZ8rhzUP1CvQ1gmSA_SY0zcWG9NmLaAg9TjFkMWkl4O9CxPghu2iOgEZ0GuGCErWqdJ_a2nfA30rsZl1fJHJiXkZCI_cnWII3Y08iq0nCd51Uk3xTLbVCxnJ7yZVh3ADipuAf/s16000/blogger-yorum.png);
background-repeat:no-repeat;
background-position:center bottom;
height: 50px;
}

Not: Mavi renkteki URL, istediğiniz gibi değiştirebileceğiniz görseli temsil eder. Ancak, yükseklik kısmında bir görselin yüksekliğine 30px daha eklemeniz gerektiğini unutmayın. Örneğin, görselin yüksekliği 50px ise, değer 80px olacaktır. Bu, görselin yorumların tarihini kapsamayacak şekilde yerleştirilmesini sağlamak içindir. (Sıralı yorumlar için, 30 değerini artırıp azaltarak dolgu miktarını ayarlayabilirsiniz.)

Adım 3. Şablonu kaydedin.

Ancak her yorum için daha fazla stil ekleyebilirsiniz, örneğin bir arka plan rengi ve kenarlık eklemek gibi.

Blogger Yorumlarına Kenarlık ve Arka Plan Rengi Nasıl Eklenir?

Adım 1. Şablon > HTML'yi Düzenle bölümüne gidin ve aşağıdaki kod parçasını arayın:

]]></b:skin>

Adım 2. Aşağıdaki kodu tam olarak bunun üstüne yapıştırın:

Eğer sıralı yorumlar kullanıyorsak (yanıt verme seçeneğiyle):

.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 kaydedin.

Eğer önceki yorum sistemini kullanıyorsak (yanıt verme fonksiyonu yoksa):

Adım 1. Şablonunuzda bu satırı arayın:

<b:loop values='data:post.comments' var='comment'>

Adım 2. Ardından, aşağıdaki kodu hemen altına ekleyin:

<div class='comments-new'>

Adım 3. Biraz daha aşağıya bakın ve </b:loop> kodunu göreceksiniz, hemen üstüne bunu ekleyin:

</div>

Adım 4. Şimdi şunu bulun:

]]></b:skin>

Adım 5. Ve hemen üstüne bu CSS kodunu ekleyin:

.comments-new{
background:#F9F9F9; /* Background Color */
border: 1px solid #f1f1f1; /* Bprder 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;
}
.comment-body {
color:#444444; /* Font Color in Comments */
padding:10px;
}
.comments-new a {
padding-left: 5px; /* Link color */
color: #4A9BD8;
}
.comment-timestamp a {
font-style:italic;
font-size:9px;
padding-right:10px;
padding-left:10px;
}
.comments .avatar-image-container {
overflow: visible;
}

(Yuvarlak kenarlar, Internet Explorer'da CSS ile çalışmaz.)

Her iki durumda da, yeşil ile belirtilen kısımlarda arka plan rengini, kenarlığı vb. değiştirebilirsiniz.

Adım 6. Şablonu kaydedin.

Daha fazla yardıma ihtiyacınız olursa, aşağıya bir yorum bırakabilirsiniz.