
لكل تدوينه معلومات أساسية مثل معلومات الكاتب وتاريخ النشر والتعليقات والأقسام أو التسميات لكن بعض القوالب لا تكون تلك المعلومات مضافة بها او تكون ناقصة او تحتاج تنسيق , وفي هذا الموضوع سنشرح اضافة تلك المعلومات وتنسيقها فتابع لنهاية الموضوع
أولا الأكواد
اسم الكاتب
<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 != "true"'>,</b:if>
</b:loop>
</b:if>
</span>
التعليقات
<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:post.allowComments'>
<b:include data='post' name='comment_count_picker'/>
</b:if>
</b:if>
</b:if>
</span>
كل كود من الاكواد السابقة يخص الامر الموضح فوقه لو اردنا مثلا ان نضيف اسم الكاتب بعده التعليقات ننسخ كود الكاتب ونضيف بعده كود التعليقات وعند اضافتهما في القالب سيكونان بجانب بعضهما تريد نسخهم جميعهم بجانب بعض لا مشكلة يمكنك التنسيق كما تريد ويمكنك اضافتهم في اى منطقة في الموضوع مثال
لو اردت اضافتهم تحت عنوان الموضوع اضفهم تحت الكود التالي
وان اردتهم في نهاية الموضوع اضفهم تحت الكود التالي
لكن هناك توضيحين
الاول هو الكود الاحمر المكرر في الثلاث أكواد الاولى
هذا يخص الكلمة التي تظهر بجانبه
انت عندما تدخل لصفحة التخطيط وتحرر صندوق الرسائل لتفعيل تلك الاجزاء بجانب كل واحد توجد كلمة يمكنك تغييرها
مثلا بجانب الكاتب توجد كلمة بقلم او قد تكون كلمة وانت تغيرها لكن البعض لا يريد وجود الكلمة اساسا هنا تحذف الجزء الأحمر
أما الثاني هو الجزء الأخضر هذا سنسميه المعرف class
وسنتعرف على استخدامه في الجزء التالي وهو
التنسيق
طبعا يمكن عمل كثير من التنسيقات لتلك الأكواد لكننا سنشرح اشهر تنسيق وهو اضافة ايقونة صغيرة بجانب اى من تلك الاجزاء
كل ما عليك هو ان تضيف الكود التالي فوق الوسم ]]></b:skin>
.class {استبدل المعرف class بمعرف الجزء الذي تريد تنسيق يمكنك تكرار الأمر ان كنت تريد وضع اكثر من كود
background-image: url("#");
background-position: right 1px;
background-repeat: no-repeat;
padding-right: 20px;
float:right;
}
رمز # استبدله برابط أيقونة ويمكنك ان تجد أيقونات كثيرة بالبحث في جوجل
الكلمة right معناها ان تلك الأيقونة ستكون ناحية اليمين اما الرقم 1 ستكون الأيقونة مبتعده بنسبة 1 بيكسل من الأعلى يمكنك زيادته او حتى جعلها بالسالب -1 بحسب الأيقونة لديك وكيف سيكون مظهرها بجانب الكود
الرقم 20 هو مدى بعد الكود من الأيقونة توضيح لو ستستخدم ايقونة بمقاس 16x16 معناه ان عرض تلك الأيقونة 16 بيكسل هنا لو لم نضع مسافة فراغ ستكون الكلمة مثلا لو اسم الكاتب سيكون ظاهر فوق الأيقونة وليس جانبها نحتاج لعمل فراغ حتى يكون بجانبها والرقم 20 هو هذا الفراغ يمكنك زيادته او انقاصه بحسب حجم الايقونة لاتي ستستخدمها
الكلمة right تحدد اتجاه الاكواد مثلا لو نريد اضافة الأقسام واسم الكاتب ناحية اليمين سنستخدمها كما هي
ومثلا لو اردنا التعليقات ناحية اليسار سنستخدم مع معرف التعليقات بدلا منها كلمة left
وهذا مثال ناتج من تطبيق الدرس والتنسيق
وبالتوفيق
شكرا لك اخي عمرو معلومات مهمة و موضوع كنت احتاجه احترامي لشخصك الكريم =r
ردحذفيسعدني ان الموضوع نال اعجابك أخي منير
حذفسررت بمرورك يا غالي =r
شكرا جزيلا لك...
ردحذفwww.astu2tech.com
اخ كن مدون لقد ذكرت انه يمكن تغيير الاتربيوت class لماذا يتم تغييرة لم افهم
ردحذفيتم تغيره أخي الكريم في كود الستايل حتى يظهر على جزئية معينة
حذفيعني لو استبدلت class بـ post-author vcard
هنا معناه انه سيطبق على المظهر الخاص بالكاتب لو كررته ووضع معرف آخر سيطبق عليه اما لو لم تغيره لن يظهر مظهر الأيقونة على اى شئ
المرجواا المساعدة
ردحذفعندمى اضغط على حفض النمودج بيطلع لي More than one widget was found with id: HTML3. Widget IDs should be unique
لديك أكثر من اضافة بمعرف واحد وهو HTML3
حذفابحث عنه وان وجدته متكرر غيره بحيث يكون هناك واحد فقط ممكن نا تجعله HTML33
HTML34 وهكذا
اخي والله لم افهم شيئ
ردحذفما الذي لم تفهمه اخي الكريم ؟
حذفانت تأخذ كود الجزء الذي تريد اضافته وتضيفه الامر بسيط
السلام عليكم اخي ممكن شرح عرض معلومات الكاتب بجانب الموضوع على اليمين مثل المنتديات
ردحذفومثل مدونتك
وعليكم السلام هذا أخي الكريم جزء من التصميم لا ينفع اضافته إلا على قالب به تلك المساحة ويجب ان يعد يدويا له
حذفالسلام عليكم
ردحذفبكل موضوع اكتبه اضع هذه الكودات اما اول مرة فقط
وبعدها تلقائي واين اضعها انا جديد بعالم المدونات
وعليكم السلام ورحمة الله وبركاته
حذفلا اخي الكريم هذه الاكواد تضاف مرة واحده فقط
وتضاف في القالب نفسه بعد الاكواد المشروحه في الموضوع
والله كنت ابحث عنها من زمان افدتنى كثيرا احى عمر بس عندى طلب انا لو مش عاوز اضيف ايقونات صور انا عاوز اضيف ايقونات font-awesone كيفية عملاه وشكرا
ردحذفيتم ذلك بإستخدام الوسم before , after سأحاول قريباً إعداد شرح لهذا الامر بإذن الله
حذفشكرا لك ولكن انا اعرف كيف استخدمها اعرف ويكون هكاذا لو هضيف ايقونة للتعليقات
حذف.post-comment-link:before{
content:هنا كود ايقونة التعليقات;
}
هكذا اخى عمرو صح
نعم أخي هكذا ثم تكمل بناء الستايل ليكتمل المظهر
حذفشكرا لك مواضعك جميلة جدا تفدي الزائر
حذف