إضافة صور تدويناتك أوتوماتيكيا إلى محرك بحث جوجل بالوصف والعنوان

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

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

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

والآن نأتى للجزء العملى من الموضوع وهو كيفية تطبيق وإضافة الكود :

أولا : عليك بفتح تحرير HTML الخاص بقالب مدونتك ثم قم بتوسيع عناصر المستخدم كى يظهر لك كود المدونه كاملا.

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

</body>

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

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$('img').each(function(){
var $img = $(this);
var filename = $img.attr('src')
$img.attr('alt', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));
});
});
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$('img').each(function(){
var $img = $(this);
var filename = $img.attr('src')
$img.attr('title', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));
});
});
//]]>
</script>

وأخيرا قم بحفظ القالب وإستمتع بصورك فى محركات البحث بالوصف والكلمات المفتاحيه المناسبه والصحيحه.

التصنيفات : اسرار بلوجر,اضافات بلوجر,جلب الزوار,خدع بلوجر,نصائح التدوين

إضافة الإبتسامات Onion Emoticons على مدونات بلوجر

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

وهذه بعض الأمثلة :

 

ما عليك سوى تتبع المراحل الآتية :

1. قم بفتح المتصفح فاير فوكس ، فإن لم يكن لديك ، حمله من هنا
2. الآن سوف نقوم بتثبيت برنامج Grease monkey على فايرفوكس وذلك بالضغط على add toFirefox .

3.بعد أن ينتهي التحميل و التثبيت وافق على إعادة تشغيل الفايرفوكس,وسوف تظهر أيقونة رأس قرد فوق ساعة الكومبيوتر في الأسفل.


4.أما الآن يجب تثبيت الكود java script في البرنامج Grease monkey بالضغط هنا .

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

]]></b:skin>

ثم قم بلصق الكود التالي قبله :

img.emoticon {
padding: 0;
margin: 0;
border: 0;
}


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

إضافة أيقونات بجانب العناوين لتصنيف المواضيع حسب أقسام المدونة

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

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

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

<a expr:name='data:post.id'/>

<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>

</b:if>

قم بإضافة هذا الكود قبل الكود الأحمر

<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name == &quot;التسمية 1&quot;'>

<span class="icocat"><img src="1 رابط الأيقونة " alt="description"/></span>
</b:if>

<b:if cond='data:label.name == &quot;2 التسمية &quot;'>

<span class="icocat"><img src="2 رابط الأيقونة " alt="description"/></span>
</b:if>

<b:if cond='data:label.name == &quot;3 التسمية &quot;'>

<span class="icocat"><img src="3 رابط الأيقونة " alt="description"/></span>
</b:if>

<b:if cond='data:label.name == &quot;4 التسمية &quot;'>

<span class="icocat"><img src="4 رابط الأيقونة " alt="description"/></span>
</b:if>

</b:loop>

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

<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

ضع الكود هنا

ولا تنسى أن تقوم بتبديل التسميات ذات اللون الأحمر بتسميات مدونتك والروابط ذات اللون الأخضر بروابط الأيقونات حسب تصنيف التسميات لديك

ولإضافة تسميات أخرى ماعليك سوي إضافة مثل هذا الكود قبل

</b:loop>

<b:if cond='data:label.name == &quot;5 التسمية &quot;'>

<span class="icocat"><img src="5 رابط الأيقونة " alt="description"/></span>
</b:if>

ملاحظة : يمكنك إختيار الأيقونات ذات الأبعاد 30*30 أو 50*50

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

]]></b:skin>

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

.icocat img{padding: 0; float: right; border: none; margin: 0 10px 10px 0;}

أتمنى أن تكونوا قد إستفدتم من هذا الدرس ، ولأي إستفسار المرجوا ترك تعليقك

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

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

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

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

سوف نقوم بعمل أيقونات على هذا الشكل و تكون فوق صندوق التعليقات

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

قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F ).

<b:if cond='data:post.embedCommentForm'>

 ثم قم بلصق الكود التالي بعده :

<div style='background:#FFFFFF; border:2px solid #EDEDED; display:block; padding: 1px 1px 1px 1px; margin: 1px 3px 1px 3px;text-align: center; direction:ltr; color:#ccc;'><b><img border='0' height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger1.gif' width='30'/> :)<img border='0' height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger2.gif' width='30'/> =))<img border='0' height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger3.gif' width='30'/> :-T<img border='0' height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger4.gif' width='30'/> =((<img border='0' height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger5.gif' width='30'/> :-L<img border='0' height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger6.gif' width='30'/> b-(<img border='0' height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger7.gif' width='30'/> :)(<img border='0' height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger8.gif' width='30'/> ;))<img border='0' height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger9.gif' width='30'/> :(<img border='0' height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger10.gif' width='30'/> :x<img border='0' height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger11.gif' width='30'/> :z<img border='0' height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger12.gif' width='30'/> ;)<img border='0' height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger13.gif' width='30'/> :D<img border='0' height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger14.gif' width='30'/> :a<img border='0' height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger15.gif' width='30'/> :((<a href='http://wwww.leblogger.com' style='display:none;'>Blogger</a><img border='0' height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger16.gif' width='30'/> x(<img border='0' height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger17.gif' width='30'/> ;;)<img border='0' height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger18.gif' width='30'/> =)(<img border='0' height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger19.gif' width='30'/> :p<img border='0' height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger20.gif' width='30'/> :))<img border='0' height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger21.gif' width='30'/> :-o<img border='0' height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger22.gif' width='30'/> :-*<a href='http://www.leblogger.com/2009/11/onion-head-smileys-commentaire-messages.html' style='display:none;'>Blogger</a><img border='0' height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger23.gif' width='30'/> 8-)<a href='http://www.leblogger.com/2009/06/smiley-emoticone-commentaire-blogger.html' style='display:none;'>Smiley</a><img border='0' height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger24.gif' width='30'/> 8-(</b></div>

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

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

