مساحة إعلانية

الأربعاء، 22 أكتوبر، 2014

الأربعاء، 22 أكتوبر، 2014

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

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

وبالتوفيق

هناك 18 تعليقًا:

  1. شكرا لك اخي عمرو معلومات مهمة و موضوع كنت احتاجه احترامي لشخصك الكريم =r

    ردحذف
    الردود
    1. يسعدني ان الموضوع نال اعجابك أخي منير
      سررت بمرورك يا غالي =r

      حذف
  2. شكرا جزيلا لك...
    www.astu2tech.com

    ردحذف
  3. اخ كن مدون لقد ذكرت انه يمكن تغيير الاتربيوت class لماذا يتم تغييرة لم افهم

    ردحذف
    الردود
    1. يتم تغيره أخي الكريم في كود الستايل حتى يظهر على جزئية معينة
      يعني لو استبدلت class بـ post-author vcard
      هنا معناه انه سيطبق على المظهر الخاص بالكاتب لو كررته ووضع معرف آخر سيطبق عليه اما لو لم تغيره لن يظهر مظهر الأيقونة على اى شئ

      حذف
  4. المرجواا المساعدة
    عندمى اضغط على حفض النمودج بيطلع لي More than one widget was found with id: HTML3. Widget IDs should be unique

    ردحذف
    الردود
    1. لديك أكثر من اضافة بمعرف واحد وهو HTML3
      ابحث عنه وان وجدته متكرر غيره بحيث يكون هناك واحد فقط ممكن نا تجعله HTML33
      HTML34 وهكذا

      حذف
  5. اخي والله لم افهم شيئ

    ردحذف
    الردود
    1. ما الذي لم تفهمه اخي الكريم ؟
      انت تأخذ كود الجزء الذي تريد اضافته وتضيفه الامر بسيط

      حذف
  6. السلام عليكم اخي ممكن شرح عرض معلومات الكاتب بجانب الموضوع على اليمين مثل المنتديات
    ومثل مدونتك

    ردحذف
    الردود
    1. وعليكم السلام هذا أخي الكريم جزء من التصميم لا ينفع اضافته إلا على قالب به تلك المساحة ويجب ان يعد يدويا له

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

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

      حذف
  8. والله كنت ابحث عنها من زمان افدتنى كثيرا احى عمر بس عندى طلب انا لو مش عاوز اضيف ايقونات صور انا عاوز اضيف ايقونات font-awesone كيفية عملاه وشكرا

    ردحذف
    الردود
    1. يتم ذلك بإستخدام الوسم before , after سأحاول قريباً إعداد شرح لهذا الامر بإذن الله

      حذف
    2. شكرا لك ولكن انا اعرف كيف استخدمها اعرف ويكون هكاذا لو هضيف ايقونة للتعليقات
      .post-comment-link:before{
      content:هنا كود ايقونة التعليقات;
      }
      هكذا اخى عمرو صح

      حذف
    3. نعم أخي هكذا ثم تكمل بناء الستايل ليكتمل المظهر

      حذف
    4. شكرا لك مواضعك جميلة جدا تفدي الزائر

      حذف

نسعد ونتشرف بتعليقاتكم
لكن هناك شروط يجب اتباعها لضمان نشر التعليقات
1ان يكون التعليق يخص محتوى الموضوع
2ان لا يحتوي التعليق اى روابط دون داعي
3إن أردت إضافة كود حوله اولا بمحول الأكواد
4أن لا يحتوي التعليق اي الفاظ او اساءات لاى احد
5أى سؤال بعيد عن محتوى الموضوع يرجى استخدام ركن الأسئلة

جميع الحقوق محفوظة لــ كن مدون 2013-2015 ©