Blogger Gelişmiş Yorum Alanı Eklentisi

Yeni bir blogger yazımla tüm blogculara sevgiler. Bu yazımda blogger yorum alanında bir gelişme yapacağız, ilk olarak eklentiden söz edeyim isterseniz. Bu eklentiyi uzun zamandır kullanıyorum ve çok sade bir tasarıma sahip demosu üstteki resim zaten. Sadece css ile bu kadar güzel bir eklenti meydana geliyor. İsteyen de çok oldu bende zaman ilerledikçe paylaşmk istedim.

Tek yapmanız gereken css bölümüne eklemek

#comment-editor{width:103%!important} .comment-form{width:100%;max-width:100%} .comments .comment-content{margin-left:48px;position:relative;background:#f9f9f9;border:1px solid #ddd;overflow:hidden;border-bottom:2px solid #ddd;border-radius:5px;padding:10px} .comments .comments-content{font-size:13px} .comments .comment .comment-actions a{padding-top:5px;padding-right:5px;text-decoration:none} .comments .comment .comment-actions a:hover{text-decoration:underline} .comments .comments-content .comment-thread ol{list-style-type:none;text-align:left;padding:0} .comments .comments-content .inline-thread{padding:.5em 0 .5em 1em} .comments .comments-content .comment-thread{margin:8px 0} .continue{background:#fff;border:1px solid #ddd;overflow:hidden;border-bottom:2px solid #ddd;border-radius:5px;padding:5px} .comments .comments-content .comment-replies{margin-top:0;margin-left:36px} .comments .comments-content .comment{margin-bottom:0;padding-bottom:0} .comments .comments-content .comment:first-child{padding-top:6px;text-align:left} .comments .comments-content .comment:last-child{border-bottom:0;padding-bottom:0;text-align:left} .comments .comments-content .comment-body{position:relative} .comments .comments-content .user{font-style:normal;font-weight:700} .comments .comments-content .icon.blog-author{width:18px;height:18px;display:inline-block;background:url(http://png.findicons.com/files/icons/2353/stuttgart/16/star.png) no-repeat top;margin:0 0 -4px 6px} .comments .comments-content .datetime{margin-left:6px;float:right;font-size:10px} .comments .comments-content .comment-header,.comments .comments-content .comment-content{margin:5px 0 8px} .comments-content{padding:5px} .comments .comments-content .comment-header{font-size:15px} .comments-content .datetime{font-style:PFBeauSansProBbookRegular, Verdana, sans-serif;color:#fff} .comments .comments-content .comment-content{text-align:left} .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;text-align:center;padding:10px 16px} .comments .thread-toggle{cursor:pointer;display:inline-block} .comments .continue{cursor:pointer} .comments .continue a{display:block;font-weight:700;padding:.5em} .comments .comments-content .loadmore{cursor:pointer;max-height:3em;margin-top:3em} .comments .comments-content .loadmore.loaded{max-height:0;opacity:0;overflow:hidden} .comments .thread-toggle .thread-arrow{display:inline-block;height:6px;width:7px;overflow:visible;padding-right:4px;margin:.3em} .comments .thread-expanded .thread-arrow{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC) no-repeat scroll 0 0 transparent} .comments .thread-collapsed .thread-arrow{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAABJRU5ErkJggg==) no-repeat scroll 0 0 transparent} .comments .comment-header{margin-left:48px;position:relative;background:url(http://2.bp.blogspot.com/-p56goQ2FzGU/URvNe5UKRLI/AAAAAAAAE0E/u4764R2J6O8/s1600/sidebaronurbatur.png) repeat-x;border:1px solid #ddd;overflow:hidden;border-bottom:2px solid #ddd;border-radius:5px;padding:5px} .comments .comment-header .user{font-size:17px} .comments .comment-block{margin-left:48px;position:relative;background:#fff;border:1px solid #ddd;overflow:hidden;border-bottom:2px solid #ddd;border-radius:5px;padding:5px} .avatar-image-container,.avatar-image-container img{max-width:50px!important;width:50px!important;max-height:50px!important;height:50px!important;background:#fff} .comments .avatar-image-container{border-radius:5px 5px 5px 5px / 5px 5px 5px 5px;float:left;margin-right:10px;background:#fff;border:1px solid #ddd;padding:2px} .comments .avatar-image-container img{background:#fff} .comments{border:1px solid #ddd;font-family:PFBeauSansProBbookRegular, Verdana, sans-serif;-moz-border-radius:8px;color:#666;border-radius:5px 5px 5px 5px / 5px 5px 5px 5px;margin:10px 0 0;padding:10px} .comments h4{color:#666;font-family:PFBeauSansProBbookRegular, Verdana, sans-serif;font-size:15px;text-decoration:none;font-weight:700;text-shadow:#d0d0d0 0 0 4px;border-bottom-style:dashed;border-bottom-width:2px;border-bottom-color:#CCC;margin:-2px 0 -3px;padding:3px 0 5px}

Yapamadığınız, temanıza uyumlu olmayan bir yer varsa onur imdat burada yorum atmanız yeterli :)