تنسيق اخر المشاركات فى بلوجر

تنسيق اخر المشاركات فى بلوجر

فى هذا الدرس سوف نقوم ببرمجة وتنسيق اخر المشاركات فى بلوجر عن طريق لغة (html - css - xml).

فى الدروس السابقة قمنا بإنشاء سلايد شو تلقائى فى بلوجر ايضا قمنا بإنشاء اخر المشاركات ولكننا فى هذه الدرس سوف نعمل على تنسيق تلك المشاركات مع التعديل على برمجتها لكى تظهر بشكل جيد فى النهاية.

خطوات تنسيق اخر المشاركات فى بلوجر

1- قم بتسجيل الدخول الى مدونتك فى بلوجر.

2- قم بالضغط على كلمة مظهر فى يمين الصفحة ثم قم بالاتجاه الى وسط الصفحة ستجد سهم بجوار كلمة تخصيص قم بالضغط عليه ثم اختر كلمة تعديل HTML.

3- قم بالضغط على Ctrl + F من لوحة المفاتيح ثم قم بالبحث عن كلمة data:post.body ثم قم بالضغط على Enter من لوحة المفاتيح قم بالضغط مرتين وليس مرة واحدة وبعد ذلك سوف تجد تلك الكلمة السابقة data:post.body قم بحذفها ثم ضع هذا الكود مكانها.

<!-- start default-post -->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div class='default-post'>
<div class='read-more'><a expr:href='data:post.url'> قراءة المزيد </a></div>
</div>
</b:if>
</b:if>
<!-- end default-post -->


<!-- start item-post -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
</b:if>
<!-- end item-post -->


<!-- start item-post -->
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
</b:if>
<!-- end item-post -->

هذا الكود قمت ببرمجته خصيصا لكى تظهر اخر المشاركات بشكل جيد.

4- الان سوف نقوم بوضع التنسيق الخاص بنا بين وسم b:skin.

/* start blog-post */
.blog-post{margin:0 auto;width:88%;}
.blog-post #post{width:66%;float:right;box-shadow: 0 1px 20px 0 rgb(255 255 255), 0 1px 3px 1px rgb(255 255 255);font-size:18px;border: 1px dotted #dadce0;}
.blog-post #sidebar{width:30%;float:left;}
.blog-post #sidebar #Label1 h2{border-bottom:1px dashed#3c4043;color:#0080ff;padding:10px;padding-right:0;}
/* end blog-post */

@media (max-width: 1027px) {
.blog-post,.specific-cat-one #specific-cat{width:90%;}
.blog-post #post{float:unset !important;width:unset !important;padding:10px !important;}
.blog-post #sidebar{float:unset !important;width:100% !important;}
}
@media (max-width: 770px) {
.blog-post #post h1{margin-top:43px !important;}
}
@media (max-width: 612px) {
.blog-post #post .post div iframe{height:294px !important;}
}
@media (max-width: 525px) {
.blog-post #post .post div iframe{height:252px !important;}
}

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

فيديو توضيحى