قراءة للموضوع
بسم الله الرحمن الرحيم ، إخواني الكرام بعد عملية بحث طويلة ومتعبة عن ( كيفية تغيير أو تكبير حجم خط التعليقات في مدونة بلوقر ) و ( كيف تمييز تعليقات صاحب المدونة عن غيره من تعليقات الزوار الآخرين في مدونة بلوجر ) ها أنا اليوم سوف أضع لكم هذا الدرس بطريقة سهلة ومبسطة وذلك ليستفيد منه زوار مدونتي هذه ( المحررون العرب ) . طبعاً الدرس لما تشوف طويل شويه ربما تقول ما يحتاج الى هذا الشرح ، بس أنا ما قمت بتطويل الشرح إلا للأشخاص المبتدئين في عالم التدوين وذلك رغبة و حباً مني لهم :
والان خطوات الشرح :
الخطوة الاولى : نذهب الى قائمة ( تخطيط ) ثم ( تحرير 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
بالنسلة للشجرة الأم
لقد عادت مدونتك فى قائمتى بصورة طبيعية و لا أعلم لماذا حدث بها هذا الخلل و لماذا عادت
مع خالص الاحترام و التقدير
أحمد الزنارى
شكرا لكم اخوتي احمد هاني والزنادي
وعيد سعيد وكل عام وانتم طيبين ، لقد عدت وانتظرو المواضيع الجديدة وكونو من زوارنا لتجدون الحل عن كل ماهو متعلق بتحسين واشهار مدونات بلوجر هنا في مدونة المحررون العرب ،،،،،،،
اخي الزنادي
بالنسبة للموضوع هذا فهو غير معقد او صعب تطبيقة سهل وقد قمت بشرحه بطريقة سهلة ومبسطة ولكن كل ماعليك هو ان تركز في الخطوات فان كانت الخطوات صعبة اقرا وركز في الخلاصة الشرح فالكود الذي باللون الاحمر قم باضافته والكود باللون الاسود طبعا موجود في مدونتك لاتقم باضافتها .
جزاك الله خيراً
وشكراً على مجهودك الرائع والمفيد
شكرا لك اخى الكريم وعلى زيارتك لمدونتى القانونية ونتكنى دوام التواصل
شكرا للك فلقد تعودنا منك على هذه المواضيع المفيده اكرر طلبى بان اتشرف بعمل تبادل ترابط معى
عنوان مدونتى
http://el3bor.blogspot.com/
مشكووووووووووور والله يجزا خييير
مشكوووووور اخوي وجزاك الله خير
عملت نفس الخطوات
لكن الخط مايتكبر عندي
بس لون خلفية التعليقات تغيرت
ماشاءالله لا قوة إلا بالله
جميل جداً أخي الفاضل ,,
بارك الله فيكم
يعطيك العافيه
مواضيع رائعه ومفيده
بارك الله فيك
درس رئع وشرح واضح شكراً لك.
بارك الله فيك على هذا الشرح السهل والممتع .. تم التطبيق ..!!
شكرا لك اخي الكريم
شكرا لك
اضافة جميلة وشرح مبسط
استفدت منكم كثيرا
بارك الله فيكم
مدونتي
http://helmalomomah.blogspot.com/
جزآكَ آلله خِير آخويَ
كفيتْ و فيتْ
الله يحفظك اخي ربي يجازيك كل خير
مشكور اخى العزيزعلى الجهد والتعب ونرجوا من الله ان يوافقك ويوفقنا جميعا الى التقدم والقمة
فين الموضوعات الجديدة .. ؟؟
ارسل تعليقك من هنا