طريقة إضافة عداد لترقيم تعليقات الكاتب والزوار معا [حصريا]

عدد مشاهدات الموضوع:
لاحظت أن اهتمامنا بمدونة أبو إياد منخفض من ناحية أكواد CSS التى توفر علينا عناء الكثير والكثير على بلوجر. أنا أتذكر منذ ثلاث سنوات وأنا أحاول إضافة طريقة الرد على التعليق كانت تستغرق الكثير والكثير وكذلك اضافة عداد لتعليقات المؤلف أو الكاتب ولكن الآن أصبحت فى غاية السهولة أن تستخدم كودا واحدا لجعل تعليقاتك ذو لمسة جمالية بالإضافة إلى ترقيم تعليقاتك كؤلف وأيضا تعليقات الزوار عليك. يمكنك معاينة قصدى من الصور التالية قبل وبعد إضافة الكود


قبل إضافة الكود
بعد إضافة الكود




والأن اذا أعجبتك الطريقة يمكنك تنفيذ هذه الخطوات بسهولة:
1- الدخول على لوحة التحكم ثم القالب Template ثم اختر تخصيص Customise
2- اختار متقدم Advanced ثم Add CSS وضع هذا الكود فى المستطيل 

/**Blue Ice Comment Theme http://www.abu-iyad.com**/
.comments{clear:both;margin-top:10px;margin-bottom:0;background:#FFF;border:1px solid #DDD;padding:10px 5%}
.comments h4{font:normal normal 25px oswald}
.comments ol{list-style:none;counter-reset:trackit;margin:0}
.comments li.comment{list-style:none;position:relative;counter-increment:trackit;clear:both}
.icon.user.blog-author:after{content:"Author";position:absolute;top:.4em;left:1em;color:rgba(112,153,182,0.97);font-size:70%}
.comments .comment-block:before{content:counters(trackit,".");position:absolute;float:none;z-index:10000;left:-1.9em;top:1.2em;bottom:inherit;background:#A9C5CC;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;font-size:25px;color:#F7FCFF;text-align:center;clear:both;margin:0;padding:8px 12px}
.comments .comment-replies .comment-block:before{content:"{" counters(trackit,".")"}";position:absolute;right:.5em;left:inherit;top:inherit;bottom:.5em;float:none;z-index:10000;background:rgba(0,0,0,0);border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;font-size:2rem;color:rgba(161,186,201,0.36);padding:8px 7px}
.comment-header{background:#DCE4EB}
.comments .comments-content .comment-header,.comments .comments-content .comment-content{margin:5px 5px 10px;padding:0 10px 0 75px}
.comments .comments-content .comment-replies .comment-block{position:relative}
.comments .comments-content .comment-replies{margin-left:2em;margin-top:1em;clear:both;padding:0}
.comments .comment-thread.inline-thread{background:rgba(0,0,0,0);padding:0 0 0 2em}
.comments .comment-replies .comment-block{float:right;border:1px solid #E7F5FF;min-height:100px;width:90%;margin-left:48px;background:#F7FCFF;padding:0 0 3em}
.comments .comment-block{float:right;border:1px solid #E7F5FF;min-height:100px;width:90%;margin-left:48px;background:#F7FCFF;padding:0 0 2em}
.comment-actions{position:absolute;left:4.5em;bottom:.5em;font-size:18px;padding:0}
.comments .comment .comment-actions a{padding-right:5px;padding-top:5px;margin:0}
.comments .comments-content .user a{color:#8B969E}
.comments .comments-content .user{font-style:italic;font-weight:400;color:#FFF;font-size:18px;text-shadow:1px 1px 1px #FFF}
.comments .comments-content .datetime,.comments .comments-content .datetime a,.comments .comments-content .datetime a:hover{margin-left:6px;float:right;text-transform:uppercase;font-size:12px;font-family:arial;font-weight:700;color:#237DAC}
.comments .avatar-image-container{background:#FFF;margin-left:0;max-height:70px;max-width:70px;overflow:hidden;width:70px;height:70px;position:absolute;left:25px;top:55px;z-index:10;border:1px solid #DDD;padding:3px}
.comments .avatar-image-container img{max-width:70px;max-height:70px;min-height:70px;min-width:70px}
.comments .thread-toggle{display:none}
/**Blue Ice Comment Theme http://www.abu-iyad.com**/
اضغط على الصورة لتراها بحجمها الطبيعي

لاحظ : لتفعيل كلمة Apply to Blog قم بالنقر أخر الكود وخذ مسافة ومن ثم اضغط على Apply to Blog لاتمام المهمة. اذا اعجبك الكود قم بمشاركته على مواقعك المفضلة :)

مصدر الكود: spiceupyourblog




هناك 3 تعليقات:

  1. شكرا شرح رائع http://arabever.blogspot.com/

    ردحذف
    الردود
    1. أهلا وسهلا. حضورك اروع وشكرا لزيارتك

      حذف
  2. مشكور اخي الحبيب

    ردحذف

مدونة أبو إياد تصميم بلوجرام جميع الحقوق محفوظة 2016

اعلان مخفى فى الرئيسية