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

الخطوة الأولى: تفعيل أزرار المفضلات الاجتماعية في بلوجر

لتفعيل أزرار المفضلات الاجتماعية في بلوجر نتوجه من لوح تحكم المدونة إلى "عناصر الصفحة" ثم في مربع "رسائل المدونة الإلكترونية" نضغط "تحرير" و في النافذة المنبثقة نفعل الخيار بوضع علامة في الخانة التي تظهر جنب أزرار المفضلات كما يبدو في الصورة أسفله ثم نضغط زر الحفظ.

الخطوة الثانية: تعديل القالب لإظهار أزرار المفضلات

قبل الشروع في تعديل القالب يرجى التقيد بما يلي:

» تحميل و حفظ نسخة احتياطية من قالب مدونتك قبل الشروع في أي تعديل.

» وضع علامة في خانة توسيع القوالب.

ثم بعد ذلك ابحث عن الكود الآتي:

<div class='post-footer-line post-footer-line-1'>

أو قد تجده على هذا الشكل كذلك فجرب البحث عن أحدهما:

<p class='post-footer-line post-footer-line-1'>

بعد أن تجد الكود المطلوب مباشرة بعده تلصق الكود الآتي:

<div class='post-share-buttons goog-inline-block'>
        <b:if cond='data:post.sharePostUrl'>
          <b:include data='post' name='shareButtons'/>
        </b:if>
</div>

ثم أخيرا اضغط زر حفظ القالب.

ملحوظة إضافية

في بعض الحالات قد لا يظهر زر جوجل +1 (google +1) إلى جانب أزرار المفضلات و هذا راجع بالأساس إلى افتقاد القالب إلى ملف js الضروري لتشغيل الإضافة و عليه لإظهارها ستبحث عن </head> و مباشرة أسفلها تضع هذا الكود و تحفظ القالب.

<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>

تحياتي.

» تابع القراءة

بسم الله و الحمد لله و الصلاة و السلام على رسول الله.

السلام عليكم و رحمة الله.

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

يمكن اختيار أحجام مختلفة للزر (كبير، متوسط، صغير...)

الزر كما يبدو في نتائج بحث جوجل (متاح فقط في google.com مؤقتا)

الآن سنتعرف و رفقتكم الطيبة طريقة إضافة هذا الزر إلى مدوناتنا أو مواقعنا.

 

طريقة تركيب زر 1+ (زائد واحد) على مدونات بلوجر

• تجدر الإشارة أولا إلى أن كل من يستعمل أزرار المفضلات الاجتماعية المقدمة من بلوجر فسيجد الزر قد أضيف تلقائيا إلى جانبها. أما من يريد أن يستعملها فهذه صور توضيحية.

صورة توضح طريقة إضافة أزرار المفضلات و زر 1+

• و لمن يريد وضع زر 1+ المقدم من جوجل في مكان معين فالطريقة هي كالآتي.

 أولا : من لوح تحكم مدونتك توجه إلى صفحة تحرير HTML و قبل البدء في أي تعديل احفظ نسخة احتياطية من قالب مدونتك على جهازك ثم ضع علامة على خانة توسيع القوالب.

ثانيا : ابحث عن </head> ثم فوقعه مباشرة ضع الكود الآتي.

<script type="text/javascript" src="http://apis.google.com/js/plusone.js">
{lang: 'en-US'}
</script>

يمكنك استبدال en-US  ب ar  لتغير لغة الزر إلى العربية، و أشير هنا أن الزر لا زال لا يدعم العربية بشكل جيد.

ثالثا : ابحث عن  <data:post.body/>  و قبله مباشرة ألصق الكود الآتي إن أحببت أن يظهر الزر فوق جسم التدوينة مباشرة تحت العنوان. أما إن أردت أن يكون الزر تحت التدوينة فألصق الكود الآتي بعده.

<div style='float:left'>
<g:plusone size="tall" expr:href="data:post.url"/>
</div>

يمكن استبدال left ب right لتوجيه الزر ناحية اليمين.
كذلك يمكن استبدال tall ب standard ، medium ، small لتغيير حجم و شكل الزر كما هو موضح في الصورة أسفله.

رابعا : ما عليك سوى الضغط على زر حفظ التعديلات لإنهاء المهمة.
خامسا :  يمكنك تجريب الزر عبر ضغط 1+ إن أحببت الموضوع :) كذلك إن أردت سحب تزكيتك للموضوع ما عليك

سوى إعادة ضغط الزر مرة أخرى.

طريقة تركيب زر 1+ على مدونات ووردبريس

لأصحاب مدونات ووردبريس، يمكنكم تركيب الزر عن طريق تحميل و تركيب الإضافة  WordPress Google +1 Button عبر هذا الرابط   ( الإضافة معربة و مشروحة تجدونها بعد يوم إو اثنين بمشيئة الله )

طريقة تركيب زر 1+ على المواقع و صفحات الويب

لتركيب الزر على المواقع أو على أي صفحة ويب، فالصفحة الآتية تقدم خطوات التركيب

http://www.google.com/intl/ar/webmasters/+1/button/

روابط مفيدة و ذات صلة بالموضوع:
إضافة الزر 1+ لجوجل على مدونات بلوجر
Add Google Plus One Button on Blogger

» تابع القراءة

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

إظهار أداة أو إضافة فقط في الصفحة الرئيسية للمدونة

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

<b:if cond='data:blog.url == data:blog.homepageUrl'>
ضع كود الإضافة هنا (الإضافة تظهر فقط في الرئيسية )
</b:if> 

إظهار أداة أو إضافة في كل الصفحات عدا الرئيسية

هذا الكود يأتي بمفعول معاكس للأول يمكنك استثماره بطرق عدة...

<b:if cond='data:blog.url != data:blog.homepageUrl'>
ضع كود الإضافة هنا (الإضافة تظهر في كل الصفحات إلا الرئيسية )
</b:if> 

إظهار أداة أو إضافة في صفحات المواضيع فقط

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

<b:if cond='data:blog.pageType == &quot;item&quot;'>
ضع كود الإضافة هنا (الإضافة تظهر في صفحات المواضيع فقط )
</b:if> 

إظهار أداة في كل الصفحات عدا صفحات المواضيع

كذلك له مفعول معاكس لسابقه، يمكن استغلاله لتطبيق فكرة ما ...

<b:if cond='data:blog.pageType != &quot;item&quot;'>
ضع كود الإضافة هنا (الإضافة تظهر في كل الصفحات إلا صفحات المواضيع )
</b:if> 

