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




اضافت شكل تعليقات جزائري ويب  بشكل جديد و جميل
اليوم اشرح ان شاء الله كود 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(http://4.bp.blogspot.com/-uwotTZw9bVo/Vqyt6cMy3BI/AAAAAAAACvw/ovdOrzD8ShM/s1600/Invert.png) no-repeat;overflow:hidden;} .comment_avatar img{border-radius:100%;width:46px;height:46px;background:url(http://4.bp.blogspot.com/-uwotTZw9bVo/Vqyt6cMy3BI/AAAAAAAACvw/ovdOrzD8ShM/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. ثم ضع كود هده الاضافة, و التعديلات سهلة جدا

    1. اخي لماذا لم ترسل لي القالب

      ردحذف
      الردود
      1. القالب لا يدعم السلايدر...
        و اكواد القالب غير منظمة

        حذف
      2. ماشي اخي ممكن تعطني قالب من زوق حضرتك قالب علي مزاج حضرتك من فضلك

        حذف
    2. جميل جدا اخي باتوفيق احد متابعيك

      ردحذف
    3. السلام عليكم
      شكرا على الشرح الجميل والرائع
      اخي ممكن طريقة تغيير القائمة المنسدلة الى هاد الشكل: https://goo.gl/1ptB5P
      وشكراا

      ردحذف
    4. السلام عليكم
      شكرا على الشرح الجميل والرائع
      اخي ممكن طريقة تغيير القائمة المنسدلة الى هاد الشكل: https://goo.gl/1ptB5P
      وشكراا

      ردحذف
    5. أزال أحد مشرفي المدونة هذا التعليق.

      ردحذف
    6. الله يحفضك يا حسام صممملي انترو رابط الشعار : http://a.top4top.net/p_700y281.png

      ردحذف
    7. اخي ممكن ممساعدة اريد منك ان اجعلك مشرف في موقعي
      وقم انت بتعديله

      ردحذف

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