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

الأربعاء، 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/AVvXsEjh3-z9KAuAXGOLinculSLochb3wP9kH6XVg_DCgkHQDXAJ6BLUxeXDE47BPzeYcl5mOqilj20lxjDKCSRA6XigVwVE0VxFd7kDgF3tf6bQY_jXWrHuLCe9ji3aiF4pvkbDCpfkd_CYdFRJ/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 " في الكود بالتسمية التي تريدها







_______________________________



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






_______________________________
















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





{ ياسو } في : 17 أغسطس 2011 في 5:50 ص يقول...

انتى رائعه يا اسماء ... بجد انتى فنانه وياريت يكون فى تعاون جاد شويه بيننا

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

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

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

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

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

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

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

{ محمد جوهر عدلى } في : 19 أغسطس 2011 في 4:28 م يقول...

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

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

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

{ أنس حسوني } في : 21 أغسطس 2011 في 11:13 م يقول...

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

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

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

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

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

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

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

{ .. متابع

 

لتحميل هذا القالب ..~

يمكنك تحميل قالب Focus Point المعرب والمطور مع إضافاته الاحترافية عبر مدونة أسماء || أم نضال ||