Content

2011-08-17

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



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

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


فإذا كان التدوين من خلال تويتر هو للإجابة على السؤال ’’ماذا تفعل الان؟‘‘ فالتدوين المصغر داخل 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("http://1.bp.blogspot.com/-epcKn8QvEwg/Tc21gc3oPYI/AAAAAAAACEM/hNhSG0UelWk/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 " في الكود بالتسمية التي تريدها





_______________________________








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


25 التعليقات:

ياسو قام بالتعليق في : 8/17/2011 يقول...

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

غير معرف في : 8/17/2011 يقول...

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

مدونة كن داعيا للخير قام بالتعليق في : 8/17/2011 يقول...

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

أسماء || أم نضال || قام بالتعليق في : 8/18/2011 يقول...

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

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

محمد جوهر عدلى قام بالتعليق في : 8/20/2011 يقول...

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

غير معرف في : 8/20/2011 يقول...

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

أسماء || أم نضال || قام بالتعليق في : 8/20/2011 يقول...

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

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


@غير معرف

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

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

أنس حسوني قام بالتعليق في : 8/22/2011 يقول...

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

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

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

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

في امان الله

أسماء || أم نضال || قام بالتعليق في : 8/22/2011 يقول...

@أنس حسوني

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

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

أنس حسوني قام بالتعليق في : 8/22/2011 يقول...

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

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

Anass قام بالتعليق في : 8/26/2011 يقول...

السلام عليكم
شكراا أختي أسماء التدوينة
حاليا انا استعمل قالب المصنع و لاكن على سكريبت الوورد بريس و التدوين المصغر في الووردبريس يحتاج اضافة معية (نسيت اسمها هههه)
هدا اول تعليك لي في مدونتك الاكتر من رائعة من حميع النواحي التصميم , المواضيع المطروحة
و السلام عليكم
اخوك أناس
http://anassq.eb2a.com/blog

أسماء || أم نضال || قام بالتعليق في : 8/26/2011 يقول...

@Anass

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

إنسـان قام بالتعليق في : 8/29/2011 يقول...

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

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

أسماء || أم نضال || قام بالتعليق في : 8/29/2011 يقول...

@إنسـان

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

Mohamed Samir قام بالتعليق في : 8/31/2011 يقول...

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

{ .. متابع

أسماء || أم نضال || قام بالتعليق في : 8/31/2011 يقول...

@Mohamed Samir

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

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

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

أسماء || أم نضال || قام بالتعليق في : 9/03/2011 يقول...

@إنسـان

تفضل أخي ،، موضوع يشرح طريقة إضافة صندوق تعليقات الفيبسوك

شرح كامل | أضف صندوق تعليقات فيسبوك إلى بلوجر بدون مشاكل

مدونة جديد الإفادة قام بالتعليق في : 1/28/2012 يقول...

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

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

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

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

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

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

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

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

أسماء || أم نضال || قام بالتعليق في : 1/28/2012 يقول...

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

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

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

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

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

Laetitia Diary قام بالتعليق في : 5/19/2012 يقول...

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

Shami Blogerr قام بالتعليق في : 5/19/2012 يقول...

السلام عليكم

اولا شكرا على هذه التوينيه الرائعه

سؤالي انا اضفت الشكل تبع ذؤيب لكن الصورة اقصد الزرقاء لم تظهر و لم اجد رابط الصورة لاغيرة في الكود فهل يمكن ان تليني عليه

فن قام بالتعليق في : 5/31/2012 يقول...

مشكورره آختي ع آشرح آجميل

يآليت آختي تسعدين وجعتني مشكله في تركيبه

لم تضهر آلصوره هي http://3.bp.blogspot.com/_gToJ30Luauw/TRgSb_h0_NI/AAAAAAAAB4k/ZA0hjRmqBvg/s1600/ideaabuiyad.png

وآريد شرح كيف آضيف آيقونآت جنب آلسآعه وبآقي آلخيآرآت مثل مدونة آبو آيآد
http://www.abu-iyad.com/2011/11/blog-post.html#comment-form

بنتظر مسعدك آخي تعبت كثير حس آنه نقص شي بس شنهو مآني عرف يآللي تسعدين وكون لك شكرآآ

أسماء || أم نضال || قام بالتعليق في : 6/04/2012 يقول...

@فن

بالنسبة للصورة الخاصة بالتدوينات المصغرة عليك إضافتها يدويا بلصقها في الجانب الأيمن للتدوينة !

لم أفهم استفسارك الثاني وددتُ لو أضفت رابط مدونتك

أسماء || أم نضال || قام بالتعليق في : 6/04/2012 يقول...

@Shami Blogerr

عليك إضافتها يدويا بلصقها في الجانب الأيمن للتدوينة !

أسماء || أم نضال || قام بالتعليق في : 6/04/2012 يقول...

@Laetitia Diary

أجل يمكنك استخدام نفس السكريبت في مدونت باللغة الفرنسية،،

لم أفهم أي الكلمات التي ترغبين في تغييرها ! هل تقصدين (تعليق، تعليقان، تعليقات ..) ؟

إرسال تعليق

| الرجاء عدم استخدام مرادفات ( يا الغالية، يا العزيزة...) في التعليق بالنسبة للشباب |

لتصلك إشعارات ردود هذا الموضوع انقر على (الاشتراك عن طريق البريد الإلكتروني) أسفل صندوق التعليق