blogger Yorum alanı özelleştirme

merhaba arkadaslar bugun kendi buloğumda kullandım  yorum alanı kodunu paylaşmak istiyorum
bu konuda çok meil geldiği için paylaşma  gereksimi duydum :) aşağıdaki kodu html şablonu genişletim ]]></b:skin> kırmızı ile seçilmiş kodu arattırıp hemen üstüne yerleştiriceksiniz tabi kendi bloğunuzdaki comments ile değişirseniz daha mantıklı olur :)

/* Comments

----------------------------------------------- */

.comments {background: none repeat scroll 0 0 #FFFFFF;clear: both;margin-top: 10px;padding: 10px;width: 96%;}

#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:#2693ba}

#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 #2693ba;border-right:20px solid transparent;width:0;height:0;line-height:0}

.comments .avatar-image-container{width:42px;max-height:42px;height:42px;padding:2px;border:1px solid #CCCBCB}

.comments .avatar-image-container img{max-width:42px;width:100%}

.comments .inline-thread .avatar-image-container{width:36px;height:36px}

.comments .comment-block{margin-left:53px;padding:5px 10px;border:1px solid #CCCBCB;-webkit-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;border-radius:3px}

.comments .inline-thread .comment-block{margin-left:48px}

.comments .comment-block::before,.comments .comment-block::after{content:"";width:0;height:0;border-width:10px 8px;border-style:solid;border-color:transparent #CECECE transparent transparent;position:absolute;top:8px;right:100%}

.comments .comment-block::after{border-color:transparent white transparent transparent;right:auto;left:-15px}

.comments .comments-content .comment-header{border-bottom:1px solid #CCCBCB;padding-bottom:3px;margin:-1px -3px 10px}

.comments .comments-content .comment{margin-bottom:12px;padding:0}

.comments .comments-content .icon.blog-author{position:absolute;right:10px;top:-3px;width:65px;height:20px;background-color:#2693ba;-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;-o-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px}

.comments .comments-content .icon.blog-author::after{content:"Admin";position:absolute;color:white;text-shadow:0 1px 2px #646464;top:0px;left:10px}

#comments-block{margin:1em 0 1.5em;line-height:1.6em}

.comment-form{max-width:100%}

#comments-block .comment-author{margin:.5em 0}

#comments-block .comment-body{margin:.25em 0 0}

#comments-block .comment-footer{margin:-.25em 0 2em;line-height:1.4em;text-transform:uppercase;letter-spacing:.1em}

#comments-block .comment-body p{margin:0 0 .75em}

#mybtips-form iframe{

background:#ffffff url(http://1.bp.blogspot.com/-TjJflzKETo4/ToB8PzdeWdI/AAAAAAAAAO4/e39aQolo8c8/s1600/238+%25281%2529.jpg) repeat;

border:1px solid #ddd;

-moz-border-radius:6px;

-webkit-border-radius:6px;

box-shadow: 5px 5px 5px #CCCCCC;

padding:5px;

font:normal 12pt "ms sans serif", Arial;

color:#ffffff;

width:560px; height:213px !important;

}

#mybtips-form a{

color:#000;

}

Continue Reading