إظهار أداة في الصفحات الثابتة فقط

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

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
ضع كود الإضافة هنا (الإضافة تظهر في الصفحات الثابتة فقط )
</b:if> 

إظهار أداة أو إضافة في كل الصفحات عدا الصفحات الثابتة

له مفعول معاكس لسابقه، و فائدته تكمن في استثناء الصفحات الثابتة من الخواص التي نطبقها على باقي الصفحات.

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
ضع كود الإضافة هنا (الإضافة تظهر في كل الصفحات إلا الصفحات الثابتة )
</b:if> 

إظهار أداة في صفحات مواضيع كاتب محدد فقط

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

<b:if cond='data:post.author == &quot;أحمد&quot;'>
ضع كود الإضافة هنا (الإضافة تظهر في صفحات مواضيع أحمد فقط )
</b:if>

إظهار أداة أو إضافة في صفحة واحدة فقط

هذا لكود يمكنك من تطبيق شيء ما على صفحة واحدة فقط عبر إدراج رابطها (طبعا بعد نشرها للحصول على رابطها)

<b:if cond='data:blog.url == &quot;رابط الصفحة&quot;'>
ضع كود الإضافة هنا (الإضافة تظهر في صفحة واحدة فقط  )
</b:if> 

شرح طريقة الاستفادة من <b:else/>

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

<b:if cond='data:blog.url == data:blog.homepageUrl'>
ضع كود الإضافة هنا (الإضافة تظهر فقط في الرئيسية )
<b:else/>
ضع كود الإضافة هنا (الإضافة تظهر في كل الصفحات إلا الرئيسية )
</b:if> 

روابط استفدت منها  لكتابة الموضوع
Selective Display of Blogger Widgets
Blogger help: Layouts Data Tags
الموضوع مفتوح للإغناء و التعديل ، أي كود تجدونه مفيدا سأضيفه بإذن الله إلى هذا الموضوع. و أي كود يكتنفه غموض يرجى الإشارة إليه لنسهب في شرحه.
أسألكم الدعاء.

» تابع القراءة

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

كما تلاحظون في المثال فقد أضفت نصا و صورة فوق صندوق التعليق مباشرة لكن بطريقتين مختلفتين.

طريقة إضافة صورة أو نص فوق صندوق التعليقات

الطريقة الأولى

هذه هي الأسهل، فمن لوح تحكم مدونتك توجه إلى إعدادات ثم تعليقات و انزل أسفل الصفحة حتى تجد خيار رسالة نموذج التعليق و في الحقل المقابل لها أدخل النص المراد عرضه فوق صندوق التعليق ثم اضغط زر حفظ الإعدادات، و لتعلم أن هذه الطريقة لا تمكنك من عرض صورة أو إدخال أوسمة HTML ( فقط بعض الأوسمة متاحة مثل <b>, <i>, <a>). فإن كنت تحتاج فقط لإضافة نص أنصحك بهذه الطريقة، أما إن احتجت لإدراج صورة أو كود HTML مركب فاتبع الطريقة الثانية إذن.

الطريقة الثانية

أولا يتعين عليك تجهيز ما ستدرجه فوق صندوق التعليق و أقصد هنا كود HTML . فمثلا لو أردنا إدراج صورة سيكود كود Html كالآتي.

<img src="رابط الصورة" border="0" />

مكان النص الأحمر ضع رابط الصورة المراد إدراجها فوق صندوق التعليقات.
بعد ذلك من لوح تحكم مدونتك توجه إلى صفحة التصميم ثم تحرير HTML و قبل أي تعديل احفظ نسخة احتياطية من قالبك بعد ذلك ضع علامة في خانة توسيع القالب.
ثم ابحث عن <p><data:blogCommentMessage/></p>
و مباشرة تحتها أضف كود HTML الذي جهزت و تود إضافته فوق صندوق التعليق بحيث يصبح الكود كالآتي.

<p><data:blogCommentMessage/></p>
<img src="رابط الصورة" border="0" />

ثم احفظ القالب.

أفكار و اقتراحات

• يمكن استعمال الطريقة الثانية لوضع إعلانات فوق صندوق التعليقات.

• كذلك يمكن وضع أيقونات لمتابعتك على المواقع الاجتماعية .

• يمكنك كذلك اقتراح رابط أو رسالة ...

و هذه بعض الأكواد إن رغبت في استعمالها.

صورة تذكير و تنبيه:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC2o6AGwiMiGub7q3g8sqBSVokI6cyBqy2gQUmf2zcnZUg0GdoV1NXLbdxle5p9-ui0Aub-s-qGd8RKyPZeXKX-jxunPtI3z64hwOQarjyOE4_6xB2qNO4YLB4E6vfJdGZVtpyzMBy1cU/s512/warnning.png" border="0" />

صندوق HTML

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

<div class="warning" style="background:#F3F9FB url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz8-1jsKo6x3yFtrrWvFBUq8at2G7yYCaAY2PsafGrScWOJ1a1Nbu7sHPQ7Idi17y2nBvjbIpqguvEw-DcCfB8Ym1JJOftEc5kE4ufwd54XWTe4UoQj-aguHXckp1uqDLunDeFPvCby-I/) 8px 6px no-repeat ; border:#A8D1E6 1px solid; padding: 5px 5px 5px 40px;"> فقرة من بضع جمل </div>

تقبل الله صيامكم و قيامكم، نسألكم الدعاء.

» تابع القراءة

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



معاينة إضافة تعريف الكاتب

1 . طريقة تركيب إضافة تعريف الكاتب في مدونات بلوجر الشخصية

هذه الطريقة سوف تهم المدونات الشخصية التي يكتب فيها كاتب وحيد، و ستظهر نبذة عنه في أسفل كل مواضيع مدونته.
من لوح تحكم مدونتك توجه إلى تصميم ثم تحرير HTML  و قبل البدء في التعديل احفظ نسخة احتياطية من قالبك على حاسوبك. ضع علامة في خانة توسيع القوالب.
الخطوة الأولى (*) : ابحث عن ]]></b:skin>  و قبله مباشرة ضع كود CSS الآتي :

