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

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

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

ثم قم بوضع هذا الكود بعده مباشرة

<div class='bio-socials noprint' style='height: 260px;padding-top:50px;'>
<!--author bio-->
<style>
.author-bio{
border-right:3px #5D7D91 solid;
margin-right:10px;
marin-bottom:40px;
text-align:justify;
padding:10px;
width:300px;
float:right;   
}
.author-photo{
float:right;
text-align:center;
width:74px;
padding:2px 2px 2px 2px!important;
margin:0 10px 10px 10px;   
}

</style>
<div class='author-bio' style='height: 180px'><div class='author-photo' style='height: 180px'>
    <img alt='كاتب الموضوع' height='70' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF9wGZwpCQ__9MA3Q08ny8Zqo-n97oBQci6D6ihjhEDK2mMnfiUSwnRzVTXWIxPDq64JB3PohJ6Q9TACfB0PR3KhWmpMweQBXk2S-Yk4px4zQ20W1CqwMym8NmVd0S53qYoSvAtAVPYEs/' width='70'/>
</div><h3>بقلم باسم</h3>م&#1615;دو&#1613;ن م&#1616;صري , يعشق التدوين عبر منصة بلوجر , يهتم بمتابعة أخبار التكنولوجيا الحديثة ولغات البرمجة وتطوير المواقع .</div>

<!--end author bio-->
<style>
.socialbox{
border-right:3px #5D7D91 solid;
margin-left:10px;
width:190px;
float:left;
padding:10px 0 10px 0!important;
}
.sociallist{
margin:10px 0 10px 0;
width:190px;
list-style:none!important;   
}
.twitter, .facebook, .delicious, .rss, .print{
padding:5px 40px 5px 0!important;
background-repeat:no-repeat;
background-position:160px 6px!important;   
}
.twitter{
background-image:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjAW792uAfSyG1SJM9v6a_UiTNH9y0m4iZVztbxFYeJ5BszQnxK_9PA3SYNXbofdC0yoXqs5lYQAgCmDjt_wijJy3Z72j1k0CfGX5iiFfWgv7sSJJLkb98PKSuOvF1clC27iIGhQIzdS8/&#39;);
}
.facebook{
background-image:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhutWyLYxjyINhfNioGzqqaqJ4a-Dn-XyKWGKUl8IJ8IrcrNC3vbJkmrpY8_K4p6unsb2sFOsHLnG1gjSjlmQt9wxHrp9VpsrAznpNY36iJr1PBP2q-wDCsvQLTmbQrgmgmwFlju-8NU4s/&#39;)   
}
.delicious{   
background-image:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2bkj_eUDMQvkM_XwOMewNs5Z_2AFWx1pjRD89AdiqiR40PHiLXjoiM49a8HUxEycWhVNPRdqBxDOIjV2k7VidFLaKSoAZ8TUJLlL3cB7LkwEOg6AEbwkylw0QP21R2KpWuXZhUxOMK-k/&#39;);

}
.print{
background-image:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggQtqQi6_rgnOTf1X3n0thyfKxaw124u3VHZf-ujpC3q3yuOwmdcAOeQQNFv1GsWYLPnARWIpvGtBltpmZZWWnVhSQJlTwcKYO1F9_HxIYmDkSRX9uGn2qnNqK-56b2qa5Ox4EC1VytvY/&#39;);

}
.rss{   
background-image:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6DAk9O3Dhp5z87n4-34V2CyL0Qq-iFZi4uiHapaqq78hveNya4uNPPDrvkiNUD4rnn3n2GT_tEBR8dordlUcNTFqR-XAyQmnWLfRvcv1WbZ4_8EyoSpI3kBnvx8tebfSKyLMUyselGsw/&#39;);

}
</style>
<div class='socialbox' style='height: 180px'><h3 style='margin-right:10px;'>شارك أصدقاءك</h3>
<ul class='sociallist'>
<li class='twitter'><a expr:href='&quot;http://twitter.com/share?text=&quot; +data:post.title+ &quot;&amp;url=&quot; + data:post.url + &quot;&amp;via=doaibblog&amp;related=اسم مدونتك&quot;' target='_blank'>عبر تويتر</a></li>
<li class='facebook'><a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='nofollow' target='_blank'>عبر فيسبوك</a></li>
<li class='delicious'><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'>أضفه إلى مفضلتك</a></li>
<li class='print'><a href='javascript:window.print()'>اطبع الصفحة</a></li>
<li class='rss'><a href='رابط خلاصات مدونتك' target='_blank'>تابع الخلاصات</a></li>
</ul>
<div class='fblike' style='float:left;' width='100'><b:if cond='data:blog.pageType == &quot;item&quot;'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' float='left' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100px; height:40px;'/>
</b:if></div>
</div>

