الأحد، 22 نوفمبر 2009

كيف تميز تعليقاتك عن تعليقات الزوار الآخرين في مدونتك ؟ تمييز تعليقات صاحب المدونة عن تعليقات بقية الزوار في مدونات بلوجر !!

قراءة للموضوع


بسم الله الرحمن الرحيم ، إخواني الكرام بعد عملية بحث طويلة ومتعبة عن ( كيفية تغيير أو تكبير حجم خط التعليقات في مدونة بلوقر ) و ( كيف تمييز تعليقات صاحب المدونة عن غيره من تعليقات الزوار الآخرين في مدونة بلوجر ) ها أنا اليوم سوف أضع لكم هذا الدرس بطريقة سهلة ومبسطة وذلك ليستفيد منه زوار مدونتي هذه ( المحررون العرب ) . طبعاً الدرس لما تشوف طويل شويه ربما تقول ما يحتاج الى هذا الشرح ، بس أنا ما قمت بتطويل الشرح إلا للأشخاص المبتدئين في عالم التدوين وذلك رغبة و حباً مني لهم :


والان خطوات الشرح :


الخطوة الاولى : نذهب الى قائمة ( تخطيط ) ثم ( تحرير HTML ) ثم نقوم بتوسيع القالب . انظر الصورة :

اضغط الصورة لتكبر






الخطوة الثانية : نقوم بالبحث ( CTRL+F ) عن الكود التالي :

]]></b:skin>

ثم نضع فوقه مباشرة هذا الكود :

.author-comments {
background: #99C9FF;
border: 3px solid #99C9FF;
padding: 5px;

* اللون الاحمر الذي في الكود يمثل لون خلفية التعليقات ، فهو الان عبارة عن لون بخلفية ازرق قم بتغييره اذا شئت .
* اللون الازرق في الكود يمثل لون الاطار المحيط بالتعليق . قم بتغييره اذا شئت .
* اللون الاخضر في الكود يمثل عرض اطار تعليقاتك بالمدونة . قم بتغيير العرض اذا شئت .




الخطوة الثالثة : نقوم بالبحث الكود التالي :

<dd class='comment-body'>

ثم نضع فوقه الكود التالي مباشرة :

<b:if cond='data:comment.author == data:post.author'>
<dd class='author-comments'>
<p><data:comment.body/></p>
</dd>
<b:else/>

ثم نبحث عن الكود هذا :

<dd class='comment-footer'>

ثم نضع فوقه الكود التالي :

</b:if>


خلاصة الشرح :

يعني باختصار لاحظ معي كيف قمنا بعمل الخطوة الثالثة : الكود الذي ( باللون الاسود ) طبعا موجود من سابق في المدونة ولكن الكود الذي ( باللون الاحمر ) هو الذي قمنا باظافته في المدونة حتى تمييز التعليقات في مدوناتنا عن غيرنا من الزوار الآخرين :

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<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>

</dt>
<b:if cond='data:comment.author == data:post.author'>
<dd class='author-comments'>
<p><data:comment.body/></p>
</dd>
<b:else/>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
</b:if>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:
comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>


ثم نقوم بالضغط على زر حفظ ومبروك عليك ،،،،




تكبير حجم خط التعليقات



نقوم بالبحث عن ( COMMENTS ) وبعدها ندور ونبحث في الاكواد بتاعها حتى نلاقي الكود التالي :

#comments-block {
margin: 1em 0 1.5em;
line-height: 1.3em;

ثم نضيف لها كود حجم الخط كالتالي :

font-size:
150%;

اللون الاحمر هو حجم الخط قم بتغيير اذا شئت


خلاصة الشرح :


انظر النتيجة كيف صار الكود بعد اضافة له كود حجم الخط : طبعا الكود ذو الكتابة الاسود موجود مسبقاً ولكن ماقمنا بتغييره هو الكود ذو اللون الاحمر :

/* Comments
----------------------------------------------- */
#comments h4 {
margin: 1em 0;
color: $dateHeaderColor;
}
#comments h4 strong {
font-size: 160%;
}
#comments-block {
margin: 1em 0 1.5em;
line-height: 1.3em;
font-size: 150%;
}
#comments-block dt {
margin: .5em 0;
}
#comments-block dd {
margin: .25em 0 0;
}
#comments-block dd.comment-footer {
margin: -.25em 0 2em;
line-height: 1.4em;
font-size: 100%;
}
#comments-block dd p {
margin: 0 0 .75em;
}

