Blogger yorum ve yazar pencere eklentisi

Blogger’un klasik yorum penceresini Css kod yardımı ile özelleştiren, turuncu renkli “ Hiç yorum yok ”, “ Yorum gönder ”, “ 2 Yorum ” gi...

...

Blogger’un klasik yorum penceresini Css kod yardımı ile özelleştiren, turuncu renkli “Hiç yorum yok”, “Yorum gönder”, “2 Yorum” gibi seçenekleri balon görseli ile okuyucularınıza gösteren yorum pencere eklentisi. Yorum pencere eklentisinin diğer özellikleri, yorum penceresini diktörtgen biçimleme ile sararak kenar sınır çizgileri ile yumuşak bir hat çizip, yazarın yorumları yanıtladığı pencere sağ köşesinde yazar isminin küçük bir yazı ile görülmesi. Yorum pencere eklentisi bir tek yazar resmi içermekte olup, kodların diğer bölümü tamamen Css kodlarından oluşmakta.

Css kodları ile dizayn edilmiş yorum penceresi adeta bilgisayar dizin ağacı şeklinde tasarlanmış. İnternette gezinirken tesadüfen rasladığım ve hoşuma giden bu eklentiyi bende kullanıyorum. Eklenti hem Klasik hemde Dinamik bloglarda kullanılabiliyor. Sadece Dinamik blogger da kullanırken yazar resim ve balon görseli çıkmıyor.Şu anda blog’umun yorumlar penceresini incelediğinizde Dinamik blogger görselini görebilir, adnanguney.blogspot.com.tr Klasik blog’umdan incelediğinizde diğer farklı görseli görebilirsiniz.

Yorumlar pencere eklentisini kullanabilmeniz için ilgili adımları takip edin ;

1. Blogger kumanda paneline giriş yapın.

2. Sırası ile Şablon → Özelleştir → Gelişmiş → Css ekle sağ taraftaki pencereye aşağıda verdiğim kodları yapıştırın ve kaydedin.

3. Kod içindeki yazar resmini kendi blogunuza kaydederek bağlantı linkini alıp kod içindeki yere yapıştırın. Blog’unuza eklediğiniz eklentilerde kullanılan resimleri Google Plus fotoğraflar veya picasa da depolayarak, blog açılış hızınızı kontrol altında tutun.

Ayrıca bu linkleri okuyabilirsiniz ⇒

→ Blogger İçerik Resimleri Nerededir

→ Blog Yazılarında Süreli Resim Barındırma Hataları

→ Blogger Resim Linkleri Nasıl Alınır

→ Blogger Resim Arka Plan Gri Rengi Kaldır

Yorum pencere eklenti CSS kodu :

/* Comments Balon Yazar G59P------------------------- */
#comments h4{display:inline;padding:10px;line-height:40px}
#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
#comments h4,.comments .continue a{background:#ff6400}
#comments h4,.comments .user a,.comments .continue a{font-size:16px}
#comments h4,.comments .continue a{font-weight:normal;color:#fff}
#comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #ff6400;border-right:20px solid transparent;width:0;height:0;line-height:0}
#comments .avatar-image-container img{border:0}
.comment-thread{color:#111}
.comment-thread a{color:#777}
.comment-thread ol{margin:0 0 20px}
.comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a{color:#ff6400}
.comments .avatar-image-container,.comments .avatar-image-container img{width:48px;max-width:48px;height:48px;max-height:48px}
.comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:60px}
.comments .comment-block,.comments .comment-thread.inline-thread .comment{border:1px solid #ddd;background:#f9f9f9;padding:10px}
.comments .comments-content .comment{margin:15px 0 0;padding:0;width:100%;line-height:1em}
.comments .comments-content .icon.blog-author{position:absolute;top:-12px;right:-12px;margin:0;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCnng9Jlu6zr6vDOmMoZbonhgx4aZrJ3Xvfj16PRxiWHBZbLBRZ7rlqlJJe3W31ULfrJiTVvdj8rV60hLV0I-RxaR9N4U7ZIFJ8am5yKshDovPXyQqV_CigLGlcUHNr9JFMX8d-uIy3CA/s36/yazar.png);width:36px;height:36px}
.comments .comments-content .inline-thread{padding:0 0 0 20px}
.comments .comments-content .comment-replies{margin-top:0}
.comments .comment-content{padding:5px 0;line-height:1.4em}
.comments .comment-thread.inline-thread{border-left:1px solid #ddd;background:transparent}
.comments .comment-thread.inline-thread .comment{width:auto}
.comments .comment-thread.inline-thread .comment:after{content:"";position:absolute;top:10px;left:-20px;border-top:1px solid #ddd;width:10px;height:0px}
.comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0}
.comments .comment-thread.inline-thread .comment-block{margin-left:48px}
.comments .comment-thread.inline-thread .user a{font-size:13px}
.comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:36px;max-width:36px;height:36px;max-height:36px}
.comments .continue{border-top:0;width:100%}
.comments .continue a{padding:10px 0;text-align:center}
.comment .continue{display:none}
#comment-editor{width:103%!important}
.comment-form{width:100%;max-width:100%}