/* Author Bio */
.postauthor {
    background: #F5F5F5; 
    border-top: 1px solid #e1e1e0; 
    border-bottom: 1px solid #e1e1e0; 
    overflow: hidden; 
    padding: 0.7em;
}
.postauthor img {
    border: 5px solid #e2dede; 
    float: right; 
    margin-left: 1em;
}
.postauthor h3 {
    color: #666; 
    font-size: 1.2em; 
    margin-bottom: 5px; 
    margin-top: 0;
}
.postauthor p {
    color: #515151; 
    font-size: 12px; 
    margin-bottom: 10px;
    margin-top: 0;
}
/* Author Bio End */

الخطوة الثانية :  ابحث عن <data:post.body/> (إن وجدت ثنتين فالثانية هي المقصودة)  ثم مباشرة بعدها ضع الكود الآتي:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='postauthor'>
 <img alt='' height='80' src='رابط الصورة الشخصية' width='80'/>
 <h3>بقلم <a href='Blog Link'> اسم الكاتب </a></h3>
 <p> فقرة تضم نبذة عن الكاتب </p>
</div>
</b:if>

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

2 . طريقة تركيب إضافة تعريف الكاتب في مدونات بلوجر الجماعية متعددة الكتاب

كثير من المدونات في الآونة الأخيرة بدأت تعتمد على أقلام كاتبين أو أكثر، و الطريقة التي كان ينهجها أصحابها لوضع تعريف للكاتب تكون عبر تضمينه داخل جسم التدوينة و يتكرر الأمر مع كل موضوع. الآن سنضع تعريفات الكتاب في القالب و سيظهر كل تعريف موافقا لموضوع كاتبه.
أولا ستتبع نفس الخطوة الأولى (*)  كما في المدونات الشخصية أي نفس كود CSS ستضعه كما ذكر سابقا.
ثم تبحث عن <data:post.body/> (إن وجدت ثنتين فالثانية هي المقصودة)  و مباشرة بعدها ضع الكود الآتي:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- تعريف الكاتب الأول -->
<b:if cond='data:post.author == &quot;أحمد&quot;'>
<div class='postauthor'>
   <img alt='' height='80' src='رابط الصورة الشخصية' width='80'/>
   <h3>بقلم <a href='Blog Link'> أحمد </a></h3>
   <p> فقرة تضم نبذة عن الكاتب </p>
 </div>
</b:if>
<!-- تعريف الكاتب الثاني -->
<b:if cond='data:post.author == &quot;جواد&quot;'>
<div class='postauthor'>
   <img alt='' height='80' src='رابط الصورة الشخصية' width='80'/>
   <h3>بقلم <a href='Blog Link'> جواد </a></h3>
   <p> فقرة تضم نبذة عن الكاتب </p>
 </div>
</b:if>

</b:if>

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

» تابع القراءة

بسم الله و الحمد لله و الصلاة و السلام على سيدنا خاتم النبيين محمد الأمين. السلام عليكم و رحمة الله. إخواني الكرام تقبل الله صيامكم و قيامكم. في هذا الموضوع بإذن الله سنتعرف طريقة لعرض صور مصغرة للتدوينات في الرئيسية فقط دون أن تظهر في صفحة التدوينة أو الموضوع تماما كما في ووردبريس 2.9 و 3.0 ... سيسأل سائل و ما الفائدة من هذه الميزة؟ كما يعلم الجميع فبداية الموضوع هو أهم مكان يحوز انتباه الزائر و من غير المجد ان نخصصه لعرض صويرة شاهدها الزائر في الصفحة الرئيسية للمدونة، بل سنستغل مكانها لعرض شيء أهم ربما إعلان أو أي شيء آخر أكثر فائدة. و هذه التدوينة مثال على ما قلت ففي الرئيسية شاهدتم تلك المصغرة التي كتب عليها "أنا أظهر هنا فقط" و بعد دخولكم الموضوع وجدتم أن مكانها خصص لإعلان. و تجدر الإشارة أن هذه الميزة أفيد لمن يستعملون المصغرات و خاصية اقرأ المزيد بنوعيها الأصلي أو التلقائي. إلى الطريقة إذن.

 

 

طريقة عرض صويرة التدوينة في الرئيسية لمدونات بلوجر

توجه إلى لوح تحكم مدونتك ثم إلى صفحة تحرير HTML، و قبل إجراء أي تعديل على القالب احفظ نسخة احتياطية منه. الآن ابحث عن هذا الكود ]]></b:skin>  و بعده مباشرة أضف ما يلي و حفظ القالب :

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<style>
.post-thumb {display:none}
</style>

</b:if>

الكود الأزرق هو الذي يجعل ما بينه يعمل فقط في صفحات المواضيع، بينما الأخضر يمثل صنف class الصورة المخفاة. الآن فكل صورة تحمل class='post-thumb' لن تظهر إلا في الرئيسية و منه فسنمنح هذه الميزة فقط لصويرة التدوينة المصغرة. بعد استيراد الصورة في محرر نصوص بلوجر انتقل إلى وضع تحرير HTML من المحرر ثم اجعل كود الصورة كالآتي، طبعا ستضيف فقط ما لون بالأحمر لأن بقية الكود تكون موجودة  :

<img class="post-thumb" src="http://thumbnail-link.jpg" border="0" />

الآن بعد أن وضعت الصورة و فعلت ما ذكر ستضيف إعلان أو صورة أو شيء ربما يكون أفيد لك في هذا المكان كما فعلت في هذه التدوينة حيث وضعت إعلانا.

» تابع القراءة

بسم الله و الحمد لله و الصلاة و السلام على نبينا و حبيبنا المصطفى الأمين. السلام عليكم و رحمة الله. إخواني الكرام أبارك لكم قرب حلول شهر الغفران رمضان الأبرك. في هذا الموضوع بإذن الله سأدرج بعض التوجيهات لزيادة صداقة محركات البحث لمدوناتنا على بلوجر، فكما تعلمون فمحركات البحث في وقتنا أصبحت تعتمد أساسا على الكلمات الدلالية أو الدليلية كما يحلو للبعض نطقها Keywords ، و لأجل هذا فالتوجيهات ستنصب على تحسين عنوان الصفحة الرئيسية و كذلك عناوين صفحات المواضيع كذلك سنجعل لكل صفحة من صفحات مدوناتنا على بلوجر كلمات دلالية ووصف ميتا خاصين بها.

رجاء احفظ نسخة احتياطية من قالبك قبل أي تعديل!

1 - تحسين عنوان مدونات بلوجر و زيادة صداقته لمحركات البحث.

