التدوين المصغر داخل مدونات بلوجر تحديث جديد وانيق

السلام عليكم ورحمة الله وبركاته,كثير من المدونين يعرف ماهو التدوين المصغر والجميع يعرف موقع تويتر وطريقة عرض الموضوعات فيه باختصار شديد التدوين المصغر يجعل تدوناتك كانها اخر تحديثاتك في تويتر كما تراها تماما في مدونتي

قد قام الاخ احمد عبد المنعم بشرح الطريقه في مدونة المصنع ولكن في موضوع اليوم افنا اكواد ال css التي تجعل التدوين المصغر اكثر جمالا وتنسيقا وهي نفسها الطريقه المتبعه في مدونة ذؤيب وابو اياد .ان اعجبتك الطريقه وتود تطبيقها يمكنك القيام بالتالي:

قم بالبحث عن الكود الموجود بالاسفل

<b:includable id='post' var='post'>

وضع أعلاه مباشرة الكود التالي: وهو جزء جديد اضفناه للتدوينات المصغرة، وفيه تظهر التدوينة بتنسيق مختلف خلاف التدوينات العادية ففي صفحة المدونة الرئيسية والصفحات الداخلية يظهر فقط محتوى التدوينة مع التاريخ ووصلة للتعليق في حالة كان مسموح، أما في صفحة التدوينة المفردة يظهر عنوانها والمحتوى والتاريخ.

<b:includable id='minipost' var='post'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>

<div class='minipost'><a expr:name='data:post.id'/>
    <div class='entry'><data:post.body/></div>
    <p class='meta'><a expr:href='data:post.url'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a><b:if cond='data:post.allowComments'> /<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 0'> أضف تعليق<b:else/><b:if cond='data:post.numComments == 1'> تعليق واحد<b:else/><b:if cond='data:post.numComments == 2'> تعليقان<b:else/><b><data:post.numComments/></b> تعليق</b:if></b:if></b:if>&#8230;</a><b:else/></b:if><b:include data='post' name='postQuickEdit'/></p>
</div>

<b:else/>

<div class='minipost'><a expr:name='data:post.id'/>
    <h2 class='title'><a expr:href='data:post.url'><data:post.title/></a></h2>
    <div class='entry'><data:post.body/></div>
    <p class='meta'><a expr:href='data:post.url'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a><b:if cond='data:post.allowComments'> /<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 0'> أضف تعليق<b:else/><b:if cond='data:post.numComments == 1'> تعليق واحد<b:else/><b:if cond='data:post.numComments == 2'> تعليقان<b:else/><b><data:post.numComments/></b> تعليق</b:if></b:if></b:if>&#8230;</a><b:else/></b:if><b:include data='post' name='postQuickEdit'/></p>
</div>

</b:if>
</b:includable>

قم بالبحث عن الكود التالي: وهو كود مختصر الغرض منه جلب محتويات التدوينة من الجزء الخاص بتنسيق التدوينات الذى تعرفنا على بدايته في أول خطوة:

<b:include data='post' name='post'/>

واستبدله بالكود التالي:

<b:if cond='data:post.labels'>

<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'>
<b:if cond='data:label.name != &quot;minipost&quot;'>

<b:include data='post' name='post'/>

<b:else/>

<b:include data='post' name='minipost'/>

</b:if>
</b:if>
</b:loop>

<b:else/>

<b:include data='post' name='post'/>

</b:if>

لا تنسى تغيير هذا

minipost باسم القسم الذي ستضع تدويناتك المصغره بداخله

والان ناتي للجزء الجمالي في الموضوع

قم بالبحث عن الكود الصغير التالي

]]></b:skin>

وضع الكود الموجود بالاسفل قبله مباشرة

/* MINIPOST */

.minipost {

background: #f9f9f9 url(http://4.bp.blogspot.com/-fkxatMsEGUg/TifovVu6VpI/AAAAAAAAAj4/J95nxOZfNdY/s1600/%25D9%2584%25D9%2585%25D8%25AD%25D8%25A9+%25D8%25B3%25D8%25B1%25D9%258A%25D8%25B9%25D8%25A9.png) no-repeat 100% 2px;

-moz-box-shadow:0 0 15px #4E7093;

padding: 15px 95px 15px 15px;

border:1px solid #FFF6C7;

margin-bottom:20px;

position:relative;

width:509px;

}

.minipost .entry {

-webkit-text-shadow: #FFFBD8 0 1px 0px;

text-shadow: #FFFBD8 0 1px 0px;

text-align:justify;

font: bold 12px/1.2 tahoma, sans-serif;

color:#515151;

}

.minipost .entry a { color:#B40000; }

.minipost .entry a:hover { color:#3A3A3A; }

.minipost .entry, .minipost .entry p { margin-bottom: 15px; }

.minipost p.meta {

margin:-10px 0 0;

font-weight:bold;

font-size: 12px;

color:#B9B197;

}

.minipost p.meta a { color:#F88017;}

.minipost p.meta a:hover { color:#807970;}

ثم قم بحفظ قالب المدونه

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

width:509px;  والموجود في الكود الذي بالاعلى فهو خاص بعرض الموضوع في الصفحه الرئيسيه يمكنك تغييره بما يتناسب مع مدونتك وابعاد تنسيقها.....

الى هنا نكون قد انتهينا من موضوع اليوم بحمد الله وتوفيقه,,اي استفسار يرجا ترك تعليق بالاسفل.