</div>

احفظ قالبك .
تم بحمد الله .

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

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

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

<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

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

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

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

]]></b:skin>

اضف فوقه مباشرة الكود التالي :

.jump-link a {
float: right;
display: block;
background-color: #000000;
padding: 3px 3px 3px 3px;
width: 130px;
-moz-border-radius: 10px;
border-radius: 5px;
}
.jump-link a:hover {
text-decoration: none;
color: #FFFFFF;
background-color: #BF2323;
}

بامكانك تغيير الالوان الى ما يناسب قالب مدونتك .و اذا اردت تغير الاتجاه الى اليسار بامكانك تغير float: right; الى float: left;

و لتغير اقرا المزيد الى اي عبارة اخرى مثلا اكمل القراءة أو تابع القراءة .

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

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

]]></b:skin>

2- انسخ الكود التالي والصقه فوقها مباشرة ..

.breadcrumbs{
padding:5px 0px 5px 5px;
margin:0;font-size:95%;
line-height:1.4em;
border-bottom:4px double #cadaef;
}

3- الان ابحث عن :

<div class='post hentry uncustomized-post-template'>

4- وانسخ الكود التالي بعدها مباشرة :

<b:if cond='data:blog.homepageUrl == data:blog.url'>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='breadcrumbs'>
    انت تقرأ .. &#187; <a expr:href='data:blog.homepageUrl'>الرئيسية</a> &#187;
    <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
    <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
    <b:if cond='data:label.isLast != &quot;true&quot;'> , </b:if>
    </b:loop>
    </b:if> &#187; <data:post.title/>
    </div>
    </b:if>
    </b:if>

احفظ القالب ومبروك عليك الاضافة

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

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

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 لتعدل خلفية و حدود مستطيل تعريف الكاتب .

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

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

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

 أما طريقة التركيب على بلوجر فهي كالآتي.

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

طريقة تركيب زر تويتر على بلوجر

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

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

<div class="tweetbutton" style="float:left; padding:6px;">
<a href="http://twitter.com/share" class="twitter-share-button" expr:data-url='data:post.url' expr:data-text='data:post.title' data-count="horizontal" data-via="droos_b">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div>

</b:if>

تعديل الكود

كما لاحظتم في الكود فإني ميزت بعض العبارات بألوان مختلفة هذا شرحها.

• left يمكنك استبدالها ب right لوضع الزر ناحية اليمين.

• horizontal نستبدلها ب vertical للحصول على شكل جديد للزر أو ب none لإخفاء عداد مرات النشر. لكم أمثلة توضيحية.

شكل أفقي horizontal


شكل عمودي vertical





دون عداد none

• data-via="doaibblog" هذه لإظهار حسابك على تويتر بهذا الشكل @doaibblog مثلا يمكنك استبدال droos_b باسمك على تويتر أو حذفها كلها إن كانت عناوين مواضيع مدونتك طويلة لتوفير بعض الأحرف.

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

بعد الانتهاء من تعديل الكود و تركيبه احفظ القالب.

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

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

 كيفية إدراجه في مدونات بلوجر Blogger

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

<data:post.body/>

بعده مباشرة تضع كود زر "أعجبتني" و هو الآتي.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/>
</b:if>

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

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

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

.post img  {
 max-width: 520px;
 width: expression(this.width > 520 ? 520: true);
 }

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

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

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


لإضافة فهرس المدونة بتواريخ نشر التدوينات كالتالي

من خلال الصفحات الثابتة في مدونتك أضف هذا الكود

<script src="http://sites.google.com/site/simoxisite/Home/archive.js">
</script>
<script src="http://droos-b.blogspot.com/feeds/posts/default?max-results=500&amp;alt=json-in-script&amp;callback=loadtoc">
</script>