عندما يكون عنوان مدونتي مثلا "مدونة ذؤيب" فهذا يعني أن المعلومات المتضمنة فيه قليلة جدا عن ماهية هذه المدونة. لكن إذا جعلت العنوان بهذا الشكل "مدونة ذؤيب | قوالب بلوجر, أدوات و إضافات لكل المدونات." طبعا سيختلف الأمر و سيكون لي نصيب من الزوار الباحثين عن بعض هذه الكلمات المتضمنة. طريقة فعل هذا تكاد تكون معروفة عند الجميع و هي بتعديل العنوان من إعدادات المدونة، و التعديل لا يكون بتغيير العنوان كليا بل فقط بإضافة وصف قصير بجانبه كما يظهر فيما يلي

عنوان المدونة | وصف قصير

مثال

مدونة ذؤيب | قوالب بلوجر, أدوات و إضافات لكل المدونات.

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

<title><data:blog.pageTitle/></title>

ثم تحدده و نلصق مكانه الآتي.

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.title/> | وصف قصير لمدونتك </title>
<b:else/>

<title><data:blog.pageName/> | <data:blog.title/></title>

</b:if>

هذا الكود شرطي، معناه أنه إذا تعلق الأمر بالصفحة الرئيسية لمدونتك فعنوان هذه الصفحة يكون مؤلفا من عنوان المدونة إضافة إلى الوصف القصير. لكن ماذا عن باقي صفحات المدونة؟ الكود المحدد باللون الأزرق هو الجواب، و معناه أن باقي الصفحات سيتألف عنوانها من عنوان الصفحة ذاتها زائد عنوان المدونة فمثلا لو توجهت لموضوع من مواضيع مدونتك سيكون العنوان كالآتي .

عنوان الموضوع أو الصفحة | عنوان المدونة
مثال
تسريع وندوز 7 دون برامج | مدونة هلال

الفوائد التي سنجنيها من هذا التعديل:

• كلمات دلالية قوية للصفحة الرئيسية .
• تجنب تكرار عناوين الصفحة كما كان يحدث قبلا .
• تؤهلنا لمتابعة التلميحة الثانية :)

2 - كلمات دلالية Keywords و وصف ميتا Meta Description خاصين لكل صفحة.

 في بلوجر لا يمكنك كتابة وصف أو كلمات دلالية خاصة لكل موضوع أو صفحة، بل تستعمل تلك الخاصة بالصفحة الرئيسية لكل الصفحات و هذا غير صحي لصداقة محركات البحث، فلو كنت تستعمل أدوات مشرفي المواقع من جوجل Google Webmaster ستلاحظ هذا الخلل حيث ستجد في تبويب اقتراحات html أخطاء مثل "وصف ميتا مكرر ، العدد 66" مثلا أو كلمات دلالية مكررة  ... الحل هو الآتي.
من صفحة تحريري html مباشرة تحت الكود السابق أضف الآتي.

<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageName + data:blog.title' name='Description'/>
<meta expr:content='data:blog.pageName + data:blog.title' name='Keywords'/>
</b:if>

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

3 - تلميحات سريعة و نصائح لتهيئة مدونتك لمحركات البحث.

• احرص أن تكون عناوين المواضيع مقتضبة و تتضمن الكلمات الدلالية المناسبة.
• الأخطاء الإملائية قد تفقدك كثيرا من الزوار و خصوصا ما لحق منها الكلمات الدلالية، فاجتنبها!
• حاول أن يكون لمدونتك روابط dofollow في بعض المواقع ذات التزكية الكبيرة (pagerank).
• بعض المدونين يلجأ لمسح العنوان من إعدادات المدونة، أو وضع نقطة مكانه لكي لا يظهر فوق صورة الشعار، و هذا من الأخطاء الشائعة، و حله بسيط فعند رفع صورة رأس الصفحة (الهيدر) يجب تفعيل خيار "بدلا من العنوان و الوصف" أو بإضافة قليل من css لقالب المدونة

.Header h1
{
visibility:hidden;
}

• تهيئة المدونة لمحركات البحث يجب أن يواكبه نشر محتوى جيد و منتظم.
• المرتبة الحسنة في صفحات البحث لا تأتي بين ليلة وضحاها، قليل من الصبر سيكون مفيدا!

أسألكم الدعاء!
رمضان مبارك سعيد!

» تابع القراءة

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

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

هذا موضوعي الأول أتمنى أن يعجبكم وأن يضيف شيئا جديدا لكم.
...

فتح الراوبط الخارجية في صفحة جديدة

يهدف المدونون للحفاظ على الزوار وابقائهم في المدونة لأطول فترة ممكنة، ولكن الروابط الخارجية تمنعهم من ذلك، وقد يفقدهم الكثير من الزوار. فالمدونون يستخدمون الروابط في الـ  anchor text  أو  الاعلانات بأنواعها وقد تكون موجودة حتى في تعليقات الزوار، وهذا كله قد يساهم في خروج الزائر من المدونة. هذه المشكلة عولجت  سابقا في مدونات الووردبريس باستخدام اضافة Open in New Window Plugin . أما بالنسبة لبلوجر فهناك الطرق التقليدية والتي سأبدأ في شرحها أولا :

الطريقة الأولى : 

عند إضافة رابط فإنه يجب عليك إجراء تعديل عليه كما يلي :

اضغط على Edit HTML ثم اذهب للرابط المراد تعديله واضف ما يلي  في آخره

target="_blank"

ليصبح كما يلي على سبيل المثال

<a href="http://site" target="_blank">

هذه الطريقة مضيعة للوقت واذا كان لديك الكثير من الروابط فيصعب تطبيقها

الطريقة الثانية : 

من لوح تحكم مدونتك اضغط تصميم ثم توجه إلى صفحة تحرير Html :

نبحث عن وسم <head> بضغط Ctrl+F ونضيف هذا الكود بعده 

<base target="_blank" />

تمتاز هذا الطريقة ببساطتها ولكنها تؤدي لفتح جميع الراوبط في صفحة جديدة حتى روابط مدونتك نفسها مثل المواضيع والأقسام مما يسبب ازعاجا للزائر لكثرة الصفحات أمامه.

الطريقة الثالثة :

وهي أفضل الطرق فلن تكون مضطرا لتعديل كل الروابط في المدونة ولن تسبب إزعاجا للزائر عدا عن بساطتها وسهولة تطبيقها، فقط كل ما عليك فعله هو إضافة كود جي كويري jQuery حيث يقوم بتفحص جميع الروابط الخارجية الموجودة في الصفحة وإضافة target=_blank لها بشكل تلقائي و يمكنك تركيبها كالآتي.

