الرئيسية / blogger / اضافة لمسات جميلة على صندوق التعليقات لمدونتك

اضافة لمسات جميلة على صندوق التعليقات لمدونتك

اضافة لمسات جميلة على صندوق التعليقات لمدونتك

اضافة لمسات جميلة على صندوق التعليقات لمدونتك
اضافة لمسات جميلة على صندوق التعليقات لمدونتك

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

اضافة لمسات جميلة على صندوق التعليقات لمدونتك

كواد CSS صندوق التعليقات الذي يعتبر واجهة وعلاقة الزائر بالمدونة. الصورة فى أول التدوينة هى النتيجة لهذا الكود اذا أعجبتك قم بإضافتها فى خطوتين.

1- الدخول على لوحة التحكم ثم القالب Template ثم اختر تخصيص Customise

2- اختار متقدم Advanced ثم Add CSS وضع الكود التالي فى المستطيل

@font-face { font-family: ‘Philosopher’; font-style: normal; font-weight: 400; src: local(‘Philosopher’), url(https://themes.googleusercontent.com/static/fonts/philosopher/v4/OttjxgcoEsufOGSINYBGLYbN6UDyHWBl620a-IRfuBk.woff) format(‘woff’); } .comment .avatar-image-container { border: 1px solid #B6B6B6; max-height: 70px !important; margin-top: -5px; width: 70px !important; position: relative; z-index: 50; } .comment .comment-block { margin-left: 75px !important; } .comment .comment-header { background: none repeat scroll 0 0 #A9F5D0; color: #333; font-size: 15px; font-weight: bold; margin-left: 60px; } .comment .comment-header a { color: white !important; text-decoration: none; } .comment .comment-content { background: none repeat scroll 0 0 #FEFFF9; border-bottom: 2px solid #E6E6E6; font-size: 14px; margin: 0 0 30px; padding: 5px 5px 10px 10px; } .comment .comment-actions a { background: none repeat scroll 0 0 #DDD; color: #333; display: inline-block; line-height: 1; margin: 0 3px; padding: 3px 6px !important; text-decoration: none; } .comment .comment-actions a { background: none repeat scroll 0 0 #DDD; color: #333; display: inline-block; line-height: 1; margin: 0 3px; padding: 3px 6px !important; text-decoration: none; } .comment-header cite { background: none repeat scroll 0 0 #DF7401; border: 1px solid white; color: white; padding: 2px 20px; position: relative; z-index: 99; margin-left: -20px; } cite.blog-author { background: none repeat scroll 0 0 #8181F7 !important; } .icon.blog-author { display: none !important; background: url(“”) no-repeat scroll 0 0; margin-left: 90px; width: 60px !important; height: 60px !important; position: absolute; right: 5px; bottom: 5px; top: 10px; } .comment .comment-header { color: #333; font-size: 15px; font-weight: bold; } .comment .avatar-image-container img { border: medium none !important; height: 70px !important; width: 70px !important; max-height: 70px !important; max-width: 70px !important; } .comment .comment-actions a { background: none repeat scroll 0 0 #DDD !important; color: #333 !important; display: inline-block !important; line-height: 1 !important; margin: 0 3px !important; padding: 3px 6px !important; text-decoration: none !important; font-size:16px; } .comment .comment-actions a:hover { background: #CCC !important; text-decoration: none !important; } .comments { font-family: ‘Philosopher’, arial, serif !important; font-size: 1em; color: black; } .comments .continue a { display: block !important; font-weight: bold !important; padding: .5em !important; color:#E34600; font-size:16px; } .comments .continue a:hover {color:#4D3123;text-decoration:none;} .item-control { display: none !important; } .comments .continue { border-top: 2px solid transparent !important; } .comments .comments-content .icon.blog-author{position:absolute;top:-1px;right:-12px;background-image:url(https://cdn2.iconfinder.com/data/icons/crystalproject/16×16/apps/keditbookmarks.png);wid

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

مصدر الكود: spiceupyourblog

شاهد أيضاً

اجعل زوارك يشاركون مقالات مدونتك على السوشيال ميديا(فيسبوك - تويتر- جوجل بلس)

اجعل زوارك يشاركون مقالات مدونتك على السوشيال ميديا(فيسبوك – تويتر- جوجل بلس)

اجعل زوارك يشاركون مقالات مدونتك على السوشيال ميديا(فيسبوك – تويتر- جوجل بلس) تريد من زوار …

5 خطوات سهلة للفوز بأكبر عدد زيارات بلوجر

5 خطوات سهلة لنشر مدونتك و كيفية زيادة زيارات بلوجر

كنت تعمل بجد على مدونتك ، تشعر أنك راسخ. حان الوقت الآن أن تكون جادًا …

كيفية عمل نسخة احتياطية من مدونة Blogger الخاصة بك (المحتوى والنماذج والصور )

طريقة أخد نسخة احتياطية لمدونة بلوجر الخاصة بك (المحتوى والنماذج والصور )

أخد نسخة احتياطية لمدونة بلوجر أخد نسخة احتياطية لمدونة بلوجر أخد نسخة احتياطية لمدونة بلوجر …

10 طرق لحماية بلوجر من الهكر blogger

10 طرق لحماية بلوجر من الهكر

نظرًا لأن ووردبريس هي أداة شائعة لإعداد المدونات ، فيمكنها بسهولة جذب انتباه المتسللين. يمكنك …

3 تعليقات

  1. I like your website content very much,can I on my website reprint your article?

  2. I’m not quite sure how to say this; you made it exemlrtey easy for me!

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *