إضافة زر رد للتعليقات الموجودة علي مدونتك بشكل إحترافي



السلام عليكم ورحمة الله وبركاته في هذا الدرس سوف نتعلم كيفية إضافة زر" رد &replay " للتعليقات الموجودة في المدونة فبعض المدونين الذين يستعملون منصة بلوجر للتدوين يشكون دائما من أن نظام التعليقات غير إحترافي ولكن بهذه الإضافة سوف تحسن كثيرا من نظام التعليقات  ولإضافتها عليك بإتباع تلك الخطوات

1- الذهاب الي لوحة تحكم مدونتك من هنا
2- ثم نذهب الي قالب ثم تحرير html ثم نضع علامة صح لتوسيع الادوات
3-  ثم نقوم بالبحث عن هذا الكود ]]></b:skin>
4- ثم نضع قبله مباشرة هذا الكود

.comments{clear:both;margin-top:10px;margin-bottom:0;font-family:Arial;line-height:18px;font-size:13px}

.comments .comments-content{margin-bottom:16px;font-weight:normal;text-align:left}

-block;margin:0 0 10px 10px;padding:0 15px;color:#424242 !important;text-align:center;text-decoration:none;background:#fede72;border:1px solid #fec648;border-radius:2px;height:26px;line-height:28px;font-weight:normal;cursor:pointer}
.comments .comments-content .comment-thread ol{list-style-type:none;padding:0;text

.comments .comment .comment-actions a,.comments .comment .continue a{display:inlin
e-align:none}
.comments .comments-content .inline-thread{padding:0}
.comments .comments-content .comment-thread{margin:8px 0}
.comments .comments-content .comment-thread:empty{display:none}
.comment-replies{margin-top:1em;margin-left:40px;background:#fff}
.comments .comments-content .comment{margin-bottom:0;padding-bottom:0}
.comments .comments-content .comment:first-child{padding-top:16px}

k;margin:0 0 -4px 6px}
.comments .comments-content .datetime a{color:#0E6284;font

.comments .comments-content .comment:last-child{border-bottom:0;padding-bottom:0}
.comments .comments-content .comment-body{position:relative}
.comments .comments-content .user{font-style:normal;font-weight:normal}
.comments .comments-content .user a{color:#0E6284;font-weight:normal;text-decoration:none}
.comments .comments-content .icon.blog-author{width:18px;height:18px;display:inline-blo
c-size:12px;float:right;text-decoration:none}
.comment-content{margin:0 0 8px;padding:0 5px}
.comment-header{font-size:18px;background-color:#f1f1f1;border-bottom:1px solid #e3e3e3;padding:5px}
.comments .comments-content .owner-actions{position:absolute;right:0;top:0}
.comments .comments-replybox{border:none;height:230px;width:100%}
.comments .comment-replybox-thread{margin-top:0}
.comments .comment-replybox-single{margin-top:5px;margin-left:48px}

ad-arrow{display:inline-block;height:6px;width:7px;overflow:visible;margin:0.3em;padding-r

.comments .comments-content .loadmore a{display:block;padding:10px 16px;text-align:center}
.comments .thread-toggle{cursor:pointer;display:inline-block}
.comments .comments-content .loadmore{cursor:pointer;max-height:3em;margin-top:0}
.comments .comments-content .loadmore.loaded{max-height:0;opacity:0;overflow:hidden}
.comments .thread-chrome.thread-collapsed{display:none}
.comments .thread-toggle{display:inline-block}
.comments .thread-toggle .thr
eight:4px}
.comments .thread-expanded .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent}
.comments .thread-collapsed .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent}

comment-block{margin-left:65px;position:relative;border:5px solid #e3e3e3;border-radius:8px}
@media screen and (max-device-width:480px){.comments .comments-content .comment-replies{margin-left:0}}

.avatar-image-container{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvbGLn3F1VGAV4iNJAwjUu3-xe40mPMuHq2_G6dNbdeD628ZxbKI1syuxzJsUmtvReLlamdMybrhrRxjO2mYHON6Rx63D8PyMTQTuJiM-lC5b1FxhwvuK38zaQI7cyLROFh5mlXF7Ojkc/s51/arrow.png) top right no-repeat;float:left;vertical-align:middle;overflow:hidden;width:65px !important;height:51px !important;max-width:65px !important;max-height:51px !important}
.comments .avatar-image-container img{padding:2px;border:1px solid #ccc;width:45px !important;height:45px !important;max-width:45px !important;max-height:45px !important}
.comments

.

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

ضع تعليقا أخي الكريم

جميع الحقوق محفوظة forja-ZooM ©2014 | ، نقل بدون تصريح ممنوع . Privacy-Policy