لإضافة فهرس المدونة بتصنيف نشر التدوينات كالتالي

 من خلال الصفحات الثابتة في مدونتك أضف هذا الكود

<script src="http://www.abu-farhan.com/script/daftarisiblogger/blogtoc-min.js">
</script>
<script src="http://droos-b.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script>

تم بحمد الله .

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

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

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

<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<span dir='ltr'/>
</li>
</b:loop>

ثم قم بتغييره لهذا الكود

<b:loop values='data:labels' var='label'>
<li>
<a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default/-/&quot; + data:label.name'><img alt='Subscribe' src='http://www.feedburner.com/fb/images/pub/feed-icon16x16.png' style='vertical-align:middle;border:0'/></a>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<span dir='ltr'/>
</li>
</b:loop>

ثم احفظ قالبك ..
لتصبح الإضافة بهذا الشكل

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

بسم الله الرحمن الرحيم , والصلاة والسلام على أشرف المرسلين , سيدنا محمد النبي الأمين , وعلى من سار على هديه واستن بسنته الى يوم الدين , السلام عليكم ورحمة الله وبركاتهيعد فيسبوك Facebook أول و أكثر الخدمات الاجتماعية رواجا في الشبكة يتشارك من خلاله المتصفحون روابطهم، صفحاتهم، و كل ما راقهم و أعجبهم , وتدوينتنا اليوم عبارة عن شرح إضافة زر Facebook Share لمدونات بلوجر , 
ولتركيب هذه الإضافة يرجى اتباع التالي :
1. ادخل الى لوحة التحكم ثم التصميم ثم تحرير ال HTML ثم قم بتوسيع القالب .
2. لا تنسى بأخذ نسخة احتياطية من قالبك الخاص .
3. ابحث عن هذا الكود <data:post.body/> ثم قم بإضافة الكود التالي بعده مباشرة

<a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php">مشاركة</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

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

<div style='float:right; margin-left:10px;'>
<script src="http://widgets.fbshare.me/files/fbshare.js"></script>
</div>

النتيجة :

الكود الثاني :

<div style='float:right; margin-left:10px;'>
<script>var fbShare = {
url: 'http://YOURBLOG.blgospot.com/',
size: 'small',
google_analytics: 'true'
}</script>
<script src="http://widgets.fbshare.me/files/fbshare.js"></script>
</div>

النتيجة :


الكود الثالث :

<div style="float:right;padding:4px;">
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='box_count'/>
<script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"/>
</div>

النتيجة :


الكود الرابع :

<div style="float:right;padding:4px;">
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='button_count'/>
<script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"/>
</div>

النتيجة :


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

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

شرح إظهار عناوين المواضيع فقط في الصفحة الرئيسية لمدونات بلوجر  . هاك بسيط يعمل على إظهار العناوين فقط وليس العنوان والموضوع معا .. حيث يظهر العنوان في الصفحة الرئيسية للمدونة فقط وعد الضغط عليه يحولك الى الموضوع الرئيسي . ولكي تستطيع تركيب هذا الهاك في مدونتك اتبع الآتي
1. ادخل الى لوحة التحكم ثم التصميم ثم تحرير ال HTML وقم بتوسيع القالب .
2. لا تنسى بأخذ نسخة احتياطية من القالب الخاص بك .
3. ابحث عن هذا الكود </head>
ثم أضف قبله " فوقه " مباشرة هذا الكود

