الأربعاء، 17 أغسطس 2011

شرح مفصل | التدوين السريع المصغر | اجعل بلوجر ينافس تويتر






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



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





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



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



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





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



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





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



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









_______________________________



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

_______________________________







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







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


_______________________________



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





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




_______________________________



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





]]></b:skin>


(إذا رغبت في أن تظهر التدوينات المصغرة لديك مثل هذه الصور)






للمعاينة الحية للتدوينات المصغرة التي بهذه الصورة اضغط هنا




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





/* 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 { -moz-border-radius: 5px 5px 5px 5px;    background: #CFE1ED url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimKDuKFOQL5IOM3qSYckNgbtgntdyN32KDwWZoucwlzlKckdHfk-nek01tTWtIJbTIt7cb9pSDAt9A3W5uFYmKCE4dvXNCqb-xlDx7XXcp8LVATJQMHAxojniBcjMpXsJ4PaZkOmPphXHI/s1600/lam7a.png") ;     height: 1%;     padding: 20px; border-left:1px solid #1D5C88;     border-top:1px solid #1D5C88;         border-right: 1px solid #1D5C88;         border-bottom: 1px solid #1D5C88; margin:.5em 0 1.5em; border-bottom:0px dotted $bordercolor; padding-bottom:1.5em; padding-right:7px; padding-left:7px; }

.minipost .entry {     -webkit-text-shadow: #FFFFFF 0 1px 0px;     text-shadow: #FFFFFF 0 1px 0px;     text-align: right;     font: 15px Tahoma, Arial, sans-serif;     color:#4C4C4C; }

.minipost img {     border: 1px solid #245CAA;

    float: right;

    margin-left: 1em; } .minipost h3 {     color: #666;

    font-size: 1.2em;

    margin-bottom: 5px;

    margin-top: 2; } .minipost p {     color: #54524F;

    font-size: 15px;

    margin-bottom: 10px;     margin-top: 0; } .minipost blockquote {   background: url(http://lh6.ggpht.com/_4_wf1DKMvX4/TMWm472NmPI/AAAAAAAABmw/aioU52gp7Zw/box-bgr.gif) #ffffff repeat-x top;     border-left:1px solid #CFCFCF;     border-top:1px solid #CFCFCF;         border-right: 1px solid #CFCFCF;         border-bottom: 1px solid #CFCFCF;     margin:10px;     padding:10px }


(أو إذا رغبت في أن تظهر التدوينات المصغرة لديك مثل هذه الصورة - مصغرات مدونة ذؤيب )



فأضف الكود التالي قبل الوسم السابق مباشرة







/* blogger minipost */

.minipost {

background: #F5F5F5;

padding: 15px;

border: 1px solid #DDDDDD;

margin-bottom: 20px;

padding-bottom: 30px;

font: 12px tahoma;

text-align: justify;

line-height:1.5em;

}

.minipost img {

    float: right;

    margin-left: 1em;

}

.minipost div.title2 {

font:1.3em arial;

font-weight:bold;

letter-spacing:0em;

display:block;

padding-bottom:5px;

text-shadow: 0px 2pt 0px #ECECEC;

}