</body>

ثم قم بوضع الكود التالي قبله :

<script src='http://leblogger.googlecode.com/files/LeBloggerOnions30.js' type='text/javascript'/><noscript><a href="http://www.leblogger.com/2009/11/onion-head-smileys-commentaire-messages.html">Onion</a><a href="http://www.leblogger.com">blogspot</a></noscript>

وأخيرا قم بحفظ القالب  .

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

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

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

قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F ).

 <b:if cond='data:post.embedCommentForm'>

ثم قم بلصق الكود التالي بعده :

<div style='background:#F8F8FF; border:2px solid #F0F0F0; display:block; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;text-align:center; direction:ltr;  color:#FE6000;'><b>
<img border='0' height='50' src='https://sites.google.com/site/lightbox007/emoticon/64%2839%29.png' width='50'/> :))<a href='http://www.monte-escalier-prix.org' style='display:none;'>Blogger</a><img border='0' height='50' src='https://sites.google.com/site/lightbox007/emoticon/64%282%29.png' width='50'/> ;))
<img border='0' height='50' src='https://sites.google.com/site/lightbox007/emoticon/64%2828%29.png' width='50'/> ;;)
<img border='0' height='50' src='https://sites.google.com/site/lightbox007/emoticon/64%2813%29.png' width='50'/> :D<a href='http://www.monte-escalier-prix.org' style='display:none;'>Blogger</a><img border='0' height='50' src='https://sites.google.com/site/lightbox007/emoticon/64%2835%29.png' width='50'/> ;)
<img border='0' height='50' src='https://sites.google.com/site/lightbox007/emoticon/64%284%29.png' width='50'/> :p
<img border='0' height='50' src='https://sites.google.com/site/lightbox007/emoticon/64%2817%29.png' width='50'/> :((
<img border='0' height='50' src='https://sites.google.com/site/lightbox007/emoticon/64.png' width='50'/> :)
<img border='0' height='50' src='https://sites.google.com/site/lightbox007/emoticon/64%286%29.png' width='50'/> :(<a href='http://www.monte-escalier-prix.org' style='display:none;'>Smiley</a><img border='0' height='50' src='https://sites.google.com/site/lightbox007/emoticon/64%2814%29.png' width='50'/> =((
<img border='0' height='50' src='https://sites.google.com/site/lightbox007/emoticon/64%2824%29.png' width='50'/> =))<img border='0' height='50' src='https://sites.google.com/site/lightbox007/emoticon/64%2821%29.png' width='50'/> :-*<img border='0' height='50' src='https://sites.google.com/site/lightbox007/emoticon/64%2820%29.png' width='50'/> :x<img border='0' height='50' src='https://sites.google.com/site/lightbox007/emoticon/64%2819%29.png' width='50'/> b-(<img border='0' height='50' src=' https://sites.google.com/site/lightbox007/emoticon/64%281%29.png' width='50'/>:-t<img border='0' height='50' src=' https://sites.google.com/site/lightbox007/emoticon/64%2822%29.png' width='50'/>8-}</b></div> 

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

</body>

ثم قم بوضع الكود التالي قبله :

<script src='http://abu-iyad.googlecode.com/files/abuiyadSmiley.js.txt' type='text/javascript'/><noscript><a href='http://www.abu-iyad.com/2010/12/blogger-onion-head-smileys.html'>Onion</a><a href='http://www.monte-escalier-prix.org'>smiley</a></noscript>

وأخيرا قم بحفظ القالب  .

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

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

 قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F ).

<b:if cond='data:comment.adminClass == data:post.adminClass'>
<dd class='blog-author-comment'>

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

<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>

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

.blog-author-comment {

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

.comment-body-author {

 وأخيرا قم بحفظ القالب  .

أتمنى أن تعجبكم كلتا الطريقتين ،فلكم حرية الإختيار ،في إنتظار آرائكم وإقتراحاتكم ،دمتم بود 

التصنيفات : اسرار بلوجر,اضافات بلوجر,خدع بلوجر,سى إس إس CSS,قوالب بلوجر مدفوعه,قوالب بلوجر معربه,مواقع هامه,نصائح التدوين,اكواد ابتسامات,ابتسامات

إختبر سرعة مدونتك وقارنها بسرعة المدونات الأخرى مع هذا الموقع

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

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

قم بالذهاب إلى الموقع http://whichloadsfaster.com/ وإتبع الخطوات كما هو موضح بالصور :

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

التصنيفات : اسرار بلوجر,اضافات بلوجر,خدع بلوجر,سى إس إس CSS,قوالب بلوجر مدفوعه,قوالب بلوجر معربه,مواقع هامه,نصائح التدوين 

إضافة أداة "مواضيع جديدة" مع الصور على بلوجر

إضافة أداة "مواضيع جديدة" مع الصور على بلوجر 

بسم الله الرحمن الرحيم

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

انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ثم إضافة أداة ثم اختر HTML/Javascript
ولآن الصق الكود التالي :

<script src="http://sites.google.com/site/mohamedabuiyad/sitmapblogger/abuiyad.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--

#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:490px;
}
#spylist ul{
width:750px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:245px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:80px;
overflow: hidden;
background:#fff url(http://upload.wikimedia.org/wikipedia/commons/thumb/e/e3/Drapeau_blanc.svg/800px-Drapeau_blanc.svg.png) repeat-x;
border:1px solid #ddd;
}

#spylist li a {
text-decoration:none;
color:#004ED4;
font-size:17px;
height:60px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:right;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}

