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

السلام عليكم ورحمة الله وبركاته,كثير من المدونين يعرف ماهو التدوين المصغر والجميع يعرف موقع تويتر وطريقة عرض الموضوعات فيه باختصار شديد التدوين المصغر يجعل تدوناتك كانها اخر تحديثاتك في تويتر كما تراها تماما في مدونتي
قد قام الاخ احمد عبد المنعم بشرح الطريقه في مدونة المصنع ولكن في موضوع اليوم افنا اكواد ال 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;  والموجود في الكود الذي بالاعلى فهو خاص بعرض الموضوع في الصفحه الرئيسيه يمكنك تغييره بما يتناسب مع مدونتك وابعاد تنسيقها.....
الى هنا نكون قد انتهينا من موضوع اليوم بحمد الله وتوفيقه,,اي استفسار يرجا ترك تعليق بالاسفل.

أصدقاء(تطوير ويب)
تعليقات Facebook
12تعليقات Blogger

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

غير معرف يقول...

شكرا لك علي التدوينه

لكن هذه ثالث مدونه احاول تطبيق التدوينات المصغره منها و لا تنفع و لااعلم ما المشكله ..

عموما الله يعطيك العافيه

غير معرف يقول...

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

M يقول...

السلام عليكم

قمت بمساعدتي بعمل سلايد شو لمدونتي مشكور و الان اواجهه نفس المشكله مع التدوينات المصغره تظهر بلا خلفيه و لا استطيع تغير الاكواد . فقط سؤالي ما مشكلة قالبي لاني استطعت عمل الطريقتين في مدونه اخري ؟

و اذا ما فيه ازعاج هل ممكن تساعدني بعمل التدوينات المصغره ؟

شكرا لك

غير معرف يقول...

شكرا لك

اضفتها لمدونتي لكن في ملاحظه هل يمكن عدم ظهور مواضيع متصله اسفلها في الصفحه الرئيسيه ؟

محمد

أحمد ( مدونة تقارب ) يقول...

@غير معرف
ضع لي رابط مدونتك كى اتبين من المشكله واستطيع معالجتها معك

أحمد ( مدونة تقارب ) يقول...

@M
مشكلة قالبك هى نفسها مشكلة جميع القوالب الجاهزه والمعدله المطروحه على الانترنت حيث يحدث تضارب بين الاكواد وكذلك مهم جدا مكان وضع الكود حتى يظهر بشكل سليم,,قد تضعيه انتي مثل ماهو بالشرح تماما ولكن تجدين انها لا تظهر بشكل سليم.
على كل حال يسرني ان اقوم بتركيبها لك ان اردتي.ارسلي لي قالبك مره اخرى وسوف اقوم بتركيبها.

غير معرف يقول...

M

و الله ياريت و جزاك الله خير

بعثت ايميل فيه القالب

شكرا لك علي مساعدتك لي

M يقول...

السلام عليكم

ياريت ترد علي أذا ما تستطيع او لا ترغب بمساعدتي مو مشكله لكن يا ريت ترد علي الموضوع له شهر تقريبا .

هل يمكن مساعدتي في تعديل القالب لان التدوينات المصغريه لا تظهر عندي و تكون بلا خلفيه و لا تتغير الالوان في الاكواد .

ياااريت ترد علي

أحمــد ( مدونة تقارب ) يقول...

قومى بفتح موضوع في قسم الدعم الفني بمنتدى بلوجر بالعربي
اعتذر هذة الايام لست متفرغ للمدونه للقيام ببعض الاعمال الاخرى

إرسال تعليق

التعليقات متاحه لمستخدمي حساب جوجل فقط.ولاضافة كود: أستعن بهذه الأداة السريعة Encode/HTML .