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



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

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


فإذا كان التدوين من خلال تويتر هو للإجابة على السؤال ’’ماذا تفعل الان؟‘‘ فالتدوين المصغر داخل 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 " في الكود بالتسمية التي تريدها





_______________________________








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


تعليقات

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

    ردحذف
  2. غير معرف8/17/2011

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

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

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

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

    ردحذف
  5. غير معرف8/20/2011

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

    ردحذف
  6. @محمد جوهر عدلى

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


    @غير معرف

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

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

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

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

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

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

    في امان الله

    ردحذف
  8. @أنس حسوني

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

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

    ردحذف
  9. نعم بالفعل أختي

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

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

    ردحذف
  11. @Anass

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

    ردحذف
  12. اختي الرائعة اسماء

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

    ردحذف
  13. @إنسـان

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

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

    { .. متابع

    ردحذف
  15. @Mohamed Samir

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

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

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

    ردحذف
  16. @إنسـان

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

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

    ردحذف
  17. بارك الله فيك إنها إضافة اكثر من رائعة

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

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

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

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

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

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

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

    ردحذف
  18. @مدونة جديد الإفادة

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

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

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

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

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

    ردحذف
  20. السلام عليكم

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

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

    ردحذف
  21. مشكورره آختي ع آشرح آجميل

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

    لم تضهر آلصوره هي 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

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

    ردحذف
  22. @فن

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

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

    ردحذف
  23. @Shami Blogerr

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

    ردحذف
  24. @Laetitia Diary

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

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

    ردحذف

إرسال تعليق

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

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