.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}

-->
</style>

<script language='javascript'>

imgr = new Array();

imgr[0] = "https://sites.google.com/site/lightbox007/photo/noimageblogger.jpg";

imgr[1] = "https://sites.google.com/site/lightbox007/photo/noimageblogger.jpg";

imgr[2] = "https://sites.google.com/site/lightbox007/photo/noimageblogger.jpg";

imgr[3] = "https://sites.google.com/site/lightbox007/photo/noimageblogger.jpg";

imgr[4] = "https://sites.google.com/site/lightbox007/photo/noimageblogger.jpg";
showRandomImg = true;

boxwidth = 500;

cellspacing = 3;

borderColor = "#232c35";

bgTD = "#000000";

thumbwidth = 70;

thumbheight = 70;

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "comments";

showPostDate = true;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 20;

home_page = "http://el-3almy.blogspot.com/";

limitspy=5
intervalspy=4000

</script>

<div id="spylist">
<script src='http://sites.google.com/site/mohamedabuiyad/sitmapblogger/recentpost-abuiyad-min.js' type='text/javascript'></script><script src='http://abuiyad.googlecode.com/svn/trunk/read-more-left.js' type='text/javascript'/><font size="0"><a href="http://www.monte-escalier-prix.org"></a></font>
</div>

والان الخطوة الأهم : يجب عليك تبديل عنوان المدونة باللون الأحمر بعنوان مدونتك .
numposts = 20; هذه القيمة تمثل عدد المواضيع التي يمكن تؤيتها .
والنتيجة النهائية تكون على هذا الشكل :

أتمنى أن تنال إعجابكم وأنتظر تشجيعاتكم

إضافة 3 أعمدة في الأسفل مدونة بلوجر

إضافة 3 أعمدة في الأسفل مدونة بلوجر

بسم الله الرحمن الرحيم

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





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

]]></b:skin>

ثم قم بلصق الكود التالي فوقه :

#footer-column-container {
clear:both;
}

.footer-column {
padding: 10px;
}

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

<div id='footer-wrapper'>

فإن لم تجده قم بالبحث عن كود يحتوي على كلمة footer-wrap, footer, footer-end أو ماشابهها .

ثم قم بإضافة الكود التالي بعده :

<div id='footer-column-container'>

<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>

<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>

<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>

<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>

<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>

<div style='clear:both;'/>

<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>

<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text2' locked='false' title='' type='Text'/>
</b:section>

</div>
<div style='clear:both;'/>

</div>



#footer-column-container {
clear:both;
}

.footer-column {
padding: 10px;
}

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

إضافة خاصية "إقرأ المزيد"وتلخيص التدوينات مع الصور مع إلغئها في الصفحات الثابتة

 إضافة خاصية "إقرأ المزيد"وتلخيص التدوينات مع الصور مع إلغئها في الصفحات الثابتة

بسم الله الرحمن الرحيم 

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

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

</head>

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

<script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 300; /* طول الملخص للمواضيع بدون صورة */
summary_img = 250; /* طول الملخص للمواضيع ذات صورة*/
img_thumb_height = 128; /* عرض الصورة في الملخص*/
img_thumb_width = 128; /*طول الصورة في الملخص */
</script>
<script src='http://abuiyad.googlecode.com/svn/trunk/read-more-left.js' type='text/javascript'/><font size="0"><a href="http://www.monte-escalier-prix.org"></a></font>

الصورة في يمين النص

<script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 300; /* طول الملخص للمواضيع بدون صورة */
summary_img = 250; /* طول الملخص للمواضيع ذات صورة*/
img_thumb_height = 128; /* عرض الصورة في الملخص*/
img_thumb_width = 128; /*طول الصورة في الملخص */
</script>
<script src='http://abuiyad.googlecode.com/svn/read-more-right.js' type='text/javascript'/><font size="0"><a href="http://www.monte-escalier-prix.org"></a></font>

