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


اضافت شكل تعليقات جزائري ويب بشكل جديد و جميل
اليوم اشرح ان شاء الله كود CSS لتجديد شكل صندوق التعليقات الخاص بالمدونة إضافة الى ADMIN ,
اليوم اشرح ان شاء الله كود CSS لتجديد شكل صندوق التعليقات الخاص بالمدونة إضافة الى ADMIN ,
وخاصة صندوق التعليقات الذي يعتبر واجهة وعلاقة الزائر بالمدونة. الصورة فى أول التدوينة
هى النتيجة لهذا الكود اذا أعجبتك قم بإضافتها
- داخل القالب تحرير html
- فوق هذا الوسم
<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;}
- ملاحظة: ادا قمت من قبل بوضع كود تعليقات بلوجر
- يجب عليك حدف الاكواد السابقة اولا
- ثم ضع كود هده الاضافة, و التعديلات سهلة جدا
اخي لماذا لم ترسل لي القالب
ردحذفالقالب لا يدعم السلايدر...
حذفو اكواد القالب غير منظمة
ماشي اخي ممكن تعطني قالب من زوق حضرتك قالب علي مزاج حضرتك من فضلك
حذفجميل جدا اخي باتوفيق احد متابعيك
ردحذفالسلام عليكم
ردحذفشكرا على الشرح الجميل والرائع
اخي ممكن طريقة تغيير القائمة المنسدلة الى هاد الشكل: https://goo.gl/1ptB5P
وشكراا
السلام عليكم
ردحذفشكرا على الشرح الجميل والرائع
اخي ممكن طريقة تغيير القائمة المنسدلة الى هاد الشكل: https://goo.gl/1ptB5P
وشكراا
سيتم طرحها قريبا على تدوينة
حذفأزال أحد مشرفي المدونة هذا التعليق.
ردحذفالله يحفضك يا حسام صممملي انترو رابط الشعار : http://a.top4top.net/p_700y281.png
ردحذفاخي ممكن ممساعدة اريد منك ان اجعلك مشرف في موقعي
ردحذفوقم انت بتعديله