.minipost div.entry {color:#333333;}

.minipost p.meta {

font: 12px tahoma;

}








_______________________________



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

_______________________________







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



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





أي أنك قبل نشر التدوينة المصغرة يجب عليك كتابة minipost بجانب خانة "التسميات" - كما بالصورة







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




_______________________________





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



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





<b:if cond='data:label.name != &quot;minipost&quot;'>




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











_______________________________
















تم بحمد الله  ◕‿◕





16 التعليقات:

Anonymous يقول... في 17 أغسطس 2011 في 7:46 ص

( طريقة التركيب منقولة من مدونة المصنع )

مدونة كن داعيا للخير يقول... في 17 أغسطس 2011 في 8:06 ص

موضوع مفيد ومهم

أسماء || أم نضال || يقول... في 18 أغسطس 2011 في 7:13 ص

بارك الله فيكم إخوتي .. أتمنى أن أكون قد أفدتكم

"غير معرف" أعتقد أن اسمك الحقيقي سيكون أجمل ..!!

mohamed gohar يقول... في 19 أغسطس 2011 في 4:28 م

معلةومات جميله ومفيده يا اسماء...
ولاكن ياريت الخط يكون كبير شويه عن كده

Anonymous يقول... في 19 أغسطس 2011 في 7:57 م

الطريقة دى مش شغاله يااخت اسماء ياريت تشوفلنا طريقة تانيه

أسماء || أم نضال || يقول... في 20 أغسطس 2011 في 7:43 ص

@محمد جوهر عدلى

سأضيف خاصية تكبير الخط بالمدونة إن شاء الله .. بارك الله فيك


@غير معرف

تأكدت منها قبل إضافتها ولديك المدونة التجريبية كمثال

ما هو القالب الذي تستخدمه ؟

anass hassouni يقول... في 21 أغسطس 2011 في 3:23 م

بارك الله فيك أخت أسماء
دائما تسعي الى كل جديد و مفيد

بس كما اقترح الأخ حبدا لو تكبري الخط قليلا

لا أنسى أن أنوهك على الرد الرائع ههه

"غير معرف" أعتقد أن اسمك الحقيقي سيكون أجمل ..!!

في امان الله

أسماء || أم نضال || يقول... في 21 أغسطس 2011 في 4:24 م

@أنس حسوني

وفيك بارك الله .. إن شاء الله سيتم تطبيق الاقتراح قريبا

للأسف هناك من يستغل ميزة التعليق بغير معرف ليجاهر بسوء خلقه .. كان بودّي إتاحة فرصة التعليق للزوار لكن للأسف

anass hassouni يقول... في 21 أغسطس 2011 في 11:13 م

نعم بالفعل أختي

نتمنى لهم الهداية من المولى عز وجل

أسماء || أم نضال || يقول... في 26 أغسطس 2011 في 2:28 م

@Anass

وعليكم السلام ورحمة الله وبركاته
بارك الله فيك أخ أناس .. شاهدت مدونتك من قبل ما شاء الله جميلة جدا

إنسـان يقول... في 29 أغسطس 2011 في 8:02 ص

اختي الرائعة اسماء

اتمنى منك تعليمي طريقة ادراج تعليق الفيسبوك كما في موضوعك هذا .. الميزة اعجبتني واتمنى ان لا تبخلي علي ^_^

أسماء || أم نضال || يقول... في 29 أغسطس 2011 في 9:47 ص

@إنسـان

إن شاء الله خلال هذا الموضوع سأشرح طريقة إضافة تعليقات الفيسبوك إلى بلوجر شرح كامل ومفصل ..

Mohamed Samir يقول... في 31 أغسطس 2011 في 12:27 ص

شريح جميل من اخونا أحمد عبدالمنعم مالك مدونة المصنع، رجاء اختي اسماء التذكير في اخر التدوينه انها منقوله كي تثبتي حسن ظنك حيث يعتقد الكثير بانك تنسبي هذه التدوينه والشرح لنفسك، لذا وجب التنبيه ونسب الفضل إلى صاحبه، يارب نقدي يلقي صدر رحب

{ .. متابع

أسماء || أم نضال || يقول... في 31 أغسطس 2011 في 2:25 ص

@Mohamed Samir

قمت بذكر المصدر في آخر التدوينة وبآخر الموضوع في منتدى بلوجر بالعربي

( طريقة التركيب منقولة من مدونة المصنع )

جهدي في الموضوع هو تنسيق أكواد الـCSS التي واجه الكثيرون مشكلة معها

مدونة جديد الإفادة يقول... في 28 يناير 2012 في 6:58 ص

بارك الله فيك إنها إضافة اكثر من رائعة

و الله فكرة رائعة جدا جدا

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

و أيضا ستزيد من نشاط المدونة كثيرا

لكن هناك مشكلة كبيرة جدا جدا

و هي أنني أظن أن هذه الإضافة غير مقبولة في سياسة جوجل أدسنس، لأنو من أساسيات جوجل أدسنس موضوع مفيد و أظن يكون عنده حد في عدد الحروف كأقل تقدير

أتمنى تريدين علي إن كان يخالف سياسة جوجل أدسنس أو لا، و إن كان لا يخالف سأضيفه على طول

بارك الله فيك !!!

أسماء || أم نضال || يقول... في 28 يناير 2012 في 7:35 ص

@مدونة جديد الإفادة

وفيك بارك الرحمن أخي ،،

بالنسبة لمخالفة هذه الخاصية لسياسية أدسنس فلا أعتقد أنها ستؤثر
لأن هناك الكثير من المدونات التي تعتمد على الخاصية
منذ زمن طويل ولا تزال إعلانات أدسنس جارية فيها بلا خلل
ومن أشهر هذه المدونات "مدونة أبو إياد وذؤيب"

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

لهذا لا يمكن أن تكون مخالفة لأدسنس والله أعلم

إرسال تعليق

 

me | twitter