من لوح تحكم مدونتك توجه إلى صفحة التصميم ثم تحرير Html.

نبحث ( Ctrl+F ) عن</body> ونضيف هذا الكود فوقه مباشرة .
ملاحظة : إن كنت تستعمل مكتبة جي كويري في موقعك او مدونتك فلا داع لإضافة ما لون باللون الأزرق. و اكتف بما بعده.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript">
//<![CDATA[
jQuery('a').each(function() {
// Let's make external links open in a new window.
var href = jQuery(this).attr('href');

if (typeof href != 'undefined' && href != "" && (href.indexOf('http://') != -1 || href.indexOf('https://') != -1) && href.indexOf(window.location.hostname) == -1) {
jQuery(this).attr("target", "_blank");
}
});
//]]>
</script>

و أخيرا نضغط على زر حفظ القالب.
هذه الطريقة ليست مقتصرة فقط على المدونات وإنما يمكن تطبيقها أيضا على كل المواقع بمختلف أنواعها.
نسألكم الدعاء!

.
.

بواسطة عامر

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

» تابع القراءة

بسم الله و الحمد لله و الصلاة و السلام على محمد الأمين و على صحبه و آله الطيبين الطاهرين. السلام عليكم و رحمة الله، في هذا الموضوع سنتعرف و إياكم على إضافة ممتازة لتسريع تصفح المدونة أو أي موقع على حد سواء، مبدأ الإضافة يتلخص في تحميل ما يراه المتصفح أولا ثم تحميل بقية الصور و المحتويات عند الطلب فمثلا عند تصفح صفحة ما ستلاحظ و أنت تنزل إلى أسفل الصفحة أن الصور و المحتويات تظهر تباعا بطريقة سلسة. باختصار الإضافة تتيح تحميل ما يظهر على الشاشة و ليس صفحة الموقع كلها الشيء الذي يزيد في سرعة تحميل و تصفح موقعك.و لمشاهدة مثال حي على الإضافة زر هذه الصفحة ثم تصفحها نزولا و ستلاحظ تأثير الإضافة بشكل أدق. طريقة تركيب الإضافة بسيطة و سهلة ، و تكون بإضافة الكود الآتي فوق (قبل) وسم </body> المغلق:
هذا الكود لتطبيق الإضافة على كافة صور الموقع

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2' type='text/javascript'/>
<script src='http://sites.google.com/site/simoxooorg/Home/jquery.lazyload.mini.js?ver=1.5.0' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function($){
if (navigator.platform == &quot;iPad&quot;) return;
jQuery('img').lazyload({
effect:&quot;fadeIn&quot;,
placeholder: &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL47v6q817bMXqbbNjwY9t_zualcHO6a2o-Mnx4obn5SLO6WUWBSNLl8Z6XVfeMHBvM-79xt7F9H0GzaNJE4GTVHYCtZfd5AUQhjwNcqdtwupB_rdo_nqZOt1PPYR2eKG3pk6ZzBn108I/&quot;
});
});
</script>

إذا كنت تستعمل مسبقا مكتبة جي كويري في موقعك أو مدونتك فلا داعي لوضع السطر المشار إليه باللون الأزرق و اكتف بوضع بقية الكود فقط.

تخصيص الإضافة

تحديث : لتطبيق الإضافة فقط على جسم الموضوع أو التدوينة فقط أضف الكلاس أو ال id المراد التطبيق عليه فقط إلى يسار ما لون بالأحمر كما توضحه الأمثلة الآتية.

• فمثلا في بلوجر نطبق الإضافة على .post نستعمل الكود كما يلي:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2' type='text/javascript'/>
<script src='http://sites.google.com/site/simoxooorg/Home/jquery.lazyload.mini.js?ver=1.5.0' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function($){
if (navigator.platform == &quot;iPad&quot;) return;
jQuery('.post img').lazyload({
effect:&quot;fadeIn&quot;,
placeholder: &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL47v6q817bMXqbbNjwY9t_zualcHO6a2o-Mnx4obn5SLO6WUWBSNLl8Z6XVfeMHBvM-79xt7F9H0GzaNJE4GTVHYCtZfd5AUQhjwNcqdtwupB_rdo_nqZOt1PPYR2eKG3pk6ZzBn108I/&quot;
});
});
</script>

• و في ووردبريس نطبق الإضافة على #post-blog كما في الكود الآتي:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2' type='text/javascript'/>
<script src='http://sites.google.com/site/simoxooorg/Home/jquery.lazyload.mini.js?ver=1.5.0' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function($){
if (navigator.platform == &quot;iPad&quot;) return;
jQuery('#post-blog img').lazyload({
effect:&quot;fadeIn&quot;,
placeholder: &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL47v6q817bMXqbbNjwY9t_zualcHO6a2o-Mnx4obn5SLO6WUWBSNLl8Z6XVfeMHBvM-79xt7F9H0GzaNJE4GTVHYCtZfd5AUQhjwNcqdtwupB_rdo_nqZOt1PPYR2eKG3pk6ZzBn108I/&quot;
});
});
</script>

• و في المنتديات على .tborder يصبح الكود كالآتي:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2' type='text/javascript'/>
<script src='http://sites.google.com/site/simoxooorg/Home/jquery.lazyload.mini.js?ver=1.5.0' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function($){
if (navigator.platform == &quot;iPad&quot;) return;
jQuery('.tborder img').lazyload({
effect:&quot;fadeIn&quot;,
placeholder: &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL47v6q817bMXqbbNjwY9t_zualcHO6a2o-Mnx4obn5SLO6WUWBSNLl8Z6XVfeMHBvM-79xt7F9H0GzaNJE4GTVHYCtZfd5AUQhjwNcqdtwupB_rdo_nqZOt1PPYR2eKG3pk6ZzBn108I/&quot;
});
});
</script>

و لمن يملك بعض الخبرة و الدراية في هذا المجال يمكنه تخصيص الإضافة و تعديلها عبر متابعة موقع تطويرها.

» تابع القراءة

بسم الله و الحمد لله و الصلاة و السلام على من لا نبي بعده سيدنا محمد المصطفى و على آله و صحبه و من تبعهم بإحسان إلى يوم الدين. السلام عليكم و رحمة الله. كثيرا ما يسأل البعض هل من إمكانية لوضع إعلانات أدسنس في أماكن غير التقليدية التي يعرفها الجميع، مثلا تحت العنوان، وسط التدوينة، في ذيل الصفحة، في رأسها... في هذا الموضوع سنتناول و إياكم طرق عرض إعلانات جوجل أدسنس Google Adsense في مواضع متعددة من مدونتك بلوجر، أتمنى أن تميط بعض اللبس.