وإذا رغبت في ظهور الصورة في الوسط قم بلصق الكود التالي :

<script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 300; /* طول الملخص للمواضيع بدون صورة */
summary_img = 250; /* طول الملخص للمواضيع ذات صورة*/
img_thumb_height = 128; /* عرض الصورة في الملخص*/
img_thumb_width = 128; /*طول الصورة في الملخص */
</script>
<script src='http://abuiyad.googlecode.com/svn/trunk/LireLaSuiteCentre0.js' type='text/javascript'/><font size="0"><a href="http://www.monte-escalier-prix.org"></a></font>

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

<data:post.body/>

ثم قم بإستبدالة بهذا الكود :

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><br/><data:post.body/>
<b:else/>
<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>
<a href='http://abu-iyad.blogspot.com/2010/07/read-more-for-blogger.html' style='display:none;'>Résumé</a><a href='http://abu-iyad.blogspot.com' style='display:none;'>abuiyad</a> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
</b:if><font size="0"><a href="http://www.monte-escalier-prix.org"></a></font>

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

وذلك بإستبدال عبارة إقرأ المزيد.. بالكود التالي :

<img src="https://sites.google.com/site/lightbox007/photo/readmore.jpg" title="إقرأ المزيد" alt="إقرأ المزيد"/>

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

إضافة أزرار صدى Google Buzz في مدونات بلوجر

إضافة أزرار صدى Google Buzz في مدونات بلوجر 

بسم الله الرحمن الرحيم

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

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

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

والآن قم بإختيار أحد الأكواد التالية حسب رغبتك في نوعية الزر,ثم قم بإضافة أحد الأكواد بعده

فإن لم تجده قم بالبحث عن هذا الكود ،فإن وجدت منه إثنين فالتاني هو المقصود 

  <data:post.body/>

ثم قم بإضافة أحد الأكواد التالية  قبله
إذا كنت تريد مكان الزر أسفل التدوينة  قم بإضافة أحد الأكواد بعده
1- الزر + العداد مع إضهار  المشاركات في الأعلى :

<a title="نشر على نبضات Google" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="normal-count" data-locale="ar"></a>
<script type="text/javascript" src="http://www.google.com/buzz/api/button.js"></script>

2 - الزر + العداد مع إضهار المشاركات في على الجانب :

<a title="نشر على نبضات Google" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="small-count" data-locale="ar"></a>
<script type="text/javascript" src="http://www.google.com/buzz/api/button.js"></script>

3-الزر فقط بالحجم العادي :

<a title="نشر على نبضات Google" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="normal-button" data-locale="ar"></a>
<script type="text/javascript" src="http://www.google.com/buzz/api/button.js"></script>

4- الزر فقط بالحجم صغير :

<a title="نشر على نبضات Google" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="small-button" data-locale="ar"></a>
<script type="text/javascript" src="http://www.google.com/buzz/api/button.js"></script>

5-الزر عبارة على رابط :

<a title="نشر على نبضات Google" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="link" data-locale="ar"></a>
<script type="text/javascript" src="http://www.google.com/buzz/api/button.js"></script>

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

إضافة زر تويتر إلى مدونات بلوجر

إضافة زر تويتر إلى مدونات بلوجر 

بسم الله الرحمن الرحيم

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

إضافة صندوق إشترك فى خدمة رسائل مدونة بلوجر

إضافة صندوق إشترك فى خدمة رسائل مدونة بلوجر

بسم الله الرحمن الرحيم

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

وقبل تطبيق هذه الإضافة يجب عليك التوفر على :

1. رابط تغذية خلاصةRSS
2. رابط الاشتراك فى القائمة البريدية فى حسابك بالفيدبرنر Feedburner
   
3. رابط حسابك على تويتر Twitter
   
4. رابط حسابك على فيسبوك Facebook
   

انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ثم إضافة أداة ثم اختر HTML/Javascript
ولآن الصق الكود التالي :

<!-- Email subsciption box -->
<form id="subscribe" action="http://feedburner.google.com/fb/a/mailverify?uri=feedburner/simo" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=feedburner/simo', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><b style="color: rgb(102, 51, 255);">إذا أعجبتك مدونتي</b> وتريد التوصل بكل المواضيع الجديدة ،كن السبّاق وقم بإدخال بريدك الإلكتروني و إنتظر الجديد

<div style="text-align: center;">
<input autocomplete="off" value="" id="subbox" onfocus="if (this.value == &#39;ضع بريدك الالكتروني هنا...&#39;) {this.value = &#39;&#39;;}" onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter your email address...&#39;;}" name="email" style="width: 200px; background-repeat: no-repeat ! important; background-image: url(&quot;chrome://sxipper/skin/images/field_icon_R.png&quot;) ! important; background-position: right center ! important; padding-left: 0px ! important;" type="text" />
<input value="simo" name="uri" type="hidden" />
<input name="loc" value="en_US" type="hidden" />
<input value="إشترك الآن" id="subbutton" type="submit" />
</div>