<style type='text/css'>
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
    .post {
    margin:.5em 0 1.5em;
    border-bottom:0px dotted $bordercolor;
    padding-bottom:1.0em;
    height:50px;
    }
    .post h3 {
    margin:.25em 0 0;
    padding:0 0 4px;
    font-size:20px;
    font-family:Tahoma,Georgia,Century gothic,Arial,sans-serif;
    font-weight:normal;
    line-height:1.4em;
    color:#cc6600;
    }

    .post h3 a, .post h3 a:visited, .post h3 strong {
    display:block;
    text-decoration:none;
    color:#cc6600;
    font-weight:normal;
    }
    .post h3 strong, .post h3 a:hover {color:#333333;}
    .post-body {display:none;}
    .post-footer {display:none;}
    .comment-link {display:none;}
    .post img {display:none;}
    .post blockquote {display:none;}
    .post blockquote p {display:none;}
    h2.date-header {display:none;}
    .post-labels {display:none;}
    .post-rating {display:none;}
    </b:if>
</style>

والآن قم بحفظ القالب ..

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

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

<head>

3. ثم أضف فوقه مباشره هذا الكود

<meta HTTP-EQUIV='refresh' content='15;URL=http://droos-b.blogspot.com'/>

مع تغيير اسم droos-b باسم مدونتك
 4. قم بعمل حفظ للقالب
تم بحمد الله .. أي إستفسارات يرجى وضعها بالتعليقات

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

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

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

<dl id='comments-block'>

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

<dl id='comments-block'><script type='text/javascript'>var CommentsCounter=0;</script>

 ابحث عن هذا الكود

<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>

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

<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName' style='clear: both;'>

 و اخيرا ابحث عن هذا الكود

<data:commentPostedByMsg/>

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

<data:commentPostedByMsg/><span class='numberingcomments' style='float: right; font-size: 20px;'><a rel='nofollow' expr:href='data:comment.url' title='Comment Link' style='text-decoration:none'><script type='text/javascript'>CommentsCounter=CommentsCounter+1;document.write(CommentsCounter);</script></a></span>

في الكود اعلاه يمكنك تغيير right الى left لتحويل اتجاه الارقام .

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

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

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

]]></b:skin>

وقم باستبداله بهذا الكود

#navbar-iframe { display: none !important; }
]]></b:skin>

ثم اضغط حفظ .. ثم قم باستعراض القالب الخاص بك .

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

بسم الله الرحمن الرحيم والصلاة والسلام على أشرف المرسلين خاتم النبيين سيدنا محمد عليه أفضل الصلاة وأزكى التسليم , يهدف المدونون للحفاظ على الزوار وابقائهم في المدونة لأطول فترة ممكنة، ولكن الروابط الخارجية تمنعهم من ذلك، وقد يفقدهم الكثير من الزوار. فالمدونون يستخدمون الروابط في الـ  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>

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

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

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

شكل الإضافة

شرح تركيب الإضافة

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

]]></b:skin>

* ثم أضف قبله أو فوقه هذا الكود :

 /***** Author Box ********************/
    .author-box {
    background: #F7F7F7;
    margin: 20px 0 40px 0;
    padding: 10px;
    border: 1px solid #E6E6E6;
    overflow: auto;
    }

    .author-box p {
    margin: 0;
    padding: 0;
    }
    .author-box img {
    background: #FFFFFF;
    float: right;
    margin: 0 0 10px 10px;padding: 4px;
border: 1px solid #E6E6E6;
    }

* ثم قم بالبحث عن هذا الكود

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

الآن قم بحفظ القالب..

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

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

--» قبل تحرير القالب يجب حفظ نسخة احتياطية منه لاستعادتها عند الضرورة.
الخطوة الأولى: من باب " التخطيط" نختار "تحرير Html" و نوسع القالب عبر وضع علامة في المربع الصغير أعلا صندوق التحرير و نبحث عن

</head> 

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

<script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 500;
summary_img = 450;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script src='http://sites.google.com/site/simoxisite/Home/read-moreotomatis.js' type='text/javascript'/>

» شرح الألوان:
- الأحمر لتعديل طول مقتطف التدوينة التي لا تضم صورا.
- الأزرق لطول مقتطف التدوينات التي بها صور.
- الأخضر لتعديل أبعاد المصغرات ( الصور الصغيرة التي تبدو في الرئيسية ).
- البرتقالي هو رابط ملف الجافاسكريبت يمكن إعادة رفعه و تحرير رابطه.

الخطوة الثانية: نبحث ( Ctrl+F ) على 

<data:post.body/>

نحدده و نعوضه بهذا الكود :

<p><b:if cond='data:blog.pageType != &quot;item&quot;'> <div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div> <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> ...تابع القراءة</a></span> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if></p>

لجعل الصورة إلى جهة اليسار استبدل right ب left في الكود أعلاه .
و أخيرا احفظ القالب .

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