1 - الطرق التقليدية لوضع أدسنس.

و تكون بوضع إعلان أدسنس في مربع بالقائمة الجانبية أو فوق التدوينة. كما و تكون كذلك بوضعه تحت التدوينة. و هنا لن تحتاج للذهاب إلى جوجل أدسنس لتولد كود الإعلان فالعملية متاحة من لوحة تحكم مدونتك في بلوجر.

أدسنس في مربعات القائمة الجانبية

أدسنس تحت جسم التدوينة

ما أشير إليه حتى الآن بات من البديهيات في بلوجر، و سنستغل الوقت للمرور لصلب الموضوع.

2 -وضع إعلانات أدسنس أسفل عنوان الموضوع.

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

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

<data:post.body/>

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

<b:if cond='data:blog.pageType == &quot;item&quot;'>
هنا تضع كود إعلان أدسنس.
</b:if>

3 - وضع إعلانات أدسنس وسط الموضوع.

توجه إلى صفحة تحرير Html و طبعا احفظ نسخة احتياطيية من القالب، ضع علامة في خانة توسيع القوالب و ابحث عن هذا الكود (إن وجدت منه اثنين فالثاني هو المقصود).

<data:post.body/>

حدده و استبدله بهذا الكود.

<div expr:id='"aim1" + data:post.id'></div>

<div style="clear:both; margin:10px 0">

<!-- AdSense code -->

</div>

<div expr:id='"aim2" + data:post.id'>

<data:post.body/>

</div>

<script type="text/javascript">
var obj0=document.getElementById("aim1<data:post.id/>");
var obj1=document.getElementById("aim2<data:post.id/>");
var s=obj1.innerHTML;
var r=s.search(/\x3C!-- adsense --\x3E/igm);
if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+16);}
</script>

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

<!-- adsense -->

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

لكن ماذا لو نسيت وضع الكود في التدوينة ؟!! لن يحدث شيء سيظهر الإعلان في بداية التدوينة و لكم أن تلاحظوا ذلك على مدونتي في بعض المواضيع التي لم أعدلها. و لمزيد من الشرح يمكنكم زيارة Ads In The Middle

4 - تحذير

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

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

في هذا الرابط ستجدون لائحة بمواقع كثيرة مخلة بالآداب و تبشيرية يمكنكم نسخها و لصقها في الإطار 2 .
و رجاء إذا واجهكم إعلان من هذا القبيل على مدونتي أن تخبروني في تعليق و لكم جزيل الشكر.
أسألكم الدعاء!

» تابع القراءة

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

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

]]></b:skin>

و فوقه مباشرة ضع ما يلي:

.blog-author-comment {
border: 1px solid #043b3d;
background: #dddddd;
}

* اللون الأحمر يمثل حجم الإطار، ضع مكانه صفرا إن لم ترده.
* اللون الأزرق يمثل كود لون الإطار.
* اللون الأخضر لكود خلفية مستطيل التعليق.

رابعا : ثم تبحث عن هذا الكود (Ctrl+F)(ابحث فقط عن جزء منه لتتمكن من تحديده كاملا.)

<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>

الآن بعد إيجاد الكود أعلاه حدده عبر تظليله ثم ضع مكانه الآتي

<b:if cond='data:comment.adminClass == data:post.adminClass'>

<dd class='blog-author-comment'>

<p><data:comment.body/></p>

</dd>

<b:else/>

<dd class='comment-body'>

<b:if cond='data:comment.isDeleted'>

<span class='deleted-comment'><data:comment.body/></span>

<b:else/>

<p><data:comment.body/></p>

</b:if>

</dd>

</b:if>

أخيرا :  استعرض مدونتك ثم احفظ قالبك.
ملاحظة : يمكنك تعديل كود CSS الأول لضبط شكل و ألوان و طريقة ظهور تعليق صاحب المدونة.
شكر خاص ل Anurag Bansal

» تابع القراءة

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

أولا من لوح تحكم مدونتك توجه إلى صفحة تحرير HTML  و ضع علامة في خانة توسيع القوالب .
ثم ابحث عن الكود الموالي (CTRL+F)

<b:if cond='data:blog.pageType == &quot;item&quot;'>

و تحته مباشرة ضع هذا الكود و احفظ القالب.

<div style='width:548px; float:right; height:120px; background:#f2f2f2;padding:10px; border:1px #134294 solid;margin-bottom:20px;'>
<div style='width:540px; float:right;font-weight:bold;text-align:right; color:#1C547D; font-style:normal; font-variant:normal; font-size:30px; font-family:Times New Roman; height:35px'>

ساهم في نشر الموضوع و لك جزيل الشكر!

</div>

<p align='center'>
<br/>
<br/>
<a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'>
<img alt='Digg' height='60' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrgUZWNqhyphenhyphenA1JzU_uAG03ouTnxdB5RpqYNE0RmOzFR1fV6Gw26QjLqQVoXChHeYSrmp7jw0gM7POuiQEDaxd8amjvvZ_hub878DJ4fUanFs9YF-vYnh7h4Z36vOBIkjWX_-FPh6bBaU4E/' width='60'/></a>

<a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url' target='_blank'>
<img alt='Technorati' height='60' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS2pNq5G3xYn0YWEcQB7Wa87UQ9yhyphenhyphentzCTR17uVIhxgh1w0yZJ3Xu6_r2AUG6617-Dc-rHiGRpD2-yErn5OLd0WDp6fMVwq15YXS7tXVxXI5rLOl9XSP7uRuz9H-94_xd9-binHuTErS0/' style='padding-top:1px;' width='60'/></a>

<a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'>
<img alt='del.icio.us' height='60' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOa1x5xhcECHre-QElq9pAHxAkz8SXR2sjTeLMECAB-PPSiaj3fZBktO3XNSK3OfZTgY6BLPDXzu_VNyX3ghBBN5jYCxyqWbQHDLwLb8XGRyWxYsxUWniuTZKirk3bELxGZ9cNNmu_p4k/' width='60'/></a>

