تمييز تعليق كاتب التدوينه عن تعليقات القراء باللون والصوره في مدونة بلوجر

السلام عليكم ورحمة الله وبركاتة زوار ومتابعي مدونة تقارب..تدوينتي اليوم قررت كتابتها فور انتهائي من تطبيقها على مدونتي اولا وهى كما يوضح عنوان التدوينه مجرد تعديل على قالب المدونه نستطيع من خلاله تمميز تعليق كاتب التدوينه عن باقي تعليقات القراء
مااعجبني في تلك الاضافه هو ماتتمتع به من الوان هادئه تتناسب مع جميع القوالب فقد قمت بوضع بعض اكواد الالوان التي تجعلك لست بحاجه الي تعديلها بما يتناسب مع قالبك ,, واكثر شئ يميز تلك الضافه والتعديل هو سهولته في التطبيق فهو عباره عن خطوتين فقط
والشئ الثاني والاهم هو انه يمكنك من وضع ايكونه او صوره صغيره مثل ما ترى اسفل الموضوع حيث يتم وضع ايكونه صغيره داخل تعليق صاحب المدونه تدل على ان التعليق كاتب التدوينه هو صاحبه بالاضافه طبعا الي لون مغاير لصنودق تعليقه ومختلف عن باقي الوان صناديق االتعليقات الاخرى المكتوبه من قبل القراء,,,جميعا نعلم اهمية تلك الاضافه فبجانب انها تضفي على المدونه جوا من الاناقة والاحترافيه فهي ايضا تميز تعليق كاتب التدوينه كى يتمكن من يريد مساعدته من تتبع تعليقاته ومايقوله.. بالتاكيد قد اعجبتك تلك الاضافه والتعديل بعد ان رائيتها في مدونتي المتواضعه تقارب..هيا بنا معا نطبقها سويا مرة اخرى ولكن على مدونتك انت:
الخطوه الاولى: اذهب الي لوحة تحكم بلوجر > تصميم > تحرير HTML  ولا تنسى نسخه احتياطيه من قالب مدونتك اخذ تحسبا لوقوع اخطاء اثناء التطبيق.
الخطوه الثانيه: اضغط على علامة “توسيع قوالب واجهة المستخدم”.
الخطوه الثالثه: اضغط “Ctrl+Fوقم بالبحث عن السطر الازرق فقط من الكود الذي بالاسفل :
         


<b:loop values='data:post.comments' var='comment'>
<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p>
<data:comment.body/>
</p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>

ثم قم بتظليله بالكامل حتى تصل الي نهايته المعلمه باللون الازرق ايضا وهي تلك  “</b:loop>” (ثم قم باستبداله وتغييره بالكود الموجود بالاسفل كاملا) :
         


<b:loop values='data:post.comments' var='comment'>


<div expr:class='&quot;author-comment &quot; + data:comment.authorClass'>


<dt class='comment-author' expr:id='data:comment.anchorName'>


<b:if cond='data:comment.favicon'>


<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>


</b:if>


<a expr:name='data:comment.anchorName'/>


<b:if cond='data:blog.enabledCommentProfileImages'>


<data:comment.authorAvatarImage/>


</b:if>


<b:if cond='data:comment.authorUrl'>


<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>


<b:else/>


<data:comment.author/>


</b:if>


<data:commentPostedByMsg/>


</dt>


<dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>


<b:if cond='data:comment.isDeleted'>


<span class='deleted-comment'><data:comment.body/></span>


<b:else/>


<p>


<data:comment.body/>


</p>


</b:if>


</dd>


<dd class='comment-footer'>


<span class='comment-timestamp'>


<a expr:href='data:comment.url' title='comment permalink'>


<data:comment.timestamp/>


</a>


<b:include data='comment' name='commentDeleteIcon'/>


</span>


</dd>


</div>


</b:loop>

الخطوه الرابعه: ابحث عن هذا الكود ]]></b:skin> وضع الكود الموجود بالاسفل قبله مباشرة:

.comment-footer{

margin-bottom:0 !important;

}

.author-comment{

background-color:#F0FFF0;

padding:5px;

margin-bottom:1.5em;

border:1px solid #ccc;

border-radius:10px;

}

.author-comment.blog-author {

background: #FFEBCD url(https://lh3.googleusercontent.com/_-BRP4LFLyWc/TZX3b7r2AyI/AAAAAAAAATY/8Am8ri02OjE/s800/admin.png) no-repeat right top;

}

الخطوه الخامسه والاخيره:قم بحفظ قالب مدونتك وقبل الحفظ تستطيع تغيير الصوره المعلمه باللون الازرق في الكود الذي بالاعلى الي اى صوره تروق لك مع مراعاة ان تكوزن الصوره بقياس صغير حتى لا تخرج عن حدود صندوق التعليق الخاص بك وتذكر ان تلك الصوره تعبر عنك انت.
ارجو ان يكون درس اليوم حاز على اعجاب الجميع ,, اى استفسار يرجا ترك تعليق بالاسفل !!
أصدقاء(تطوير ويب)
تعليقات Facebook
13تعليقات Blogger

13 عدد التعليقات على موضوع تمييز تعليق كاتب التدوينه عن تعليقات القراء باللون والصوره في مدونة بلوجر

قارئ من القراء يقول...

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

أحمد ( مدونة تقارب ) يقول...

وعليكم السلام ورحمة الله وبركاته
سبحان الله وبحمده .. سبحان الله العظيم
مجرد تجربه: تبين تمييز تعليق كاتب التدوينه عن بقية التعليقات
بلون صندوق التعليق وكذلك الايكونه الصغيره الموجوده هنا !!

عمرو العزوني يقول...

الف الف شكر بجد بجد درس كله ابداع
تم التطبيق بنجاح

ياسر سراج يقول...

اضافه رائعه ودرس مفيد ومطلوب عن نفسي اعجبني جدا
وساقوم بتركيبه علي مدونتي الناشئه

omnia-lock يقول...

مشكور الله يعطيك العافيه بالتوفيق لك شكرا مدونه متالقه في سماء بلوجر

يحيى يقول...

مرحبا ، لقد اتبعت ما وضعته في الموضوع لكنني لم أحصل على نفس النتيجة ، أنظر إلى الصورة:
http://img844.imageshack.us/img844/4894/sansrepx.png
أتمنى أن تساعدني وشكرا لك ...

أحمــد ( مدونة تقارب ) يقول...

ستجد تلك العباره في اخر الكود
no-repeat right top;
غيرها الي تلك العباره
no-repeat center top;
:::
بالنسبه للغه العربيه وحروف الهجاء ماعلاقه هذا بالقالب الذي علقت عليه!!

Banned يقول...

لم استطع فعل ذلك
لانني لم اجد الكود الاول كاملا !!

tqarob blog يقول...

@Banned
قم بنسخ الجزء المعلم باللون الازرق فقط من الكود الاول
ان لم تجده قم برفع قالب مدونتك وسوف اطبق الدرس بكل سرور..

احمد ابو الدهب يقول...

جزاك الله خيرا اضافة مميزة

http://amar-nana.blogspot.com/

إرسال تعليق

التعليقات متاحه لمستخدمي حساب جوجل فقط.ولاضافة كود: أستعن بهذه الأداة السريعة Encode/HTML .