<div>
<center>
<table>
<tbody><tr>
<td>
<a href="http://feeds.feedburner.com/feedburner/simo"><img src="http://feeds.feedburner.com/%7Efc/sma-b%20?bg=99CCFF&amp;fg=111111&amp;anim=1" style="border: 0pt none;" alt="" height="26" width="88" /></a>
</td><td>
<script type="text/javascript" language="JavaScript" src="http://twittercounter.com/embed/Abuiyad007/ffffff/111111"></script>
</td>
</tr>
</tbody></table></center>
</div>

<div style="padding-left: 10px;">
<table>
<tbody><tr><td>
<a href="http://feeds.feedburner.com/feedburner/simo%20" target="_blank" title="اشترك في اخر التدوينات"><img style="float: left; margin-right: 5px; width: 20px; height: 20px;" src="http://cocorico.com/wp-content/themes/FrenchCulture/images/rss2.gif" /></a><a href="http://feeds.feedburner.com/feedburner/simo?format=xml%20" target="_blank" title="اشترك في اخر التدوينات">اشترك عبر RSS Feed</a>
</td></tr>

<a href="http://www.facebook.com/pages/mdwnt-abw-ayad/129817460386636" target="_blank" title="Facebook "><img style="float: left; margin-right: 5px; width: 70px; height:70px;" src="http://www.aeropassion.net/blog/dc-sites/leblog/public/News_Jedicut/Facebook_128.png" /></a>

<a href="http://www.facebook.com/pages/mdwnt-abw-ayad/129817460386636" target="_blank" title="Facebook ">تواصل عبر facebook</a>

<tr><td>

<a href="http://twitter.com/Abuiyad007" target="_blank" title="Twitter time"><img style="float: left; margin-right: 5px; width: 70px; height: 70px;" src="http://www.annuaire-tourisme-evasion.com/themes/GlobalGlobes/images/twitter.png" /></a><a href="http://twitter.com/Abuiyad007" target="_blank" title="Twitter "> اتبعني عبر Twitter</a>

</td></tr>
</tbody></table></div>
<!-- /Email subsciption box --></form>

لا تنسى تبديل ما باللون الأحمر بإسم حسابك على RSS ,twitter,Facebook,Feedburner
أتمنى أن تنال إعجابكم ولأي إستفسار أنا رهن الإشارة
أنتظر تشجيعاتكم

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

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

بسم الله الرحمن الرحيم

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

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

]]></b:skin>

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

.comment-bubble { float : left; width : 48px; height : 48px; background : url(http://www.yasour.org/images/comment.jpg) no-repeat; font-size : 18px; margin-top : -15px; margin-right : 2px; text-align : center; padding:0px 0px 0px 0px; /*for more hacks : http://www.monte-escalier-prix.org/ */ }

الآن قم بالبحث على هذا الكود ثم أضف ما لون باللون الأحمر :

<b:includable id='post' var='post'>
<div class='post hentry uncustomized-post-template'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'><b:if cond='data:post.allowComments'>
<a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a>
</b:if>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

أتمنى أن تنال إعجابكم في إنتظار تشجيعاتكم

إضافة شريط الصور المتحركة لتدوينات بلوجر

إضافة شريط الصور المتحركة لتدوينات بلوجر 

بسم الله الرحمن الرحيم

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

المعاينة

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

]]></b:skin>

ثم ضع الكود التالي فوقه :

#myslides{

background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu54kWqkQiVbO6r5bdf_cp58XrVLtfxCAHPz0W12xFq9yHvkpFTZtOVo0DhlJ8Lv3g_Tz9nhUm-HyjxLDAv4l7K6cpF0ISgKlQmeZH0-pM3pVcbQbYvjDjWD_vvXuFq_BaJwXAk6BBMg/s1600/mslid.jpg) repeat-x;
width: 650px;
height:165px;
margin-bottom:5px;
}

.stepcarousel{
position: relative; /*leave this value alone*/
overflow: scroll; /*leave this value alone*/
width: 554px; /*Width of Carousel Viewer itself*/
height: 160px; /*Height should enough to fit largest content's height*/
margin: 0px 48px 5px 48px;

}

.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}

.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 20px 10px ; /*margin around each panel*/
width:170px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
background:#0e1829;
height:120px;
border:1px solid #1d2c44;

}
.stepcarousel .panel p{
text-align: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 5px 5px ; /*margin around each panel*/

}

.stepcarousel .panel h2{
text-align: left; /*leave this value alone*/
height:20px;
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 2px 5px ; /*margin around each panel*/
font-size:16px;
font-weight:bold;
text-align:center;
font-family:Georgia,century gothic,Arial,verdana, sans-serif;
}

.stepcarousel .panel img{
float: left; /*leave this value alone*/
background:#0E1829; /*clip content that go outside dimensions of holding panel DIV*/
margin: 5px 5px 5px 5px; /*margin around each panel*/
padding:0px 0px;
}

لتغير الخلفية،قم بتغير الرابط باللون الاحمر حسب رغبتك
والآن قم بالبحث عن الكود التالي:

</head>

ثم ضع الكود التالي فوقه :

