اضافت شكل تعليقات موقع نت مصر 2016

اضافت شكل تعليقات موقع نت مصر 2016
اليوم اشرح ان شاء الله كود CSS لتجديد شكل صندوق التعليقات الخاص بالمدونة إضافة الى ADMIN ,

وخاصة صندوق التعليقات الذي يعتبر واجهة وعلاقة الزائر بالمدونة. الصورة فى أول التدوينة

هى النتيجة لهذا الكود اذا أعجبتك قم بإضافتها

شرح و كيفية تركيب الاضافة :

داخل القالب تحرير html
فوق هذا الوسم <b:skin/> نضع الكود التالي

/* CSS Comments */ #comments{background:#fff;clear:both;margin:20px 10px;line-height:1em;padding:20px;border:1px solid #e9e9e9;} #comments h3{ font-size: 20px; background: #128DC4; color: #FFF; padding: 11px 0px; width: 766px;} #emo-box {clear: both;margin: 0 30px;}#comments .click-comment{background:#fff;color:#fff;float:left;text-decoration:none;display:inline;line-height:20px;margin-bottom:20px;margin-top:-20px;margin-left:-20px;font-family:Lobster,ge_dinar_tworegular,sans-serif;font-size:14px;font-weight:700;text-transform:uppercase;padding:10px 0;border:1px solid #e9e9e9;border-top:none;border-left:none;} .fa-arrow-circle-down:before {content: "\f0ab";color: #999999;margin-left: 35px;font-size: 18px;} .comment_avatar_wrap{ height: 60px;} #comments .comment_avatar {position: absolute; overflow: hidden; top: 0;} .comment_avatar img{ height: 60px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNTXTBZ_x4haQELDNmHaNGIhHyPe-xGEP9ZMJJhS7q2rIr8PyYIx1fB0OKXW5z5VGiFLXbiL2E6DzyaglJpOaRd7lZukOn5qJ9P7WqYM5Kpz7yNu1ijnOPZ_WIqf3UChto2H9mzgYPWke4/s1600/avatwisted.png) no-repeat; overflow: hidden;} .comment_name a{color: #39465F; text-decoration: none;} .comment_child .comment_name a{color:#39465F;} .comment_child .comment_name a:hover {color:#128DC4;} .comment_name{ font-size: 16px; position: absolute; top: 0; padding: 20px; right: 70px; display: inline;} .comment_name:hover,.comment_name a:hover,.comment_admin .comment_name a:hover,.comment_admin .comment_name:hover{color:#F74047;} .comment_service{ position: absolute; left: 0; top: 0; padding: 22px; background: #F5F5F5;} .item-control {display:block;} .comment_date a{ font-size: 15px; color: #F74047!important; text-align: center;} .comment_date a:hover{color:#F74047!important;} .comment-delete{position:absolute;display:inline-block;top:-2px;left:50px; color:#666!important;text-align:center;font-family:Lobster,ge_dinar_tworegular;font-size:11px;padding:2px 6px;opacity:0.9;transition:all .3s ease-out;} .comment-delete:hover{color:#128DC4!important;} .comment_body{margin:20px 0;padding:0;position:relative;} .comment_body p{ line-height: 1.6em; color: #666; font-size: 13px; font-family: cursive,Lobster,ge_dinar_tworegular; word-wrap: break-word; background: #fafafa; margin-top: 0px; padding: 30px 20px; position: relative; box-shadow: 0 0 0 1px #e9e9e9; transition: all .3s ease-out; text-align: right;} .comment_child .comment_body p{color:#666;} .comment_body p img{vertical-align:middle;margin:0 5px;} .comment_body p:hover{box-shadow:0 0 0 1px #ccc;} .comment_body p:hover:before {border-bottom-color:#aaa;} .comment_inner{padding-bottom:5px;margin:5px 0} .comment_child .comment_wrap{padding-right:7%} .comment_child .comment_body{margin-top:-15px;} .comment_reply{display: inline-block; background: #446FAA; color: #fff!important; text-align: center; font-family: Lobster,ge_dinar_tworegular; font-size: 14px; padding: 6px 20px 5px 16px; opacity: 0.9; border-radius: 0px 9px 0 0; float: left; margin-top: -30px;} .comment_reply:hover{text-decoration:none!important;background:#128DC4;color:#fff!important;} .comment-form{width:100%;max-width:100%;margin-bottom:10px;padding:0;} .comment_form a{text-decoration:none;text-transform:uppercase;font-weight:700;font-family:Lobster,ge_dinar_tworegular,sans-serif;font-size:15px;color:#F74047} #comment-editor{width:103%!important;background:url(//4.bp.blogspot.com/-jSUS8v5kwpQ/U8Z_6Ufr-PI/AAAAAAAAEYY/o4cQPKvt8vQ/s1600/loading.gif) no-repeat 50% 25%;position:relative;margin-right:-8px;margin-top:-15px} .comment-form p:after {display: inline-block; content: ''; position: absolute; margin-top: 7px; height: 0; width: 0; border: 9px solid transparent; border-top-color: #555454;} .comment-form p:before {border-color:rgba(221,221,221,0);border-top-color:transparent;border-width:11px;margin-right:-11px;transition:all .3s ease-out;} .comment_reply_form{padding:0 0 0 7%} .comment_reply_form .comment-form{width:100%} .comment_emo_list .item{float: right; margin: 15px;} img.comment_emo {width: 16px; height: 16px;} .comment_emo_list span{display:block;font-weight:400;font-size:11px;letter-spacing:1px;color:#666} .comment_youtube{max-width:100%!important;width:400px;height:225px;display:block;margin:auto} .comment_img{max-width:100%!important} #respond{overflow:hidden;padding-right:10px;clear:both} .unneeded-paging-control,.comment_author_flag{display:none} .comment_admin .comment_author_flag { display: inline-block; font-size: 9px; color: #FFF; text-align: center; top: 0; background: #128DC4; padding: 5px; border-radius: 2px;;} .comment_child .comment_admin .comment_author_flag {color:#fff;left:-40%;} .spammer-detected{font-size:14px!important;color:#fff!important;background:#5cb0d8!important;margin:25px; display:inline-block;padding:10px 15px!important;} .deleted-comment{display:inline-block;color:#999;word-wrap:break-word;background:#f9f9f9;margin-top:20px;padding:10px;font-size:13px;font-family:Lobster,ge_dinar_tworegular,sans-serif;border-radius:3px;opacity:1;} iframe{border:none;overflow:hidden} .paging-control-container{text-align:center;margin:0 0 0 25%;} .paging-control-container a{text-align:center;margin:0 auto;background:#666;padding:5px 10px; color:#fff;transition:all .3s ease-out} .paging-control-container a:hover{background:#e6ae48;color:#fff;} .comment_header { background: #FAFAFA;} .comment_child .comment_header {padding:0;}