.deleted-comment {
font-style:italic;
color:gray;
}

.feed-links {
clear: both;
line-height: 2.5em;
}

#blog-pager-newer-link {
float: $startSide;
}

#blog-pager-older-link {
float: $endSide;
}

#blog-pager {
text-align: center;
}

/* Sidebar Content
----------------------------------------------- */

* اللون الاخضر : الكود الذي نبحث عنه علشان نقوم بتكبير الخط
* اللون الاحمر : الكود الذي قمنا باضافته ( كود حجم الخط )



ما نريده منكم سوى دعائكم لي و تعليقاتكم على الموضوع ،،،









24 التعليقات:

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

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

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

خالد محمد (ابوخلود) يقول...

اخي شجرة الام
ممكن توضح السؤال اكثر يعني مافهمت ايش الي ما ظهر وايش الي ظهر ؟

العلم نور يقول...
أزال المؤلف هذا التعليق.
العلم نور يقول...

لم يظهر تحديث للتدوينتين الآخيريتين التي أضفتها بعد التدوينة التي كتبتها منذ أسبوع مضى .. فقد وقف ولم تحدث ..

ففي قوائم المدونين الذين وضعوني في المفضلة لديهم تظهر المواضيع الأكثر تحديثا أما أنا مدونتي مكتوب عليها منذ أسبوع مضى .. وليس آخر ما أضفت .. هل اتضح الأمر.

مشروع جديد ناجح يقول...

حقيقى درس مفيد شكرا لك وعلى مدونتك المفيدة

الزنارى يقول...

شرح رائع أخى
لكن صراحة الموضوع معقد و صعب تطبيقة و لن أحاول التطبيق لأننى أعلم أننى بعدما أفعل كل ما قلتة سيقول لى هناك خطأفى تحرير html
بالنسلة للشجرة الأم
لقد عادت مدونتك فى قائمتى بصورة طبيعية و لا أعلم لماذا حدث بها هذا الخلل و لماذا عادت
مع خالص الاحترام و التقدير
أحمد الزنارى

خالد محمد (ابوخلود) يقول...

شكرا لكم اخوتي احمد هاني والزنادي
وعيد سعيد وكل عام وانتم طيبين ، لقد عدت وانتظرو المواضيع الجديدة وكونو من زوارنا لتجدون الحل عن كل ماهو متعلق بتحسين واشهار مدونات بلوجر هنا في مدونة المحررون العرب ،،،،،،،

خالد محمد (ابوخلود) يقول...

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

Unknown يقول...

جزاك الله خيراً
وشكراً على مجهودك الرائع والمفيد

عبد العزيز عمار يقول...

شكرا لك اخى الكريم وعلى زيارتك لمدونتى القانونية ونتكنى دوام التواصل

Abdelrahman Ayman يقول...

شكرا للك فلقد تعودنا منك على هذه المواضيع المفيده اكرر طلبى بان اتشرف بعمل تبادل ترابط معى
عنوان مدونتى
http://el3bor.blogspot.com/

غروب يقول...

مشكووووووووووور والله يجزا خييير

غروب يقول...

مشكوووووور اخوي وجزاك الله خير

عملت نفس الخطوات

لكن الخط مايتكبر عندي

بس لون خلفية التعليقات تغيرت

غير معرف يقول...

ماشاءالله لا قوة إلا بالله
جميل جداً أخي الفاضل ,,
بارك الله فيكم

my empire يقول...

يعطيك العافيه
مواضيع رائعه ومفيده

MaJiD يقول...

بارك الله فيك
درس رئع وشرح واضح شكراً لك.

قلم جف حبره .. يقول...

بارك الله فيك على هذا الشرح السهل والممتع .. تم التطبيق ..!!

غير معرف يقول...

شكرا لك اخي الكريم

Gabriel يقول...

شكرا لك
اضافة جميلة وشرح مبسط

حلم الأمومة يقول...

استفدت منكم كثيرا
بارك الله فيكم
مدونتي
http://helmalomomah.blogspot.com/

بحَرالذِﮔرياتْﮧ يقول...

جزآكَ آلله خِير آخويَ
كفيتْ و فيتْ

إيمان يقول...

الله يحفظك اخي ربي يجازيك كل خير

shehoecho يقول...

مشكور اخى العزيزعلى الجهد والتعب ونرجوا من الله ان يوافقك ويوفقنا جميعا الى التقدم والقمة

Entsorgung Wien يقول...

فين الموضوعات الجديدة .. ؟؟