المعلومات الأساسية للتدوينات اضافتها والتحكم بها

Blogger-Post-Information
لكل تدوينه معلومات أساسية مثل معلومات الكاتب وتاريخ النشر والتعليقات والأقسام أو التسميات لكن بعض القوالب لا تكون تلك المعلومات مضافة بها او تكون ناقصة او تحتاج تنسيق , وفي هذا الموضوع سنشرح اضافة تلك المعلومات وتنسيقها فتابع لنهاية الموضوع 

أولا الأكواد

اسم الكاتب

<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorlabel/>
<b:if cond='data:post.authorProfileUrl'>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
<a class='g-profile' expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
<span itemprop='name'><data:post.author/></span>
</a>
</span>
<b:else/>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<span itemprop='name'><data:post.author/></span>
</span>
</b:if>
</b:if>
</span>


تاريخ النشر

<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestamplabel/>
<b:if cond='data:post.url'>
<meta expr:content='data:post.canonicalUrl' itemprop='url'/>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a>
</b:if>
</b:if>
</span>

الأقسام أو التسميات

<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postlabelslabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>
</b:if>
</span>

التعليقات

<span class='post-comment-link'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:post.allowComments'>
<b:include data='post' name='comment_count_picker'/>
</b:if>
</b:if>
</b:if>
</span>
كل كود من الاكواد السابقة يخص الامر الموضح فوقه لو اردنا مثلا ان نضيف اسم الكاتب بعده التعليقات ننسخ كود الكاتب ونضيف بعده كود التعليقات وعند اضافتهما في القالب سيكونان بجانب بعضهما تريد نسخهم جميعهم بجانب بعض لا مشكلة يمكنك التنسيق كما تريد ويمكنك اضافتهم في اى منطقة في الموضوع مثال
لو اردت اضافتهم تحت عنوان الموضوع اضفهم تحت الكود التالي
<div class='post-header'>
وان اردتهم في نهاية الموضوع اضفهم تحت الكود التالي
<div class='post-footer'>
لكن هناك توضيحين
الاول هو الكود الاحمر المكرر في الثلاث أكواد الاولى
هذا يخص الكلمة التي تظهر بجانبه
انت عندما تدخل لصفحة التخطيط وتحرر صندوق الرسائل لتفعيل تلك الاجزاء بجانب كل واحد توجد كلمة يمكنك تغييرها
مثلا بجانب الكاتب توجد كلمة بقلم او قد تكون كلمة وانت تغيرها لكن البعض لا يريد وجود الكلمة اساسا هنا تحذف الجزء الأحمر
أما الثاني هو الجزء الأخضر هذا سنسميه المعرف class
وسنتعرف على استخدامه في الجزء التالي وهو

التنسيق

طبعا يمكن عمل كثير من التنسيقات لتلك الأكواد لكننا سنشرح اشهر تنسيق وهو اضافة ايقونة صغيرة بجانب اى من تلك الاجزاء
كل ما عليك هو ان تضيف الكود التالي فوق الوسم ]]></b:skin>
.class {
  background-image: url("#");
  background-position: right 1px;
  background-repeat: no-repeat;
  padding-right: 20px;
  float:right;
}
استبدل المعرف class بمعرف الجزء الذي تريد تنسيق يمكنك تكرار الأمر ان كنت تريد وضع اكثر من كود
رمز # استبدله برابط أيقونة ويمكنك ان تجد أيقونات كثيرة بالبحث في جوجل
الكلمة right معناها ان تلك الأيقونة ستكون ناحية اليمين اما الرقم 1 ستكون الأيقونة مبتعده بنسبة 1 بيكسل من الأعلى يمكنك زيادته او حتى جعلها بالسالب -1  بحسب الأيقونة لديك وكيف سيكون مظهرها بجانب الكود
الرقم 20 هو مدى بعد الكود من الأيقونة توضيح لو ستستخدم ايقونة بمقاس 16x16 معناه ان عرض تلك الأيقونة 16 بيكسل هنا لو لم نضع مسافة فراغ ستكون الكلمة مثلا لو اسم الكاتب سيكون ظاهر فوق الأيقونة وليس جانبها نحتاج لعمل فراغ حتى يكون بجانبها والرقم 20 هو هذا الفراغ يمكنك زيادته او انقاصه بحسب حجم الايقونة لاتي ستستخدمها
الكلمة right تحدد اتجاه الاكواد مثلا لو نريد اضافة الأقسام واسم الكاتب ناحية اليمين سنستخدمها كما هي
ومثلا لو اردنا التعليقات ناحية اليسار سنستخدم مع معرف التعليقات بدلا منها كلمة left
وهذا مثال ناتج من تطبيق الدرس والتنسيق

Author Label Comments

وبالتوفيق

No comments:

Post a Comment

201 تعريب عرب تيش جمياع الحقوق محفوظة 2016

Theme images by sndr. Powered by Blogger.