<a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'>
<img alt='Stumbleupon' height='60' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNaVQ0mBfi7N5R9iu0pB9izsJbNlJ_RnUo6J_hLUGvUos_fDBn6u_vC077PTKf1xHJWl17pHTIcYsqX_-EeUEQ4zhAtBfK3IqIglM6B3bpGI110rHphWKnyhIiY_1k21kOZHCvJDFVuvo/' width='60'/></a>

<a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'>
<img alt='Reddit' height='60' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaszIsiODDImPR1czMZ9LD452JVJPOEjgPVp6d8nVCQp4dOuWHzSA-inj_iUo6u-pCCyLGKsbS3pctfXbpnYwQL-p3SBNtRVQonlAUyOd-C5US6Q-4PSR1WXN1_DatkCnt26CzUZ7E2o8/' width='60'/></a>

<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank'>
<img alt='Facebook' height='60' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGkgrQnTFG1_GtNWiMWg6zpJ4W3Oaqotru3Z4gbCkhOJksFk_ePfd0S2TDuxyNtNel91ZQFYqvKo2RZixp7_jclJ1uj2w6YXiQLfOX46k3jsEThSKXmpc4kjNMm0bnR-NH4vxJ6eQ0pH0/' width='60'/></a>

<a expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url' rel='external nofollow' target='_blank'>
<img alt='Twitter' height='60' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLiaCQKPpb85iKnDvq-WOOR8_-MBVT30d_D4V7OM5FH3d1eKCQqnqYVxwwHSUfH50qjxrtKijSM9HsMPl3Ivb6jhVIPndYa63sxfK7sKDpqe1vbByxZp4U6MelEq5JSZS0aX-TKjGDQJI/' width='60'/></a>

<a href='http://feeds.feedburner.com/doaib'>
<img height='60' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFSqkWUsm1O3zTvPQzP03TGyzd-YPEatLckZ9BhLKYxsGtoCOr5AxtTJgm51-tRPacrNbgXTbUGtp5QDmTO-OlR02YrKDE27ASmW2shnlbzArZQ0phsbgxmOByAKMP1TWzATLZiNTLhls/' width='60'/></a>
</p>
<a href="http://doaib.blogspot.com/2009/12/blogger-social-bookmarks-buttons.html" target="_blank"><span style="font-size: xx-small;">احصل على هذه الإضافة</span></a>
</div>

شرح الألوان:
* الأحمر : لتعديل عرض الإضافة.
* الأخضر : لتعديل لون خلفية مستطيل الإضافة.
* الأزرق : ضع مكانه العبارة التي تناسبك.
* الأرجواني : مكانه أدرج رابط خلاصة مواضيع مدونتك.
* النيلي : روابط الصويرات في حال أردت استبدالها بأخرى أعجبتك.
كذلك ستجدون height='60'  و width='60'  و هذه لتغيير أبعاد الصويرات لتصغيرها أو تكبيرها (يحملان نفس القيمة).

لا تنسوا متابعتي على تويتر  عبر هذين الحسابين

doaibblog



HalTa3lam



مع تحيات أخيكم محمد.

» تابع القراءة

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

The key is not supplied. Please go to BRPS to obtain one. If you are reading this, please relay the message to the owner of this blog.

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

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

الخطوة الأولى :  حذف الإضافة الأولى

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

<div id='related_posts'/>

<script src='http://www.google.com/jsapi'></script>
<script src='http://sites.google.com/site/simoxisite/Home/simo/brps.txt?attredirects=0' type='text/javascript'/>

الخطوة الثانية : تركيب الإضافة الجديدة

1 -  ابحث عن الكود الآتي

]]></b:skin>

ثم فوقه مباشرة ضع ما يلي :

#related-posts {
float : left;
width : 540px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px Verdana;
margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
text-decoration : none;
}
#related-posts a:hover {
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1sqqT9s8fdppakxeTVqflTS2NmpTK-DJT5XdLCTfZQZYXy1PddZTF2JZaikzh8y_WOhG_sKDv6wV9gTGt9YgHCc0gbLWkcPGSLdVqlXkTOJWVHYMnwg4vFH2GJvv6rkriXAKm1pH08vU/") no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 21px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}

2 -  مرة أخرى تحت الكود المشار إليه باللون الأزرق سابقا ضع الآتي :
تنبيه لمن وضع الإضافة سابقا : لقد حدثت هذا الكود بعدما لاحظت توقف الرابط السابق فوضعت رابطا جديدا لملف الجافاسكريبت رجاء إذا لاحظت توقف الإضافة استعمل هذا الكود بدل الأول.

<script src='http://sites.google.com/site/simoxooorg/Home/related-post-hack-blogger.js' type='text/javascript'/>

3 - ثم تبحث عن هذا الكود :

<div class='post-footer-line post-footer-line-1'>

و مباشرة بعده تضع ما يلي :

<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b>مواضيع ذات صلة : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>

* يمكنك وضع أي عبارة تريد مكان " مواضيع ذات صلة  " .
* كذلك يمكنك تغيير الرقم 5 بالكود السابق لتعين عدد النتائج المراد عرضها.

4 - و أخيرا استعرض المدونة و احفظ القالب و مبروك عليك :)
شكر خــــــــــــاص لـــ     Widgetsforfree

» تابع القراءة

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


ثم عند بدأ تدوينة جديدة سنستفيد من الخاصية عبر ضغط زر الفصل كما هو مبين فيما يلي

أما إن كنت تستعمل html لتنسيق التدوينة فيمكنك استعمال هذا الكود لتعيين مكان الفصل

<!--more-->

و فيما يلي الكود الذي لا بد من إضافته لإظهار رابط " اقرأ المزيد " في القوالب المستوردة و طبعا كالعادة نحفظ نسخة احتياطية من القالب :
نضع علامة على المربع الصغير لتوسيع القوالب و نبحث عما يلي :

<data:post.body/>

ثم بعده نضيف هذا الكود و نحفظ القالب :

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if >

إذا كنت تستعمل مسبقا خاصية اقرأ المزيد بشكل آخر فأبق عليها لأن هذه لازالت قيد التطوير و بها بعض الاختلالات و منها :
نزول مربعات القاائمة الجانبية أسفل التدوينات لأن كود الفاصل عادة ما يأتي في التدوينة بين وسمي div ، و يقول أحد المهتمين أنه لتفادي الخطأ يجب حذف div من كود التدوينة . و الحقيقة أنه في حالة المدونات العربية لا يمكن التخلي عنها لأننا نستعملها افتراضيا لتوجيه النص من اليمين إلى اليسار .

