Blogger Yorum Formunu Özelleştirin.!

Blogger Yorum Kutusu Değiştirme

Aşağıda ki resimde görüldüğü gibi bu yazımda blogcular için kendi kullandığım yorum kutusu kodunu paylaşağım. Oldukça kullanışlı olan bu yorum panelinde yapılan yorumu yanıtlama gibi seçenekte bulunmakta.

Dikkat:! Blogunuza kodu eklemeden önce yedek almayı unutmayın !

1. Adım 
Kumanda Paneli  > Şablon > Html'yi Düzenle'ye geliyoruz.

2.Adım
Ctrl+F ile Comments seçeneğini buluyoruz ve aşağıda ki kod ile değiştiriyoruz.

Yorum Kutusu Özelleştirme:

Arka plan: Kullanılan yorum kutusunun arka plan görüntü rengini değiştirmek için kod içinde bulunan #d0cce4 kodunu istedizğiniz renk kodu ile değiştirebilirsiniz.

Butonlar: Butonların rengini değiştirmek için ilk başta bulunan #FA6900 kodunu istediğiniz bir renk kodu ile değiştirebilirsiniz.

/* Comments ----------------------------------------------- */ /*Blogger Threaded Comments Styles From http://www.dicasblogger.org*/ .comments .comment .comment-actions a {background:#FA6900;border:1px solid #000;cursor:pointer;color:#ffffff;padding:3px 3px; margin-right:10px;font:10px sans-serif;} .comments .comment .comment-actions a:hover {text-decoration: none; background:#FF5C59; border:1px solid #000;} #comments{overflow:hidden} #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:#d0cce4;} #comments h4,.comments .user a,.comments .continue a{font-size:14px} #comments h4,.comments .continue a{font-weight:normal;color:#fff} #comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #d0cce4;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:#000} .comment-thread ol{margin:0 0 20px} .comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a{color:#FA6900;} .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/AVvXsEghnYes6GeGbzw__ciUCRJNNhqXpSk_ZQ3GeuoW38s4AOwqreWIAE-Bdsig8668qp2NUE87gfmVx3kHNySqye2y1IBmCLM8BPrJAY59JHUNTK1VuTJ0EA5dJLU4viYRF1OBdW-66RiO8Ig/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:0px 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:0px 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%} /*Blogger Threaded Comments Styles From http://www.dicasblogger.org*/