إضافة صندوق التعليقات لمدونات بلوجر بثلاثة ألوان مختلفة

السلام عليكم ورحمة الله تعالى وبركاته

التعليقات هي من أكثر الإضافات التي يبحث عنها المدونون حيث تتيح لنا التعليق على على موضوع معين و ابداء رأينا فيه وكدلك الرد على أسئلة و استفسارات الزوار

أما لاضافة التي أتيت بها اليوم فهي تختلف قليلا من حيث :

1 - شكل جميل

2 - الإضافة بثلاثة ألوان مختلفة 

3 - تحتوي على شريط في حافة صندوق التعليق للتمييز بين تعليقات الكاتب و بين الزوار.

أدعوكم لمشاهدة الإضافة  

Live Demo

 إدا أعجبتك أخي تفضل

 الخطوة الاولى

من لوحة التحكم اضغط على التخطيط – تحرير html – اضغط على تنزيل قالب – وبعد اكتمال التنزيل اضغط على توسيع قوالب عناصر واجهة المستخدم 

الخطوة الثانية

ابحث عن :

 ]]></b:skin>

 واضف هدا الكود قبلها:

1- صندوق تعليقات باللون أخضر 

/*Blogger Threaded Comments Styles From http://www.spiceupyourblog.com*/
#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:#56d805}
#comments h4,.comments .user a,.comments .continue a{font-size:17px}
#comments h4,.comments .continue a{font-weight:normal;color:#fff}
#comments h4:after{content:"";position:absolute;bottom:-10px;right:10px;border-top:10px solid #56d805;border-left:20px solid transparent;width:0;height:0;line-height:0}
#comments .avatar-image-container img{border:0}
.comment-thread{color:#111}
.comment-thread a{color:#777}
.comment-thread ol{margin:0 0 20px}
.comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a{color:#56d805}
.comments .avatar-image-container,.comments .avatar-image-container img{width:48px;max-width:48px;height:48px;max-height:48px}
.comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-right:60px}
.comments .comment-block,.comments .comment-thread.inline-thread .comment{border:1px solid #ddd;background:#f9f9f9;padding:10px}
.comments .comments-content .comment{margin:15px 0 0;padding:0;width:100%;line-height:1em}
.comments .comments-content .icon.blog-author{position:absolute;top:-12px;left:-12px;margin:0;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjyXzBX3kNY1WXKHtRxVq8NGAAuAzc0zIqBGJxcbfM6-y6NtTjd-oeB6NYM8aWtyRpVLCzbJQrFbLriL3W2ZRCjxTBZseG3d6-qU2BNNljVYsZsnZmk4h64CxiTXlDTMMDZ7xzJ3fRNHY/s1600/picresized_1338990142_comment-author-blue.png);width:36px;height:36px}
.comments .comments-content .inline-thread{padding:0 20px 0 0}
.comments .comments-content .comment-replies{margin-top:0}
.comments .comment-content{padding:5px 0;line-height:1.4em}
.comments .comment-thread.inline-thread{border-right:1px solid #ddd;background:transparent}
.comments .comment-thread.inline-thread .comment{width:auto}
.comments .comment-thread.inline-thread .comment:after{content:"";position:absolute;top:10px;right:-20px;border-top:1px solid #ddd;width:10px;height:0px}
.comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0}
.comments .comment-thread.inline-thread .comment-block{margin-right:48px}
.comments .comment-thread.inline-thread .user a{font-size:14px}
.comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:36px;max-width:36px;height:36px;max-height:36px}
.comments .continue{border-top:0;width:100%}
.comments .continue a{padding:10px 0;text-align:center}
.comment .continue{display:none}
#comment-editor{width:103%!important}
.comment-form{width:100%;max-width:100%}
/*Blogger Threaded Comments Styles From http://www.spiceupyourblog.com*/

2- صندوق تعليقات باللون أزرق 

/*Blogger Threaded Comments Styles From http://www.spiceupyourblog.com*/
#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:#1e05d8}
#comments h4,.comments .user a,.comments .continue a{font-size:17px}
#comments h4,.comments .continue a{font-weight:normal;color:#fff}
#comments h4:after{content:"";position:absolute;bottom:-10px;right:10px;border-top:10px solid #1e05d8;border-left:20px solid transparent;width:0;height:0;line-height:0}
#comments .avatar-image-container img{border:0}
.comment-thread{color:#111}
.comment-thread a{color:#777}
.comment-thread ol{margin:0 0 20px}
.comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a{color:#1e05d8}
.comments .avatar-image-container,.comments .avatar-image-container img{width:48px;max-width:48px;height:48px;max-height:48px}
.comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-right:60px}
.comments .comment-block,.comments .comment-thread.inline-thread .comment{border:1px solid #ddd;background:#f9f9f9;padding:10px}
.comments .comments-content .comment{margin:15px 0 0;padding:0;width:100%;line-height:1em}
.comments .comments-content .icon.blog-author{position:absolute;top:-12px;left:-12px;margin:0;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjyXzBX3kNY1WXKHtRxVq8NGAAuAzc0zIqBGJxcbfM6-y6NtTjd-oeB6NYM8aWtyRpVLCzbJQrFbLriL3W2ZRCjxTBZseG3d6-qU2BNNljVYsZsnZmk4h64CxiTXlDTMMDZ7xzJ3fRNHY/s1600/picresized_1338990142_comment-author-blue.png);width:36px;height:36px}
.comments .comments-content .inline-thread{padding:0 20px 0 0}
.comments .comments-content .comment-replies{margin-top:0}
.comments .comment-content{padding:5px 0;line-height:1.4em}
.comments .comment-thread.inline-thread{border-right:1px solid #ddd;background:transparent}
.comments .comment-thread.inline-thread .comment{width:auto}
.comments .comment-thread.inline-thread .comment:after{content:"";position:absolute;top:10px;right:-20px;border-top:1px solid #ddd;width:10px;height:0px}
.comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0}
.comments .comment-thread.inline-thread .comment-block{margin-right:48px}
.comments .comment-thread.inline-thread .user a{font-size:14px}
.comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:36px;max-width:36px;height:36px;max-height:36px}
.comments .continue{border-top:0;width:100%}
.comments .continue a{padding:10px 0;text-align:center}
.comment .continue{display:none}
#comment-editor{width:103%!important}
.comment-form{width:100%;max-width:100%}
/*Blogger Threaded Comments Styles From http://www.spiceupyourblog.com*/

3- صندوق تعليقات باللون وردي

/*Blogger Threaded Comments Styles From http://www.spiceupyourblog.com*/
#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:#d80556}
#comments h4,.comments .user a,.comments .continue a{font-size:17px}
#comments h4,.comments .continue a{font-weight:normal;color:#fff}
#comments h4:after{content:"";position:absolute;bottom:-10px;right:10px;border-top:10px solid #d80556;border-left:20px solid transparent;width:0;height:0;line-height:0}
#comments .avatar-image-container img{border:0}
.comment-thread{color:#111}
.comment-thread a{color:#777}
.comment-thread ol{margin:0 0 20px}
.comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a{color:#d80556}
.comments .avatar-image-container,.comments .avatar-image-container img{width:48px;max-width:48px;height:48px;max-height:48px}
.comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-right:60px}
.comments .comment-block,.comments .comment-thread.inline-thread .comment{border:1px solid #ddd;background:#f9f9f9;padding:10px}
.comments .comments-content .comment{margin:15px 0 0;padding:0;width:100%;line-height:1em}
.comments .comments-content .icon.blog-author{position:absolute;top:-12px;left:-12px;margin:0;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjowZ2ziYQq5Afi822ODsaYBUOg_SNwQz00ymLSNnRgMHDngwvoOovxpRynJNC_CBVrtur6MelVTuvnylB6LGxIJlxY3xiH8sfYxo2FVnECNgR4d3puZqjXpa-ZBA8MrA5LB02v0lR-rU/s1600/author-pink.png);width:36px;height:36px}
.comments .comments-content .inline-thread{padding:0 20px 0 0}
.comments .comments-content .comment-replies{margin-top:0}
.comments .comment-content{padding:5px 0;line-height:1.4em}
.comments .comment-thread.inline-thread{border-right:1px solid #ddd;background:transparent}
.comments .comment-thread.inline-thread .comment{width:auto}
.comments .comment-thread.inline-thread .comment:after{content:"";position:absolute;top:10px;right:-20px;border-top:1px solid #ddd;width:10px;height:0px}
.comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0}
.comments .comment-thread.inline-thread .comment-block{margin-right:48px}
.comments .comment-thread.inline-thread .user a{font-size:14px}
.comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:36px;max-width:36px;height:36px;max-height:36px}
.comments .continue{border-top:0;width:100%}
.comments .continue a{padding:10px 0;text-align:center}
.comment .continue{display:none}
#comment-editor{width:103%!important}
.comment-form{width:100%;max-width:100%}
/*Blogger Threaded Comments Styles From http://www.spiceupyourblog.com*/

احرص على نقل الكود كاملا ثم احفظ القالب ومبروك عليك الاضافة .
إذا كان لديك أي مشكلة في هذه الاضافة،اترك التعليق أدناه.

تنبيه : المرجوا عدم نسخ الموضوع بدون ذكر مصدره المرفق بالرابط المباشر للموضوع الأصلي وإسم المدونة وشكرا

Share this article :

Similiar Templates