اضافت شكل تعليقات جزائري ويب بشكل جديد و جميل




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


شرح و كيفية تركيب الاضافة :
    1. داخل القالب تحرير html
    2. فوق هذا الوسم  <b:skin/>  نضع الكود التالي
/* CSS Comments */ #comments{background:#F5F4F4;clear:both;margin:20px auto 0;line-height:1em;padding:20px;border:1px solid #e9e9e9;} #comments h3{display: inline; line-height: 19px; margin-bottom: 20px; margin-top: -20px; font-family: Electrolize,ge_dinar_tworegular; font-size: 17px; position: absolute; background: #4A5667; color: #fff; text-transform: none; padding: 10px 48px 0; overflow: hidden; width: 687px;} #comments h3:before {font-family:fontawesome;content:"\f086";margin-left:10px;font-size:20px;padding:10px 15px;position:absolute;right:0;top:0;font-weight:normal;} #comment_block {margin-top:50px;} .comment_avatar_wrap{width:46px;height:46px;border:none;background:none;text-align:center;padding:0;overflow:hidden;} #comments .comment_avatar {border-radius: 100%; width: 46px; height: 46px; max-width: 46px; max-height: 46px; background: #F5F4F4; padding: 4px; text-align: center; position: absolute; top: 0; right: 2px; overflow: hidden;} #comments .comment_admin .comment_avatar{border-radius:100%;width:46px;height:46px;max-width:46px;max-height:46px;padding:4px;text-align:center;position:absolute;top:0;right:0;overflow:hidden;} #comments .comment_avatar img {border-radius:100%;width:46px;height:46px;max-width:46px;max-height: 46px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX_ZvFsotrvjlJiZaRT0IQcbFigNUaU_C2i_e-B3n8QSKQx3yE3HObh67ttbxTHysByLLgdJzsGuiw0-6x2IXUyKvCw1f4eiWNqK_x9T1WlvuETIqvB6Fh8679uN7EsZE0NGvWeHcmwHGf/s1600/Invert.png) no-repeat;overflow:hidden;} .comment_avatar img{border-radius:100%;width:46px;height:46px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX_ZvFsotrvjlJiZaRT0IQcbFigNUaU_C2i_e-B3n8QSKQx3yE3HObh67ttbxTHysByLLgdJzsGuiw0-6x2IXUyKvCw1f4eiWNqK_x9T1WlvuETIqvB6Fh8679uN7EsZE0NGvWeHcmwHGf/s1600/Invert.png) no-repeat;overflow:hidden;} .comment_name a{font-family:Electrolize,ge_dinar_tworegular;font-weight:700;font-size:15px;padding:0 45px;color:#666;text-decoration:none} .comment_child .comment_name a{color:#666;} img.comment_emo {margin:0;padding:0;vertical-align:middle;width:20px;height:20px;} .comment_child .comment_name a:hover {color:#f53b3b;} .comment_admin .comment_name{background:#fff;padding:0 20px 0 65px;right:5px;top:10px;display:inline;font-weight:700;font-size:16px;font-family:Electrolize,ge_dinar_tworegular;text-decoration:none;border-radius:3px;} .comment_admin .comment_date{right:10px;font-weight:700;font-size:11px;} .comment_name{font-size:16px;background:#fff;font-family:Electrolize,ge_dinar_tworegular;font-weight:700;padding:0 20px 0 65px;position:absolute;right:5px;top:10px;display:inline;line-height:35px;border-radius:3px;transition:all .3s ease-out;} .comment_name:hover,.comment_name a:hover,.comment_admin .comment_name a:hover,.comment_admin .comment_name:hover{color:#f53b3b;} .comment_service{position:absolute;top:15px;left:0;} .item-control {display:block;} .comment_date a{display:inline-block;background: #F5F4F4; color: #DA4A3B;text-align:center; font-familyElectrolize,ge_dinar_tworegular:;font-size:13px;margin:0;padding:8px;opacity:0.9;border-radius:2px;} .comment_date a:hover{text-decoration:none!important;background:#466998;color:#fff!important;} .comment_body{margin: 10px 0; padding: 0; position: relative; border-bottom: 3px solid #EBEAEA; background: #fff;} .comment_body p{line-height:1.6em;color:#666;font-size:14px;font-family:Electrolize,ge_dinar_tworegular;word-wrap:break-word;background:#fff;padding:10px;position:relative;transition:all .3s ease-out;} .comment_child .comment_body p{color:#666;} .comment_body p img{vertical-align:middle;margin:0 5px;} .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:#466998;color:#fff!important;text-align:center; font-family:Electrolize,ge_dinar_tworegular;font-size:11px;margin:0;padding:8px;opacity:0.9;border-radius:2px;} .comment_reply:hover{text-decoration:none!important;background:#333;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-size:15px;color:#DD5C4F} #comment-editor{width:103%!important;background:url('http://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{position: relative; background: #4A5667; color: #FFFFFF; font-size: 13px; line-height: 1.5em; margin-top: 24px; font-weight: normal;} .comment_reply_form{padding:0 0 0 7%} .comment_reply_form .comment-form{width:100%} .comment_emo_list .item{float:right;text-align:center;height:40px;width:41px;margin:0 0 10px;} .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-family:Electrolize,ge_dinar_tworegular;font-size:10px;color:#fff;text-align:center;margin-right:11px;line-height:normal;background:#3498db;padding:8px;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:block;color:#fff;word-wrap:break-word;background:#3498db;font-weight:bold;margin-top:20px;padding:10px;font-size:14px; font-family:Electrolize,ge_dinar_tworegular;} 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 {padding:0;} .comment_child .comment_header {padding:0;} #emo-box,#hide-emo {display:none} .small-button1 a {font-size:12px;font-family:Electrolize,ge_dinar_tworegular;cursor:pointer;font-weight:400;margin:10px 5px 5px 0;text-decoration:none;text-transform:none;text-shadow:none;display:inline-block;color:#fff;padding:2px 10px;cursor:pointer;border-radius:2px;background-color:rgba(255,255,255,0.2);transition: all 0.3s ease-out;} .small-button1:hover a{background-color:rgba(255,255,255,0.3);color:#fff;display:inline-block;} span.small-button1 {text-align:right;display:inline-block;}

      1. ملاحظة: ادا قمت من قبل بوضع كود تعليقات بلوجر
      2. يجب عليك حدف الاكواد السابقة اولا
      3. ثم ضع كود هده الاضافة, و التعديلات سهلة جدا

    إذا أعجبك محتوى موقع جزائري ويب اتمنى البقاء على تواصل دائم ، فقط قم بإدخال بريدك الإلكتروني للإشتراك في بريد المدونة السريع ليصلك جديد المدونة أولاً بأول ، كما يمكنك إرسال رساله بالضغط على الزر المجاور ...