نصيحة : الخاصية لازالت قيد التطوير و لا ينصح باستعمالها الآن رغم أنها أعلنت رسميا و نفس الشيء ينطبق على محرر الرسائل الجديد.

تحياتي!

» تابع القراءة

بسم الله و الحمد لله و الصلاة و السلام على خير خلق الله محمد الأمين. إخواني الكرام في هذا الموضوع سنتعرف و رفقتكم الطيبة إلى طريقة إدراج الأكواد باستعمال SyntaxHighlighter في مدونات بلوجر Blogger و في مدونات ووردبريس Wordpress كذلك. و تجدر الإشارة إلى أن هذه الإضافة تفيد المدونات التعليمية التي اعتاد أصحابها على إدراج أكواد فيها قصد الشرح و التوضيح . لا استعملها في مدونتي و اكتفي بخاصية الاقتباس لعرض الأكواد بغية التبسيط لا غير و لكن سأستعملها في هذا الموضوع توضيحا و تمكينا من التجريب.
أولا هكذا سيظهر الكود بعد تنصيب الإضافة: (هذا الكود لا علاقة له بالإضافة، فقط للمعاينة)

.box-heart{
border:solid 1px #DEDEDE;
background:#FFFFCC url(img/icon-heart.png) 8px 6px no-repeat;
color:#222222;
padding:4px;
text-align:center;
}

1- طريقة تنصيب الإضافة في مدونات بلوجر Blogger

من لوحة التحكم نفتح صفحة تحرير html ثم نحفظ نسخة احتياطية من القالب قبل بدء التعديل.
و نبحث عن :

</head>

قبلها أي فوقها مباشرة نلصق الكود الموالي:

<link href='http://sites.google.com/site/simoxisite/syntaxhighlighter/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>
<script src='http://sites.google.com/site/simoxisite/syntaxhighlighter/shCore.js' type='text/javascript'/>
<script src='http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushCpp.js' type='text/javascript'/>
<script src='http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushCSharp.js' type='text/javascript'/>
<script src='http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushCss.js' type='text/javascript'/>
<script src='http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushDelphi.js' type='text/javascript'/>
<script src='http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushJava.js' type='text/javascript'/>
<script src='http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushJScript.js' type='text/javascript'/>
<script src='http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushPhp.js' type='text/javascript'/>
<script src='http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushPython.js' type='text/javascript'/>
<script src='http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushSql.js' type='text/javascript'/>
<script src='http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushVb.js' type='text/javascript'/>
<script src='http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushXml.js' type='text/javascript'/>
<script src='http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushRuby.js' type='text/javascript'/>

مرة أخرى نبحث عن:

</body>

و قبله أي فوقه مباشرة نلصق الكود الآتي و نحفظ القالب:

<script language='javascript'>
function start() {
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.ClipboardSwf = &#39;/flash/clipboard.swf&#39;;
dp.SyntaxHighlighter.HighlightAll(&#39;code&#39;, true, true, false, 1, false);
}
window.onload = start;
</script>

الآن بعد حفظ القالب سنتعرف طريقة وضع الكود بالتدوينة أو الموضوع.
كما لاحظتم في الكود الأول فإن الإضافة بها عدة ملفات جافاسكريبت كل واحد منها مختص بعرض أكواد لغة برمجة معينة ك php ، java ، javascript ، xml ، و غيرها ... و هذا سنأخذه بعين الاعتبار فيما يلي .
يدرج الكود كما يلي :

<pre name="code" class="css">
هنا يوضع الكود
</pre>

أو

<textarea name="code" class="css">
هنا يوضع الكود
</textarea>

طبعا هذا الكود معد لعرض css و منه لعرض أكواد أي لغة أخرى نستبدل css باسم تلك اللغة.
باستعمال pre لعرض كود html تأكد من تعويض الأقواس المعقوفة < و > بما يلي

- < إلى &lt;
- > إلى &gt;

و يمكن القيام بهذه العملية باستعمال هذه الأداة التي تعوض كل الأقواس بكود html دفعة واحدة .
أما إذا استعملت textarea فالمتصفح يتجاهل ما بين وسميها و يعرضها نصا ، إذا فهذه تعد الأبسط و الأسرع.

2 - طريقة تركيب الإضافة على مدونات ووردبريس

• تحميل الإضافة من هنا SyntaxHighlighter Plus
• فك الضغط عن الملف و رفع مجلد الإضافة إلى مجلد plugin الموجود داخل wp-content
• تفعيل الإضافة من صفحة الإضافات في لوحة تحكم لمدونة .
• ثم في التدوينة أو الموضوع ندرج الكود كما يلي:
  

[sourcecode language='css']هنا يوضع الكود[/sourcecode]

يعوض css برمز لغة برمجة الكود المعروض و هذه لائحة اللغات المتاحة و رموزها.

تحياتي!

» تابع القراءة

في هذا الموضوع سنتعرف و رفقتكم الطيبة طريقة إدراج زر نشر التدوينة في تويتر. و كما يعلم الجميع فتويتر أصبح من أكثر الخدمات استعمالا و الكثير من المتصفحين يميل لمشاركة ما وجده من مواضيع مفيدة مع إصدقائه عبر هذه الخدمة السلسة و السهلة . إذن فوضع زر قد يشجع الزوار على ذلك و يسهل عليهم تلك المهمة . لنتابع معا.
القاعدة الذهبية : حفظ نسخة احتياطية من القالب قبل بدء التعديل.
نتوجه وفق هذا المسار: » لوحة تحكم المدونة » التخطيط » تحرير html ثم نضع علامة في خانة توسيع القالب .
و نبحث عن هذا الكود أو ما يشبهه (للبحث في متصفحك اضغط Ctrl+F)

<b:includable id='post' var='post'>
<div class='post hentry uncustomized-post-template'>

ثم بعده مباشرة سنضيف كود الزر المطلوب و نحفظ القالب.
الزر الكبير

<div style='float:left; margin-right:10px;'>
<script type='text/javascript'>
tweetmeme_url = &#39;<data:post.url/>&#39;;
</script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'>
</script>
</div>

الزر الصغير

<div style='float:left; margin-right:10px;'>
<script type="text/javascript">
tweetmeme_style = "compact";
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
</div>

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

<data:post.body/>

و سيبدو هكذا :

الحالة الأولى يمكن مشاهدتها عبر مدونتي هذه.
الحالة الثانية ستشاهدها في هذه المدونة التجريبية.

.

» تابع القراءة