<!-- JavaScript Slider -->
<script src='http://sites.google.com/site/mohamedabuiyad/slid-move1/abu-iyad.js' type='text/javascript'/>
<script src='http://sites.google.com/site/mohamedabuiyad/slid-move1/abu-iyad2.js' type='text/javascript'/>

<!-- End JavaScript Slider -->
<script type='text/javascript'>
stepcarousel.setup({
galleryid: &#39;mygallery&#39;, //id of carousel DIV
beltclass: &#39;belt&#39;, //class of inner &quot;belt&quot; DIV containing all the panel DIVs
panelclass: &#39;panel&#39;, //class of panel DIVs each holding content
panelbehavior: {speed:1500, wraparound:true, persist:true},
autostep: {enable:true, moveby:1, pause:1000},
defaultbuttons: {enable: true, moveby: 4, leftnav: [&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2KuoYusWYikaGWFF4xY712o-RPHSlZs_NcnhUZe9oY4JsLQ4yYtOzwFY1JMqPdzPodum0zWq9d5pfU3z4p0qkb36BH2bWVRiZ7VFcVrM7XjoVQcG4bM-x6NHrnnBva7ZXDWl6AfFQsgc/s400/left.jpg&#39;, -48, 0], rightnav: [&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGKJQVBT3KE1qwjCcyK3tFVVxFvmMHfTGS6EIxaqnZkyy6GKuPgPBnEaP2EqEUS67_v1Sw1rLjUvDvhnPq-dcXqP9kwbLraj0bbcwDaONwJDJxyN3Mxo7ceEUhkVwsOMEbvdi42RZwquE/s400/right.jpg&#39;, 0, 0]},
statusvars: [&#39;statusA&#39;, &#39;statusB&#39;, &#39;statusC&#39;], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: [&#39;external&#39;] //content setting [&#39;inline&#39;] or [&#39;external&#39;, &#39;path_to_external_file&#39;]

})

</script>

الروابط ذات اللون الاحمر تمثل صورة السهم الى اليسار و اليمين
Speed:1500 : سرعة تحرك الصور
moveby:1 : عدد الصور التي يتخطاها عند تحرك الصور
هذه القيم يمكنك تغييرها حسب رغبتك
قم بحفظ القالب ثم انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ثم إضافة أداة ثم اختر HTML/Javascript
ولآن الصق الكود التالي :

<div id="myslides">
<div id="mygallery" class="stepcarousel">
<div class="belt">

<!-- 1st Template -->
<div class="panel">
<a href="http://abu-iyad.blogspot.com/search/label/%D9%86%D8%B5%D8%A7%D8%A6%D8%AD%20%D9%84%D9%84%D9%85%D8%B3%D8%AA%D9%87%D9%84%D9%83?&max-results=5" target="blank" title="Two Column Denim Template"> <img width="160" alt="Two Column Denim Template" src="http://pics.imagup.com/ano1/1278000007.png" height="110" /> </a>
</div>
<!-- end code of 1st -->

<!-- 2nd Template -->
<div class="panel">
<a href="http://abu-iyad.blogspot.com/search/label/%D9%83%D9%8A%D9%81%20%D8%AA%D8%B5%D9%86%D8%B9?&max-results=5" target="blank" title="Simple Blog Writing Template"> <img width="160" alt="Simple Blog Writing Template" src="http://pics.imagup.com/ano1/1278001914.png" height="110" /> </a>
</div>
<!-- end code of 2nd -->

<!-- 3th Template -->
<div class="panel">
<a href="http://abu-iyad.blogspot.com/search/label/%D8%A5%D8%B6%D8%A7%D9%81%D8%A7%D8%AA%20%D8%A8%D9%84%D9%88%D8%AC%D8%B1?&max-results=5" target="blank" title="Lenomag Blogger Template"> <img width="160" alt="Lenomag Blogger Template" src="http://pics.imagup.com/ano1/1278001116.jpg" height="110" /> </a>
</div>
<!-- end code of 3th -->

<!-- 4th Template -->
<div class="panel">
<a href="http://abu-iyad.blogspot.com/search/label/%D8%BA%D8%B1%D8%A7%D8%A6%D8%A8%20%D9%88%20%D8%B9%D8%AC%D8%A7%D8%A6%D8%A8?&max-results=5" target="blank" title="Money Blogger Template"> <img width="160" alt="Money Blogger Template" src="http://pics.imagup.com/ano1/1278001691.png" height="110" /> </a>
</div>
<!-- end code of 4th -->

<!--5th Template -->
<div class="panel">
<a href="http://abu-iyad.blogspot.com/search/label/%D8%BA%D8%B1%D8%A7%D8%A6%D8%A8%20%D9%88%20%D8%B9%D8%AC%D8%A7%D8%A6%D8%A8?&max-results=5" target="blank" title="Digital Statement Blogger Template"> <img width="160" alt="Digital Statement Blogger Template" src="http://pics.imagup.com/ano1/1278002070.jpg" height="110" /> </a>
</div>
<!-- end code of 5th -->

<!--6th Template -->
<div class="panel">
<a href="http://abu-iyad.blogspot.com/search/label/%D8%A7%D9%84%D8%B1%D8%A8%D8%AD%20%D9%85%D9%86%20%D8%A7%D9%84%D8%A5%D9%86%D8%AA%D8%B1%D9%86%D8%AA?&max-results=5" target="blank" title="Orkut Theme Blogger Template"> <img width="160" alt="Orkut Theme Blogger Template" src="http://pics.imagup.com/ano1/1278002754.png" height="110" /> </a>
</div>
<!-- end code of 6th -->

<!--7th Template -->
<div class="panel">
<a href="http://abu-iyad.blogspot.com/search/label/%D8%A5%D8%B6%D8%A7%D9%81%D8%A7%D8%AA%20%D8%A8%D9%84%D9%88%D8%AC%D8%B1?&max-results=5" target="blank" title="Orkut Theme Blogger Template"> <img width="160" alt="Orkut Theme Blogger Template" src="http://pics.imagup.com/ano1/1278003649.png" height="110" /> </a>
</div>
<!-- end code of 7th -->

<!--8th Template -->
<div class="panel">
<a href="http://abu-iyad.blogspot.com/search/label/%D8%A7%D9%84%D8%AA%D8%BA%D8%B0%D9%8A%D8%A9%20%D9%88%D8%A7%D9%84%D8%B5%D8%AD%D8%A9?&max-results=5" target="blank" title="Orkut Theme Blogger Template"> <img width="160" alt="Orkut Theme Blogger Template" src="http://pics.imagup.com/ano1/1278003860.png" height="110" /> </a>
</div>
<!-- end code of 8th -->

<!--9th Template -->
<div class="panel">
<a href="http://abu-iyad.blogspot.com" target="blank" title="Orkut Theme Blogger Template"> <img width="160" alt="Orkut Theme Blogger Template" src="http://pics.imagup.com/ano1/1278004864.png" height="110" /> </a>
</div>
<!-- end code of 9th -->

<!--10th Template -->
<div class="panel">
<a href="http://abu-iyad.blogspot.com" target="blank" title="Orkut Theme Blogger Template"> <img width="160" alt="Orkut Theme Blogger Template" src="http://pics.imagup.com/ano1/1278094671.png" height="110" /> </a>
</div>
<!-- end code of10th -->

<!--11th Template -->
<div class="panel">
<a href="http://abu-iyad.blogspot.com" target="blank" title="Orkut Theme Blogger Template"> <img width="160" alt="Orkut Theme Blogger Template" src="http://pics.imagup.com/ano1/1278094825.png" height="110" /> </a>
</div>
<!-- end code of11th -->

<!--12th Template -->
<div class="panel">
<a href="http://abu-iyad.blogspot.com/search/label/%D8%A7%D9%84%D8%A3%D8%AB%D8%A7%D8%AB%20%D9%88%D8%A7%D9%84%D8%AF%D9%8A%D9%83%D9%88%D8%B1?&max-results=5" target="blank" title="Orkut Theme Blogger Template"> <img width="160" alt="Orkut Theme Blogger Template" src="http://pics.imagup.com/ano1/1278095024.png" height="110" /> </a>
</div>

<!-- end code of 12th -->

</div></div></div>

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

كيفية فهرسة مواضيع المدونة

كيفية فهرسة مواضيع المدونة

بسم الله الرحمن الرحيم

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

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

<div dir="rtl" style="text-align: right;">
</div><script style="" src="http://sites.google.com/site/mohamedabuiyad/sitmapblogger/sitmapabuiyad.js"></script>
<script src="http://abu-iyad.blogspot.com/feeds/posts/summary?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>

ملاحظة : لكي لا تظهر لك هذه الصفحة على "الصفحة الرئيسية" قم بالتغير تاريخ الصفحة بآخر قديم ثم الغاء ظهور التعليقات كما هو موضح في الصورة اسفله

.

إضافة زر الطباعة لمدونات بلوجر

إضافة زر الطباعة لمدونات بلوجر

بسم الله الرحمن الرحيم

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

إذا وجدت 2 من هذا الكود فالثاني هو المقصود

<data:post.body/>

ثم قم بإستبداله بأحد هذه الأكواد:

<span class='noprint'><data:post.body/></span>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<a href='javascript:window.print()'><img src='http://jnnh.net/images/print.jpg'/></a>
</b:if>

<span class='noprint'><data:post.body/></span>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<a href='javascript:window.print()'><img src='http://hantoor.com/images/print.png'/></a>
</b:if>

<span class='noprint'><data:post.body/></span>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<a href='javascript:window.print()'><img src='http://www.alphastat.org/images/shared/printer.gif'/></a>
</b:if>

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

إضافة أزرار المفضلات الاجتماعية أسفل التدوينات في بلوجر

 إضافة أزرار المفضلات الاجتماعية أسفل التدوينات في بلوجر

بسم الله الرحمن الرحيم

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

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

قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F ).
تذكير:لا تنسى أخي المدون أن تأخد نسخة إحتياطية لمدونتك تجنبا لأي أخطاء.

</head>

ثم ضع الكود التالي فوقه :

<style type='text/css'>
div.sexy-bookmarks {
height:54px;
background:url(&#39;https://sites.google.com/site/lightbox007/photo/youlikethisarticle.png&#39;) no-repeat left bottom;
position:relative;
width:540px;
}

div.sexy-bookmarks span.sexy-rightside {
width:17px;
height:54px;
background:url(&#39;https://sites.google.com/site/lightbox007/photo/sharingblogger.png&#39;) no-repeat right bottom;
position:absolute;
right:-17px;
}

div.sexy-bookmarks ul.socials {
margin:0 !important;
padding:0 !important;
position:absolute;
bottom:0;
left:10px;
}

div.sexy-bookmarks ul.socials li {
display:inline-block !important;
float:left !important;
list-style-type:none !important;
margin:0 !important;
height:29px !important;
width:48px !important;
cursor:pointer !important;
padding:0 !important;
}

div.sexy-bookmarks ul.socials a {
display:block !important;
width:48px !important;
height:29px !important;
font-size:0 !important;
color:transparent !important;

}

.sexy-furl, .sexy-furl:hover, .sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumble, .sexy-stumble:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoo, .sexy-yahoo:hover, .sexy-blinklist, .sexy-blinklist:hover, .sexy-technorati, .sexy-technorati:hover, .sexy-facebook, .sexy-facebook:hover, .sexy-twitter, .sexy-twitter:hover, .sexy-myspace, .sexy-myspace:hover, .sexy-mixx, .sexy-mixx:hover, .sexy-script-style, .sexy-script-style:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-syndicate, .sexy-syndicate:hover, .sexy-email, .sexy-email:hover {
background:url(&#39;https://sites.google.com/site/lightbox007/photo/bookmark2.png%27&#39;) no-repeat !important;
}

.sexy-furl {
background-position:-300px top !important;
}
.sexy-furl:hover {
background-position:-300px bottom !important;
}
.sexy-digg {
background-position:-500px top !important;
}
.sexy-digg:hover {
background-position:-500px bottom !important;
}
.sexy-reddit {
background-position:-100px top !important;
}
.sexy-reddit:hover {
background-position:-100px bottom !important;
}
.sexy-stumble {
background-position:-50px top !important;
}
.sexy-stumble:hover {
background-position:-50px bottom !important;
}
.sexy-delicious {
background-position:left top !important;
}
.sexy-delicious:hover {
background-position:left bottom !important;
}
.sexy-yahoo {
background-position:-650px top !important;
}
.sexy-yahoo:hover {
background-position:-650px bottom !important;
}
.sexy-blinklist {
background-position:-600px top !important;
}
.sexy-blinklist:hover {
background-position:-600px bottom !important;
}
.sexy-technorati {
background-position:-700px top !important;
}
.sexy-technorati:hover {
background-position:-700px bottom !important;
}
.sexy-myspace {
background-position:-200px top !important;
}
.sexy-myspace:hover {
background-position:-200px bottom !important;
}
.sexy-twitter {
background-position:-350px top !important;
}
.sexy-twitter:hover {
background-position:-350px bottom !important;
}
.sexy-facebook {
background-position:-450px top !important;
}
.sexy-facebook:hover {
background-position:-450px bottom !important;
}
.sexy-mixx {
background-position:-250px top !important;
}
.sexy-mixx:hover {
background-position:-250px bottom !important;
}
.sexy-script-style {
background-position:-400px top !important;
}
.sexy-script-style:hover {
background-position:-400px bottom !important;
}
.sexy-designfloat {
background-position:-550px top !important;
}
.sexy-designfloat:hover {
background-position:-550px bottom !important;
}
.sexy-syndicate {
background-position:-150px top !important;
}
.sexy-syndicate:hover {
background-position:-150px bottom !important;
}
.sexy-email {
background-position:-753px top !important;
}
.sexy-email:hover {
background-position:-753px bottom !important;
}

</style>

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

<data:post.body/>

ثم قم بوضع الكود التالي بعده :

<!--SexySharing abu-iyad--><b:if cond='data:blog.pageType == &quot;item&quot;'><div class='sexy-bookmarks sexy-bookmarks-expand sexy-bookmarks-bg-love' style='margin:20px 0 0 0 !important; padding:25px 0 0 10px !important; height:29px;/*the height of the icons (29px)*/ display:block !important; clear:both !important;'> <ul class='socials'>

<li class='sexy-delicious'><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='sexy-digg'><a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-technorati'><a expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-reddit'><a expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-stumble'><a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-designfloat'><a expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-facebook'><a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-twitter'><a expr:href='&quot; http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-furl'><a expr:href='&quot; http://www.furl.net/storeIt.jsp?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-syndicate'><a href='أضف رابط خلاصات الخاص بك هنا ' title='Subscribe to RSS'/></li>

<li class='sexy-email'><a expr:href='&quot; mailto:?subject=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

</ul>
<span class='sexy-rightside'/></div>

<div class='sexy-link'> Distributed by <a href='http://abu-iyad.blogspot.com' title='أبو إياد'>Abu-Iyad</a>
</div></b:if>

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