24 Nisan 2012 Salı

Blogger Dişli Yorumlara Stil Verelim

27 yorum

Blogger’ın bir süre önce dişli yorumlara geçtiğini ve yorumlara yanıtlama seçeneğinin geldiğini çok iyi biliyorsunuz.Birçok Blogger kullanıcısı bu dişli yorumların görünümünü beğenmediği için kullanmayı pek tercih etmiyor.O halde dişli yorumlara biraz stil katıp, daha güzel bir görünüme kavuşturalım.

 

Blogger Dişli Yorumlara Stil Verelim

 

Yapacağınız 2 küçük değişiklik ile bu resimde gördüğünüz gibi bir yorum bölümüne kavuşacaksınız.Ancak hemen belirteyim, bunu sadece Blogger’ın kendi şablonlarında denediğim için özel şablonlarda işe yarayıp yaramadığından emin değilim.

 

Öncelikle şablonunuzun ]]></b:skin> kodunun üstüne aşağıdaki stil kodları ekleyin.

 

.comments {
  clear: both;
  margin-top: 10px;
  margin-bottom: 0px;
  line-height: 1em;
}
.comments .comments-content {
  font-size: 12px;
  margin-bottom: 16px;
font-family: Verdana;
font-weight: normal;
text-align:left;
line-height: 1.4em;
}
.comments .continue a, .comments .comment .comment-actions a {
display:inline;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding: 2px 5px;
text-decoration: none;
text-shadow:0 1px 1px rgba(0,0,0,.3);
color:#FFF;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
margin-right: 10px;
border: 1px solid #3079ED;
background: #0066FF;
background: -webkit-gradient(linear, left top, left bottom, from(#0099FF), to(#009999));
background: -moz-linear-gradient(top, #0099FF, #009999);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#0099FF&#39;, endColorstr=&#39;#009999&#39;);
}
.comments .continue a:hover, .comments .comment .comment-actions a:hover {
  text-decoration: none;
background:#0099FF;
background: -webkit-gradient(linear, left top, left bottom, from(#009999), to(#0099FF));
background: -moz-linear-gradient(top, #009999, #0099FF);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#009999&#39;, endColorstr=&#39;#0099FF&#39;);
}
.comments .continue a:active, .comments .comment .comment-actions a:active {
position: relative;
top:1px;
background: -webkit-gradient(linear, left top, left bottom, from(#0066FF), to(#0099CC));
background: -moz-linear-gradient(top, #0066FF, #0099CC);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#0066FF&#39;, endColorstr=&#39;#0099CC&#39;);
}
.comments .comments-content .comment-thread ol {
  list-style-type: none;
  padding: 0;
  text-align: none;
}
.comments .comments-content .inline-thread {
  padding: 0.5em 1em 0 1em;
}
.comments .comments-content .comment-thread {
  margin: 8px 0px 0px 0px;
}
.comments .comments-content .comment-thread:empty {
  display: none;
}
.comments .comments-content .comment-replies {
  margin-top: 1em;
  margin-left: 40px;   font-size:12px;
}
.comments .comments-content .comment {
  padding-bottom:8px;
  margin-bottom: 0px
}
.comments .comments-content .comment:first-child {
  padding-top:16px;
}
.comments .comments-content .comment:last-child {
  border-bottom:0;
  padding-bottom:0;
}
.comments .comments-content .comment-body {
  position:relative;
}
.comments .comments-content .user {
  font-style:normal;
  font-weight:bold;
}
.comments .comments-content .user a {
  color: #444;
}
.comments .comments-content .user a:hover {
  text-decoration: none;
color: #555;
}
.comments .comments-content .icon.blog-author {
  width: 18px;
  height: 18px;
  display: inline-block;
  margin: 0 0 -4px 6px;
}
.comments .comments-content .datetime {
  margin-left:6px;
color: #999;
font-style: italic;
font-size: 11px;
float: right;
}
.comments .comments-content .comment-content {
font-family: Arial, sans-serif;
font-size: 12.5px;
line-height: 19px;
}
.comments .comments-content .comment-content {
font-family: Arial, sans-serif;
font-size: 12.5px;
line-height: 19px;
  text-align:none;
margin: 15px 0 15px;
}
.comments .comments-content .owner-actions {
  position:absolute;
  right:0;
  top:0;
}
.comments .comments-replybox {
  border: none;
  height: 250px;
  width: 100%;
}
.comments .comment-replybox-single {
  margin-top: 5px;
  margin-left: 48px;
}
.comments .comment-replybox-thread {
  margin-top: 5px;
}
.comments .comments-content .loadmore a {
  display: block;
  padding: 10px 16px;
  text-align: center;
}
.comments .thread-toggle {
  cursor: pointer;
  display: inline-block;
}
.comments .comments-content .loadmore {
  cursor: pointer;
  max-height: 3em;
  margin-top: 3em;
}
.comments .comments-content .loadmore.loaded {
  max-height: 0px;
  opacity: 0;
  overflow: hidden;
}
.comments .thread-chrome.thread-collapsed {
  display: none;
}
.comments .thread-toggle {
  display: inline-block;
}
.comments .thread-toggle .thread-arrow {
  display: inline-block;
  height: 6px;
  width: 7px;
  overflow: visible;
  margin: 0.3em;
  padding-right: 4px;
}
.comments .thread-expanded .thread-arrow {
  background: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC&quot;) no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow {
  background: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==&quot;) no-repeat scroll 0 0 transparent;
}
.comments .avatar-image-container {
  float: left;
  overflow: hidden;
}
.comments .avatar-image-container img {
  width: 36px;
}
.comments .comment-block {
  margin-left: 48px;
  position: relative;
padding: 15px 20px 15px 20px;
background: #F7F7F7;
border: 1px solid #E4E4E4;
overflow: hidden;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-image: initial;
}

 

Ardından şablonunudza <b:include data='post' name='comments'/> kodunu aratın.Birden fazla sonuç çıkacaktır.Bunlardan ilkini yani en üsttekini aşağıdaki kodlar değiştirin.

 

<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>

 

Şablonunuzu kaydettikten sonra kayıt sayfalarını açtığınızda yorum bölümüneki değişikliği farkedeceksiniz.

27 yorum:

  1. Ben yaptım ve harika oldu. Teşekkürler :)

    YanıtlaSil
  2. bende bu kodu siteme uyguladım ama yanıtla butonu çalışmıyor. nedendir acaba

    YanıtlaSil
  3. Bende de yanıtla butonu yok ne yapılabilir bu durumda acaba?

    YanıtlaSil
  4. @Değmesin Yağlı Boya
    Yanıtla butonu için widget şablonlarını varsayılana döndürmelisiniz.Ancak bu durumda şablonda yaptığınız bazı değişiklikleri de kaybtetme ihtimali olduğundan bu işlemi yapmadan önce mutlaka şablonun yedeğini almanızı öneririm.

    YanıtlaSil
  5. Yok yok ben şablonu değiştirmek istemiyorum Serdar o kadar çok çaba sarf ettim ki..başka yolu yoksa böyle kalıcak mecburen..teşekkür ediyorum..

    YanıtlaSil
  6. Bende widget düzgün olarak ekli ama yanıtlaya basınca çalışmıyor.Bir türlü çözemedim gitti. :(

    YanıtlaSil
  7. serdar abi ben de denedim ama olmadı aynı hatayı bende de veriyor yanıtla butonu çalışmıyor :S artı olarak yorum ekle butonu yorum bölümünün üzerinde ve kocaman gözüküyo rica etsem yardım eder misin?

    YanıtlaSil
  8. @Değmesin Yağlı Boya
    Dişli yorumlara geçmek için şuradaki yöntemi denediniz mi?

    YanıtlaSil
  9. @Şuayip KAMBUR , @BЧ нลтε
    Yanıtla butonunun çalışmaması bu kodlarla alakalı değil.Kullandığınız tema hata kodlanmış.

    YanıtlaSil
  10. @Şuayip Kambur, özel şablonlarda yanıtla butonunu etkin hale getirmek için blog id'ini tasarımın içerisinde genelde oluyor onla kendi id'imizi değiştirmemiz lazım diye biliyorum ..

    YanıtlaSil
  11. @murat Türkön yardımınız için teşekkür ederim hata orda değildi.Ama hata çözümünü buldum.bloggerin sablon tasarımlarında çalışıyor fakat farklı bir tasarım kullanıldığında bu bozuluyor sadece bogspotun kendisnde olan kodla yeni yaptığımız tasarımda olan kodları değiştirince oluyor.
    @serdar kara abicim sanada teşekkürler yardımda bulundun.

    YanıtlaSil
  12. hocam benim temamda başka yorum stili var nasıl yapacam ?

    YanıtlaSil
  13. Çözümü bulmana sevindim.. Başarılar.

    YanıtlaSil
  14. merhaba benim blogumda yorumlarda yanıtla butonu gözüküyor ama yorum tarihleri "apr 27 pm" gibi yabancı formatta gözüküyor.

    blogger ayarlarından yorum tarih damgası biçimini ayarlamama rağmen düzelmiyor bir türlü.

    bunun çözümü ne olabilir ki? teşekkürler.

    YanıtlaSil
  15. Hocam oldu ama "Widget şablonlarını varsayılana döndür" dediğimiz için yazı başlıklarının sağ tarafında çıkan baloncuk yorum sayısı kayboldu. Onu tekrar nasıl yapabilirim? Yapabilir miyim?

    YanıtlaSil
  16. @Fırat Yalçın
    Yapabilirsin.Nasıl yapıldığını anlatan bir mail göndermiştim.Eğer sildiysen tekrar bir mail göndereyim.

    YanıtlaSil
  17. Hocam eskiden kendi yorumlarımda sağ kısımda yıldız simgesi çıkıyordu. Yanıtla'yı aktifleştirdim ama yıldızı koymak için kullandığım div işlevinin yitirmiş olabilir. div'in adı .owner-Body

    YanıtlaSil
  18. hocam bu dişli yorum stilinde yorum kutusunun üstünde yorum ekle yazıyor onu nasıl kaldırırım?

    YanıtlaSil
  19. Başarılı!..sen çok iyi bir hocasın zaten biliyom :)

    YanıtlaSil
  20. benim temamda bi türlü olmuyo dediklerinizi aynen yapıyorum olmuyo neden acaba

    YanıtlaSil
  21. hocam suanki kullandıgım tema sizin sitenizden buldum tum zamanların en ozellikli teması baslıklı bu yorum kısmını bu temada ne ybtıysam degısmdi bundan bır ay onceki temada uyguladım ve oldu bu konuda bana yardıcı olursannız cok sevınırım

    YanıtlaSil
  22. Hocam bloguma bu güzel şablonu uyguladım ama yayın hakkında yapılan bir yorumu nasıl sileceğimi çözemedim.Lütfen yardım.

    YanıtlaSil
  23. Eyvallah üstat ellerine sağlık

    YanıtlaSil
  24. Hocam biraz hortlatmak olacak ama gerek benim blogun teması gerekse renginden kaynaklı bu yorum tasarımında yazılar gözükmüyor. Ayrıca kişinin resminin çerçevesi de beyaz köşeli çok kötü bişey çıkıyor. Sormak istediğim yorumların arka planının rengini değiştirmeyi buldum fakat yazının rengini nasıl değiştireceğim?

    http://razorgamingtr.blogspot.com/

    YanıtlaSil
  25. Çok teşekkürler :)

    YanıtlaSil
  26. bende aynı sekl yapmak ıstıyorum ama olmadı anlamadm ndn oldugunu.....

    YanıtlaSil

Picardes

LİNKLER