معهد خبراء بلوجر - شرح التدوين السريع المصغر أجعل بلوجر ينافس تويتر

نعرف جميعاً ما هو التدوين المصغر المنتشر حالياً والذى عُرف مع إنطلاق خدمة تويتر رسمياً

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

فإذا كان التدوين من خلال تويتر هو للإجابة على السؤال ’’ماذا تفعل الان؟‘‘ فالتدوين المصغر داخل blogger

هو لكتابة أفكار صغيرة وتلميحات وأسئلة لا تحتمل كتابة مواضيع طويلة ونقاشات لنفس التخصص

وهو ما يضمن لنا بشكل أو بآخر عدم الإنقطاع عن التدوين لفترات طويلة في إنتظار كتابة مواضيع طويلة تتطلب بحثا وتنسيقا

يبقى القول أن التدوين المصغر داخل blogger ليست ميزة جاهزة مضافة داخل القالب

بل هي طريقة جديدة نتعلمها سوياً عن طريق تخصيص القالب بطريقة احترافية

وبالإعتماد على أدوات الشرط المختلفة لتحديد تصنيف معين " Label "

تظهر داخله تلك التدوينات دون غيره

_______________________________

خطوات تطبيق هذه الميزة الاحترافية في مدونتك

_______________________________

توجه إلى : تصميم > تحرير HTML > أخذ نسخة احتياطية > توسيع القالب > ابحث عن التالي

كود بلغة HTML:

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

وأضف فوقه مباشرة " أعلاه - فوقه " الكود التالي

كود بلغة HTML:

  <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>…</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>…</a><b:else/></b:if><b:include  data='post' name='postQuickEdit'/></p> </div>   </b:if> </b:includable>

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

كود بلغة HTML:

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

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

كود بلغة HTML:

   <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>

ثم ابحث عن الوسم التالي

كود بلغة HTML:

]]></b:skin>

وأضف قبله مباشرة " فوقه - أعلاه " هذا الكود

كود بلغة HTML:

/* MINIPOST */ .minipost { background: #FFF6C7 url(http://lh4.ggpht.com/_dInhsEHH_98/S9XNkXGx8rI/AAAAAAAAACY/EtZcz9T63Cw/s00/bg-minipost.gif) no-repeat 100% 2px; padding: 15px 95px 15px 15px; border:1px solid #FFF6C7; margin-bottom:20px; position:relative; } .minipost .entry { -webkit-text-shadow: #FFFBD8 0 1px 0px; text-shadow: #FFFBD8 0 1px 0px; text-align:justify; font: bold 15px/1.2 Arial, 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:normal; font-size: 12px; color:#B9B197; } .minipost p.meta a { color:#B9B197;} .minipost p.meta a:hover { color:#807970;}

قم بحفظ التغييرات التي أحدثتها على قالبك

جرّب كتابة تدوينة سريعة مصغرة بطريقة عادية جدا كما تكتب أي تدوينة في بلوجر

لكن قبل نشر هذه التدوينة قم بإضافة هذه التسمية " minipost" في المكان المخصص لذلك

انشر تدوينك المصغرة الآن وعاينها في مدونتك ..!!

_______________________________

الآن ليس عليك سوى تخصيص هذه الميزة الاحترافية بما يناسب مدونتك

وذلك بالعودة إلى : تصميم > تحرير html > توسيع القالب > ابحث عن التالي (لتغيير التسمية minipost بما يناسبك)

كود بلغة HTML:

<b:if cond='data:label.name != "minipost"'>

ثم غّير " minipost" في الكود بالتسمية التي تريدها

ولتخصيص ألوان التدينات المصغرة .. ثم بالبحث عن الكود الذي أضفناه مسبقا قبل ]]></b:skin>

كود بلغة HTML:

/* MINIPOST */ .minipost { background: #FFF6C7 url(http://lh4.ggpht.com/_dInhsEHH_98/S9XNkXGx8rI/AAAAAAAAACY/EtZcz9T63Cw/s00/bg-minipost.gif) no-repeat 100% 2px; padding: 15px 95px 15px 15px; border:1px solid #FFF6C7; margin-bottom:20px; position:relative; } .minipost .entry { -webkit-text-shadow: #FFFBD8 0 1px 0px; text-shadow: #FFFBD8 0 1px 0px; text-align:justify; font: bold 15px/1.2 Arial, 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:normal; font-size: 12px; color:#B9B197; } .minipost p.meta a { color:#B9B197;} .minipost p.meta a:hover { color:#807970;}

وقم بتغيير الألوان في هذا الكود حسب التالي

.minipost { لون الخلفية أو صورة باترن للخلفية }

.minipost h2.title { نوع خط العنوان وحجمه ولونه }

.minipost div.entry { نوع خط المحتوى في التدوينة المصغرة ولونه وحجمه }

.minipost p.meta { نوع خط التاريخ واسم الكاتب ولونه وحجمه "يكون أسفل التدوينة" }

تم بحمد الله

اى استفسار اضف تعليقاتك وسوف يتم الرد عليك

المصدر http://bilokr.blogspot.com/2012/09/blog-post_18.html