tag:blogger.com,1999:blog-31717712702676586522024-02-28T15:44:17.196-08:00مدونة المحررون العربمدونة المحررين العرب مدونة تهتم بطرق تحسين المواقع والمدونات واضافة الملحقات الهامة لها وطرق الربح من الانترنت والربح بواسطة موقعك ،دروس بلوجر ، هاكات مدونات بلوجر ، اضافات بلوجر، اشهار وتصميم المواقع والربح من جوجل ادسينس .وتسويق الكتب الالكترونية والمنتجات الاخرى ،،،خالد محمد (ابوخلود)http://www.blogger.com/profile/17023136577166291717noreply@blogger.comBlogger84125tag:blogger.com,1999:blog-3171771270267658652.post-30736388303925902632012-02-23T11:40:00.001-08:002012-02-23T11:48:30.192-08:00كيف تفصل بين مواضيع مدونتك في الصفحة الرئيسية بطريقة انيقة وجذابة ؟<div dir="rtl" style="text-align: right;" trbidi="on">
<div dir="rtl" style="text-align: right;" trbidi="on">
<div style="text-align: justify;">
بسم الله الرحمن الرحيم والصلاة والسلام على اشرف الخلق محمد بن عبدالله الصادق الامين .اخوتي الاعزاء زوارمدونة المحررون العرب اهلا وسهلا بكم . اليوم نبداء بدرس جديد قد يبحث عنة الكثير من المدونيين عن كيفية اضافة صورة تفصل بين مواضيع او مقالات مدونتك الظاهرة في الصفحة الرئيسية بشكل انيق وجذاب يتناسب مع الوان مدونتك ، هذه الاضافة تعطي المدونة شكل جميل ومميز وتجعل كل زائر يدخل على مدونتك انه يميز بين كل مواضيعها المنشورة في الصفحة الرئيسية. والصورة التالية توضح الفكرة اكثر : </div>
<div style="text-align: justify;">
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGgBH_zz0_6OlaBQCvm0lTVvMPZj0yTsuL9dgWR6IaxG3B0GMG_HflajWlNreXmpK6fEMDQCM24FWkdm6sryammnA2pBIhumyMZ_vTZ31SGJw12zKmrpFb5Rd_2IiVK9PR64wfUZJlFps/s1600/%D8%B7%D8%B1%D9%8A%D9%82%D8%A9-%D8%A7%D8%B6%D8%A7%D9%81%D8%A9-%D9%81%D8%A7%D8%B5%D9%84-%D8%A8%D9%8A%D9%86-%D9%85%D9%88%D8%A7%D8%B6%D9%8A%D8%B9-%D8%A7%D9%84%D9%85%D8%AF%D9%88%D9%86%D8%A9.GIF" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="طريقة اضافة صورة تفصل مواضيع مدونتك في الصفحة الرئيسية" border="0" height="392" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGgBH_zz0_6OlaBQCvm0lTVvMPZj0yTsuL9dgWR6IaxG3B0GMG_HflajWlNreXmpK6fEMDQCM24FWkdm6sryammnA2pBIhumyMZ_vTZ31SGJw12zKmrpFb5Rd_2IiVK9PR64wfUZJlFps/s400/%D8%B7%D8%B1%D9%8A%D9%82%D8%A9-%D8%A7%D8%B6%D8%A7%D9%81%D8%A9-%D9%81%D8%A7%D8%B5%D9%84-%D8%A8%D9%8A%D9%86-%D9%85%D9%88%D8%A7%D8%B6%D9%8A%D8%B9-%D8%A7%D9%84%D9%85%D8%AF%D9%88%D9%86%D8%A9.GIF" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="color: red;">انقر على الصورة للتكبير</span></td></tr>
</tbody></table>
<br />
<u><span style="color: red;">طريقة رفع الصور في موقع العملاق : </span></u><br />
<br />
<div style="text-align: justify;">
طبعا يا شباب هذا الرابط http://siahdesign.com/archives/210 لموقع فيه عدة صور جميلة بامكانك ان تختار واحدة منهم ثم انقر بالزر الايمن على الصورة ثم اختر ( حفظ باسم ) واحفظها مثلا في سطح المكتب ، ثم انتقل الى موقع رفع الصور <span style="color: blue;">العملاق</span> على الرابط التالي : http://www.0zz0.com/ ولمعرفة طريقة رفع الصور في موقع العملاق لاحظ الصورة التالية :</div>
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiexhF1WiFj_M-eJDpl2qchuKbLxNJePG9ZKqPTMgpW0dz_NwAobFanq3ytK86-OqXOPaouy72pHl7SSBo2bvCFktTwWcbVEkNkoPjrcmxCy2ZxikYB9TFsGX9jADHkqp_aDEdkBTEFpK4/s1600/%D8%B7%D8%B1%D9%8A%D9%82%D8%A9-%D9%88%D8%B6%D8%B9-%D9%81%D8%A7%D8%B5%D9%84-%D8%A8%D9%8A%D9%86-%D9%85%D9%88%D8%A7%D8%B6%D9%8A%D8%B9-%D8%A7%D9%84%D8%B5%D9%81%D8%AD%D8%A9-%D8%A7%D9%84%D8%B1%D8%A6%D9%8A%D8%B3%D9%8A%D8%A9.GIF" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="طريقة اضافة صورة تفصل مواضيع مدونتك في الصفحة الرئيسية" border="0" height="327" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiexhF1WiFj_M-eJDpl2qchuKbLxNJePG9ZKqPTMgpW0dz_NwAobFanq3ytK86-OqXOPaouy72pHl7SSBo2bvCFktTwWcbVEkNkoPjrcmxCy2ZxikYB9TFsGX9jADHkqp_aDEdkBTEFpK4/s400/%D8%B7%D8%B1%D9%8A%D9%82%D8%A9-%D9%88%D8%B6%D8%B9-%D9%81%D8%A7%D8%B5%D9%84-%D8%A8%D9%8A%D9%86-%D9%85%D9%88%D8%A7%D8%B6%D9%8A%D8%B9-%D8%A7%D9%84%D8%B5%D9%81%D8%AD%D8%A9-%D8%A7%D9%84%D8%B1%D8%A6%D9%8A%D8%B3%D9%8A%D8%A9.GIF" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">اضغط على الصورة للتكبر</td></tr>
</tbody></table>
<br />
<span style="color: red;">والان دعونا نبدا بخطوات :</span><span style="color: blue;"> طريقة اضافة صورة فاصلة بين المواضيع لمدونات بلوجر : </span><br />
<br />
<span style="color: red;">1 -</span> ادخل على <span style="color: blue;">لوحة تحكم مدونتك</span> .<br />
<br />
<span style="color: red;">2 -</span> ثم انقر على<span style="color: blue;"> قالب</span> - ثم<span style="color: blue;"> تحرير HTML</span> - ثم <span style="color: blue;">متابعة</span> .<br />
<br />
<span style="color: red;">3 -</span> ابحث عن هذا<span style="color: blue;"> الكود</span> ( <span style="color: blue;"> </span><span style="color: red;">.post { </span> ) باستخدام مفتاح (<span style="color: blue;"> CTRL+F</span> ) .<br />
<br />
<span style="color: red;">4 -</span> ثم قم بوضع <span style="color: blue;">الكود التالي</span> بداخله قبل القوس <span style="color: blue;">}</span> :<br />
<br />
<div id="code">
background: url(<span style="color: red;">http://www6.0zz0.com/2012/02/23/15/427618559.jpg</span>);<br />
background-repeat: no-repeat;<br />
background-position: bottom center;<br />
margin:.5em 0 1.5em;<br />
padding-bottom:2.5em;</div>
</div>
<div style="text-align: justify;">
<span style="color: red;">* اللون الاحمر : </span>رابط الصورة الفاصلة بين المواضيع . بامكانك ان تختار صورة اخرى تتناسب مع لون مدونتك ثم تقوم برفعها في اي موقع لرفع الصور مثلاً موقع http://www.0zz0.com ثم ضع رابط صورتك مكان الرابط باللون الاحمر في الكود اعلاه . </div>
<div style="text-align: justify;">
<span style="color: blue;">لاحظ الصورة التالية توضح كيف واين تضع الكود في قالب المدونة :</span></div>
<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-J3gTjMe7J00J_ER_9kIDRd1RjUYcrY6OmSbQSglOouOBVNdzNt5_IYAo-pyHM7WsqTSdQ4nd_PIvVVB1SJGXoLYZGEaRaCAfCgmRkPcDlAALNqSmS3lHdd0jMT-qCFtQxnHqSnCzJ8A/s1600/%D8%B7%D8%B1%D9%8A%D9%82%D8%A9-%D8%A7%D9%84%D9%81%D8%B5%D9%84-%D8%A8%D9%8A%D9%86-%D8%A7%D9%84%D9%85%D9%88%D8%A7%D8%B6%D9%8A%D8%B9-%D8%A8%D8%B5%D9%88%D8%B1%D8%A9.GIF" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="طريقة اضافة صورة تفصل مواضيع مدونتك في الصفحة الرئيسية" border="0" height="341" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-J3gTjMe7J00J_ER_9kIDRd1RjUYcrY6OmSbQSglOouOBVNdzNt5_IYAo-pyHM7WsqTSdQ4nd_PIvVVB1SJGXoLYZGEaRaCAfCgmRkPcDlAALNqSmS3lHdd0jMT-qCFtQxnHqSnCzJ8A/s400/%D8%B7%D8%B1%D9%8A%D9%82%D8%A9-%D8%A7%D9%84%D9%81%D8%B5%D9%84-%D8%A8%D9%8A%D9%86-%D8%A7%D9%84%D9%85%D9%88%D8%A7%D8%B6%D9%8A%D8%B9-%D8%A8%D8%B5%D9%88%D8%B1%D8%A9.GIF" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><br /></td></tr>
</tbody></table>
<br />
<br />
<span style="color: red;">5 -</span> قم <span style="color: blue;">بمعاينة القالب</span> ثم اعمل <span style="color: blue;">حفظ</span> . وحظا سعيدا ،،،<br />
<br />
<span style="text-align: justify;"> اذا استمتعت بقراءة الدرس اعلاة قم </span><a href="http://feedburner.google.com/fb/a/mailverify?uri=blogspot/kzZS&loc=en_US" style="text-align: justify;">بالاشتراك عبر بريدك الالكتروني</a><span style="text-align: justify;"> ليصلك تحديثات المدونة من دروس مفيدة وحصرية لمدونات بلوجر كما يمكنك ان تتصفح </span><a href="http://arab-editors.blogspot.com/2009/11/blog-post_3851.html" style="text-align: justify;" target="_blank">فهرس المدونة</a><span style="text-align: justify;"> للحصول على المزيد من المواضيع الاساسية التي قد تناسب مدونتك . والصلاة والسلام على رسول لله ....... </span><span style="color: red; text-align: justify;">واي سؤال او استفسار نرجو التعليق</span><span style="text-align: justify;"> ،،، </span>
</div>خالد محمد (ابوخلود)http://www.blogger.com/profile/17023136577166291717noreply@blogger.com36tag:blogger.com,1999:blog-3171771270267658652.post-41219632087598953702012-02-21T11:57:00.003-08:002012-02-22T13:08:30.641-08:00كيف تعمل قائمة - مواضيع ذات صلة او مواضيع مشابهة - اسفل كل موضوع او مقالة في مدونتك او موقعك؟<div dir="rtl" style="text-align: right;" trbidi="on">
<div dir="rtl" style="text-align: right;" trbidi="on">
<div dir="rtl" style="text-align: right;" trbidi="on">
<div dir="rtl" style="text-align: right;" trbidi="on">
<div dir="rtl" style="text-align: right;" trbidi="on">
<div style="text-align: justify;">
بسم الله الرحمن الرحيم اخوتي الكرام السلام عليكم ورحمة الله وبركاتة اليوم نبداء بموضوع جديد في مدونتنا عن كيفية وضع او عمل قائمة ( مواضيع ذات صلة او مقالات مشابهة او مواضيع ذات علاقة ( سمها ما تشاء ) تحت كل موضوع او مقالة في مدونة بلوجر . طبعا قائمة مواضيع ذات صلة من خصائصها انها تعرض المواضيع المشابهة للموضوع الذي تتصفحة الان وايظا من نفس قسم الموضوع هذا ، ولها فوائد عظيمة وهي تجعل زوار مدونتك ان يبقو لفترة طويلة في تصفح مدونتك اي زيادة في مشاهدة صفحات المدونة وهناك توجد طرق كثيرة واشكال مختلفة لهذه الاضافة منها على شكل قائمة اسفل المقال تعرض عناوين المواضيع المشابهة كما في مدونتي تجدها اسفل كل موضوع ،ومنها ايظا على شكل قائمة بعناوين المواضيع مع صور مصغرة لكل لموضوع بشكل افقي . <span style="text-align: right;">ولكن في درسنا هذا سنتطرق لشرح طريقة تركيب قائمة مواضيع ذات صلة كما في الصورة التالية :</span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTcZPCRnzliJSogNvg9BF_XoZmHDtI4XVS4awFrixkVJo-dWzD1YjsTnY9RE5uPMJPAeYZrLDWyE0fALbUUFTQPwQm-_A98Wb6l7DKZ0T3l3r_KHCefJZmGQ8T5eIK4QRjy2hlQ9zbLf0/s1600/%D8%B7%D8%B1%D9%8A%D9%82%D8%A9-%D8%A7%D8%B6%D8%A7%D9%81%D8%A9-%D9%82%D8%A7%D8%A6%D9%85%D8%A9-%D9%85%D9%88%D8%A7%D8%B6%D9%8A%D8%B9-%D8%B0%D8%A7%D8%AA-%D8%B5%D9%84%D8%A9.GIF" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTcZPCRnzliJSogNvg9BF_XoZmHDtI4XVS4awFrixkVJo-dWzD1YjsTnY9RE5uPMJPAeYZrLDWyE0fALbUUFTQPwQm-_A98Wb6l7DKZ0T3l3r_KHCefJZmGQ8T5eIK4QRjy2hlQ9zbLf0/s1600/%D8%B7%D8%B1%D9%8A%D9%82%D8%A9-%D8%A7%D8%B6%D8%A7%D9%81%D8%A9-%D9%82%D8%A7%D8%A6%D9%85%D8%A9-%D9%85%D9%88%D8%A7%D8%B6%D9%8A%D8%B9-%D8%B0%D8%A7%D8%AA-%D8%B5%D9%84%D8%A9.GIF" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div style="text-align: justify;">
<div style="text-align: justify;">
<span style="text-align: right;"><span style="color: red;"><u>* ملاحظة :</u> </span> لكن قبل ان نبدا بخطوات تركيب هذه الاضافة تذكر انك عامل اقسام لمدونتك اي كل المواضيع المنشورة في مدونتك موزعة في اقسام ( اقسام المدونة ) ولمعرفة التفاصيل عن <a href="http://arab-editors.blogspot.com/2009/10/blog-post_20.html" target="_blank">كيفية عمل او انشاء اقسام لمدونتك </a> قم بزيارة الدرس هذا ،،،،</span></div>
</div>
<div style="text-align: justify;">
<div style="text-align: justify;">
<span style="text-align: right;">واي موقع او مدونة لا يوجد بها اقسام فالطريقة هذا غير صالحة لها .... </span></div>
</div>
<div style="text-align: justify;">
<div style="text-align: justify;">
<span style="text-align: right;"><br /></span></div>
</div>
<span style="color: blue;">والان اسحمولي بشرح خطوات : كيفية اضافة او وضع مواضيع ذات صلة في مدونة بلوجر ؟ </span><br />
<br />
<span style="color: red;">1 -</span> اذهب الى<span style="color: blue;"> لوحة تحكم</span> المدونة .<br />
<span style="color: red;">2 -</span> من لوحة تحكم مدونتك اختر <span style="color: blue;">قالب </span>- ثم <span style="color: blue;">تحرير HTML</span> - ثم <span style="color: blue;">متابعة</span> . ( لا تنسى <a href="http://arab-editors.blogspot.com/2010/01/blog-post.html" target="_blank">حفظ نسخة احتياطية لقالب مدونتك</a> من اي خطاء قد يقع )<br />
<span style="color: red;">3 -</span> قم <span style="color: blue;">بتوسيع قوالب عناصر واجهة المستخدم</span> اي بوضع علامة صح في المربع .<br />
<br />
<span style="color: red;">4 - </span>ابحث عن<span style="color: blue;"> الكود التالي</span> باستخدام<span style="color: blue;"> مفتاح ( CTRL+F )</span> :<br />
<div id="code">
</head></div>
</div>
<span style="color: red;">5 -</span> قم بنسخ<span style="color: blue;"> الكود التالي</span> ثم ضعه او<span style="color: blue;"> انسخة فوق كود خطوة4</span> .<br />
<br />
<div id="code">
<br />
<!--RelatedPostsStarts--><br />
<style><br />
#related-posts {<br />
float : left;<br />
width : 540px;<br />
margin-top:20px;<br />
margin-left : 5px;<br />
margin-bottom:20px;<br />
font : 11px Verdana;<br />
margin-bottom:10px;<br />
}<br />
#related-posts .widget {<br />
list-style-type : none;<br />
margin : 5px 0 5px 0;<br />
padding : 0;<br />
}<br />
#related-posts .widget h2, #related-posts h2 {<br />
color : #940f04;<br />
font-size : 20px;<br />
font-weight : normal;<br />
margin : 5px 7px 0;<br />
padding : 0 0 5px;<br />
}<br />
#related-posts a {<br />
color : #054474;<br />
font-size : 11px;<br />
text-decoration : none;<br />
}<br />
#related-posts a:hover {<br />
color : #054474;<br />
text-decoration : none;<br />
}<br />
#related-posts ul {<br />
border : medium none;<br />
margin : 10px;<br />
padding : 0;<br />
}<br />
#related-posts ul li {<br />
display : block;<br />
background : url(&quot;http://www.gigaimage.com/images/brrl1rtaziisu0yj6kj6.gif&quot;) no-repeat 0 0;<br />
margin : 0;<br />
padding-top : 0;<br />
padding-right : 0;<br />
padding-bottom : 1px;<br />
padding-left : 16px;<br />
margin-bottom : 5px;<br />
line-height : 2em;<br />
border-bottom:1px dotted #cccccc;<br />
}<br />
<br />
</style><br />
<script src='http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/relatedposts_forblogger.js' type='text/javascript'/><!--RelatedPostsStops--></div>
</div>
<span style="color: red;">6 -</span> ابحث عن<span style="color: blue;"> الكود التالي</span> في مدونتك بواسطة المفتاح ( CTRL+F ) :
<br />
<div id="code">
<br />
<data:post.body/></div>
</div>
<span style="color: red;">7 -</span> قم بنسخ<span style="color: blue;"> الكود التالي</span> ثم الصقة بعد <span style="color: blue;">كود خطوة رقم6</span> :
<br />
<div id="code">
<br />
<!--RELATED-POSTS-STARTS--><b:if cond='data:blog.pageType == &quot;item&quot;'><br />
<div id='related-posts'><br />
<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;'><br />
<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><br />
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();<br />
</script></div></b:if><!--RELATED-POSTS-STOPS--></div>
</div>
<span style="color: red;"><br /></span><br />
<span style="color: red;">8 -</span> قم بعمل <span style="color: blue;">حفظ للقالب</span> . ومبرووووك ،،،،<br />
<br />
<span style="color: red;"><u>ملاحظة مهمة :</u></span> قد تجد كود خطوة رقم 6 ( <data:post.body/> ) مكرر مرتين ، قم بوضع كود خطوة رقم7 بعد كود خطوة 6 المكررالثاني . كما هو موضح في الصورة التالي ( كود خطوة رقم 7 بعد كود خطوة رقم6 الذي باللون الاصفر ) :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhACniMu4wDo6LoIKmrSm5_KXcYnJG-Gyf6QUzGGdLRl6p0zmo8nYa-9wmsqNeB3kjpQ4wEUgkksQAJFQzPfZ7zy0GndRYI_Ed1mq048YoFxUt4oeToihathWiCPbt1YkdX7jXIldnZ7_E/s1600/%D9%83%D9%8A%D9%81-%D8%AA%D8%B8%D9%8A%D9%81-%D9%85%D9%88%D8%A7%D8%B6%D9%8A%D8%B9-%D8%B0%D8%A7%D8%AA-%D8%B5%D9%84%D8%A9.GIF" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="185" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhACniMu4wDo6LoIKmrSm5_KXcYnJG-Gyf6QUzGGdLRl6p0zmo8nYa-9wmsqNeB3kjpQ4wEUgkksQAJFQzPfZ7zy0GndRYI_Ed1mq048YoFxUt4oeToihathWiCPbt1YkdX7jXIldnZ7_E/s400/%D9%83%D9%8A%D9%81-%D8%AA%D8%B8%D9%8A%D9%81-%D9%85%D9%88%D8%A7%D8%B6%D9%8A%D8%B9-%D8%B0%D8%A7%D8%AA-%D8%B5%D9%84%D8%A9.GIF" width="400" /></a></div>
<br />
<span style="text-align: justify;"><br /></span><br />
<span style="text-align: justify;"> اذا استمتعت بقراءة الدرس اعلاة قم </span><a href="http://feedburner.google.com/fb/a/mailverify?uri=blogspot/kzZS&loc=en_US" style="text-align: justify;">بالاشتراك عبر بريدك الالكتروني</a><span style="text-align: justify;"> ليصلك تحديثات المدونة من دروس مفيدة وحصرية لمدونات بلوجر كما يمكنك ان تتصفح </span><a href="http://arab-editors.blogspot.com/2009/11/blog-post_3851.html" style="text-align: justify;" target="_blank">فهرس المدونة</a><span style="text-align: justify;"> للحصول على المزيد من المواضيع الاساسية التي قد تناسب مدونتك . والصلاة والسلام على رسول لله ....... </span><span style="color: red; text-align: justify;">واي سؤال او استفسار نرجو التعليق</span><span style="text-align: justify;"> ،،، </span></div>خالد محمد (ابوخلود)http://www.blogger.com/profile/17023136577166291717noreply@blogger.com20tag:blogger.com,1999:blog-3171771270267658652.post-7429138504495578762012-02-12T11:46:00.000-08:002012-02-13T10:54:02.756-08:00كيف تظيف صندوق اعجاب الفيسبوك في مدونتك بشكل انيق ؟<div dir="rtl" style="text-align: right;" trbidi="on">
<div dir="rtl" style="text-align: right;" trbidi="on">
<div dir="rtl" style="text-align: right;" trbidi="on">
<div style="text-align: justify;">
اهلا وسهلا بكم زوار مدونة المحررون العرب اليوم نبدا بدرس جديد عن كيفية اضافة صندوق اعجاب الفيسبوك في المدونة بشكل ممتاز وجذاب في نفس الوقت . لماذا تحتاج الى وضع صندوق اعجاب للفيسبوك في مدونتك؟ لان هناك ملايين من الناس يستخدمون الفيسبوك كل يوم اما عن طريقة الكمبيوتر او الموبايل سوى كانو في وقت فراغهم او في وقت عملهم ، ولهذا تجد الكثير من مشرفي المواقع و المدونات يستفيدون من هذه الخدمة لما لها من منافع كبيرة في الاشهار. <br />
فاذا كنت صاحب موقع او مدونة متخصصة مثلا في مجال تجاري تعرض سلع ومنتجات لشركة ما ، وتريد ان تشهرها بقدر المستطاع فعليك اولا التركيز على شبكة الفيسبوك الاجتماعية ، وقد يبادر في ذهنك السؤال التالي : ولماذا اهتم بموقع الفيسبوك وبما ان فيه ناس احيانا يتحدوث في الواقع عن اشياء تتعلق بحياتهم الشخطية ؟ اقولك بسؤالك هذا انت على خطاء لان الفيسبوك يعتبر في حد ذاتة ارض او دولة كبيرة و عظيمة عدد سكانها كبير جدا ويتزايد مع الوقت ، ومن دون ان تنفق سنت واحد يمكنك ان تروج وتسوق لمنتجاتك وبضائعك من موقعك او مدونتك من خلال هذا الشبكة الاجتماعية العملاقة الفيسبوك ( Facebook ) وان من اعظم الطرق شعبية واكثرها شيوعاً هو ان تنشاء صفحة اعجاب على الفيسبوك لمدونتك اوموقعك وتجعل الزوار يعجبون بها وذلك للحصول على زوار كثير معجبين بصفحتك على الفيسبوك .<br />
<br /></div>
<div style="text-align: justify;">
ماهي الفائدة من جعل الاخرين معجبين بصفحتي على الفيسبوك ؟</div>
<div style="text-align: justify;">
هناك فائدة عظيمة ، وانت تعرف الادمان على الفيسبوك . كثير من الناس يدخلون على حساباتهم على الفيسبوك ليشاهدو اخر الاخبار والمواضيع من على حائط صفحاتهم . وان اي شخص يعجب بموضوع ما بصفحتك على الفيسبوك يظهر هذا الموضوع مباشرة على حائط صفحتة ويشاهدة الاصدقاء المضافون لديه و ايظاً اصدقاء الاصدقاء وهكذا ... مما يؤدي لجعل صفحتك ومدونتك لها شعبية وزيارات كثيرة وسمعة كبيرة ... اليست هذه الاضافة مدهشة نوعاً ما ؟</div>
<div style="text-align: justify;">
اذاً لانشاء صفحة لمدونتك على الفيسبوك ليس بالامر المعقد ، وانا قد ذكرت ذلك في درس سابق عن كيفية انشاء صفحة على الفيسبوك و <a href="http://arab-editors.blogspot.com/2012/01/blog-post_20.html" target="_blank">كيف تربط مواضيع مدونتك او موقعك على الفيسبوك</a> ؟ ربط المدونة بالفيسبوك . لمزيد من التفاصيل قم بزيارة الصفحة . والصورة التالية توضح صندوق اعجاب الفيسبوك ،،، وسامحوني واعذروني اذا طولت عليكم في المقدمة . </div>
<div style="text-align: justify;">
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3xz8V2T9bmwb4Et1L5o3kg2XHbxKo_923bRY4_BwvaPiiBrIpWRnFqkSB73qZaFg05CwRyM2d1aJOw1Ko12W1c9Lk312GBXgy-T0taLNJ4YSaX7iUqJEWCFHIAZ3nJVpXB7xw3I51oAI/s1600/%D8%B5%D9%86%D8%AF%D9%88%D9%82-%D8%A7%D8%B9%D8%AC%D8%A7%D8%A8-%D8%A7%D9%84%D9%81%D9%8A%D8%B3%D8%A8%D9%88%D9%83.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="كيف تظيف صندوق اعجاب الفيسبوك بشكل انيق" border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3xz8V2T9bmwb4Et1L5o3kg2XHbxKo_923bRY4_BwvaPiiBrIpWRnFqkSB73qZaFg05CwRyM2d1aJOw1Ko12W1c9Lk312GBXgy-T0taLNJ4YSaX7iUqJEWCFHIAZ3nJVpXB7xw3I51oAI/s400/%D8%B5%D9%86%D8%AF%D9%88%D9%82-%D8%A7%D8%B9%D8%AC%D8%A7%D8%A8-%D8%A7%D9%84%D9%81%D9%8A%D8%B3%D8%A8%D9%88%D9%83.png" width="353" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="color: blue;"><b>مثال : صندوق اعجاب الفيسبوك</b></span></td></tr>
</tbody></table>
<br />
<br />
<div style="text-align: justify;">
والان دعونا نبداء بخطوات :<span style="color: red;"> كيفية وضع صندوق اعجاب في المدونة ؟</span><br />
<br />
<br /></div>
<span style="color: red;">1 -</span> ادخل على <span style="color: blue;">لوحة تحكم المدونة</span> .<br />
<br />
<span style="color: red;">2 -</span> ومن<span style="color: blue;"> لوحة تحكم المدونة</span> انقر على - <span style="color: blue;">قالب </span>- <span style="color: blue;">ثم تحرير HTML</span> - و من ثم <span style="color: blue;">متابعة</span> .<br />
<br />
<span style="color: red;">3 -</span> ضع علامة صح في <span style="color: blue;">مربع توسيع قوالب عناصر واجهة المستخدم </span>.<br />
<br />
<span style="color: red;">4 -</span> قم بالبحث باستخدام المفتاح ( Ctrl + F ) عن الكود التالي :<br />
<div id="code">
]]></b:skin></div>
</div>
<span style="color: red;"><br /></span><br />
<span style="color: red;">5 -</span> ثم قم بلصق الكود التالي فوقة مباشرة :<br />
<br />
<div id="code">
/* ------ Custom Like Box ----- */ .fan_box a:hover{ text-decoration: none; } .fan_box .full_widget{ height: 200px; border: 0 !important; background: none !important; position: relative; } .fan_box .connect_top{ background: none !important; padding: 0 !important; } .fan_box .profileimage, .fan_box .name_block{ display: none; } .fan_box .connect_action{ padding: 0 !important; } .fan_box .connections{ padding: 4px !important; margin:3px 0px 5px 0px!important; border: 0 !important; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; color: #666; } span.total{ color: #365899; font-weight: bold; background:#ECEEF5; padding:4px !important; margin:3px 0px 5px 0px!important; border:1px solid #E1E4ED; -moz-border-radius:3px; -webkit-border-radius:3px; } span.total:hover{ border:1px solid #6383C1; } .fan_box .connections .connections_grid { padding-top: 10px !important; } .fan_box .connections_grid .grid_item{ padding: 0 10px 10px 0 !important; } .fan_box .connections_grid .grid_item .name{ font-family: "lucida grande",tahoma,verdana,arial,sans-serif; font-weight: normal; color: #<span style="color: red;">289728</span> !important; padding-top: 1px !important; } .fan_box .connect_widget{ position: absolute; bottom: 0; left: 0px; margin: 0 !important; } .fan_box .connect_widget .connect_widget_interactive_area { margin: 0 !important; } .fan_box .connect_widget td.connect_widget_vertical_center { padding: 0 !important; } /*--------------- Custom Like Box End--------------*/<br />
<div>
<br /></div>
</div>
</div>
* ملاحظة : في حالة اذا اردت ان تغير لون اسم البروفايل من اللون الاخضر الى لون آخر قم بتغيير الرقم الذي باللون الاحمر في الكود = <span style="color: red;">289728</span> .<br />
<br />
<span style="color: red;">6 -</span> من قائمة<span style="color: blue;"> التخطيط </span>قم بالنقر على <span style="color: blue;">اضافة اداة</span> الموجودة في العمود الجانبي (<span style="color: blue;"> السايد بار</span> ) مثلا ، ثم من <span style="color: blue;">قائمة الادوات</span> اختر<span style="color: blue;"> اداة HTML / Java Script </span> .<br />
<br />
<span style="color: red;">7 -</span> قم بنسخ الكود التالي باستخدام مفتاح ( Ctrl + F ) ولصقة في <span style="color: blue;">اداة HTML / Java Script </span> .<br />
<br />
<div id="code">
<style> #mbtlikebox{ color: #365899; font: bold 11px arial; background:#ECEEF5; padding:3px !important; margin:5px 0px!important; border:1px solid #E1E4ED; -moz-border-radius:3px; -webkit-border-radius:3px; width:290px; } #mbtlikebox:hover{ border:1px solid #6383C1; } </style> <script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US"></script> <script type="text/javascript">FB.init("");</script> <fb:fan profile_id="<span style="color: red;">128605887189860</span>" stream="0" connections="8" <span style="color: blue;">width="300</span>px"<span style="color: orange;"> height="200px</span>" header="0" logobar="0" css="https://sites.google.com/site/3alymni/css/3.css"></fb:fan> <div id="mbtlikebox"><a rel="nofollow" target="_blank" style="text-decoration:none; color:#365899;" href="<span style="color: magenta;">http://arab-editors.blogspot.com/</span>">Visit the Like Page »</a></div><br />
<div>
</div>
</div>
<span style="color: red;"><br /></span><br />
<span style="color: red;">* اللون الاحمر :</span> هو رقم ID الخاص بصفحتك على الفيسبوك قم باستبدالة برقم ID صفحتك . لاحظ الصورة التالية :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5H40UN4Xd_gt_FuV0NmcTbT4S9f7L2NTam3WH8DnW4yPA0m7v6KVzXCxDD2Ft_ZKOJ50x0YIBbeGgfydw-jA47zsdCiab5HD27RRvmMXGJt-Ww2y_MkgNBVqz6iQFkOuIp0AK0i0Htl8/s1600/%D8%B5%D9%86%D8%AF%D9%88%D9%82+%D8%A7%D8%B9%D8%AC%D8%A7%D8%A8+%D8%A7%D9%84%D9%81%D9%8A%D8%B3%D8%A8%D9%88%D9%83.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="ككيف تعمل صندوق اعجاب الفيسبوك في المدونة" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5H40UN4Xd_gt_FuV0NmcTbT4S9f7L2NTam3WH8DnW4yPA0m7v6KVzXCxDD2Ft_ZKOJ50x0YIBbeGgfydw-jA47zsdCiab5HD27RRvmMXGJt-Ww2y_MkgNBVqz6iQFkOuIp0AK0i0Htl8/s1600/%D8%B5%D9%86%D8%AF%D9%88%D9%82+%D8%A7%D8%B9%D8%AC%D8%A7%D8%A8+%D8%A7%D9%84%D9%81%D9%8A%D8%B3%D8%A8%D9%88%D9%83.png" /></a></div>
<br />
<span style="color: blue;">* اللون الازرق : </span>هو عبارة عن عرض صندوق الفيسبوك قم بتغيره ليتناسب مع مدونتك . <br />
<span style="color: orange;">* اللون البرتقالي : </span>عبارة عن ارتفاع صندوق الفيسبوك بامكانك تغييرة كما تشاء .<br />
<span style="color: magenta;">* اللون الوردي : </span> ظروري .... قم باستبدالة برابط مدونتك او موقعك .<br />
<span style="color: red;"><br /></span><br />
<span style="color: red;">8 -</span> واخير قم بعمل <span style="color: blue;">حفظ للاداة</span> ومبرووووووك على الاظافة الجديدة .<br />
<br />
<span style="text-align: justify;"> اذا استمتعت بقراءة الدرس اعلاة قم </span><a href="http://feedburner.google.com/fb/a/mailverify?uri=blogspot/kzZS&loc=en_US" style="text-align: justify;">بالاشتراك عبر بريدك الالكتروني</a><span style="text-align: justify;"> ليصلك تحديثات المدونة من دروس مفيدة وحصرية لمدونات بلوجر كما يمكنك ان تتصفح </span><a href="http://arab-editors.blogspot.com/2009/11/blog-post_3851.html" style="text-align: justify;" target="_blank">فهرس المدونة</a><span style="text-align: justify;"> للحصول على المزيد من المواضيع الاساسية التي قد تناسب مدونتك . والصلاة والسلام على رسول لله ....... </span><span style="color: red; text-align: justify;">واي سؤال او استفسار نرجو التعليق</span><span style="text-align: justify;"> ،،، </span>
<br />
<br /></div>خالد محمد (ابوخلود)http://www.blogger.com/profile/17023136577166291717noreply@blogger.com19tag:blogger.com,1999:blog-3171771270267658652.post-14711845082851871172012-02-05T10:39:00.000-08:002012-02-05T10:39:10.003-08:00كيف تنسق محاذاة مواضيع المدونة في الصفحة الرئيسية ؟<div dir="rtl" style="text-align: right;" trbidi="on">
<div dir="rtl" style="text-align: right;" trbidi="on">
<div dir="rtl" style="text-align: right;" trbidi="on">
<div dir="rtl" style="text-align: right;" trbidi="on">
<div dir="rtl" style="text-align: right;" trbidi="on">
<div style="text-align: justify;">
بسم الله الرحمن الرحيم والصلاة والسلام على رسولنا الكريم ، اخوتي الكرام زوار مدونة المحررون العرب ، السلام عليكم ورحمة الله وبركاتة . اليوم نبداء بدرس جديد عن كيفية تنسيق محاذاة مواضيع الصفحة الريئسية لمدونة بلوجر ؟ طبعاً هل شاهدتم يوما ان نص مواضيع مدونتكم وخصوصا في الصفحة الرئيسية مبعثرة غير منسقة ؟ هل تريدو ان تقوموا بتنسق محاذاة نص تدوينات الصفحة الرئيسية لتظهر بشكل جيد ومنظم وجذاب ؟ هناك الكثير من المدونات تستعرض عدد من المواضيع في الصفحة الرئيسية اي جزء من المقال متبوع بخاصية ( اقراء المزيد ) مثل مدونة المحررون العرب ، لذا لا توجد في بلوجر اداة او خاصية لتنسيق محاذاة نص مواضيع الصفحة الرئيسية مثل برنامج مايكروسوفت وورد . ( طبعا توجد في بلوجر خاصية محاذاة النصوص في صندوق تحرير الرسائل وهذا الخاصية للمقال بالكامل طبعا انا لا اقصدها بل اقصد كيفية محاذاة مجموع المواضيع الظاهرة في الصفحة الرئيسية ) لاحظ الصور التالية توضح الفكرة اكثرة ركزو شوية :</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span style="color: red;"><u>قبل تنسيق المحاذاة </u></span></div>
<div style="text-align: justify;">
<br /></div>
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvfkkP2VK00-2PETcMtwnYnRK8kL8phrl2z3ACK1JEUkUmYRU8GjEGlsclSeEimWKtAyErt77MqiTGia9aveQ_PCF9oZf363_nEGHnIQRWf8O1UUuKOooAF6wiUAepqXsJ8hWhrPqEaBk/s1600/%D9%83%D9%8A%D9%81-%D8%AA%D9%86%D8%B3%D9%82-%D9%85%D8%AD%D8%A7%D8%B0%D8%A7%D8%A9-%D8%A7%D9%84%D9%86%D8%B5%D9%88%D8%B5-%D9%81%D9%8A-%D8%A8%D9%84%D9%88%D8%AC%D8%B1.GIF" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img alt="كيف تنسق محاذاة نصوص الصفحة الرئيسية لمدونات بلوجر" border="0" height="311" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvfkkP2VK00-2PETcMtwnYnRK8kL8phrl2z3ACK1JEUkUmYRU8GjEGlsclSeEimWKtAyErt77MqiTGia9aveQ_PCF9oZf363_nEGHnIQRWf8O1UUuKOooAF6wiUAepqXsJ8hWhrPqEaBk/s400/%D9%83%D9%8A%D9%81-%D8%AA%D9%86%D8%B3%D9%82-%D9%85%D8%AD%D8%A7%D8%B0%D8%A7%D8%A9-%D8%A7%D9%84%D9%86%D8%B5%D9%88%D8%B5-%D9%81%D9%8A-%D8%A8%D9%84%D9%88%D8%AC%D8%B1.GIF" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="color: red;">الصورة قبل تنسيق المحاذاة</span></td></tr>
</tbody></table>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: right;">
<span style="color: red;"><u>بعد تنسيق المحاذاة </u></span></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib-ZDUmo8zw8Te8REU2TtGXuKtWfkgMtCKMYtehrJL2-Or10jW4OM1vz13Ggw9d6wtsrRSBA-t4h46_QYHJcoSsiGC8FnHs1Fpcte5asYIWnKmNYF6B7BN_9iZHdF12pgOYsPclbTsNVw/s1600/%D9%83%D9%8A%D9%81-%D8%AA%D9%86%D8%B3%D9%82-%D9%85%D8%AD%D8%A7%D8%B0%D8%A7%D8%A9-%D9%83%D8%AA%D8%A7%D8%A8%D8%A9-%D9%81%D9%8A-%D8%A8%D9%84%D9%88%D8%AC%D8%B1.GIF" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img alt="كيف تنسق محاذاة مواضيع الصفحة الرئيسية لمدونة بلوجر" border="0" height="341" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib-ZDUmo8zw8Te8REU2TtGXuKtWfkgMtCKMYtehrJL2-Or10jW4OM1vz13Ggw9d6wtsrRSBA-t4h46_QYHJcoSsiGC8FnHs1Fpcte5asYIWnKmNYF6B7BN_9iZHdF12pgOYsPclbTsNVw/s400/%D9%83%D9%8A%D9%81-%D8%AA%D9%86%D8%B3%D9%82-%D9%85%D8%AD%D8%A7%D8%B0%D8%A7%D8%A9-%D9%83%D8%AA%D8%A7%D8%A8%D8%A9-%D9%81%D9%8A-%D8%A8%D9%84%D9%88%D8%AC%D8%B1.GIF" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="color: red;">الصورة بعد تنسيق المحاذاة</span></td></tr>
</tbody></table>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br /></div>
<span style="color: blue;"><br /></span><br />
<span style="color: blue;">اذاً بعد مشاهدة الصور اعلاة وتوضيح الفكرة دعونا نبداء بشرح الخطوات : </span></div>
<br />
<b><span style="color: red;">1 -</span></b> ادخل على <span style="color: blue;">لوحة تحكم المدونة</span> .<br />
<br />
<b><span style="color: red;">2 -</span></b> ومن لوحة التحكم قم باختيار :<span style="color: blue;"> قالب</span> -<span style="color: blue;"> تحرير HTML</span> - <span style="color: blue;">متابعة</span> . ( <a href="http://arab-editors.blogspot.com/2010/01/blog-post.html" target="_blank"><span style="color: red;">بعد قيامك بحفظ نسخة احتياطية لقالب مدونتك</span> </a>)<br />
<br />
<span style="color: red;"><b>3 -</b></span> ضع علامة صح في مربع <span style="color: blue;">توسيع قوالب عناصر واجهة المستخدم</span> .<br />
<br />
<b><span style="color: red;">4 -</span></b> قم بالبحث عن الكود التالي <span style="color: red;">.post </span> باستخدام مفتاح ( Ctrl+F ) :<br />
<br />
<div id="code">
<span style="color: red;">.post {</span><br />
margin:.5em 0 1.5em;<br />
border-bottom:1px dotted $bordercolor;<br />
padding-bottom:1.5em;<br />
}</div>
</div>
<span style="color: red;">ملاحظة :</span> غالباً الكود الافتراضي في المدونة يكون كما هو موضح في الصورة التالية :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsbReNGH3AsQuYcmNFuWqQB1SZby55Q9Us61x5uLVOAKHSOIBS2d_fC6eh5HNFqii6TqczvNbmpqQRxFujtGle5Uy3TtGiRo0s2P7LqrnXB4b5gM3CDukQ9g-ODhv8PsMf0zrT7S-8TWo/s1600/%D9%83%D9%88%D8%AF-%D8%AA%D9%86%D8%B3%D9%8A%D9%82-%D9%85%D8%AD%D8%A7%D8%B0%D8%A7%D8%A9-%D8%A7%D9%84%D9%86%D8%B5-%D9%81%D9%8A-%D8%A7%D9%84%D9%85%D8%AF%D9%88%D9%86%D8%A9.GIF" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsbReNGH3AsQuYcmNFuWqQB1SZby55Q9Us61x5uLVOAKHSOIBS2d_fC6eh5HNFqii6TqczvNbmpqQRxFujtGle5Uy3TtGiRo0s2P7LqrnXB4b5gM3CDukQ9g-ODhv8PsMf0zrT7S-8TWo/s320/%D9%83%D9%88%D8%AF-%D8%AA%D9%86%D8%B3%D9%8A%D9%82-%D9%85%D8%AD%D8%A7%D8%B0%D8%A7%D8%A9-%D8%A7%D9%84%D9%86%D8%B5-%D9%81%D9%8A-%D8%A7%D9%84%D9%85%D8%AF%D9%88%D9%86%D8%A9.GIF" width="310" /></a></div>
<br />
<span style="color: red;"><b><br /></b></span><br />
<span style="color: red;"><b>5 -</b></span> قم بنسخ الكود التالي ولصقة في الاخير قبل القوس :<br />
<div id="code">
<span style="color: blue;">text-align:justify;</span></div>
</div>
ليصبح الكود كالتالي :
<br />
<div id="code">
.post {<br />
margin:.5em 0 1.5em;<br />
border-bottom:1px dotted $bordercolor;<br />
padding-bottom:1.5em;<br />
<span style="color: blue;">text-align:justify;</span><br />
}</div>
</div>
<span style="color: red;">ملاحظة :</span> باختصار انسخ الكود الاخير هذا مباشرة وقم بلصقة في مدونتك بالكامل بين القوسين اي استبدلة مكان الكود الافتراضي الموجود في الصورة اعلاة ، بس انتبه تكرر القوسين .<br />
<br />
<b><span style="color: red;">6-</span></b> ثم قم <span style="color: blue;">بمعاينة</span> الصفحة للتاكد ثم اعمل<span style="color: blue;"> حفظ</span> . ومبروووووووك عليك وحظاً سعيداً ،،<br />
<br />
<div style="text-align: justify;">
واخيرا اذا استمتعت بقراءة الدرس اعلاة قم <a href="http://feedburner.google.com/fb/a/mailverify?uri=blogspot/kzZS&loc=en_US">بالاشتراك عبر بريدك الالكتروني</a> ليصلك تحديثات المدونة من دروس مفيدة وحصرية لمدونات بلوجر كما يمكنك ان تتصفح <a href="http://arab-editors.blogspot.com/2009/11/blog-post_3851.html" target="_blank">فهرس المدونة</a> للحصول على المزيد من المواضيع الاساسية التي قد تناسب مدونتك . والصلاة والسلام على رسول لله ....... <span style="color: red;">واي سؤال او استفسار نرجو التعليق</span> ،،، </div>
</div>خالد محمد (ابوخلود)http://www.blogger.com/profile/17023136577166291717noreply@blogger.com15tag:blogger.com,1999:blog-3171771270267658652.post-89435256769933657202012-02-01T09:59:00.000-08:002012-02-01T09:59:20.923-08:00كيف توسع عرض ارشيف المدونة - بنمط القائمة المنسدلة ؟<div dir="rtl" style="text-align: right;" trbidi="on">
<div dir="rtl" style="text-align: right;" trbidi="on">
<div dir="rtl" style="text-align: right;" trbidi="on">
<div style="text-align: justify;">
بسم الله الرحمن الرحيم والصلاة والسلام على روسلنا ونبينا محمد ابن عبد الله الصادق الامين ، اخوتي الكرام زوار مدونة المحررون العرب السلام عليكم ورحمة الله وبركاتة . اليوم احب ان ابداء بموضوع آخر عن كيفية توسيع عرض ارشيف المدونة في حالة اذا كان بنمط <span style="color: red;">( قائمة منسدلة )</span> ، طبعا هناك الكثير من المدونات تضع اداة ارشيف المدونة <span style="color: blue;">بنمط قائمة منسدلة</span> في الشريط الجانبي للمدونة<span style="color: blue;"> ( السايد بار ) </span>لكن عرض مربع الارشيف الافتراضي هذا لا يساوي عرض السايد بار للمدونة اي يكون مربع صغير طول عرضة يصل الى نصف عرض السايد بار ، ولهذا تجد اصحاب المدونات غير مرتاحين لشكله لذا يلجأو باختيار قائمة ارشيف اما بنمط ( تسلسل هيكلي ) او نمط ( قائمة كاملة ) ولكن هذه النمطين الاخيرين ياخذون مساحة كبيرة في السايد البار في حالة لو اردت ان تظيف ادوات اخرى بداخلة . اما نمط ( قائمة منسدلة ) فائدته انه لا ياخذ مساحة كبيرة بل ياخذ مربع صغير وعند النقر عليه يعرض مواضيع المدونة . لاحظ الصور التالية توضح ارشف المدونة بنمط القائمة المنسدلة قبل التعديل وبعد التعديل :</div>
<br />
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK4vkZZPhDLGOwQU7OAxgtElnvf_Hl1Wr7apTKu46ysw7cVYqL9U9yYFX_6-rAoN7t1TFZaXkUIG_bUpkqqQEfCOlOZ67W73A0tvdVSOEeE47J7eVmCOKWLcGVxcwBYcLxHWxIXrCnRYE/s1600/%D8%B7%D8%B1%D9%8A%D9%82%D8%A9-%D8%AA%D9%88%D8%B3%D9%8A%D8%B9-%D8%B9%D8%B1%D8%B6-%D8%A7%D8%B1%D8%B4%D9%8A%D9%81-%D8%A7%D9%84%D9%85%D8%AF%D9%88%D9%86%D8%A9.png" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img alt="'طريقة توسيع عرض ارشيف المدونة " border="0" height="318" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK4vkZZPhDLGOwQU7OAxgtElnvf_Hl1Wr7apTKu46ysw7cVYqL9U9yYFX_6-rAoN7t1TFZaXkUIG_bUpkqqQEfCOlOZ67W73A0tvdVSOEeE47J7eVmCOKWLcGVxcwBYcLxHWxIXrCnRYE/s400/%D8%B7%D8%B1%D9%8A%D9%82%D8%A9-%D8%AA%D9%88%D8%B3%D9%8A%D8%B9-%D8%B9%D8%B1%D8%B6-%D8%A7%D8%B1%D8%B4%D9%8A%D9%81-%D8%A7%D9%84%D9%85%D8%AF%D9%88%D9%86%D8%A9.png" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="color: blue;">الصورة رقم ( 1 ) توضح الاشكال الثلاثة للارشيف</span></td></tr>
</tbody></table>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWSymbolkVuMlD8S9ua4PvFPbObPAoHMuxHH48WSb4ibckuGaOcOmMeqdljjdaGAln0rVMGA8A6COyw84K_eN_hHnobTldvIvcnHSwHpjqWAMo-aCmWuqH-I6KmcCj54runkCbWPtEYQ4/s1600/%D8%AA%D9%88%D8%B3%D9%8A%D8%B9-%D8%B9%D8%B1%D8%B6-%D8%A7%D8%B1%D8%B4%D9%8A%D9%81-%D8%A7%D9%84%D9%85%D8%AF%D9%88%D9%86%D8%A9-%D8%A8%D9%86%D9%85%D8%B7-%D9%82%D8%A7%D8%A6%D9%85%D8%A9-%D9%85%D9%86%D8%B3%D8%AF%D9%84%D8%A9.png" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img alt="كيف توسع عرض ارشيف المدونة بنمط القائمة المنسدلة" border="0" height="317" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWSymbolkVuMlD8S9ua4PvFPbObPAoHMuxHH48WSb4ibckuGaOcOmMeqdljjdaGAln0rVMGA8A6COyw84K_eN_hHnobTldvIvcnHSwHpjqWAMo-aCmWuqH-I6KmcCj54runkCbWPtEYQ4/s400/%D8%AA%D9%88%D8%B3%D9%8A%D8%B9-%D8%B9%D8%B1%D8%B6-%D8%A7%D8%B1%D8%B4%D9%8A%D9%81-%D8%A7%D9%84%D9%85%D8%AF%D9%88%D9%86%D8%A9-%D8%A8%D9%86%D9%85%D8%B7-%D9%82%D8%A7%D8%A6%D9%85%D8%A9-%D9%85%D9%86%D8%B3%D8%AF%D9%84%D8%A9.png" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="color: blue;">الصورة رقم ( 2 ) توضح عرض الارشف قبل التوسيع (الافتراضي ) </span></td></tr>
</tbody></table>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisIwA-inDz1Tj85tJQpYMOxrPiL3UBQDd0CGmzSz1VOm6TktGkzXARHraIHCFEgbBAGwqCfCjcy5sj3VLJZE9KBl2QpT7g24kt6-sRAEbPzNV1ABcHqMKgeDZ3QDyBOfg03Y4dnm0hOOI/s1600/%D8%AA%D9%88%D8%B3%D9%8A%D8%B9-%D8%B9%D8%B1%D8%B6-%D9%82%D8%A7%D8%A6%D9%85%D8%A9-%D8%A7%D9%84%D8%A7%D8%B1%D8%B4%D9%8A%D9%81-%D8%A7%D9%84%D9%85%D9%86%D8%B3%D8%AF%D9%84%D8%A9.png" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img alt="طريقة توسيع عرض ارشيف المدونة بنمط القائمة المنسدلة" border="0" height="315" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisIwA-inDz1Tj85tJQpYMOxrPiL3UBQDd0CGmzSz1VOm6TktGkzXARHraIHCFEgbBAGwqCfCjcy5sj3VLJZE9KBl2QpT7g24kt6-sRAEbPzNV1ABcHqMKgeDZ3QDyBOfg03Y4dnm0hOOI/s400/%D8%AA%D9%88%D8%B3%D9%8A%D8%B9-%D8%B9%D8%B1%D8%B6-%D9%82%D8%A7%D8%A6%D9%85%D8%A9-%D8%A7%D9%84%D8%A7%D8%B1%D8%B4%D9%8A%D9%81-%D8%A7%D9%84%D9%85%D9%86%D8%B3%D8%AF%D9%84%D8%A9.png" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="color: blue;">الصورة رقم (3 ) توضح عرض ارشيف المدونة بعد توسيعة</span></td></tr>
</tbody></table>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<span style="color: red;"><br /></span><br />
<div style="text-align: justify;">
<span style="color: red;">* ملاحظة :</span> قبل ان تبداء بالخطوات تأكد من ارشيف مدونتك هل هو بنمط القائمة المنسدلة ؟ اذا كان بشكل القائمة المنسدلة كما في الصور اعلاه وتريد توسيعه الخطوات التالية تشرح لك كيفية توسع عرض الارشيف ، اما اذا كان بنمط تسلسل هيكلي او قائمة كاملة فالموضوع لا يتكلم بخصوص هذه النمطين .</div>
<br />
<span style="color: blue;">والان اسمحولي ان ابدا بالخطوات : ( <a href="http://arab-editors.blogspot.com/2010/01/blog-post.html" target="_blank">قم بعمل حفظ نسخة احتياطية لقالب مدونتك</a> ) </span><br />
<br />
<span style="color: red;">1 -</span> ادخل على <span style="color: blue;">لوحة تحكم المدونة</span> .<br />
<br />
<span style="color: red;">2 -</span> من من لوحة التحكم انقر على (<span style="color: blue;"> قالب</span> ) ثم ( <span style="color: blue;">تحرير HTML </span>) ثم <span style="color: blue;">متابعة</span> .<br />
<br />
<span style="color: red;">3 -</span> ضع علامة صح في مربع <span style="color: blue;">توسيع قوالب عناصر واجهة المستخدم .</span><br />
<span style="color: blue;"><br /></span><br />
<span style="color: red;">4 -</span><span style="color: blue;"> </span>ابحث على الكود التالي وذلك بواسطة مفتاح البحث ( Ctrl - F ) :<br />
<br />
<div id="code">
<b:includable id='menu' var='data'><br />
<select expr:id='data:widget.instanceId + &quot;_ArchiveMenu&quot;'><br />
<option value=''><data:title/></option><br />
<b:loop values='data:data' var='i'><br />
<option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option><br />
</b:loop><br />
</select><br />
</b:includable><br />
<br /></div>
</div>
<span style="color: red;">ملاحظة :</span> تستطيع البحث عن الكود اعلاه خطوة 4 عن طريقة نسخ اول سطر منه ثم تاكد من وجود الكود بالكامل في مدونتك ...
<br />
<span style="color: red;">لاحظ الصورة : </span><br />
<br />
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhikdBN_1dX0Ub9UG6G7CL6DEAGYok4TeihYuDOCO2Toisr9dTOD8JL4zMhAStqyjYIijJtwAr7C65IGoALvxH0fsFtJjSkEtdqJQaKY10m2tRWUhzjPEgm303-OgX7wL2VuKIkkl-TTho/s1600/%D8%AA%D9%88%D8%B3%D9%8A%D8%B9-%D8%B9%D8%B1%D8%B6-%D8%A7%D8%B1%D8%B4%D9%8A%D9%81-%D8%A7%D9%84%D9%85%D8%AF%D9%88%D9%86%D8%A9.png" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img alt="كود توسيع عرض ارشيف مدونة بلوجر" border="0" height="297" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhikdBN_1dX0Ub9UG6G7CL6DEAGYok4TeihYuDOCO2Toisr9dTOD8JL4zMhAStqyjYIijJtwAr7C65IGoALvxH0fsFtJjSkEtdqJQaKY10m2tRWUhzjPEgm303-OgX7wL2VuKIkkl-TTho/s400/%D8%AA%D9%88%D8%B3%D9%8A%D8%B9-%D8%B9%D8%B1%D8%B6-%D8%A7%D8%B1%D8%B4%D9%8A%D9%81-%D8%A7%D9%84%D9%85%D8%AF%D9%88%D9%86%D8%A9.png" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="color: red;">الكود الافتراضي في المدونة قبل التعديل</span></td></tr>
</tbody></table>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<span style="color: red;">5 -</span> قم بمسح الكود اعلاه خطوة ( 4 ) ثم استبدلة بالكود التالي :<br />
<br />
<div id="code">
<b:includable id='menu' var='data'><br />
<select expr:id='data:widget.instanceId + &quot;_ArchiveMenu&quot;' <span style="color: red;">style='width:100%'</span>><br />
<option value=''><data:title/></option><br />
<b:loop values='data:data' var='i'><br />
<option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option><br />
</b:loop><br />
</select><br />
</b:includable><br />
<br /></div>
</div>
ليصبح كما في الصورة التالية :<br />
<br />
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzUfgYFgzaLhljJxjKnBPxOQx3OeALuEFzrRoZx5MOXQNqXo9rvYvLREtHSUoJlPbQ-68SjhR86OZqKsp9QbfyBJejXioSlhlJ_woHMF9cLPsCPsBuh4APAjdXH_nClt9l48jLwxddDBc/s1600/%D8%AA%D9%88%D8%B3%D9%8A%D8%B9-%D8%B9%D8%B1%D8%B6-%D8%A7%D8%B1%D8%B4%D9%8A%D9%81-%D8%A8%D9%86%D9%85%D8%B7-%D9%82%D8%A7%D8%A6%D9%85%D8%A9-%D9%85%D9%86%D8%B3%D8%AF%D9%84%D8%A9.png" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img alt="كود توسيع عرض ارشيف المدونة بنمط القائمة المنسدلة" border="0" height="286" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzUfgYFgzaLhljJxjKnBPxOQx3OeALuEFzrRoZx5MOXQNqXo9rvYvLREtHSUoJlPbQ-68SjhR86OZqKsp9QbfyBJejXioSlhlJ_woHMF9cLPsCPsBuh4APAjdXH_nClt9l48jLwxddDBc/s400/%D8%AA%D9%88%D8%B3%D9%8A%D8%B9-%D8%B9%D8%B1%D8%B6-%D8%A7%D8%B1%D8%B4%D9%8A%D9%81-%D8%A8%D9%86%D9%85%D8%B7-%D9%82%D8%A7%D8%A6%D9%85%D8%A9-%D9%85%D9%86%D8%B3%D8%AF%D9%84%D8%A9.png" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="color: red;">كود ارشيف المدونة بعد التعديل</span></td></tr>
</tbody></table>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<span style="color: red;">6 -</span> اعمل <span style="color: blue;">معاينة ( Preview )</span> للمدونة للتأكد من تطبيق العملية ثم قم بعمل <span style="color: blue;">حفظ ( Save )</span> .<br />
<br />
<div style="text-align: justify;">
* طبعا في الحقيقة الكودين في الشرح اعلاة خطوة 4 + 5 متشابهان ، فقط غيرنا جزءبسط جدا وهو اظافة الكود الذي يشير باللون الاحمر <span style="color: red;">style='width:100%' </span> في كود خطوة رقم 5 تغيير نسبة العرض الى 100% ....</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
واخيرا اذا استمتعت بقراءة الدرس اعلاة قم <a href="http://feedburner.google.com/fb/a/mailverify?uri=blogspot/kzZS&loc=en_US">بالاشتراك عبر بريدك الالكتروني</a> ليصلك تحديثات المدونة من دروس مفيدة وحصرية لمدونات بلوجر كما يمكنك ان تتصفح <a href="http://arab-editors.blogspot.com/2009/11/blog-post_3851.html" target="_blank">فهرس المدونة</a> للحصول على المزيد من المواضيع الاساسية التي قد تناسب مدونتك . والصلاة والسلام على رسول لله ....... <span style="color: red;">واي سؤال او استفسار نرجو التعليق</span> ،،،</div>
</div>خالد محمد (ابوخلود)http://www.blogger.com/profile/17023136577166291717noreply@blogger.com13tag:blogger.com,1999:blog-3171771270267658652.post-30476441694845929262012-01-20T10:05:00.000-08:002012-01-20T10:05:18.164-08:00كيف تربط مواضيع مدونتك او موقعك على الفيسبوك ؟ - ربط المدونة بالفيسبوك<div dir="rtl" style="text-align: right;" trbidi="on">
<div style="text-align: justify;">
بسم الله الرحمن الرحيم ، اخوتي الكرام السلام عليكم ورحمة الله وبركاتة و بناءا على طلب بعض زوار المدونة نبدا بدرس جديد عن كيفية ربط محتوى المدونة او الموقع او المنتدى بالفيسبوك وذلك بواسطة عنوان تغذية المدونة ( Blog feed address ) وربطة بموقع الفيسبوك اي بمعنى عندما تقوم بنشر موضوع جديد في مدونتك يظهر مباشرة و تماتيكيا في حائط صفحتك على الفيسبوك .</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
اخوتي الاعزاء ان عملية ربط المدونة بالفيسبوك ( Facebook ) تجعل مواضيع ومحتوى مدونتك متوفرة لكل اصدقائك على الفيسبوك وفي نفس الوقت تعتبر طريقة ممتازة لجذب زوار كثير لموقعك ، وعليه فان طريقة اعداد و ربط المدونة او اي موقع آخر بالفيسبوك ليست معقدة كما يتصورها البعض بل تاخذ دقائق قليلة وانا برائي ان اي شخص لديه موقع او مدونة ويريد ربطها بالفيسبوك ان يقوم <span style="font-family: Arial, sans-serif; line-height: 115%; text-align: right;">بإنشاء صفحة جديدة على الفيسبوك ( انشاء صفحة اعجاب ) باسم مدونته او موقعة .لاحظ الصورة التالية :</span><br />
<div style="text-align: right;">
<span style="font-family: Arial, sans-serif;"><span style="line-height: 18px;"><br /></span></span></div>
</div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzy-ygy87TO6TZ_r9fpO41aMh5iIJzHqae3jYc4kvIVzJCa9rRedFs2_ab_QmPjICDswmowS5vI1YYKMRO75thQJEEkN5KD6w8fhbVJ2OCb947JFwUT_4hTnbhFDeajN2iWr2ttAXVyOg/s1600/%25D8%25A7%25D9%2586%25D8%25B4%25D8%25A7%25D8%25A1-%25D8%25B5%25D9%2581%25D8%25AD%25D8%25A9-%25D8%25B9%25D9%2584%25D9%2589-%25D8%25A7%25D9%2584%25D9%2581%25D9%258A%25D8%25B3%25D8%25A8%25D9%2588%25D9%2583.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="طريقة انشاء صفحة على الفيسبوك" border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzy-ygy87TO6TZ_r9fpO41aMh5iIJzHqae3jYc4kvIVzJCa9rRedFs2_ab_QmPjICDswmowS5vI1YYKMRO75thQJEEkN5KD6w8fhbVJ2OCb947JFwUT_4hTnbhFDeajN2iWr2ttAXVyOg/s400/%25D8%25A7%25D9%2586%25D8%25B4%25D8%25A7%25D8%25A1-%25D8%25B5%25D9%2581%25D8%25AD%25D8%25A9-%25D8%25B9%25D9%2584%25D9%2589-%25D8%25A7%25D9%2584%25D9%2581%25D9%258A%25D8%25B3%25D8%25A8%25D9%2588%25D9%2583.png" width="352" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="color: red;">اضغط للتكبير</span></td></tr>
</tbody></table>
<div>
<br /></div>
<div>
<span style="color: blue;">والان دعونا نبداء بشرح عملية ربط المدونة او الموقع والمنتدى بالفيسبوك على خطوة خطوة بالصور :</span></div>
<div>
<br /></div>
<div>
<b><span style="color: red;">1 -</span></b> قم بالدخول على <span style="color: blue;">صفحتك</span> او<span style="color: blue;"> حسابك</span> في الفيسبوك او قم <span style="color: blue;">بانشاء صفحة</span> جديدة باسم مدونتك ثم انقر على الرابط التالي :<br />
<br />
<a href="http://apps.facebook.com/rssgraffiti/?ref=bookmarks&count=0" rel="nofollow" target="_blank">http://apps.facebook.com/rssgraffiti/?ref=bookmarks&count=0</a>
</div>
<div>
<br />
<b><span style="color: red;">2 -</span></b> بعد انقر على الرابط اعلاه تظهر صفحة تطلب منك<span style="color: blue;"> ترخيص الخدمة</span> كما هو موضح في الصورة التالية :<br />
<br />
<br />
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1Si4aQ0-S6Z3F2n2NNQ_RQzkkeLcuhd0kqOxWtTP7x3d8_WGOv9aaV7KcyHy5uc45ZY6wx2MEYBwI45Ke3m3ZUxztMMDI3YjKuU-kL36a64ve2yDsXtJya5DA5EnuNseGQ7fW61HlRwc/s1600/%25D8%25B1%25D8%25A8%25D8%25B7-%25D9%2585%25D9%2588%25D8%25A7%25D8%25B6%25D9%258A%25D8%25B9-%25D8%25A7%25D9%2584%25D9%2585%25D8%25AF%25D9%2588%25D9%2586%25D8%25A9-%25D8%25A8%25D8%25A7%25D9%2584%25D9%2581%25D9%258A%25D8%25B3%25D8%25A8%25D9%2588%25D9%2583.png" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img alt="كيف تربط خدمة تغذية المدونة على الفيسبوك" border="0" height="392" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1Si4aQ0-S6Z3F2n2NNQ_RQzkkeLcuhd0kqOxWtTP7x3d8_WGOv9aaV7KcyHy5uc45ZY6wx2MEYBwI45Ke3m3ZUxztMMDI3YjKuU-kL36a64ve2yDsXtJya5DA5EnuNseGQ7fW61HlRwc/s400/%25D8%25B1%25D8%25A8%25D8%25B7-%25D9%2585%25D9%2588%25D8%25A7%25D8%25B6%25D9%258A%25D8%25B9-%25D8%25A7%25D9%2584%25D9%2585%25D8%25AF%25D9%2588%25D9%2586%25D8%25A9-%25D8%25A8%25D8%25A7%25D9%2584%25D9%2581%25D9%258A%25D8%25B3%25D8%25A8%25D9%2588%25D9%2583.png" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="color: red;"><b>اضغط للتكبير</b></span></td></tr>
</tbody></table>
<br /></div>
<div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<b><span style="color: red;">3 -</span></b> تضهر صفحة اخرى تطلب <span style="color: blue;">السماح بطلب اذن</span> لاحظ الصورة التالية :<br />
<br />
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5pWSbJZyF2wdkWl66EoRTT7v1O-lJkfpnAZv9uZGzto_RpTX37WSKB5u8IfY6vppReWhpoQV29ehR7WWd-Vy-FgL3w4e8Nve75XNMxfUjYuJVmMxib9y5-6TNLWBmxRqav_-_njhbRJM/s1600/%25D9%2583%25D9%258A%25D9%2581-%25D8%25AA%25D8%25B1%25D8%25A8%25D8%25B7-%25D9%2585%25D9%2588%25D8%25A7%25D8%25B6%25D9%258A%25D8%25B9-%25D8%25A7%25D9%2584%25D9%2585%25D8%25AF%25D9%2588%25D9%2586%25D8%25A9-%25D8%25A8%25D8%25AD%25D8%25B3%25D8%25A7%25D8%25A8%25D9%2583-%25D8%25B9%25D9%2584%25D9%2589-%25D8%25A7%25D9%2584%25D9%2581%25D9%258A%25D8%25B3%25D8%25A8%25D9%2588%25D9%2583.png" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img alt="كيف تربط مدونتك او موقع على الفيسبوك" border="0" height="336" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5pWSbJZyF2wdkWl66EoRTT7v1O-lJkfpnAZv9uZGzto_RpTX37WSKB5u8IfY6vppReWhpoQV29ehR7WWd-Vy-FgL3w4e8Nve75XNMxfUjYuJVmMxib9y5-6TNLWBmxRqav_-_njhbRJM/s400/%25D9%2583%25D9%258A%25D9%2581-%25D8%25AA%25D8%25B1%25D8%25A8%25D8%25B7-%25D9%2585%25D9%2588%25D8%25A7%25D8%25B6%25D9%258A%25D8%25B9-%25D8%25A7%25D9%2584%25D9%2585%25D8%25AF%25D9%2588%25D9%2586%25D8%25A9-%25D8%25A8%25D8%25AD%25D8%25B3%25D8%25A7%25D8%25A8%25D9%2583-%25D8%25B9%25D9%2584%25D9%2589-%25D8%25A7%25D9%2584%25D9%2581%25D9%258A%25D8%25B3%25D8%25A8%25D9%2588%25D9%2583.png" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="color: red;">اضغط لصورة للتكبير</span></td></tr>
</tbody></table>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<span style="color: red;"><b>4 -</b></span> في هذا الخطوة يطلب منك<span style="color: blue;"> اضافة تغذية</span> جديدة قم بالنقر على زر<span style="color: blue;"> Add feed</span> كما هو موضح في الصورة التالية :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguAhuOaIM0CTYvwUFXx_B7t35_yFQfgINdogsGcsdVK97W8GeDCiw5Elzy2mWVqWOJ1huOES2kk9gwoEvL5zZ2sIpYzoDRDAwAOQHh6-qQLKC3rf7AN94yV2Jc0tpdzq01fyfn7i6iSRk/s1600/%25D8%25AA%25D8%25B9%25D9%2584%25D9%2585-%25D8%25B1%25D8%25A8%25D8%25B7-%25D8%25AE%25D8%25AF%25D9%2585%25D8%25A9-rss-%25D8%25AA%25D8%25BA%25D8%25B0%25D9%258A%25D8%25A9-%25D8%25B9%25D9%2584%25D9%2589+-%25D8%25A7%25D9%2584%25D9%2581%25D9%258A%25D8%25B3%25D8%25A8%25D9%2588%25D9%2583.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img alt="طريقة ربط مواضيع المدونة او الموقع بموقع الفيسبوك" border="0" height="231" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguAhuOaIM0CTYvwUFXx_B7t35_yFQfgINdogsGcsdVK97W8GeDCiw5Elzy2mWVqWOJ1huOES2kk9gwoEvL5zZ2sIpYzoDRDAwAOQHh6-qQLKC3rf7AN94yV2Jc0tpdzq01fyfn7i6iSRk/s400/%25D8%25AA%25D8%25B9%25D9%2584%25D9%2585-%25D8%25B1%25D8%25A8%25D8%25B7-%25D8%25AE%25D8%25AF%25D9%2585%25D8%25A9-rss-%25D8%25AA%25D8%25BA%25D8%25B0%25D9%258A%25D8%25A9-%25D8%25B9%25D9%2584%25D9%2589+-%25D8%25A7%25D9%2584%25D9%2581%25D9%258A%25D8%25B3%25D8%25A8%25D9%2588%25D9%2583.png" width="400" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<b><span style="color: red;">5 -</span></b> في هذه الخطوة اولا هل انت مفعل خدمة التغذية في مدونتك او لا ؟ اذا انت مفعل خدمة RSS ( خدمة التغذية ) هنا يطلب منك وضع<span style="color: blue;"> رابط تغذية مدونتك</span> او<span style="color: blue;"> موقع </span>او<span style="color: blue;"> منتداك</span> ثم <span style="color: blue;">عنوان المدونة</span> ثم <span style="color: blue;">رابط المدونة</span> لاحظ الصورة التالية :<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjORftT43HNNkgY9aQ6gDTt-IC44vEh6t8AI_D8-jfKwLlVRz7LSPtPdH_DphBnbHwAptck2NRU9KiB7bjAHQUCiJ3fc8tSGyUN6-N9wFnb_r6tuVXKIZiXiKbDEyINirDXgcuUdIyx9Zs/s1600/%25D9%2583%25D9%258A%25D9%2581-%25D8%25AA%25D8%25B1%25D8%25A8%25D8%25B7-%25D8%25AE%25D8%25AF%25D9%2585%25D8%25A9-%25D8%25AA%25D8%25BA%25D8%25B0%25D9%258A%25D8%25A9-%25D8%25A7%25D9%2584%25D9%2585%25D9%2588%25D9%2582%25D8%25B9-%25D8%25B9%25D9%2584%25D9%2589-%25D8%25B5%25D9%2581%25D8%25AD%25D8%25A9-%25D8%25A7%25D9%2584%25D9%2581%25D9%258A%25D8%25B3%25D8%25A8%25D9%2588%25D9%2583.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img alt="طريقة ربط خدمة تغذية الموقع بصفحة على الفيسبوك" border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjORftT43HNNkgY9aQ6gDTt-IC44vEh6t8AI_D8-jfKwLlVRz7LSPtPdH_DphBnbHwAptck2NRU9KiB7bjAHQUCiJ3fc8tSGyUN6-N9wFnb_r6tuVXKIZiXiKbDEyINirDXgcuUdIyx9Zs/s400/%25D9%2583%25D9%258A%25D9%2581-%25D8%25AA%25D8%25B1%25D8%25A8%25D8%25B7-%25D8%25AE%25D8%25AF%25D9%2585%25D8%25A9-%25D8%25AA%25D8%25BA%25D8%25B0%25D9%258A%25D8%25A9-%25D8%25A7%25D9%2584%25D9%2585%25D9%2588%25D9%2582%25D8%25B9-%25D8%25B9%25D9%2584%25D9%2589-%25D8%25B5%25D9%2581%25D8%25AD%25D8%25A9-%25D8%25A7%25D9%2584%25D9%2581%25D9%258A%25D8%25B3%25D8%25A8%25D9%2588%25D9%2583.png" width="317" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<b><span style="color: red;">6 -</span></b> واخيرا قم بالنقر على زر<span style="color: blue;"> حفظ ( Save ) </span> . ثم قم بنشر مواضيع جديدة في مدونتك للتاكد من ربط المدونة لان المواضيع القديم لا تظهر على صفحتك في الفيسبوك . ومبرووووووووووك عليك ربط المدونة .<br />
<br />
<div style="text-align: center;">
<span style="color: red;">وصلو على رسووووووول الله واي سؤال او استفسار نرجو التعليق ،،،</span></div>
<br /></div>
</div>خالد محمد (ابوخلود)http://www.blogger.com/profile/17023136577166291717noreply@blogger.com38tag:blogger.com,1999:blog-3171771270267658652.post-55186485075757923032012-01-17T10:59:00.000-08:002012-02-16T11:39:23.024-08:00كيف تعمل اوتظيف مساحات اعلانية فوق هيدر المدونة ؟ - بنرات اعلانية<div dir="rtl" style="text-align: right;" trbidi="on">
<div dir="rtl" style="text-align: right;" trbidi="on">
<div dir="rtl" style="text-align: right;" trbidi="on">
<div dir="rtl" style="text-align: right;" trbidi="on">
<div dir="rtl" style="text-align: right;" trbidi="on">
<div dir="rtl" style="text-align: right;" trbidi="on">
<div dir="rtl" style="text-align: right;" trbidi="on">
<div style="text-align: justify;">
بسم الله الرحمن الرحيم ، اخواني المدونون و زوار مدونة المحررون العرب السلام عليكم ورحمة الله وبركاتة . امس تحدثنا عن <a href="http://arab-editors.blogspot.com/2012/01/blog-post_12.html" target="_blank">كيفية اضافة وعمل أداة آخر موضيع المدونة مع صور مصغرة ؟</a> ولكن اليوم سنتطرق الى درسا جديد وحصري في مدونتنا هذه عن كيفية عمل بنرات اعلانية في اعلى الصفحة ؟ اي فوق الهيدر ، او كيفية اضافة اعلانات جوجل ادسينس فوق الهيدر ؟</div>
<div style="text-align: justify;">
طبعا اخوتي الكرام اكيد وبلا شك قد شاهدتم الكثير من المواقع الالكترونية تعمل هذه المساحة الاعلانية مثل المواقع الرياضة والاخبارية والمنتديات الكبيرة ، ولكن السؤال لماذا ؟ انا في اعتقداي ان البعض منهم لديه نية لعمل هذه البنرات الاعلانية لغرض كسب المال اون لاين يعني يعرض سلع ومنتجات الاخرين مقابل المال زهيد او يعلن لمواقع الكترونية اخرى . والبعض منهم لغرض التبادل الاعلاني فقط ليس لغرض الفلوس ( ظفني في موقعك اظيفك في موقعي ) اي للاشهار . عموماً اذا عندك النية لكسب المال من موقعك او مدونتك الالكترونية ، فاالفرصة هي ان تعمل مساحة اعلانية في مدونتك . طبعا هناك اماكن عديدة وجيدة وبارزة بحيث تعمل مساحة اعلانية تسويقية فيها مثلا اعلى الصفحة ( فوق الهيد ) ، وفي نفس الهيدر ، وتحت الهيدر ، وفي الفوتر ( اسفل الصفحة ) ، وكذلك بجانب الصفحة ( سايد بار ) . لكن اليوم سنتحدث في درسنا هذا عن كيفية عمل بنرات اعلانية فوق الهيدر ؟ انظر الصورة التالية كمثال توضحي للبنرات الاعلانية اعلى الصفحة :<br />
<br /></div>
<div style="text-align: justify;">
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM4h-8svzOcdEpGBfwXqs6ptxx6m-x3xncVQHw-Y383bkK26ZaRxNq1YOQ8x1bPObkWAmlF11ZjUMzKaKng3H7AjFBPXnn12SJIAoPKtBeX0LcPALqnaK3URVjDT3KyOh-aEynTWLa9Vc/s1600/%25D9%2588%25D8%25B6%25D8%25B9-%25D8%25A8%25D9%2586%25D8%25B1%25D8%25A7%25D8%25AA-%25D8%25A7%25D8%25B9%25D9%2584%25D8%25A7%25D9%2586%25D9%258A%25D8%25A9-%25D9%2581%25D9%2588%25D9%2582-%25D9%2587%25D9%258A%25D8%25AF%25D8%25B1-%25D8%25A7%25D9%2584%25D9%2585%25D8%25AF%25D9%2588%25D9%2586%25D8%25A9.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="406" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM4h-8svzOcdEpGBfwXqs6ptxx6m-x3xncVQHw-Y383bkK26ZaRxNq1YOQ8x1bPObkWAmlF11ZjUMzKaKng3H7AjFBPXnn12SJIAoPKtBeX0LcPALqnaK3URVjDT3KyOh-aEynTWLa9Vc/s640/%25D9%2588%25D8%25B6%25D8%25B9-%25D8%25A8%25D9%2586%25D8%25B1%25D8%25A7%25D8%25AA-%25D8%25A7%25D8%25B9%25D9%2584%25D8%25A7%25D9%2586%25D9%258A%25D8%25A9-%25D9%2581%25D9%2588%25D9%2582-%25D9%2587%25D9%258A%25D8%25AF%25D8%25B1-%25D8%25A7%25D9%2584%25D9%2585%25D8%25AF%25D9%2588%25D9%2586%25D8%25A9.png" width="640" /></a></div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span style="color: red;">اذاً دعونا نبدا على خطوة خطوة - Step by step :</span></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
1 - ادخل على حسابك في <span style="color: blue;">بلوجر </span>.<br />
<br /></div>
<div style="text-align: justify;">
2 - من <b><span style="color: blue;">لوحة التحكم</span></b> انقر من القائمة على (<b><span style="color: blue;"> قالب</span></b> ) ثم (<span style="color: blue;"><b> تحرير HTML </b></span>) ثم <span style="color: blue;"><b>متابعة</b></span> .<br />
<br />
3 - كاجراء احتياطي نرجو عمل <b><a href="http://arab-editors.blogspot.com/2010/01/blog-post.html" target="_blank">نسخة احتياطية لقالب المدونة</a></b> قبل اجراء اي عمل .<br />
<br />
4 - قم بوضع علامة صح على <span style="color: blue;">توسيع قوالب عناصر صفحة المستخدم</span> .<br />
<br />
5 - قم بالبحث عن الكود التالي بواسطة مفتاح ( Ctrl + F ) . طبعا هذا الكود بعد <body> مباشرة .<br />
<br />
<div id="code">
<div id='outer-wrapper'></div>
</div>
</div>
لاحظ الصورة :<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdtAjYHZtyOcjt_XL8HerJg5osb1uh1q6X4oCMgegyy6n-WrYZSGaEOzfn8VAt_O8jyY-RdsrI2cTDWiYDNnVwQ3RosC_WNk0qYhpaCcLrdK6jaeQtcl-cu8MPcLJLy3eOvVDMLY0mkDo/s1600/%25D8%25A7%25D8%25B8%25D8%25A7%25D9%2581%25D8%25A9-%25D8%25A8%25D9%2586%25D8%25B1%25D8%25A7%25D8%25AA-%25D8%25A7%25D8%25B9%25D9%2584%25D8%25A7%25D9%2586%25D9%258A%25D8%25A9.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdtAjYHZtyOcjt_XL8HerJg5osb1uh1q6X4oCMgegyy6n-WrYZSGaEOzfn8VAt_O8jyY-RdsrI2cTDWiYDNnVwQ3RosC_WNk0qYhpaCcLrdK6jaeQtcl-cu8MPcLJLy3eOvVDMLY0mkDo/s1600/%25D8%25A7%25D8%25B8%25D8%25A7%25D9%2581%25D8%25A9-%25D8%25A8%25D9%2586%25D8%25B1%25D8%25A7%25D8%25AA-%25D8%25A7%25D8%25B9%25D9%2584%25D8%25A7%25D9%2586%25D9%258A%25D8%25A9.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="color: red;">اضغط الصورة للتكبير</span></td></tr>
</tbody></table>
<br />
<br />
6 - انسخ الكود التالي وضعه تحته مباشرة .<br />
<br />
<div id="code">
<div id='topads-wrapper'><br />
<b:section class='topads' id='topads' preferred='yes'/><br />
</div></div>
</div>
<br />
لاحظ الصورة :<br />
<br />
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzehtnVZEg_edZ9YS48wOy5s5crSUOjlpHB3v9WsYKSK5-nBaR7ZxBjH-0pYRxwuUtUzkTdE9OUDD9O9hBHa4DLeQM9xoKa1sZqOTw6h4ZQqPKiJ8wOfNySf8DazPebzh6xJImZTvKM7A/s1600/%25D8%25B7%25D8%25B1%25D9%258A%25D9%2582%25D8%25A9-%25D8%25A7%25D8%25B6%25D8%25A7%25D9%2581%25D8%25A9-%25D9%2585%25D8%25B3%25D8%25A7%25D8%25AD%25D8%25A7%25D8%25AA-%25D8%25A7%25D8%25B9%25D9%2584%25D8%25A7%25D9%2586%25D9%258A%25D8%25A9-%25D9%2581%25D9%2588%25D9%2582-%25D8%25A7%25D9%2584%25D9%2587%25D9%258A%25D8%25AF%25D8%25B1-%25D8%25A7%25D8%25B9%25D9%2584%25D9%2589-%25D8%25A7%25D9%2584%25D8%25B5%25D9%2581%25D8%25AD%25D8%25A9.png" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="464" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzehtnVZEg_edZ9YS48wOy5s5crSUOjlpHB3v9WsYKSK5-nBaR7ZxBjH-0pYRxwuUtUzkTdE9OUDD9O9hBHa4DLeQM9xoKa1sZqOTw6h4ZQqPKiJ8wOfNySf8DazPebzh6xJImZTvKM7A/s640/%25D8%25B7%25D8%25B1%25D9%258A%25D9%2582%25D8%25A9-%25D8%25A7%25D8%25B6%25D8%25A7%25D9%2581%25D8%25A9-%25D9%2585%25D8%25B3%25D8%25A7%25D8%25AD%25D8%25A7%25D8%25AA-%25D8%25A7%25D8%25B9%25D9%2584%25D8%25A7%25D9%2586%25D9%258A%25D8%25A9-%25D9%2581%25D9%2588%25D9%2582-%25D8%25A7%25D9%2584%25D9%2587%25D9%258A%25D8%25AF%25D8%25B1-%25D8%25A7%25D8%25B9%25D9%2584%25D9%2589-%25D8%25A7%25D9%2584%25D8%25B5%25D9%2581%25D8%25AD%25D8%25A9.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="color: red;">اضافة كود البنرات الاعلانية</span></td></tr>
</tbody></table>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
7 - قم بالبحث عن الكود التالي :<br />
<div id="code">
]]></b:skin></div>
</div>
8 - ثم ضع هذا الكود فوقه مباشرة :<br />
<br />
<div id="code">
/* Top Ads<br />
----------------------------------------------- */<br />
#topads-wrapper {<br />
margin: 0;<br />
padding: 0;<br />
position: relative;<br />
text-align: center;<br />
width: 100%;<br />
}<br />
<br />
#topads {margin: 0; padding: 0;}<br />
<br />
#topads .widget {margin: 0; padding: 5px 0;}<br />
<div>
<br /></div>
</div>
</div>
ملاحظة : طبعا هذا الكود من نمط CSS Styling وضع لتنسيق البنرات الاعلانية من ناحية المحاذاة وغيرها، في حالة تريد تغيير في المحاذاة لسبب ما قم بالتغيير فيه . بينما كود خطوة رقم 6 وضع لانشاء عنصر جديد ( مربع اضافة اداة ) في قائمة التخطيط .<br />
<br />
لاحظ الصورة :<br />
<br />
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWv1cvX4FFerJVPf4dsZi11byO24w62G5ysAacDFkulkKhh1ODBNn0cEKoBYvWJc_jMPZ5zv6HEvfRwHJ1Sxkvbi71HKro_QjWDjCYYjL9L7kOj93yJT8p2FIEkCrkHkY-D0ulWC5px-g/s1600/%25D8%25B7%25D8%25B1%25D9%258A%25D9%2582%25D8%25A9-%25D9%2588%25D8%25B6%25D8%25B9-%25D8%25A8%25D9%2586%25D8%25B1-%25D8%25A7%25D8%25B9%25D9%2584%25D9%258A-%25D8%25B5%25D9%2581%25D8%25AD%25D8%25A9-%25D8%25A7%25D9%2584%25D9%2585%25D8%25AF%25D9%2588%25D9%2586%25D8%25A9.png" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="395" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWv1cvX4FFerJVPf4dsZi11byO24w62G5ysAacDFkulkKhh1ODBNn0cEKoBYvWJc_jMPZ5zv6HEvfRwHJ1Sxkvbi71HKro_QjWDjCYYjL9L7kOj93yJT8p2FIEkCrkHkY-D0ulWC5px-g/s640/%25D8%25B7%25D8%25B1%25D9%258A%25D9%2582%25D8%25A9-%25D9%2588%25D8%25B6%25D8%25B9-%25D8%25A8%25D9%2586%25D8%25B1-%25D8%25A7%25D8%25B9%25D9%2584%25D9%258A-%25D8%25B5%25D9%2581%25D8%25AD%25D8%25A9-%25D8%25A7%25D9%2584%25D9%2585%25D8%25AF%25D9%2588%25D9%2586%25D8%25A9.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="color: red;">اضافة الكود نمرة 7</span></td></tr>
</tbody></table>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
9 - قم بعمل <span style="color: blue;">حفظ للقالب</span> ثم توجه او انقر على <span style="color: blue;">تخطيط</span> .<br />
<br />
10 - بعد النقر على تخطيط سنشاهد عنصر جديد اي مربع جديد باسم <span style="color: blue;">( اضافة اداة )</span> انشئ فوق الهيدر وتحت Navbar مباشرة .<br />
لاحظ الصورة :<br />
<br />
<br />
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfu-JxJbybaH6SLnY2nm6d5fCfaJDwRrZmPeIevZK5GStLvE0z4023XCzZBUUb64NCTHRU4aYPdCBmCE-ndLQNwbEfwOgTUrrIA-Et2_ZXWL-rXuEuEzR1TsVORra23VgVlhvH7ccCYQo/s1600/%25D8%25A7%25D9%2586%25D8%25B4%25D8%25A7%25D8%25A1-%25D8%25A8%25D9%2586%25D8%25B1%25D8%25A7%25D8%25AA-%25D8%25A7%25D8%25B9%25D9%2584%25D8%25A7%25D9%2586%25D9%258A%25D8%25A9-%25D9%2581%25D9%2588%25D9%2582-%25D9%2587%25D9%258A%25D8%25AF%25D8%25B1-%25D8%25A7%25D9%2584%25D9%2585%25D8%25AF%25D9%2588%25D9%2586%25D8%25A9.png" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><br /><img border="0" height="417" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfu-JxJbybaH6SLnY2nm6d5fCfaJDwRrZmPeIevZK5GStLvE0z4023XCzZBUUb64NCTHRU4aYPdCBmCE-ndLQNwbEfwOgTUrrIA-Et2_ZXWL-rXuEuEzR1TsVORra23VgVlhvH7ccCYQo/s640/%25D8%25A7%25D9%2586%25D8%25B4%25D8%25A7%25D8%25A1-%25D8%25A8%25D9%2586%25D8%25B1%25D8%25A7%25D8%25AA-%25D8%25A7%25D8%25B9%25D9%2584%25D8%25A7%25D9%2586%25D9%258A%25D8%25A9-%25D9%2581%25D9%2588%25D9%2582-%25D9%2587%25D9%258A%25D8%25AF%25D8%25B1-%25D8%25A7%25D9%2584%25D9%2585%25D8%25AF%25D9%2588%25D9%2586%25D8%25A9.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="color: red;">النتيجة النهائية </span></td></tr>
</tbody></table>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br /></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br /></div>
<br />
11 - الان <span dir="RTL" lang="AR-YE" style="font-family: Arial, sans-serif; font-size: 11pt; line-height: 115%;">لإضافة </span><span style="color: red;">بنرات اعلانية</span> او<span style="color: red;"> اعلانات جوجل ادسينس</span> فوق الهيد قم بالنقر على (<span style="color: blue;"> اضافة اداة</span> ) الجديدة التي تم انشاءها الان فوق الهيدر كما في الصورة اعلاه ( ليس السايد بار ) ثم من <span style="color: blue;">قائمة الادوات المنبثقة</span> اختر<span style="color: blue;"> اداة جافا HTML</span> وقم بوضع كود البنر ثم<span style="color: blue;"> اعمل معاينة</span> للتأكد من عملك ، ثم <span style="color: blue;">حفظ</span> .<br />
<span style="color: red;">ملاحظة :</span> بامكانك ان تضع اربعة اكواد في اداة جافا HTML الواحدة او اكثر حسب تصميم مساحة البنرات لديك، بحيث تكون البنرات الاعلانية على شكل افقي متسلسلة واحد تلو الاخر ( من اليمين الى اليسار ) لاحظ الصورة الاولى كل الاكواد في اداة جافا HTML واحدة . بينما لو اضفت اداة HTML اولا ثم وضعت كود بنر واحد فيها ثم قمت باضافة اداة HTML ثانية واضفت كود بنرثاني سيكون شكل البنرات الاعلانية فوق الهيدر على شكل عمودي ( بنر فوق بنر ) .<br />
لاحظ الصور التالية :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji_IG7UayK27L169wS5MyiMtghpQirdGBMwAQR6UkZPFBxXRSAFSgJG6gceW0TVr4n7QlTzNa-7PW3uFnkwdL7uqq7GIaPSRX_gWn5DvjgjjieOcDAvOaIi-F17KesgQr1y8cEMi7KJfU/s1600/%25D8%25B7%25D8%25B1%25D9%258A%25D9%2582%25D8%25A9-%25D8%25B9%25D9%2585%25D9%2584-%25D9%2585%25D8%25B3%25D8%25A7%25D8%25AD%25D8%25A9-%25D8%25A7%25D8%25B9%25D9%2584%25D8%25A7%25D9%2586%25D9%258A%25D8%25A9.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="138" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji_IG7UayK27L169wS5MyiMtghpQirdGBMwAQR6UkZPFBxXRSAFSgJG6gceW0TVr4n7QlTzNa-7PW3uFnkwdL7uqq7GIaPSRX_gWn5DvjgjjieOcDAvOaIi-F17KesgQr1y8cEMi7KJfU/s320/%25D8%25B7%25D8%25B1%25D9%258A%25D9%2582%25D8%25A9-%25D8%25B9%25D9%2585%25D9%2584-%25D9%2585%25D8%25B3%25D8%25A7%25D8%25AD%25D8%25A9-%25D8%25A7%25D8%25B9%25D9%2584%25D8%25A7%25D9%2586%25D9%258A%25D8%25A9.png" width="320" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHvHSqadDczqctHT6xn0iWtL20-RhHNgCujwvJ9lKCAiJVjj5nH_shsrw58Rse0SWyQQJU5C68fMq7I7s5utBsMSucmHiVnrzAQuzWkPZ4S_UDQQTshrJoAjxqj4SfuHyImkI-38xhs5Y/s1600/%25D8%25A8%25D9%2586%25D8%25B1%25D8%25A7%25D8%25AA-%25D8%25A7%25D8%25B9%25D9%2584%25D8%25A7%25D9%2586%25D9%258A%25D8%25A9.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHvHSqadDczqctHT6xn0iWtL20-RhHNgCujwvJ9lKCAiJVjj5nH_shsrw58Rse0SWyQQJU5C68fMq7I7s5utBsMSucmHiVnrzAQuzWkPZ4S_UDQQTshrJoAjxqj4SfuHyImkI-38xhs5Y/s320/%25D8%25A8%25D9%2586%25D8%25B1%25D8%25A7%25D8%25AA-%25D8%25A7%25D8%25B9%25D9%2584%25D8%25A7%25D9%2586%25D9%258A%25D8%25A9.png" width="318" /></a></div>
<br />
<br />
الخلاصة : طبعا في هذا الدرس تعلمت كيف تضيف عنصر جديد من عناصر الصفحة فوق الهيدر وايظا كيفية اضافة مساحات اعلانية ( بنرات اعلانية ) وكذلك اضافة اعلانات جوجل ادسينس ،،،<br />
<br />
<span style="color: red;">ملاحــــــظة مهمة :</span> بعض المدونات لا يوجد فيها نفس الكود خطوة رقم 5 بل يوجد بها كود مشابه له او بطريقة اخرى ولكن علشان تعرف مكان وجود كود خطوة رقم 5 او الكون المشابه له قم بالبحث عن هذا الكود </head> تلاقيه تحته مباشرة اي بعد البدي لاحظ صورة الكود في خطوة رقم 5 . طبعا لدي مدونة اخرى عندما بحثت لم اجد نفس كود نمرة5 تماماً، فبحثت عن الكود التالي </head> ثم نظرت تحته فوجدت الكود كالصورة التالية :<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5Sk1MkDGKHbDXOe5QjPl5U0JmRTT2dOWfAbIUg_ZVdsIx-7oCK0OhF-bdcAa7_eq-0TMqRagzS6M8IIPH50r4uj04UANzRqg10Zr-KkmJD5_UYxvgxzDDAywLYhD73VSdEoWiNBMRtWY/s1600/%D9%83%D9%88%D8%AF-%D8%A7%D8%B6%D8%A7%D9%81%D8%A9-%D9%85%D8%B3%D8%A7%D8%AD%D8%A9-%D8%A7%D8%B9%D9%84%D8%A7%D9%86%D9%8A%D8%A9.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="198" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5Sk1MkDGKHbDXOe5QjPl5U0JmRTT2dOWfAbIUg_ZVdsIx-7oCK0OhF-bdcAa7_eq-0TMqRagzS6M8IIPH50r4uj04UANzRqg10Zr-KkmJD5_UYxvgxzDDAywLYhD73VSdEoWiNBMRtWY/s320/%D9%83%D9%88%D8%AF-%D8%A7%D8%B6%D8%A7%D9%81%D8%A9-%D9%85%D8%B3%D8%A7%D8%AD%D8%A9-%D8%A7%D8%B9%D9%84%D8%A7%D9%86%D9%8A%D8%A9.png" width="320" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
بعدها قمت باضافة الكود خطوة رقم 6 حتى اصبح مثل الصورة التالية :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZX6yn4__0srXw7cVovzdJIsy03s10WRUaN5xGhAaGemkcWzYqoCLDIYEh08bvYNKjFKG-zVjOXkQuN4nquY0uaJW8dU8wPD-JXvfOjjgFM5fIRoLc6nMSkLr7Q5VusWHv0WK-be2EKVA/s1600/%D8%A7%D8%B6%D8%A7%D9%81%D8%A9-%D8%A8%D9%86%D8%B1%D8%A7%D8%AA-%D8%A7%D8%B9%D9%84%D8%A7%D9%86%D9%8A%D8%A9.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="264" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZX6yn4__0srXw7cVovzdJIsy03s10WRUaN5xGhAaGemkcWzYqoCLDIYEh08bvYNKjFKG-zVjOXkQuN4nquY0uaJW8dU8wPD-JXvfOjjgFM5fIRoLc6nMSkLr7Q5VusWHv0WK-be2EKVA/s320/%D8%A7%D8%B6%D8%A7%D9%81%D8%A9-%D8%A8%D9%86%D8%B1%D8%A7%D8%AA-%D8%A7%D8%B9%D9%84%D8%A7%D9%86%D9%8A%D8%A9.png" width="320" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div style="text-align: center;">
<span style="color: blue; font-size: large;">واخيرا نرحب بتعليقاتكم واي سؤال او استفسار نحن مستعدين للاجابة</span></div>
</div>خالد محمد (ابوخلود)http://www.blogger.com/profile/17023136577166291717noreply@blogger.com20tag:blogger.com,1999:blog-3171771270267658652.post-18347829500672451072012-01-12T10:35:00.000-08:002012-01-17T11:06:17.651-08:00تعلم كيف تظيف قائمة اخر مواضيع المدونة مع عرض صور مصغرة ؟<div dir="rtl" style="text-align: right;" trbidi="on">
<div dir="rtl" style="text-align: right;" trbidi="on">
<div style="text-align: justify;">
بسم الله الرحمن الرحيم والصلاة والسلام على رسولنا الصادق الامين ، اخواني زوار المحررون العرب طبعا قد تحدثنا في درس سابق عن <a href="http://arab-editors.blogspot.com/2009/12/blog-post_23.html" target="_blank">كيفية اظافة شريط آخر مواضيع المدونة - لمدونات بلوجر ؟ </a>. ولكن درسنا اليوم يختلف عن الدرس السابق ، في هذا الدرس نشرح اسلوب او نمط آخر في كيفية اظافة اداة ( آخر المواضيع ) للمدونة او الموقع ، حيث ان هذه الاظافة تاخذ على شكل قائمة عمودية تحتوي على آخر العناوين الريئسية ( R<span style="background-color: white; color: #3c3d3f; font-family: 'Segoe UI', Calibri, 'Myriad Pro', Myriad, 'Trebuchet MS', Helvetica, sans-serif; font-size: 14px; line-height: 21px; text-align: -webkit-auto;">ecent posts )</span> للمدونة وجزء صغير من المحتوى وايظا صور مصغرة (<span style="background-color: white; color: #3c3d3f; font-family: 'Segoe UI', Calibri, 'Myriad Pro', Myriad, 'Trebuchet MS', Helvetica, sans-serif; font-size: 14px; line-height: 21px; text-align: -webkit-auto;"> T</span><b style="background-color: white; color: #3c3d3f; font-family: 'Segoe UI', Calibri, 'Myriad Pro', Myriad, 'Trebuchet MS', Helvetica, sans-serif; font-size: 14px; line-height: 21px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: -webkit-auto;">humbnail ) </b> من صور آخر المواضيع المنشورة ، هذه الاضافة تعطي المدونة مظهر جميل ورائق عند وضعها في السايد بار ( Sidebar ) ، بينما الطريقة السابقة التي اشرنا اليها تاخذ على اسلوب او نمط شريط افقي متحرك لآخر مواضيع المدونة تضعه تحت الهيدر ( Header ) مثلاً . والصورة التالية توضح قائمة ( آخر مواضيع المدونة ) في درسنا هذا : </div>
<div style="text-align: justify;">
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj02aKlmQ7fMaaACPyQYABX35pkGkg8dF7eAZFyirHRf70iUIM_iLg0JKgGJ_HYox5LPyrVvE0jTBrBkLfrFIV2jrpj7srrHy03RvGRMHpj2zh6_2vi0JneJy7IjzuteibH1vaNoH8FRQM/s1600/%25D8%25A7%25D8%25B8%25D8%25A7%25D9%2581%25D8%25A9-%25D8%25A7%25D8%25AE%25D8%25B1-%25D9%2585%25D9%2588%25D8%25A7%25D8%25B6%25D9%258A%25D8%25B9-%25D8%25A7%25D9%2584%25D9%2585%25D8%25AF%25D9%2588%25D9%2586%25D8%25A9.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="كيفية اظافة اخر مواضيع المدونة" border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj02aKlmQ7fMaaACPyQYABX35pkGkg8dF7eAZFyirHRf70iUIM_iLg0JKgGJ_HYox5LPyrVvE0jTBrBkLfrFIV2jrpj7srrHy03RvGRMHpj2zh6_2vi0JneJy7IjzuteibH1vaNoH8FRQM/s1600/%25D8%25A7%25D8%25B8%25D8%25A7%25D9%2581%25D8%25A9-%25D8%25A7%25D8%25AE%25D8%25B1-%25D9%2585%25D9%2588%25D8%25A7%25D8%25B6%25D9%258A%25D8%25B9-%25D8%25A7%25D9%2584%25D9%2585%25D8%25AF%25D9%2588%25D9%2586%25D8%25A9.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="color: blue;">قائمة آخر المواضيع</span></td></tr>
</tbody></table>
<div style="text-align: justify;">
<br />
<span style="color: red;">اذاً ، دعونا نبدا بشرح الخطوات :</span><br />
<br /></div>
<b><span style="color: red;">1 -</span></b> ادخل على <span style="font-family: Arial, Helvetica, sans-serif;"><b><span style="color: blue;">حسابك</span></b> في بلوجر . </span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span><br />
<b><span style="color: red;">2 -</span></b> من<b> <span style="color: blue;">لوحة تحكم المدونة</span></b> انقر من القائمة على (<b><span style="color: blue;"> تخطيط</span></b> ) ثم<b> (<span style="color: red;"> اضافة اداة</span></b> ) كما هو موضح في الصورة التالية :<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH-iLm1gMrIVmT53cwDfHBeUggSInrBHqHK2GSnQpInRl-APmj_1Sa8naEw1nH40oDFExgboGDX3CAEI7J78QC4QmGMd6CBeADBT8KdQnh87xKqVNwIKgGm39XFSo3jiLKVB6XEVuXVJI/s1600/%25D8%25B4%25D8%25B1%25D8%25AD-%25D8%25A7%25D8%25B8%25D8%25A7%25D9%2581%25D8%25A9-%25D8%25A7%25D8%25AE%25D8%25B1-%25D8%25A7%25D9%2584%25D9%2585%25D9%2588%25D8%25A7%25D8%25B6%25D9%258A%25D8%25B9.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="طريقة اخر مواضع المدونة مع صور مصغرة" border="0" height="302" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH-iLm1gMrIVmT53cwDfHBeUggSInrBHqHK2GSnQpInRl-APmj_1Sa8naEw1nH40oDFExgboGDX3CAEI7J78QC4QmGMd6CBeADBT8KdQnh87xKqVNwIKgGm39XFSo3jiLKVB6XEVuXVJI/s640/%25D8%25B4%25D8%25B1%25D8%25AD-%25D8%25A7%25D8%25B8%25D8%25A7%25D9%2581%25D8%25A9-%25D8%25A7%25D8%25AE%25D8%25B1-%25D8%25A7%25D9%2584%25D9%2585%25D9%2588%25D8%25A7%25D8%25B6%25D9%258A%25D8%25B9.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="color: blue;">لوحة تحكم المدونة</span></td></tr>
</tbody></table>
<br />
<span style="color: red;"><b>3 -</b></span> قم باختيار اداة <span style="background-color: white; color: #3c3d3f; font-family: 'Segoe UI', Calibri, 'Myriad Pro', Myriad, 'Trebuchet MS', Helvetica, sans-serif; font-size: 14px; line-height: 21px; text-align: -webkit-auto;"> </span><b style="background-color: white; font-family: 'Segoe UI', Calibri, 'Myriad Pro', Myriad, 'Trebuchet MS', Helvetica, sans-serif; font-size: 14px; line-height: 21px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: -webkit-auto;"><span style="color: blue;">HTML/Java Script</span></b><b style="background-color: white; color: #3c3d3f; font-family: 'Segoe UI', Calibri, 'Myriad Pro', Myriad, 'Trebuchet MS', Helvetica, sans-serif; font-size: 14px; line-height: 21px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: -webkit-auto;"> </b><span style="background-color: white; color: #3c3d3f; font-size: 14px; line-height: 21px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: -webkit-auto;"><span style="font-family: Arial, Helvetica, sans-serif;">كما هو موضح في الصورة التالي :</span></span><b style="background-color: white; color: #3c3d3f; font-family: 'Segoe UI', Calibri, 'Myriad Pro', Myriad, 'Trebuchet MS', Helvetica, sans-serif; font-size: 14px; line-height: 21px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: -webkit-auto;"> </b><br />
<b style="background-color: white; color: #3c3d3f; font-family: 'Segoe UI', Calibri, 'Myriad Pro', Myriad, 'Trebuchet MS', Helvetica, sans-serif; font-size: 14px; line-height: 21px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: -webkit-auto;"><br /></b><br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibiVGiaJ_XPF15ap8VvnVvTVl0Vx4ONQ5zR0dMD_Z1XBGJehfbQFu3JUN8y9lHgfWMqG00PwPcF0vrV5tT4fu_c9OKis5vLHDLsq34lZ7B0KZrVppzHh1vU7GO1VvKKRIS9FbxEEi6gds/s1600/%25D8%25B7%25D8%25B1%25D9%258A%25D9%2582%25D8%25A9+-%25D8%25A7%25D8%25AE%25D8%25B1-%25D9%2585%25D9%2588%25D8%25A7%25D8%25B6%25D9%258A%25D8%25B9-%25D8%25A7%25D9%2584%25D9%2585%25D8%25AF%25D9%2588%25D9%2586%25D8%25A9.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibiVGiaJ_XPF15ap8VvnVvTVl0Vx4ONQ5zR0dMD_Z1XBGJehfbQFu3JUN8y9lHgfWMqG00PwPcF0vrV5tT4fu_c9OKis5vLHDLsq34lZ7B0KZrVppzHh1vU7GO1VvKKRIS9FbxEEi6gds/s1600/%25D8%25B7%25D8%25B1%25D9%258A%25D9%2582%25D8%25A9+-%25D8%25A7%25D8%25AE%25D8%25B1-%25D9%2585%25D9%2588%25D8%25A7%25D8%25B6%25D9%258A%25D8%25B9-%25D8%25A7%25D9%2584%25D9%2585%25D8%25AF%25D9%2588%25D9%2586%25D8%25A9.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="color: blue;">قائمة الادوات </span></td></tr>
</tbody></table>
<b style="background-color: white; font-family: 'Segoe UI', Calibri, 'Myriad Pro', Myriad, 'Trebuchet MS', Helvetica, sans-serif; font-size: 14px; line-height: 21px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: -webkit-auto;"><span style="color: red;">4 -</span></b><span style="font-family: Arial, Helvetica, sans-serif;"><b style="background-color: white; color: #3c3d3f; line-height: 21px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: -webkit-auto;"> </b><span style="background-color: white; color: #3c3d3f; line-height: 21px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: -webkit-auto;">قم بنسخ ولصق الكود التالي في الاداة : </span></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><span style="background-color: white; color: #3c3d3f; line-height: 21px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: -webkit-auto;">
</span></span><br />
<span style="background-color: white; line-height: 21px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: -webkit-auto;"><span style="color: #3c3d3f; font-family: Arial, Helvetica, sans-serif;"></span></span><br />
<span style="color: #3c3d3f; font-family: Arial, Helvetica, sans-serif;"></span><br />
<span style="color: #3c3d3f; font-family: Arial, Helvetica, sans-serif;"></span><br />
<div id="code">
<span style="color: #3c3d3f; font-family: Arial, Helvetica, sans-serif;"><div class="pipesContainer"></span><br />
<span style="color: #3c3d3f; font-family: Arial, Helvetica, sans-serif;"><script src="http://pipes.yahoo.com/js/listbadge.js">{"pipe_id":"1a6640e2a78b2c6e736f2220529daae5","_btype":"list","pipe_params":{"URL":"</span><span style="color: red; font-family: Arial, Helvetica, sans-serif;">http://www.yourblog.blogspot.com</span><span style="color: #3c3d3f; font-family: Arial, Helvetica, sans-serif;">/feeds/posts/default"},"hideHeader":"false","height":"auto","count":</span><span style="color: orange; font-family: Arial, Helvetica, sans-serif;"> </span><span style="color: magenta; font-family: Arial, Helvetica, sans-serif;">8</span><span style="color: #3c3d3f; font-family: Arial, Helvetica, sans-serif;"> }</script></span><br />
<span style="color: #3c3d3f; font-family: Arial, Helvetica, sans-serif;"><div style="font-family: arial, trebuchet; font-size: 9px;">link <a href="http://arab-editors.blogspot.com">Recent Posts Thumbnails</a> by <a href="
http://arab-editors.blogspot.com/search/label/%D8%A7%D8%AF%D9%88%D8%A7%D8%AA%20%D9%88%D8%A7%D8%B6%D8%A7%D9%81%D8%A7%D8%AA%20%D8%A8%D9%84%D9%88%D8%AC%D8%B1 ">Blogger Widgets</a> </div> <noscript>Your browser does not support JavaScript!</noscript></span><br />
<span style="color: #3c3d3f; font-family: Arial, Helvetica, sans-serif;"><style type=text/css></span><br />
<span style="color: #3c3d3f; font-family: Arial, Helvetica, sans-serif;">.pipesContainer {</span><br />
<span style="color: #3c3d3f; font-family: Arial, Helvetica, sans-serif;">margin:10px 0 10px 0;</span><br />
<span style="color: #3c3d3f; font-family: Arial, Helvetica, sans-serif;">padding:0px;</span><br />
<span style="color: #3c3d3f; font-family: Arial, Helvetica, sans-serif;">background:none;</span><br />
<span style="color: #3c3d3f; font-family: Arial, Helvetica, sans-serif;">}</span><br />
<span style="color: #3c3d3f; font-family: Arial, Helvetica, sans-serif;">.pipesHolder {</span><br />
<span style="color: #3c3d3f; font-family: Arial, Helvetica, sans-serif;">padding: 0px!important;</span><br />
<span style="color: #3c3d3f; font-family: Arial, Helvetica, sans-serif;">margin:10px 0px!important;</span><br />
<span style="color: #3c3d3f; font-family: Arial, Helvetica, sans-serif;">}</span><br />
<span style="color: #3c3d3f; font-family: Arial, Helvetica, sans-serif;">.pipesTitle {</span><br />
<span style="color: #3c3d3f; font-family: Arial, Helvetica, sans-serif;">padding-top:0px!important;</span><br />
<span style="color: #3c3d3f; font-family: Arial, Helvetica, sans-serif;">line-height:14px;</span><br />
<span style="color: #3c3d3f; font-family: Arial, Helvetica, sans-serif;">font-weight:bold!important;</span><br />
<span style="color: #3c3d3f; font-family: Arial, Helvetica, sans-serif;">}</span><br />
<span style="color: #3c3d3f; font-family: Arial, Helvetica, sans-serif;">/*.pipesDescription,*/</span><br />
<span style="color: #3c3d3f; font-family: Arial, Helvetica, sans-serif;">.pipesSmallthumb {</span><br />
<span style="color: #3c3d3f; font-family: Arial, Helvetica, sans-serif;">display:none!important;</span><br />
<span style="color: #3c3d3f; font-family: Arial, Helvetica, sans-serif;">}</span><br />
<span style="color: #3c3d3f; font-family: Arial, Helvetica, sans-serif;">.pipesThumbnail img {</span><br />
<span style="color: #3c3d3f; font-family: Arial, Helvetica, sans-serif;">background-color: transparent;</span><br />
<span style="color: #3c3d3f; font-family: Arial, Helvetica, sans-serif;">background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIhOitNP3qck5kI8W-N9rxxealxxPkWrOase6sxgGKu-8O94DKsFNP1n5ceOE2d3cmQmznCYkBLANjXV959y0npKw61P3djba6TgxCREF8mr2Awtx1HEwTrHOrWTovBdKMKIVUTxXF8uI/s400/bloggerlogo-4.png) no-repeat top center;</span><br />
<span style="color: #3c3d3f; font-family: Arial, Helvetica, sans-serif;">border: none!important;</span><br />
<span style="color: #3c3d3f; font-family: Arial, Helvetica, sans-serif;">height:auto!important;</span><br />
<span style="color: #3c3d3f; font-family: Arial, Helvetica, sans-serif;">width:72px!important;</span><br />
<span style="color: #3c3d3f; font-family: Arial, Helvetica, sans-serif;">}</span><br />
<span style="color: #3c3d3f; font-family: Arial, Helvetica, sans-serif;">.yba,.ybf {display:none!important;}</span><br />
<span style="color: #3c3d3f; font-family: Arial, Helvetica, sans-serif;">.ygt {margin-top:10px;margin-bottom:10px;font-size:9px;float:left;}</span><br />
<span style="color: #3c3d3f; font-family: Arial, Helvetica, sans-serif;">.ybr li {background-color: transparent!important; padding:0px!important;}</span><br />
<span style="color: #3c3d3f; font-family: Arial, Helvetica, sans-serif;"></style></div></span><br />
<div style="text-align: -webkit-auto;">
<span style="color: orange; font-family: Arial, Helvetica, sans-serif;"><span style="line-height: 21px;"><br /></span></span></div>
</div>
</div>
توضيح على الكود :<br />
<br />
* قم بوضع رابط مدونتك او موقعك مكان<span style="color: red;"> اللون الاحمر</span> في الكود اعلاه ،
<br />
<br />
* <span style="color: magenta;">اللون الوردي :</span> = <span style="color: magenta;">8</span> يشير الى عدد المواضيع ( العناوين ) الذي تريدهم يظهرون ، هنا عددهم الافتراضي في الكود =<span style="color: orange;"> </span><span style="color: magenta;">8 </span>بامكانك تخفيض العدد الى 6 او 5 او اقل على رغبتك .<br />
<br />
<b><span style="color: red;"> 5 -</span></b> واخيرا قم بعمل <b><span style="color: blue;">حفظ للاداة</span></b> . وصلى الله وسلم على رسولنا الكريم ،،،<br />
<br />
<br />
<br />
<div style="text-align: center;">
<span style="color: red; font-size: large;">تعليقاتكم تهمنا ،، وزيارتكم تسرنا </span></div>
</div>خالد محمد (ابوخلود)http://www.blogger.com/profile/17023136577166291717noreply@blogger.com8tag:blogger.com,1999:blog-3171771270267658652.post-24611069575033573922012-01-06T10:23:00.000-08:002012-01-06T12:31:43.418-08:00الطريقة الثانية : كيفية انشاء ووضع جدول في محتوى تدوينة بلوجر ؟<div dir="rtl" style="text-align: right;" trbidi="on">
<div style="text-align: justify;">
بسم الله الرحمن الرحيم والصلاة والسلام على اشرف الخلق محمد ابن عبدالله الصادق الامين اخواني الاعزاء شرحنا في الدرس السابق <a href="http://arab-editors.blogspot.com/2011/12/blog-post.html" target="_blank">طريقة عمل جدول في مدونات بلوقر</a> و وعدناكم باننا سنشرح طريقة اخرى مبسطة . اليوم سنتعلم في موضوعنا هذا الطريقة الثانية في كيفية انشاء ووضع جداول بيانات في محتوى تدوينات مدونات بلوجر ، هذه الطريقة بسيطة وسهلة لماذا ؟ لانها بواسطة احدى برامج مايكروسوفت اوفس ( Microsoft office ) الا وهو <span style="color: red;">برنامج مايكروسوفت اوفس وورد ( Microsoft office word )</span> والكل يعرف هذا البرنامج وهو مخصص للنصوص . </div>
<div style="text-align: justify;">
<br /></div>
<span style="color: blue;">دعونا نبدا بالخطوات :</span><br />
<br />
<b><span style="color: red;">1 -</span></b> افتح برنامج <span style="color: red;">الورد (MS Word)</span> وقم بعمل<span style="color: blue;"> ادراج جدول</span> فيه حسب رغبتك من ناحية عدد الصفوف والاعمدة وتنسيق الجدول من ناحية الحدود وحتى كتابة البيانات بداخلة واي شي آخر .<br />
<br />
<span style="color: red;"><b>2 -</b></span> اضغط على قائمة <span style="color: red;">( ملف Manual )</span> من نفس برنامج الورد ثم اختار<span style="color: red;"> ( حفظ باسم save as ) </span> .<br />
<br />
<span style="color: red;"><b>3 -</b></span> بعد عملية <span style="color: red;">( حفظ باسم save as )</span> تظهر قائمة تحدد فيها مكان الحفظ واسم الملف ونوع الملف ، <span style="color: red;">اختار حفظ بنوع ( Web Page )</span> كما هو موصح في الصورة التالية :<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZx_SE-dgv31n8Ofm9WkA7NISgwu7a7oqPRDEd012M9mvqrQ_VmQHzFl05J8SCPXyRHEUOFlkzBl6V9IkqfB63rlCfWEPKIue_SxmnOzXDaZ0Z9WUM8MPGI8JmPyr383wswR28n0pbzts/s1600/%25D8%25A7%25D9%2586%25D8%25B4%25D8%25A7%25D8%25A1-%25D8%25AC%25D8%25AF%25D9%2588%25D9%2584-%25D9%2581%25D9%258A-%25D8%25A8%25D9%2584%25D9%2588%25D8%25AC%25D8%25B1.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="280" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZx_SE-dgv31n8Ofm9WkA7NISgwu7a7oqPRDEd012M9mvqrQ_VmQHzFl05J8SCPXyRHEUOFlkzBl6V9IkqfB63rlCfWEPKIue_SxmnOzXDaZ0Z9WUM8MPGI8JmPyr383wswR28n0pbzts/s400/%25D8%25A7%25D9%2586%25D8%25B4%25D8%25A7%25D8%25A1-%25D8%25AC%25D8%25AF%25D9%2588%25D9%2584-%25D9%2581%25D9%258A-%25D8%25A8%25D9%2584%25D9%2588%25D8%25AC%25D8%25B1.JPG" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
<b><span style="color: red;">4 -</span></b> بعد حفظ الملف<span style="color: red;"> كنوع ( Web Page )</span> قم بفتح الملف بواسطة برنامج<span style="color: red;"> محرر النص ( Notepad )</span> او برنامج<span style="color: red;"> ( Edit Plus ) </span>فيظهر كود الجدول.<br />
<br />
<b><span style="color: red;">5 -</span></b> قم <span style="color: blue;">بنسخ</span> الكود بالكامل ومن ثم قم بلصقة في محرر<span style="color: red;"> نصوص مدونتك</span> بداخل تبويب <span style="color: red;">( HTML )</span> . او انسخ جزء من الكود الذي يبداء بوسم ( <table> ) وينتهي بـ ( </table> ) .<br />
<br />
<b><span style="color: red;">6 -</span></b> واخيرا قم بعمل حفظ لجدولك ومبرووووووووك ،،،<br />
<br />
<br />
<br />
<div style="text-align: center;">
<b><span style="color: blue; font-size: large;">تعليقاتكم تهمنــــــــــــا وزيارتكم تســــــــــرنا </span></b></div>
<br />
<br /></div>خالد محمد (ابوخلود)http://www.blogger.com/profile/17023136577166291717noreply@blogger.com16tag:blogger.com,1999:blog-3171771270267658652.post-56973189573915552772011-12-27T12:23:00.001-08:002011-12-30T05:44:07.266-08:00طريقة اضافة زر عداد التعليقات لمدونات بلوقر<div dir="rtl" style="text-align: right;" trbidi="on">
<div dir="rtl" style="text-align: right;" trbidi="on">
<div dir="rtl" style="text-align: right;" trbidi="on">
<div dir="rtl" style="text-align: right;" trbidi="on">
<div dir="rtl" style="text-align: right;" trbidi="on">
<div dir="rtl" style="text-align: right;" trbidi="on">
<div style="text-align: justify;">
<b>بسم الله الرحمن الرحيم</b> : والصلاة والسلام على رسول لله محمد ابن عبد الله .اخوتي الكرام زوار مدونة المحررون العرب السلام عليكم ورحة الله وبركاتة ، طبعا تعلمنا في الدرس السابق <a href="http://arab-editors.blogspot.com/2011/12/blog-post.html" target="_blank">طريقة كيفية وضع جداول في مدونة بلوجر</a> وها نحن اليوم نبداء بدرس أخر نتعلم فيه كيف تظيف او تعمل عداد لتعليقات مدونة بلوجر على شكل زر فقاعة (bubble) ؟ هذا العداد يستعرض عدد التعليقات في كل موضوع من مواضيع مدونتك ، وايظا يعطي تاتير على تشجيع زوار المدونة بالتعليق على تدويناتك . وفي نفس الوقت يسلط الضوء لمصداقية تدويناتك عند القرأء والزوار لما فيها من تعليقات كثيرة .</div>
<div style="text-align: justify;">
طبعا العداد ياخذ على الشكل الموضح في الصورة التالية ويظهر في الصفحة الرئيسية امام عنوان كل تدوينة قمت بنشرها في مدونتك وطريقة تركيبة ليست معقدة او صعبة ، ولكن انصح ان تقوم بعمل نسخة احتياطة لقالب المدونة قبل اي عملية ستقوم بها . ليس في هذا الدرس فقط بل في اي درس شاهدتة في اي موقع اخر او منتدى او مدونة قبل تغيير اي شي لازم من عمل نسخة احتياطية وذلك للحيطة والحذر ،،،</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8lstYDVsQnlTWftlixgWOeurHvVaNcFaqVvQBXP9fEhWZNCeAGTwUA8y9FCGzLH-e4TrVPi3SoSudtDOi5ft6qYGdmL5RbLx-gF1NIewpyv2Hu5PtIwP7nXBVuyGtsZoFg_r8twi9Dec/s1600/%25D8%25A7%25D8%25B6%25D8%25A7%25D9%2581%25D8%25A9%252B%25D8%25B2%25D8%25B1%252B%25D8%25AA%25D8%25B9%25D9%2584%25D9%258A%25D9%2582%25D8%25A7%25D8%25AA.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="173" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8lstYDVsQnlTWftlixgWOeurHvVaNcFaqVvQBXP9fEhWZNCeAGTwUA8y9FCGzLH-e4TrVPi3SoSudtDOi5ft6qYGdmL5RbLx-gF1NIewpyv2Hu5PtIwP7nXBVuyGtsZoFg_r8twi9Dec/s400/%25D8%25A7%25D8%25B6%25D8%25A7%25D9%2581%25D8%25A9%252B%25D8%25B2%25D8%25B1%252B%25D8%25AA%25D8%25B9%25D9%2584%25D9%258A%25D9%2582%25D8%25A7%25D8%25AA.png" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="color: red;">اضغط الصورة للتكبير</span></td></tr>
</tbody></table>
<br />
<b><span style="color: blue;">اذاً دعونا نبدا على مرحلة مرحلة كيف تظيف زر عداد للتعليقات على شكل فقاعة او اي شكل آخر ؟ :</span></b><br />
<br />
<div style="text-align: justify;">
<b><span style="color: red;">1 -</span></b> من لوحة تحكم مدونتك ادخل على تبويب <span style="color: blue;">(<b> قالب</b> )</span> ومن ثم (<b> <span style="color: blue;">تحرير HTML</span></b> ) وبعدها انقر على (<span style="color: blue;"> <b>متابعة</b></span> ) ثم اعمل <span style="color: red;">علامة صح </span>على<span style="color: blue;"> <span style="background-color: white; font-family: Arial, Helvetica, sans-serif; text-align: -webkit-auto;"><b>توسيع قوالب عناصر واجهة المستخدم</b></span></span><span style="background-color: white; color: #222222; font-family: Arial, Helvetica, sans-serif; text-align: -webkit-auto;"><b> </b>. </span></div>
<div style="text-align: justify;">
<span style="background-color: white; color: #222222; font-family: Arial, Helvetica, sans-serif; text-align: -webkit-auto;"><br /></span></div>
<span style="background-color: white; font-family: Arial, Helvetica, sans-serif; text-align: -webkit-auto;"><b><span style="color: red;">2 -</span></b><span style="color: #222222;"> ابحث علة الكود التالي باستخدام مفتاح </span><span style="color: red;">( CTRL+F )</span><span style="color: #222222;"> : -</span></span><br />
<div id="code">
]]></b:skin><br />
<br /></div>
</div>
</div>
<b><span style="color: red;">3 -</span></b> قم <b><span style="color: blue;">بنسخ</span></b> الكود التالي <b><span style="color: blue;">ثم الصقة</span></b> فوق<b><span style="color: blue;"> الكود نمره 2</span></b> مباشرة :<br />
<br />
<div id="code">
.comments-button {<br />
width : 48px;<br />
height : 48px;<br />
background : url(<span style="color: blue;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5j6UCC5kFGuVDCDJtFGh_OwYAgdH0wyKgWhyphenhyphenUsoQGpXTnvaD35fReYClHxopn-jAx39CPzS7idMNtIKJUniqtfULLLR0kDa8MsNEkP1LfUl7BEY4EZ_u5leaNXY9rQT_z-1n7elfIKsXj/s200/comment-counter-bubble.png</span>) no-repeat;<br />
<span style="color: red;">float : left;</span><br />
font-size : 18px;<br />
margin-top : -15px;<br />
margin-right : 2px;<br />
text-align : center;<br />
padding-top:10px;</div>
</div>
<br />
<div style="text-align: justify;">
<span style="color: blue;"><b>ملاحظة :</b></span></div>
<div style="text-align: justify;">
<b><span style="color: blue;">اللون الازرق</span> :</b> هو رابط صورة زر التعليقات بامكانك ان تصمم صورة اخرى لزر التعليقات او تبحث عن صورة اخرى في جوجل ثم تضعها في اي موقع من مواقع تحميل الصور وبعدها قم بنسخ رابط صورتك الجديدة وضعة مكان <span style="color: blue;">اللون الازرق</span> . </div>
<div style="text-align: justify;">
<b><span style="color: red;">اللون الاحمر</span> :</b> هو اتجاة زر التعليقات الى اليسار امام عنوان الموضوع مباشرة كما هو موضح في الصورة الاولى في مقدمة الدرس بامكانك تختار اتجاه ( <span style="color: red;">right</span> ) اذا رغبت . <span style="color: red;">انظر الصورة التالي</span> :<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIb-kUrML5poNptIVI6Lmve9gNJqX1jC0qeP3GGOoqX8vM41QE6YB6i0Z9YfoD11na3v0lku2UgIOgUfny9eiYacGh5klTGHJ2m6cnCHYxJWj5H6mkdyCKlC3vSpAUXITOG-esUCInomo/s1600/%25D9%2588%25D8%25B6%25D8%25B9%252B%25D8%25B9%25D8%25AF%25D8%25A7%25D8%25AF%252B%25D8%25A7%25D9%2584%25D8%25AA%25D8%25B9%25D9%2584%25D9%258A%25D9%2582%25D8%25A7%25D8%25AA+%252B1.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="285" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIb-kUrML5poNptIVI6Lmve9gNJqX1jC0qeP3GGOoqX8vM41QE6YB6i0Z9YfoD11na3v0lku2UgIOgUfny9eiYacGh5klTGHJ2m6cnCHYxJWj5H6mkdyCKlC3vSpAUXITOG-esUCInomo/s400/%25D9%2588%25D8%25B6%25D8%25B9%252B%25D8%25B9%25D8%25AF%25D8%25A7%25D8%25AF%252B%25D8%25A7%25D9%2584%25D8%25AA%25D8%25B9%25D9%2584%25D9%258A%25D9%2582%25D8%25A7%25D8%25AA+%252B1.png" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="color: red;"><b>اضغط الصورة للتكبير</b></span></td></tr>
</tbody></table>
</div>
<span style="color: red;"><b>4 -</b></span> ابحث عن الكود التالي في مدونتك بواسطة مفتاح البحث <span style="color: red;">( CTRL+F ) </span>:<br />
<br />
<div id="code">
<span style="color: red;"><b:includable id='post' var='post'></span><br />
<div class='post hentry uncustomized-post-template'><br />
<a expr:name='data:post.id'/><br />
<b:if cond='data:post.title'><br />
<h3 class='post-title entry-title'><br />
<b:if cond='data:post.link'><br />
<a expr:href='data:post.link'><data:post.title/></a></div>
</div>
<div style="text-align: justify;">
يمكن البحث عن هذا الكود باستخدام السطر الاول من الكود الذي<span style="color: red;"> باللون الاحمر</span> ومن ثم التاكد ان الكود اعلاه موجود في مدونتك كما هو.<span style="color: red;"><b> انظر الصورة التالية : </b></span></div>
<div style="text-align: justify;">
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIlgqPvfsVRIl9ST2A5QKI_YY0kRpE7hwhe-obaMH41nJMb2UU1p1SNHejsDb18RnB-yO2wQmqPXheQGiwo884VgrqTvS7yloAVASLv6-KPJc0DQGYBYxGlbLqBh42jfY0PMp1-qucevk/s1600/%25D8%25B9%25D9%2585%25D9%2584%252B%25D8%25B9%25D8%25AF%25D8%25A7%25D8%25AF%252B%25D9%2584%25D9%2584%25D8%25AA%25D8%25B9%25D9%2584%25D9%258A%25D9%2582%25D8%25A7%25D8%25AA3.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="286" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIlgqPvfsVRIl9ST2A5QKI_YY0kRpE7hwhe-obaMH41nJMb2UU1p1SNHejsDb18RnB-yO2wQmqPXheQGiwo884VgrqTvS7yloAVASLv6-KPJc0DQGYBYxGlbLqBh42jfY0PMp1-qucevk/s400/%25D8%25B9%25D9%2585%25D9%2584%252B%25D8%25B9%25D8%25AF%25D8%25A7%25D8%25AF%252B%25D9%2584%25D9%2584%25D8%25AA%25D8%25B9%25D9%2584%25D9%258A%25D9%2582%25D8%25A7%25D8%25AA3.png" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="color: red;"><b>اضغط الصورة للتكبير</b></span></td></tr>
</tbody></table>
</div>
<b><span style="color: red;">5 -</span></b> قم بنسخ الكود التالي وضعه كما هو مبين في الصورة التالي :<br />
<br />
<div id="code">
<b:if cond='data:post.allowComments'><br />
<a class='comments-button' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a><br />
</b:if></div>
</div>
الصورة توضع كيفية وضع الكود خطوة 5 في كود خطوة 4 :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnhkwnNqCvYQlyZUFeImrT-yDZZWVRVuF2eA2Gv-E2Pml_1BET4TrdfKMsdTB4CVMoc639IKrWFOmq3_PBvMQnQavQdnoQe6r7tPu-XnwJKPamSEfVUroNzgPwr-uQKL0jzNC3oV3JWn4/s1600/%25D9%2583%25D9%2588%25D8%25AF+%252B%25D8%25A7%25D8%25B6%25D8%25A7%25D9%2581%25D8%25A9+%252B%25D8%25B2%25D8%25B1%252B%25D8%25B9%25D8%25AF%25D8%25A7%25D8%25AF%252B%25D8%25A7%25D9%2584%25D8%25AA%25D8%25B9%25D9%2584%25D9%258A%25D9%2582%25D8%25A7%25D8%25AA.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnhkwnNqCvYQlyZUFeImrT-yDZZWVRVuF2eA2Gv-E2Pml_1BET4TrdfKMsdTB4CVMoc639IKrWFOmq3_PBvMQnQavQdnoQe6r7tPu-XnwJKPamSEfVUroNzgPwr-uQKL0jzNC3oV3JWn4/s1600/%25D9%2583%25D9%2588%25D8%25AF+%252B%25D8%25A7%25D8%25B6%25D8%25A7%25D9%2581%25D8%25A9+%252B%25D8%25B2%25D8%25B1%252B%25D8%25B9%25D8%25AF%25D8%25A7%25D8%25AF%252B%25D8%25A7%25D9%2584%25D8%25AA%25D8%25B9%25D9%2584%25D9%258A%25D9%2582%25D8%25A7%25D8%25AA.png" /></a></div>
<br />
<b><span style="color: blue;">يعني بحيث يصبح الكود على الشكل التالي :</span></b><br />
<br />
<div id="code">
<span style="color: #38761d;"><b:includable id='post' var='post'></span><br />
<span style="color: #38761d;"><div class='post hentry uncustomized-post-template'></span><br />
<span style="color: #38761d;"><a expr:name='data:post.id'/></span><br />
<span style="color: #38761d;"><b:if cond='data:post.title'></span><br />
<span style="color: #38761d;"><h3 class='post-title entry-title'></span><br />
<span style="color: red;"><b:if cond='data:post.allowComments'></span><br />
<span style="color: red;"><a class='comments-button' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a></span><br />
<span style="color: red;"></b:if></span><br />
<span style="color: #38761d;"><b:if cond='data:post.link'></span><br />
<span style="color: #38761d;"><a expr:href='data:post.link'><data:post.title/></a></span></div>
</div>
<div style="text-align: justify;">
*<span style="color: #38761d;"> اللون الاخضر </span>هو الكود الذي قمنا بالبحث عنة في خطوة رقم 4 ثم وضعنا الكود خطوة رقم 5 بداخلة الذي يرمز له<span style="color: red;"> باللون الاحمر .</span></div>
<div style="text-align: justify;">
<span style="color: red;">ملاحظة :</span> طبعا هنا قمنا بعملية دمج للكودين مع بعض فاصبحو كود واحد ، بامكانك نسخ هذا الكود ولصقة مباشرة بعد ما تبحث اولا على الكود نمرة 4 وازالته .اي مسح الكود خطوة4 من مدونتك ثم نسخ ولصق الكود الاخير. (طريقة مختصرة ) .<br />
<span style="color: red;"><b>انظر للصورة التالية : </b></span><br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTIwCsWL0beqDzO_9rnJX2DgRytJBUnRAG897cyXw8fLi48N7NeGOq-9USGVuxo5XLzBhNbJvp0wcn0CnpJsBC01tfXsm_DCM0L-FKgoAd2zxXcblH6VyiLM797UqTYC3ZIZdtOVaFjc4/s1600/%25D8%25A7%25D8%25B6%25D8%25A7%25D9%2581%25D8%25A9%252B%25D8%25B9%25D8%25AF%25D8%25A7%25D8%25AF%252B%25D9%2584%25D9%2584%25D8%25AA%25D8%25B9%25D9%2584%25D9%2582%25D9%258A%25D8%25A7%25D8%25AA%252B%25D9%2581%25D9%258A%252B%25D8%25A8%25D9%2584%25D9%2588%25D8%25AC%25D8%25B1%252B4.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="286" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTIwCsWL0beqDzO_9rnJX2DgRytJBUnRAG897cyXw8fLi48N7NeGOq-9USGVuxo5XLzBhNbJvp0wcn0CnpJsBC01tfXsm_DCM0L-FKgoAd2zxXcblH6VyiLM797UqTYC3ZIZdtOVaFjc4/s400/%25D8%25A7%25D8%25B6%25D8%25A7%25D9%2581%25D8%25A9%252B%25D8%25B9%25D8%25AF%25D8%25A7%25D8%25AF%252B%25D9%2584%25D9%2584%25D8%25AA%25D8%25B9%25D9%2584%25D9%2582%25D9%258A%25D8%25A7%25D8%25AA%252B%25D9%2581%25D9%258A%252B%25D8%25A8%25D9%2584%25D9%2588%25D8%25AC%25D8%25B1%252B4.png" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><b><span style="color: red;">اضغط الصورة للتكبير</span></b></td></tr>
</tbody></table>
</div>
<div style="text-align: justify;">
<b><span style="color: red;">6 -</span></b> واخيرا قم بعملية<span style="color: blue;"><b> حفظ للقالب </b></span>وافتح صفحة مدونتك الرئيسية لتشاهد زر التعليقات على شكل فقاعة امام العناوين الريسية .</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: center;">
<b><span style="color: blue;">ومبروووك عليكم الاضافة ،،، وماعليكم سوى الدعاء الصالح بظهر الغيب لأخيكم العبد الفقير لله صاحب المدونة </span></b></div>
<div style="text-align: center;">
<b><span style="color: blue;">واي سؤال او استفسار نرحب بها في التعليقات ،،،</span></b></div>
</div>خالد محمد (ابوخلود)http://www.blogger.com/profile/17023136577166291717noreply@blogger.com2tag:blogger.com,1999:blog-3171771270267658652.post-21600883460178195512011-12-23T10:44:00.000-08:002011-12-28T10:26:17.793-08:00طريقة عمل جدول في مدونات بلوجر<div dir="rtl" style="text-align: right;" trbidi="on">
<div dir="rtl" style="text-align: right;" trbidi="on">
<div dir="rtl" style="text-align: right;" trbidi="on">
<div dir="rtl" style="text-align: right;" trbidi="on">
<div dir="rtl" style="text-align: right;" trbidi="on">
<div dir="rtl" style="text-align: right;" trbidi="on">
<div dir="rtl" style="text-align: right;" trbidi="on">
<div dir="rtl" style="text-align: right;" trbidi="on">
<div dir="rtl" style="text-align: right;" trbidi="on">
<div style="text-align: justify;">
السلام عليكم ورحة الله وبركاتة اخواني الكرام اليوم سنتعلم درس جديد عن كيفية وضع جدول او كشف بيانات في مدونة بلوقر ، طبعا هناك الكثير من المدونيين او اصحاب المدونات عندما ينشرون مواضيع في مدوناتهم احيانا يحتاجون لعمل جداول بيانية او احصائية او محاسبية مثلا او اي جدول آخر في محتوى موضوعاتهم ( تدويناتهم ) او قد تخطر في بالهم هذه الفكرة ولكن لا يعلمون كيف ؟ لأن <span style="color: red;">محرر نصوص بلوجر</span><span style="color: blue;"> القديم</span> او<span style="color: blue;"> الجديد</span> لا توجد به خاصية لانشاء جدول او جداول احصائية. وانا واحد من هولاء الذين كنت لا اعلم بذلك ولكن بعد بحثي في بعض المصادر الاجنية وجدت طريقة بسيط جدا من خلال <span style="color: red;">صندوق محرر الرسائل مباشرة</span>، طبعا هناك توجد عدة طرق لانشاء جداول في بلوجر ولكن كل طريقة تختلف عن الاخرى وفي درسنا هذا سنتعلم اولا الطريقة باكواد CSS Styling في <span style="color: red;">10 خطوات مبسطة</span> ومن ثم في درس آخر سنتعلم الطريقة الاخرى ان شاء الله تعالى . </div>
<div style="text-align: justify;">
في هذا الدرس ستتعلم على خطوة خطوة كيف تعمل او تضع جدول بدءا من بسيط الى جدول اكثر تعقيدا مع الالوان والخلفيات والحدود . وفي آخر الدرس نعطي<span style="color: blue;"> مثال عملي تطبيقي شامل كل الخطوات </span>.</div>
<div style="text-align: justify;">
اولا سنبدا بجدول بسيط ذو ثلاثة اعمدة وثلاثة صفوف وبعدها نستمر تدريجيا على خطوة خطوة لنحسن شكل ووظيفة الجدول حتى نحصل على الجدول كما هو موضع في الصورة ادناه :</div>
<div style="text-align: justify;">
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilB1sqwgFGpBlQK3Lspb-s0nKHaAFI1QGRDbaaMhrJWnP0s7Bbcvkzn9k4LtNTkIw_DPs4o3hG4QBpYV4hWue7PhKN4Ocnb4FdBYyWG9YdFYPS11R6hqX9X3YLKg06liumESZPxUBAYAM/s1600/%25D8%25B5%25D9%2588%25D8%25B1%25D8%25A9+%25D9%2583%25D8%25B4%25D9%2581.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="201" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilB1sqwgFGpBlQK3Lspb-s0nKHaAFI1QGRDbaaMhrJWnP0s7Bbcvkzn9k4LtNTkIw_DPs4o3hG4QBpYV4hWue7PhKN4Ocnb4FdBYyWG9YdFYPS11R6hqX9X3YLKg06liumESZPxUBAYAM/s400/%25D8%25B5%25D9%2588%25D8%25B1%25D8%25A9+%25D9%2583%25D8%25B4%25D9%2581.png" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="color: red;">اضغط على الصورة للتكبير</span></td></tr>
</tbody></table>
<br />
<span style="color: blue;"><b>دعونا نبدا بالخطوات وبسم الله الرحمن الرحيم :</b></span><br />
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b><span style="color: red;">1 -</span></b> من لوحة تحكم مدونتك اضغط على زر (<span style="color: red;"> <b>انشاء مشاركة جديدة</b></span> -<span style="color: red;"><b> نشر</b></span>) والذي يرمز له برمز القلم . او قم بفتح مشاركتك المحفوظة في مسودة المشاركات التي كتبتها سابقا ولم تنشرها وتريد لها جدول مثلا .</div>
<div style="text-align: justify;">
<br /></div>
<b><span style="color: red;">2 -</span></b> في <span style="color: blue;">صندوق محرر النصوص</span> تجد تبويبين (<span style="color: red;"> تأليف</span> و <span style="color: red;">HTML </span>) انقر على تبويب ( <span style="color: red;">HTML</span> ) .<br />
<br />
<b><span style="color: red;">3 -</span></b> انسخ الكود التالي وقم بلصقة في صندوق محرر النصوص (<span style="color: red;">HTML </span>) . انظر للصور التي بعد الكود توضح العملية :<br />
<br />
<div id="code">
<table border="<span style="color: blue;">2</span>" bordercolor="<span style="color: magenta;">#0033FF</span>" style="background-color:<span style="color: red;">#99FFFF</span>" width="<span style="color: #e69138;">100</span>%" cellpadding="<span style="color: purple;">3</span>" cellspacing="<span style="color: #38761d;">3</span>"><br />
<tr><br />
<th>عمــود رقم 1</th><br />
<th>عمــود رقم 2</th><br />
<th>عمــود رقم 3</th><br />
</tr><br />
<tr><br />
<td>خلية حرف أ</td><br />
<td>خلية حرف ب</td><br />
<td>خلية حرف ت</td><br />
</tr><br />
<tr><br />
<td>خلية حرف ث</td><br />
<td>خلية حرف ج</td><br />
<td>خلية حرف ح</td><br />
</tr><br />
<tr"><br />
<td>خلية حرف خ</td><br />
<td>خلية حرف د</td><br />
<td>خلية حرف ذ</td><br />
</tr><br />
</table></div>
لتوضح الالوان الموجودة في الكود :<br />
*<span style="color: blue;"> اللون الازرق</span> : رقم <span style="color: blue;">2</span> باللون الازرق في الكود يقصد به عرض حدود الجدول .<br />
* <span style="color: magenta;">اللون الوردي</span> : يقصد به كود لون حدود الجدول ( لون حدود الجدول ) .<br />
*<span style="color: red;"> اللون الاحمر</span> : يقصد به كود لون خلفية الجدول ( لون خلفية الجدول ) .<br />
*<span style="color: orange;"> اللون البرتقالي</span> : الرقم اوالنسبة <span style="color: orange;">100%</span> يقصد بها عرض الجدول في المدونة بامكانك تغيير النسبة بما يتناسب مع مدونتك .<br />
*<span style="color: purple;"> اللون البني الغامق</span> : رقم <span style="color: purple;">3</span> =Cellpaddin يقصد به توسيع خانات او خلايا الجدول بامكانك تغييره الى اي رقم آخر .<br />
* <span style="color: #38761d;">الاخضر الغامق : </span>رقم<span style="color: #38761d;"> 3 </span>=Cellspacing يقصد به توسيع حدود الجدول الخارجية وايظا توسيع الحدود التي بين الخلايا .<br />
* <b>عمود رقم 1</b> : يمكنك تغيير كلمة (عمود رقم1 و2 و3 ) رأس الجدول الى الكلمات التي تريدها حسب جدولك هذا مجرد مثال فقط .<br />
* <b>خلية حرف أ</b> : وايظا يمكنك تغيير كلمة ( خلية حرف أ و ب و ت ... الخ ) خلايا الصفوف حسب جدولك الى ارقام او كلمات اخرى هذا مثال فقط على الكود .<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5JAv9XFBH0hoBxEyDIE6ngkfS-iqN7XiKKtL775Zq8SV6_G0fr2Pin4l2cexOtGXCnuYiNDRJKy1A86AcL9g5IVcRMfYY6VfnM_9B2X_q31NSiVJ0RxhuJCRcDAdVMhzfjyTbMLo8oi8/s1600/%25D8%25A7%25D9%2586%25D8%25B4%25D8%25A7%25D8%25A1%252B%25D8%25AC%25D8%25AF%25D9%2588%25D9%2584%252B%25D9%2581%25D9%258A+%252B%25D8%25A8%25D9%2584%25D9%2588%25D8%25AC%25D8%25B1.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="149" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5JAv9XFBH0hoBxEyDIE6ngkfS-iqN7XiKKtL775Zq8SV6_G0fr2Pin4l2cexOtGXCnuYiNDRJKy1A86AcL9g5IVcRMfYY6VfnM_9B2X_q31NSiVJ0RxhuJCRcDAdVMhzfjyTbMLo8oi8/s400/%25D8%25A7%25D9%2586%25D8%25B4%25D8%25A7%25D8%25A1%252B%25D8%25AC%25D8%25AF%25D9%2588%25D9%2584%252B%25D9%2581%25D9%258A+%252B%25D8%25A8%25D9%2584%25D9%2588%25D8%25AC%25D8%25B1.png" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="color: red;">اضغط الصورة للتكبير</span></td></tr>
</tbody></table>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQVCx97o2WRmvwqFKcBiStgQpDszi7dXb5ViSHbZiLDEpeiOYE8eOXWCSwap1y3jKTZg65ro2AqGFI1ZB9BaVwTYC1MxCwgO-80Wg7DNhzarYPF_zCY8MKRiv3MRQpZWf6swzoI0Wdo7c/s1600/HTML-code-table.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="235" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQVCx97o2WRmvwqFKcBiStgQpDszi7dXb5ViSHbZiLDEpeiOYE8eOXWCSwap1y3jKTZg65ro2AqGFI1ZB9BaVwTYC1MxCwgO-80Wg7DNhzarYPF_zCY8MKRiv3MRQpZWf6swzoI0Wdo7c/s400/HTML-code-table.png" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="color: red;">اضغط الصورة للتكبير</span></td></tr>
</tbody></table>
<br />
<div style="text-align: justify;">
طبعا اخوتي الكرام لا تنسو ان هذا الكود ينتج عنه جدول ذو ثلاثة اعمدة وثلاث صفوف ( انظر للصورة ادناه ) يعني عبارة عن 12 خانة ويعتبر الكود الاساسي في درسنا هذا . اما بقية الخطوات التالية التي سنتعلمها هي عبارة عن اضافة ميزات مختلفة للجدول ، بما في ذلك كيفية اضافة المزيد من الاعمدة والصفوف للجدول و لون خلفية رأس الجدول والحدود ، وكذا اضافة عنوان للجدول تحته او فوقة مباشرة وايظا تغيير حجم الجدول .</div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVx2rM05eALJkvkAs2W98gC3TseLqX3hyvYkOgE1Nf4COLgY7SQ_HPYvMrqhCtP1QoHsjxIkBFZLZb7U8dOOPkVaI79DZQulB-d-7TsIKXJr4shA14u_6f0j3DEU11VUaxPvdgfYP6PSk/s1600/%25D9%2586%25D8%25AA%25D9%258A%25D8%25AC%25D8%25A9+%25D8%25A7%25D9%2584%25D9%2583%25D9%2588%25D8%25AF.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVx2rM05eALJkvkAs2W98gC3TseLqX3hyvYkOgE1Nf4COLgY7SQ_HPYvMrqhCtP1QoHsjxIkBFZLZb7U8dOOPkVaI79DZQulB-d-7TsIKXJr4shA14u_6f0j3DEU11VUaxPvdgfYP6PSk/s1600/%25D9%2586%25D8%25AA%25D9%258A%25D8%25AC%25D8%25A9+%25D8%25A7%25D9%2584%25D9%2583%25D9%2588%25D8%25AF.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="color: red;">نتيجة الكود / اضغط على الصورة للتكبير</span></td></tr>
</tbody></table>
<br />
<br />
<div style="text-align: justify;">
<b><span style="color: red;">4 -</span></b> في هذه الخطوة بالذات نقوم باصلاح مشكلة مزعجة في Blogger وهي احيانا ظهور مساحة كبيرة بيظاء فارغة فوق الجدول بعد نشرة في المدونة . لاصلاح هذه المشكلة نقوم باضافة الكود الذي باللون الاحمر الجديد فوق كود الجدول الاساسي ونقوم باضافة كود الاغلاق هذا ( <span style="color: red;"></div> </span> ) بعد نهاية كود الجدول الاساسي ( انظر بداية الكود ونهايتة :</div>
<div style="text-align: justify;">
<br /></div>
<div id="code">
<span style="color: red;"><style type="text/css">.nobrtable br { display: none }</style></span><br />
<span style="color: red;"><div class="nobrtable"></span><br />
<table border="2" bordercolor="#0033FF" style="background-color:#99FFFF" width="100%" cellpadding="3" cellspacing="3"><br />
<tr><br />
<th>عمــود رقم 1</th><br />
<th>عمــود رقم 2</th><br />
<th>عمــود رقم 3</th><br />
</tr><br />
<tr><br />
<td>خلية حرف أ</td><br />
<td>خلية حرف ب</td><br />
<td>خلية حرف ت</td><br />
</tr><br />
<tr><br />
<td>خلية حرف ث</td><br />
<td>خلية حرف ج</td><br />
<td>خلية حرف ح</td><br />
</tr><br />
<tr"><br />
<td>خلية حرف خ</td><br />
<td>خلية حرف د</td><br />
<td>خلية حرف ذ</td><br />
</tr><br />
</table><span style="color: red;"></div></span></div>
</div>
</div>
<br />
<br />
<div style="text-align: justify;">
<b><span style="color: red;">5 -</span></b> في الخطوة الخامسة نقوم باضافة كود جديد آخر لتحسين مظهر رأس الجدول يعني تغيير خلفية ولون نص رأس الجدول للتتناسب مع نظام الالوان الخاصة بمدونتك . انظر الكود ادناه<span style="color: red;"> باللون الاحمر</span> وبداخله كود لون الخلفية<span style="color: blue;"> باللون الازرق</span> ولون النص<span style="color: magenta;"> بالوردي </span>قم بتغيير لون الخلفية ولون النص حسب رغبتك<span style="color: magenta;"> </span>:</div>
<br />
<div id="code">
<style type="text/css">.nobrtable br { display: none }</style><br />
<div class="nobrtable"><br />
<table border="2" bordercolor="#0033FF" style="background-color:#99FFFF" width="100%" cellpadding="3" cellspacing="3"><br />
<tr<span style="color: red;"> style="background-color:#</span><span style="color: blue;">0033FF</span><span style="color: red;">; color:#</span><span style="color: magenta;">ffffff</span><span style="color: red;">; padding-top:5px; padding-bottom:4px;"</span>><br />
<th>عمــود رقم 1</th><br />
<th>عمــود رقم 2</th><br />
<th>عمــود رقم 3</th><br />
</tr><br />
<tr><br />
<td>خلية حرف أ</td><br />
<td>خلية حرف ب</td><br />
<td>خلية حرف ت</td><br />
</tr><br />
<tr><br />
<td>خلية حرف ث</td><br />
<td>خلية حرف ج</td><br />
<td>خلية حرف ح</td><br />
</tr><br />
<tr><br />
<td>خلية حرف خ</td><br />
<td>خلية حرف د</td><br />
<td>خلية حرف ذ</td><br />
</tr><br />
</table></div>
</div>
النتيجة : انظر للصورة التالية لترى ان الخلفية باللون<span style="color: blue;"> ( الازرق )</span> ولون النص ( بالابيض ) لرأس الجدول اختلف عن صورة الجدول الموجودة في خطوة رقم 3 :<br />
<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYXuNxykBUXOug5tpskM-jDFcyT8GFokYqmM5Nx0elx3inI-H2arCGwWEwDYbzOyCYsYhMr2OnWUxb_ZXndC6M6Vg_GOzmVfEQ9DKGvgdWHU3-0MoAz3iRrrtAs5C5Gd7Uehgy3kTZdXQ/s1600/%25D8%25AE%25D9%2584%25D9%2581%25D9%258A%25D8%25A9+%25D8%25B1%25D8%25A7%25D8%25B3+%25D8%25A7%25D9%2584%25D8%25AC%25D8%25AF%25D9%2588%25D9%2584.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYXuNxykBUXOug5tpskM-jDFcyT8GFokYqmM5Nx0elx3inI-H2arCGwWEwDYbzOyCYsYhMr2OnWUxb_ZXndC6M6Vg_GOzmVfEQ9DKGvgdWHU3-0MoAz3iRrrtAs5C5Gd7Uehgy3kTZdXQ/s1600/%25D8%25AE%25D9%2584%25D9%2581%25D9%258A%25D8%25A9+%25D8%25B1%25D8%25A7%25D8%25B3+%25D8%25A7%25D9%2584%25D8%25AC%25D8%25AF%25D9%2588%25D9%2584.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="color: red;">اضغط على الصورة للتكبير</span></td></tr>
</tbody></table>
<div style="text-align: justify;">
<b><span style="color: red;">6 -</span></b> دعونا في هذه الخطوة نتعلم كيف نظيف صف او عدة صفوف افقية للجدول وكذلك كيف نظيف عمود او عدة اعمدة راسية للجدول انظر للصورة التالية تجد فيها زيادة لصف رابع من الخلايا التالية ( Cell D ,Cell G,Cell F,Cell E ) وزيادة عمود رابع ( Column Num4 ) وتحته الخانات التالية( C,B,A ) : الصورة هي نتيجة للكود الذي بعدها مباشرة خطوة 6 ،،</div>
<div style="text-align: justify;">
<br /></div>
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi37t-r3VY-ybDru_NL_sXZiJPhAWDHJCuzTRq6F2EDR4g1GXzr5-VNb1MJGxdEk6B_Ce4Ut0nzN-NLTRHSfhDuC8AsFhX0lpuEjAoCezqSXQwaQHtPfF4JzHDkm1HM8rq9gkywjH9Q-rE/s1600/%25D8%25AC%25D8%25AF%25D9%2588%25D9%2584+%252B%25D8%25A7%25D8%25B6%25D8%25A7%25D9%2581%25D8%25A9+%252B+%25D8%25B9%25D9%2585%25D9%2588%25D8%25AF+%252B%25D9%2588%25D8%25B5%25D9%2581.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi37t-r3VY-ybDru_NL_sXZiJPhAWDHJCuzTRq6F2EDR4g1GXzr5-VNb1MJGxdEk6B_Ce4Ut0nzN-NLTRHSfhDuC8AsFhX0lpuEjAoCezqSXQwaQHtPfF4JzHDkm1HM8rq9gkywjH9Q-rE/s1600/%25D8%25AC%25D8%25AF%25D9%2588%25D9%2584+%252B%25D8%25A7%25D8%25B6%25D8%25A7%25D9%2581%25D8%25A9+%252B+%25D8%25B9%25D9%2585%25D9%2588%25D8%25AF+%252B%25D9%2588%25D8%25B5%25D9%2581.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="color: red;">اضغط الصورة للتكبير</span></td></tr>
</tbody></table>
<br />
تابع معي الكود التالي يوضح كيف تظيف صف / صفوف او عمود / اعمدة للجدول كما تشاهده في الصورة اعلاه :<br />
<br />
<div id="code">
<style type="text/css">.nobrtable br { display: none }</style><br />
<div class="nobrtable"><br />
<table border="2" bordercolor="#0033FF" style="background-color:#99FFFF" width="100%" cellpadding="3" cellspacing="3"><br />
<tr style="background-color:#0033FF; color:#ffffff; padding-top:5px; padding-bottom:4px;"><br />
<th>عمود رقم1</th><br />
<th>عمود رقم2</th><br />
<th>عمود رقم3</th><br />
<span style="color: red;"><th>Column Num4</th></span><br />
</tr><br />
<tr><br />
<td>
خلية حرف أ </td><br />
<td>خلية حرف ب</td><br />
<td>خلية حرف ت</td><br />
<span style="color: orange;"><td>Cell A</td></span><br />
</tr><br />
<tr><br />
<td>خلية حرف ث</td><br />
<td>خلية حرف ج</td><br />
<td>خلية حرف ح</td><br />
<span style="color: #990000;"><td>Cell B</td></span><br />
</tr><br />
<tr><br />
<td>خلية حرف خ</td><br />
<td>خلية حرف د</td><br />
<td>خلية حرف ذ</td><br />
<span style="color: #38761d;"><td>Cell C</td></span><br />
</tr><br />
<span style="color: magenta;"><tr></span><br />
<span style="color: magenta;"><td>Cell E</td></span><br />
<span style="color: magenta;"><td>Cell F</td></span><br />
<span style="color: magenta;"><td>Cell G</td></span><br />
<span style="color: magenta;"><td>Cell D</td></span><br />
<span style="color: magenta;"></tr></span><br />
</table></div>
</div>
توضيح الالوان الموجودة بداخل الكود :
<br />
* <span style="color: red;">اللون الاحمر</span> : يعني اضافة عمود رابع ( column nu 4 ) للجدول العملية مجرد نسخ ولصف فقط من نفس الكود لا اقل ولا اكثر .<br />
*<span style="color: orange;">اللون البرتقالي</span> : يعني اضافة خانة A للصف رقم 1 عمود رقم4 يعني تنسخ كود خلية حرف ت وتعمل ( enter ) ولصقة مباشرة تحتة .<br />
* <span style="color: purple;">اللون البني</span> : اضافة خانة B للصف رقم2 عمود رقم4 .<br />
* <span style="color: #38761d;">اللون الاخظر</span> : اضافة خانة C للصف رقم3 عمود4 .<br />
* <span style="color: magenta;">اللون الوردي</span> : يعني اضافة صف كامل من اربع خلايا ( D,G,F,E ) عبارة عن عملية نسخ الصف الثالث بكامله ولصقه مباشرة تحتة ، بس ركزو شوية ان بداية كل صف يبدا بـــ الكود (<span style="color: red;"> <tr></span> ) وينتهي بالكود (<span style="color: red;"> </tr> </span>) وكذلك كود اعمدة الجدول انظر للصورة التالية تبين تفصيل الكود :<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjl58_7Aa16GvRHxMgxw47EYDP8vVhcoke337dR_f8_hPPis6N-PpbHI2X7KUUVkB-8UyQ9GblNIWjU7GpDk4mjQtBknsd7IX-adS4k8B7kdOM5cvrEpG9ACPDqHvqaJtEovHT3-M980s/s1600/%25D9%2583%25D9%2588%25D8%25AF+%252B%25D8%25A7%25D8%25B6%25D8%25A7%25D9%2581%25D8%25A9+%252B%25D8%25AC%25D8%25AF%25D9%2588%25D9%2584%252B%25D9%2585%25D8%25AF%25D9%2588%25D9%2586%25D8%25A9+%252B%25D8%25A8%25D9%2584%25D9%2588%25D8%25AC%25D8%25B1%252B.PNG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjl58_7Aa16GvRHxMgxw47EYDP8vVhcoke337dR_f8_hPPis6N-PpbHI2X7KUUVkB-8UyQ9GblNIWjU7GpDk4mjQtBknsd7IX-adS4k8B7kdOM5cvrEpG9ACPDqHvqaJtEovHT3-M980s/s1600/%25D9%2583%25D9%2588%25D8%25AF+%252B%25D8%25A7%25D8%25B6%25D8%25A7%25D9%2581%25D8%25A9+%252B%25D8%25AC%25D8%25AF%25D9%2588%25D9%2584%252B%25D9%2585%25D8%25AF%25D9%2588%25D9%2586%25D8%25A9+%252B%25D8%25A8%25D9%2584%25D9%2588%25D8%25AC%25D8%25B1%252B.PNG" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">اضغط الصورة للتكبير </td></tr>
</tbody></table>
<br />
<div style="text-align: justify;">
<span style="color: red;"><b>7 -</b></span> في هذه الخطوة نقوم بعمل بعض التحسينات او شوية فنيات للجدول يعني اضافة الوان للصفوف بحيث تكون خلفية كل صف تختلف عن الصف الثاني وهكذا وذلك باضافة<span style="color: red;"> كود لخلفية الصف</span> . ولكن قبل ان نعمل هذا الكود يتطلب منا ايظا عمل<span style="color: red;"> كود آخر قبلة</span> يجعل نص او محتوى ( كتابة ) الجدول متوسطة وسط الخلايا ( الخانات ) لاننا لو ما عمل هذا الكود سترى الكتابة او النص بداخل الجدول تتجه لليسار او اليمين يعني مش في الوسط وذلك بسبب اضافة<span style="color: red;"> كود خلفية الصف</span> لكود<span style="color: red;"> الجدول الاساسي</span> :</div>
<br />
<br />
<div id="code">
<style type="text/css">.nobrtable br { display: none }<span style="color: blue;"> tr {text-align: center;}</span> <span style="color: red;">tr.alt td {background-color: #eeeecc; color: black;}</span></style><br />
<div class="nobrtable"><br />
<table border="2" bordercolor="#0033FF" style="background-color:#99FFFF" width="100%" cellpadding="3" cellspacing="3"><br />
<tr style="background-color:#0033FF; color:#ffffff; padding-top:5px; padding-bottom:4px;"><br />
<th>عمود رقم1</th><br />
<th>عمود رقم2</th><br />
<th>عمود رقم3</th><br />
<th>Column Num4</th><br />
</tr><br />
<tr<span style="color: magenta;"> class="alt"</span>><br />
<td> خلية حرف أ </td><br />
<td>خلية حرف ب</td><br />
<td>خلية حرف ت</td><br />
<td>Cell A</td><br />
</tr><br />
<tr><br />
<td>خلية حرف ث</td><br />
<td>خلية حرف ج</td><br />
<td>خلية حرف ح</td><br />
<td>Cell B</td><br />
</tr><br />
<tr <span style="color: magenta;">class="alt"</span>><br />
<td>خلية حرف خ</td><br />
<td>خلية حرف د</td><br />
<td>خلية حرف ذ</td><br />
<td>Cell C</td><br />
</tr><br />
<tr><br />
<td>Cell E</td><br />
<td>Cell F</td><br />
<td>Cell G</td><br />
<td>Cell D</td><br />
</tr><br />
</table></div>
</div>
توضيح الاكواد الملونة :<br />
* <span style="color: blue;">الون الازرق</span> : يقصد به الكود الذي يجعل الكتابة او محتوى الجدول في وسط خلايا الجدول يعني متوسطة .<br />
*<span style="color: red;"> الون الاحمر</span> : هو كود لون خلفية الصف ولون نص الصف بامكانك ان تغير لون خلفية الصف والنص حسب رغبتك .<br />
*<span style="color: red;"> </span><span style="color: magenta;">الون الوردي</span> : هو الكود الذي يتحكم في اختيارك لاي صف من صفوف الجدول انت تريده يختلف خلفيته عن الاخر . وفي مثالنا هذا هو موجود في كود الصف الاول والثالث ( خلفية اصفر) بينما كود الصف الثاني والرابع لا يوجد ( خلفية ازرق) ، وتضعه فوق رأس كل صف كما هو مبين في الكود اعلاه . انظر للصورة التالية نتيجة الكود : <br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgirkmjGXeJIwmOLaPHlfBKyFXhf4XYdjqF8bJZ3cAfxkxNzXh1T9H_xfPWw5FeIHUxlqhg1EP8_Oe1jsvq2haN5xGV_Es7pJLP30iaCfAo_ztFNA2LeP84JTeKl3kLYlBACceS20_qMk4/s1600/%25D8%25B5%25D9%2588%25D8%25B1%25D8%25A9%252B%25D9%2583%25D9%2588%25D8%25AF%252B%25D8%25A7%25D8%25B6%25D8%25A7%25D9%2581%25D8%25A9+%252B%25D8%25AC%25D8%25AF%25D9%2588%25D9%2584.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgirkmjGXeJIwmOLaPHlfBKyFXhf4XYdjqF8bJZ3cAfxkxNzXh1T9H_xfPWw5FeIHUxlqhg1EP8_Oe1jsvq2haN5xGV_Es7pJLP30iaCfAo_ztFNA2LeP84JTeKl3kLYlBACceS20_qMk4/s1600/%25D8%25B5%25D9%2588%25D8%25B1%25D8%25A9%252B%25D9%2583%25D9%2588%25D8%25AF%252B%25D8%25A7%25D8%25B6%25D8%25A7%25D9%2581%25D8%25A9+%252B%25D8%25AC%25D8%25AF%25D9%2588%25D9%2584.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="color: red;">نتيجة خطوة 7- اضغط للتكبير</span></td></tr>
</tbody></table>
<br />
<div style="text-align: justify;">
<b><span style="color: red;">8 - </span></b>طبعا في الخطوة الثامنة سنتعلم كيف نظيف عنوان او شرح ( caption ) للجدول مرتبط به مباشرة يعني فوقة او تحته انظر للصور التالية توضح العنوان فوق الجدول وتحت الجدول .</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjngA3fs3g89_mFRhjI2Wip19F9DGIc7HvLWM1GHwG0j2ydSoSnORrXoe0ftFlzKRvqLPJSFTCZXS_BEiCuSg_Cu0mzp3pMagK5IWLnewh1G768ztUTxycAZS5ejbJTZaJ33wxPE-sXLvQ/s1600/%25D8%25B7%25D8%25B1%25D9%258A%25D9%2582%25D8%25A9%252B%25D9%2588%25D8%25B6%25D8%25B9%252B%25D8%25B9%25D9%2586%25D9%2588%25D8%25A7%25D9%2586%252B%25D9%2584%25D9%2584%25D8%25AC%25D8%25AF%25D9%2588%25D9%2584.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="172" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjngA3fs3g89_mFRhjI2Wip19F9DGIc7HvLWM1GHwG0j2ydSoSnORrXoe0ftFlzKRvqLPJSFTCZXS_BEiCuSg_Cu0mzp3pMagK5IWLnewh1G768ztUTxycAZS5ejbJTZaJ33wxPE-sXLvQ/s400/%25D8%25B7%25D8%25B1%25D9%258A%25D9%2582%25D8%25A9%252B%25D9%2588%25D8%25B6%25D8%25B9%252B%25D8%25B9%25D9%2586%25D9%2588%25D8%25A7%25D9%2586%252B%25D9%2584%25D9%2584%25D8%25AC%25D8%25AF%25D9%2588%25D9%2584.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsm1zAHx1CGkPy_U6g6DKxYdlsVp23xrABJNTSRH4YisP9yUAs-IvOPGD-jnd5MArAMpQJUgebVynoJAnGFjM2uwxfBuGTeGsPYml0CeyGqCMggYYVEz0cmxcOybW-JzGM0jJc61VreiE/s1600/%25D9%2588%25D8%25B6%25D8%25B9+-%25D8%25B9%25D9%2586%25D9%2588%25D8%25A7%25D9%2586-%25D9%2584%25D9%2584%25D8%25AC%25D8%25AF%25D9%2588%25D9%2584.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="169" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsm1zAHx1CGkPy_U6g6DKxYdlsVp23xrABJNTSRH4YisP9yUAs-IvOPGD-jnd5MArAMpQJUgebVynoJAnGFjM2uwxfBuGTeGsPYml0CeyGqCMggYYVEz0cmxcOybW-JzGM0jJc61VreiE/s400/%25D9%2588%25D8%25B6%25D8%25B9+-%25D8%25B9%25D9%2586%25D9%2588%25D8%25A7%25D9%2586-%25D9%2584%25D9%2584%25D8%25AC%25D8%25AF%25D9%2588%25D9%2584.png" width="400" /></a></div>
<br />
طيب تابع معي اين سنضع كود عنوان الجدول في الكود الاساسي وتابع الشرح بعد الكود :<br />
<br />
<div id="code">
<style type="text/css">.nobrtable br { display: none } tr {text-align: center;} tr.alt td {background-color: #eeeecc; color: black;}<span style="color: magenta;"> tr {text-align: center;}</span> <span style="color: blue;">caption {caption-side:bottom;}</span> </style><br />
<div class="nobrtable"><br />
<table border="2" bordercolor="#0033FF" style="background-color:#99FFFF" width="100%" cellpadding="3" cellspacing="3"><br />
<span style="color: red;"><caption>هنا اكتب العنوان </caption></span><br />
<tr style="background-color:#0033FF; color:#ffffff; padding-top:5px; padding-bottom:4px;"><br />
<th>عمود رقم1</th><br />
<th>عمود رقم2</th><br />
<th>عمود رقم3</th><br />
<th>Column Num4</th><br />
</tr><br />
<tr class="alt"><br />
<td> خلية حرف أ </td><br />
<td>خلية حرف ب</td><br />
<td>خلية حرف ت</td><br />
<td>Cell A</td><br />
</tr><br />
<tr><br />
<td>خلية حرف ث</td><br />
<td>خلية حرف ج</td><br />
<td>خلية حرف ح</td><br />
<td>Cell B</td><br />
</tr><br />
<tr class="alt"><br />
<td>خلية حرف خ</td><br />
<td>خلية حرف د</td><br />
<td>خلية حرف ذ</td><br />
<td>Cell C</td><br />
</tr><br />
<tr><br />
<td>Cell E</td><br />
<td>Cell F</td><br />
<td>Cell G</td><br />
<td>Cell D</td><br />
</tr><br />
</table></div>
</div>
<div style="text-align: justify;">
توضيح الاكواد الملونة المظافة في كود الجدول الاساسي :
</div>
<div style="text-align: justify;">
*<span style="color: magenta;"> اللون الوردي</span> : هو الكود الذي يجعل عنوان او شرح الجدول في الوسط . انظر للصور اعلاه تجد العنوان فوق الجدول في الوسط .</div>
<div style="text-align: justify;">
* طبعا هنا ركز معي شوية بخصوص الكودين<span style="color: blue;"> الازرق</span> <span style="color: red;">والاحمر</span> : في حالة اذا اردت ان يكون العنوان فوق الجدول قم بمسح او ازالة <span style="color: blue;">الكود الازرق</span> فقط وخلي الاكواد الاخرى على ما هم عليه (<span style="color: red;"> الاحمر</span> و<span style="color: magenta;"> اللوردي</span>) ، وفي حالة اذا اردت ان يكون العنوان تحت الجدول خليهم على ماهم عليه كما هم في الكود اعلاه ، وفي مثالنا هذا اذا طبقت الكود اعلاه تجد عنوان تحت الجدول . واكتب العنوان الذي تريده بين ( <span style="color: red;"><caption>هنا اكتب العنوان </caption></span> ) .</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b><span style="color: red;">9 - </span></b>الخطوة التاسعة نتعلم كيف نغير حدود الجدول بدل ما هي حدين مع بعض دبل ( double ) نجعلها ذو حد واحد فقط ( single ) لاحظ الصورة التالية توضح ان الجدول اختلف عن الجدول السابق اصبح جدول ذو حد واحد :</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjVcDx1sSAkaEpaDfyx13tm4STmgxIqJ_UjARY-DM_WTSBbgd6_4lp7Jajtj0vxBxRgFdHk1YWgcv7-MzMa1Bf9TSG7_nNqyp0ePVHscMkOTCnhpqkM1vAi74PO2Gvr6Rf9bUEyOcWr94/s1600/%25D8%25AC%25D8%25AF%25D9%2588%25D9%2584+%252B%25D8%25B0%25D9%2588+%252B%25D8%25AD%25D8%25AF-%25D9%2588%25D8%25A7%25D8%25AD%25D8%25AF.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjVcDx1sSAkaEpaDfyx13tm4STmgxIqJ_UjARY-DM_WTSBbgd6_4lp7Jajtj0vxBxRgFdHk1YWgcv7-MzMa1Bf9TSG7_nNqyp0ePVHscMkOTCnhpqkM1vAi74PO2Gvr6Rf9bUEyOcWr94/s1600/%25D8%25AC%25D8%25AF%25D9%2588%25D9%2584+%252B%25D8%25B0%25D9%2588+%252B%25D8%25AD%25D8%25AF-%25D9%2588%25D8%25A7%25D8%25AD%25D8%25AF.png" /></a></div>
<br />
<br />
تابع معي الكود لتتعلم كيف نجعل الجدول ذو حد واحد ؟ :<br />
<br />
<br />
<div id="code">
<style type="text/css">.nobrtable br { display: none } tr {text-align: center;} tr.alt td {background-color: #eeeecc; color: black;} tr {text-align: center;} caption {caption-side:bottom;}</style><br />
<div class="nobrtable"><br />
<table border="2" bordercolor="#0033FF" style="background-color:#99FFFF<span style="color: blue;">; border-collapse:collapse;</span>" width="100%" cellpadding="10" cellspacing="<span style="color: red;">0</span>"><br />
<caption>هنا اكتب العنوان </caption><br />
<tr style="background-color:#0033FF; color:#ffffff; padding-top:5px; padding-bottom:4px;"><br />
<th>عمود رقم1</th><br />
<th>عمود رقم2</th><br />
<th>عمود رقم3</th><br />
<th>Column Num4</th><br />
</tr><br />
<tr class="alt"><br />
<td> خلية حرف أ </td><br />
<td>خلية حرف ب</td><br />
<td>خلية حرف ت</td><br />
<td>Cell A</td><br />
</tr><br />
<tr><br />
<td>خلية حرف ث</td><br />
<td>خلية حرف ج</td><br />
<td>خلية حرف ح</td><br />
<td>Cell B</td><br />
</tr><br />
<tr class="alt"><br />
<td>خلية حرف خ</td><br />
<td>خلية حرف د</td><br />
<td>خلية حرف ذ</td><br />
<td>Cell C</td><br />
</tr><br />
<tr><br />
<td>Cell E</td><br />
<td>Cell F</td><br />
<td>Cell G</td><br />
<td>Cell D</td><br />
</tr><br />
</table><br />
<br /></div>
</div>
توضيح الاكواد الملونة :<br />
* كم بتغيير رقم <span style="background-color: white; color: #333333; font-family: 'Trebuchet MS', Verdana, Arial, sans-serif; line-height: 18px; text-align: left;">cellspacing الى صفر (</span><span style="background-color: white; font-family: 'Trebuchet MS', Verdana, Arial, sans-serif; line-height: 18px; text-align: left;"><span style="color: red;">0</span></span><span style="background-color: white; color: #333333; font-family: 'Trebuchet MS', Verdana, Arial, sans-serif; line-height: 18px; text-align: left;"> ) كما هو موضح باللون</span><span style="background-color: white; font-family: 'Trebuchet MS', Verdana, Arial, sans-serif; line-height: 18px; text-align: left;"><span style="color: red;"> الاحمر</span></span><span style="background-color: white; color: #333333; font-family: 'Trebuchet MS', Verdana, Arial, sans-serif; line-height: 18px; text-align: left;"> في الكود اعلاه . او بامكانك ان تطبق خاصية ازالة الحدود يعني باضافة الكود كما هو مبين</span><span style="background-color: white; color: blue; font-family: 'Trebuchet MS', Verdana, Arial, sans-serif; line-height: 18px; text-align: left;"> باللون الازرق</span><span style="background-color: white; color: #333333; font-family: 'Trebuchet MS', Verdana, Arial, sans-serif; line-height: 18px; text-align: left;"> . </span><br />
<span style="background-color: white; color: #333333; font-family: 'Trebuchet MS', Verdana, Arial, sans-serif; line-height: 18px; text-align: left;"><br /></span><br />
<div style="text-align: justify;">
<span style="background-color: white; color: red; font-family: 'Trebuchet MS', Verdana, Arial, sans-serif; line-height: 18px; text-align: left;">ملاحظة مهمة:</span><span style="background-color: white; color: #333333; font-family: 'Trebuchet MS', Verdana, Arial, sans-serif; line-height: 18px; text-align: left;"> خاصية ازالة الحدود يعني (عملية تصفير الرقم ) ليست مدعمة بواسطة كل متصفحات الانترنت ولهذا اعطينا خيار آخر وهو اضافة الكود الذي</span><span style="background-color: white; color: blue; font-family: 'Trebuchet MS', Verdana, Arial, sans-serif; line-height: 18px; text-align: left;"> باللون الازرق</span><span style="background-color: white; color: #333333; font-family: 'Trebuchet MS', Verdana, Arial, sans-serif; line-height: 18px; text-align: left;"> . ولك الاختيار اما ان تعمل صفر ( </span><span style="background-color: white; color: red; font-family: 'Trebuchet MS', Verdana, Arial, sans-serif; line-height: 18px; text-align: left;">0</span><span style="background-color: white; color: #333333; font-family: 'Trebuchet MS', Verdana, Arial, sans-serif; line-height: 18px; text-align: left;"> ) او تظيف الكود </span><span style="background-color: white; color: blue; font-family: 'Trebuchet MS', Verdana, Arial, sans-serif; line-height: 18px; text-align: left;">باللون الازرق</span><span style="background-color: white; color: #333333; font-family: 'Trebuchet MS', Verdana, Arial, sans-serif; line-height: 18px; text-align: left;"> وكل الطرق تؤدي الى روما . </span></div>
<div style="text-align: justify;">
<span style="background-color: white; color: #333333; font-family: 'Trebuchet MS', Verdana, Arial, sans-serif; line-height: 18px; text-align: left;"><br /></span></div>
<div style="text-align: justify;">
<span style="background-color: white; font-family: 'Trebuchet MS', Verdana, Arial, sans-serif; line-height: 18px; text-align: left;"><b><span style="color: red;">10 -</span></b><span style="color: #333333;"> والان استمر باضافة البيانات في جدولك وقم بتعبئة الخانات الى البيانات والارقام والكلمات التي تريدها بدلا من كلمة ( عمود1 و خليه حرف أ و Cell A ) لاننا هنا اشرنا اليهم مجرد مثال توضيحي فقط ، </span></span></div>
<div style="text-align: justify;">
<span style="background-color: white; color: #333333; font-family: 'Trebuchet MS', Verdana, Arial, sans-serif; line-height: 18px; text-align: left;"><br /></span></div>
<div style="text-align: justify;">
<span style="background-color: white; color: red; font-family: 'Trebuchet MS', Verdana, Arial, sans-serif; line-height: 18px; text-align: left;"><b>11 -</b></span><span style="background-color: white; color: #333333; font-family: 'Trebuchet MS', Verdana, Arial, sans-serif; line-height: 18px; text-align: left;"> واخيرا قم بعمل حفظ لجدولك وقم بنشره في مدونتك ومبرووووووووك عليك الجدول . </span><br />
<span style="background-color: white; color: #333333; font-family: 'Trebuchet MS', Verdana, Arial, sans-serif; line-height: 18px; text-align: left;"><br /></span><br />
<div style="text-align: center;">
<span style="background-color: white; color: red; font-family: 'Trebuchet MS', Verdana, Arial, sans-serif; font-size: large; line-height: 18px; text-align: left;"><u><b>مثال عملي تطبيقي على الدرس </b></u></span></div>
<div style="text-align: center;">
<span style="background-color: white; color: red; font-family: 'Trebuchet MS', Verdana, Arial, sans-serif; font-size: large; line-height: 18px; text-align: left;"><u><b><br /></b></u></span></div>
اخوتي الكرام سنبدا بمثال عملي تطبيقي على درسنا هذا وليكن مثلا على<span style="color: red;"> <b>مدى التعرض للعنف الاسري</b></span> طبعا تم اخذ هذا البيانات من احدى البحوث العلمية لبلدا ما . وهنا قمنا بتغيير على الجدول من حيث الحدود والالوان ولون الخط . والجدول التالي هو ليس صورة وانما تطبيق على الدرس اعلاه :<br />
<div class="MsoNormal" dir="RTL" style="line-height: 150%;">
<span lang="AR-SA" style="font-family: 'Simplified Arabic';">يتضح من الجدول ادناه أن 3.33% من عينة البحث هن يتعرضن للإيذاء الجسدي غالبا بينما تنخفض النسبة لتصل
إلى 2.5 % هن يتعرضن كثيراً للإيذاء الجسدي كما وضحت 10% هن يتعرضن الإهانة وأشارت
5% هن يتعرضن الإهانة غالباً و رأت 4.16%
هن غالباً ما يتعرضن للتهديد بإلحاق الأذى أما 8.33 هن يتعرضن كثيراً
للتهديد بإلحاق الأذى وأضافت 20.83% هن يتعرضن كثيرا للشتم أو الصراخ في الوجه وهذه
ليست بالنسبة القليلة ولا يجب الاستهانة بها لأنها توضح وجود عنف يمارس عليهن حتى
لو كان بالشتم أو الصراخ في الوجه في حين 9.1 % هن غالباً ما يتعرضن للشتم أو
الصراخ في الوجه.</span><br />
<span lang="AR-SA" style="font-family: 'Simplified Arabic';"><br /></span></div>
</div>
<div class="nobrtable">
<table border-collapse:="" border="2" bordercolor="#ff0000" cellpadding="10" cellspacing="0" collapse;"="" style="background-color: white;">
<caption><b><span style="color: blue;">جدول يوضح مدى التعرض للعنف الاسري </span></b></caption>
<tbody>
<tr style="background-color: #f9cb9c; color: blue; padding-bottom: 4px; padding-top: 5px;">
<th>العبــــــــــــــــارة</th>
<th>ابـــــداً</th>
<th>نـــــادراً</th>
<th>احيانــــا</th>
<th>كثيرا</th>
<th>غالبــــا</th>
<th>المجمــوع</th>
</tr>
<tr class="alt">
<td>تتعرضين للايذا الجسدي </td>
<td>70</td>
<td>16.6</td>
<td>7.5</td>
<td>2.5 </td>
<td>3.3 </td>
<td>100 </td>
</tr>
<tr>
<td>تتعرضين للاهانة</td>
<td>35.8</td>
<td>28.3</td>
<td>20.8</td>
<td>10</td>
<td>5</td>
<td>100</td>
</tr>
<tr class="alt">
<td>تتعرضين للتهديد بالحاق الاذى</td>
<td>60.8</td>
<td>11.6</td>
<td>15</td>
<td>8.3</td>
<td>4.1</td>
<td>100</td>
</tr>
<tr>
<td>تتعرضين للشتم او الصراخ في وجهك</td>
<td>27.5</td>
<td>22.5</td>
<td>20</td>
<td>20.8</td>
<td>9.1</td>
<td>100</td>
</tr>
</tbody></table>
</div>
</div>
<b><span style="color: blue;">واخيرا زوار المدونة الكرام ما عليكم سوى الدعاء لي بالخير والصحة والعافية ونرحب بتعليقاتكم
وانتظروني في</span><span style="color: red;"> الدرس القادم لشرح طريقة اخرى ثانية</span><span style="color: blue;"> كيف تعمل جدول او كشف بيانات احصائية في مدونة بلوجر ؟
</span></b></div>خالد محمد (ابوخلود)http://www.blogger.com/profile/17023136577166291717noreply@blogger.com8tag:blogger.com,1999:blog-3171771270267658652.post-13940762508031878562011-10-10T04:27:00.000-07:002011-10-10T04:27:47.948-07:00كيف تظيف بنرات اعلانانية بتأثيرات JQuery على مدونة بلوجر ؟<div dir="rtl" style="text-align: right;" trbidi="on">
<div dir="rtl" style="text-align: right;" trbidi="on">
<div dir="rtl" style="text-align: right;" trbidi="on">
<div dir="rtl" style="text-align: right;" trbidi="on">
<div class="MsoNormal" dir="RTL">
<span lang="AR-YE" style="font-family: Arial, sans-serif;">السلام عليكم ورحمة الله وبركاتة اخواني الكرام اليوم سوف نتعلم طريقة كيفية إضافة بنرات إعلانية على مدونات بلوجر بتأثيرات </span><span dir="LTR">jQuery</span><span dir="RTL"></span><span style="font-family: Arial, sans-serif;"><span dir="RTL"></span> <span lang="AR-YE">الجميلة في جانب مدونتك ، يكمن اختلاف هذه الإضافة عن باقي الإضافات الأخرى للبنرات الإعلانية في أن الإعلانات تتفاعل مع حركة الماوس ، أي عند وضع الماوس على أحد بنرات الإعلان يتم تكبيرها بطريقة جميلة ،، والصورة التالية تم التقاطها من احدى المدونات توضح فكرة الدرس ،،، </span></span><br />
<span style="font-family: Arial, sans-serif;"><span lang="AR-YE"><br /></span></span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPoPdewqpEB3Hta8-zcOscpcWwAHyS4czLHh1OcOzmn6EAU3xN4rjZlIsPJiXFrs6d3iPD926QflvSHfva2GDGztxPAXud3lYJ1iD4gWv7p0whZ9dxHuvMOedU-hswneVxLHh8ch62X6w/s1600/%25D8%25AA%25D8%25A8%25D8%25A7%25D8%25AF%25D9%2584.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPoPdewqpEB3Hta8-zcOscpcWwAHyS4czLHh1OcOzmn6EAU3xN4rjZlIsPJiXFrs6d3iPD926QflvSHfva2GDGztxPAXud3lYJ1iD4gWv7p0whZ9dxHuvMOedU-hswneVxLHh8ch62X6w/s320/%25D8%25AA%25D8%25A8%25D8%25A7%25D8%25AF%25D9%2584.png" width="223" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<span style="font-family: Arial, sans-serif;"><span lang="AR-YE"><br /></span></span></div>
<div class="MsoNormal" dir="RTL">
<span class="Apple-style-span" style="color: #4c4c4c; font-size: x-small;"></span></div>
<div class="MsoNormal" dir="RTL" style="font-family: Tahoma, arial, Helvetica; line-height: 24px;">
<b><span lang="AR-YE" style="font-family: Arial, sans-serif;"><span class="Apple-style-span" style="color: #4c4c4c;">انتقل إلى لوح تحكم مدونتك،إختر </span><span class="Apple-style-span" style="color: red;">"تصميم</span><span class="Apple-style-span" style="color: #4c4c4c;">" ،ثم "</span><span class="Apple-style-span" style="color: red;">تحرير</span></span><span dir="LTR" style="color: red;">HTML</span><span dir="RTL" style="color: #4c4c4c;"></span><span lang="AR-YE" style="color: #4c4c4c; font-family: Arial, sans-serif;"><span dir="RTL"></span> " ثم ضع علامة صح في </span><span lang="AR-YE" style="color: red; font-family: Arial, sans-serif;">خانة توسيع قوالب عناصر واجهة المستخدم.</span><span lang="AR-YE" style="color: #4c4c4c; font-family: Arial, sans-serif;"><o:p></o:p></span></b></div>
<span class="Apple-style-span" style="color: #4c4c4c;"><b> </b></span><br />
<div class="MsoNormal" dir="RTL" style="font-family: Tahoma, arial, Helvetica; line-height: 24px;">
<span class="Apple-style-span" style="color: #4c4c4c;"><b><span lang="AR-YE" style="font-family: Arial, sans-serif;">قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (</span><span dir="LTR">CTRL+F</span><span dir="RTL"></span><span lang="AR-YE" style="font-family: Arial, sans-serif;"><span dir="RTL"></span>) :</span></b></span></div>
<div class="MsoNormal" dir="RTL">
<span class="Apple-style-span" style="color: #4c4c4c;"><span lang="AR-YE" style="line-height: 24px;"><b><span class="Apple-style-span" style="font-family: Arial, sans-serif;"></span></b></span></span><br />
<div id="code">
<span class="Apple-style-span" style="color: #4c4c4c;"><span lang="AR-YE" style="line-height: 24px;"><span class="Apple-style-span" style="font-family: Arial, sans-serif;"><b>]]></b:skin></b></span></span></span><br />
<span class="Apple-style-span" style="color: #4c4c4c;"><span lang="AR-YE" style="line-height: 24px;"><span class="Apple-style-span" style="font-family: Arial, sans-serif;"><br /></span></span></span><br />
<span class="Apple-style-span" style="color: #4c4c4c; font-family: Tahoma, arial, Helvetica;"><span class="Apple-style-span" style="line-height: 24px;"><br /></span></span><br />
<span class="Apple-style-span" style="background-color: white; color: #4c4c4c; font-family: Tahoma, arial, Helvetica; line-height: 24px;"><br /></span></div>
</div>
</div>
ثم قم بإضافة هذا الكود قبله مباشرة :<br />
<br />
<div id="code">
ul.thumb {<br />
float: left;<br />
list-style: none;<br />
margin: 0; padding: 10px;<br />
width: 360px;<br />
}<br />
ul.thumb li {<br />
margin: 0; padding: 5px;<br />
float: left;<br />
position: relative;<br />
width: 110px;<br />
height: 110px;<br />
}<br />
ul.thumb li img {<br />
width: 100px; height: 100px;<br />
-ms-interpolation-mode: bicubic;<br />
border: 1px solid #ddd;<br />
padding: 5px;<br />
background: #f0f0f0;<br />
position: absolute;<br />
left: 0; top: 0;<br />
}<br />
ul.thumb li img.hover {<br />
background:url(https://sites.google.com/site/lightbox007/photo/borderblogger.png) no-repeat center center;<br />
border: none;<br />
}</div>
بعد ذلك إبحث عن هذا الكود :<br />
<div id="code">
</head></div>
</div>
ثم ألصق الكود التالي قبله :<br />
<br />
<div id="code">
<script src='http://code.jquery.com/jquery-latest.js'<br />
type='text/javascript'/><br />
<script type='text/javascript'><br />
$(document).ready(function(){<br />
<br />
//Larger thumbnail preview<br />
<br />
$(&quot;ul.thumb li&quot;).hover(function() {<br />
$(this).css({&#39;z-index&#39; : &#39;10&#39;});<br />
$(this).find(&#39;img&#39;).addClass(&quot;hover&quot;)<br />
.stop()<br />
.animate({<br />
marginTop: &#39;-110px&#39;,<br />
marginLeft: &#39;-110px&#39;,<br />
top: &#39;50%&#39;,<br />
left: &#39;50%&#39;,<br />
width: &#39;174px&#39;,<br />
height: &#39;174px&#39;,<br />
padding: &#39;20px&#39;<br />
}, 200);<br />
<br />
} , function() {<br />
$(this).css({&#39;z-index&#39; : &#39;0&#39;});<br />
$(this).find(&#39;img&#39;).removeClass(&quot;hover&quot;)<br />
.stop()<br />
.animate({<br />
marginTop: &#39;0&#39;,<br />
marginLeft: &#39;0&#39;,<br />
top: &#39;0&#39;,<br />
left: &#39;0&#39;,<br />
width: &#39;100px&#39;,<br />
height: &#39;100px&#39;,<br />
padding: &#39;5px&#39;<br />
}, 400);<br />
});<br />
<br />
//Swap Image on Click<br />
$(&quot;ul.thumb li a&quot;).click(function() {<br />
<br />
var mainImage = $(this).attr(&quot;href&quot;); //Find Image Name<br />
$(&quot;#main_view img&quot;).attr({ src: mainImage });<br />
<br />
});<br />
<br />
});<br />
</script><br />
<br />
<br />
<br /></div>
والآن قم بحفظ القالب انتقل إلى لوح تحكم مدونتك،إختر<span class="Apple-style-span" style="color: red;"> "تصميم"</span> ثم " <span class="Apple-style-span" style="color: red;">إضافة أداة" </span> ثم اختر اداة <span class="Apple-style-span" style="color: red;"> HTML/Javascript </span>والآن الصق الكود التالي:<br />
<br />
<br />
<div id="code">
<ul class="thumb"><br />
<li><a href=" <span class="Apple-style-span" style="color: red;">رابط المعلن هنا</span> "><img src="<span class="Apple-style-span" style="color: blue;">https://sites.google.com/site/lightbox007/photo/abuiyadblogger.jpg</span>" alt="" /></a></li><br />
<li><a href="<span class="Apple-style-span" style="color: red;">رابط المعلن هنا</span>"><img src="<span class="Apple-style-span" style="color: blue;">https://sites.google.com/site/lightbox007/photo/abuiyadblogger.jpg</span>" alt="" /></a></li><br />
<li><a href="<span class="Apple-style-span" style="color: red;">رابط المعلن هنا</span> "><img src="<span class="Apple-style-span" style="color: blue;">https://sites.google.com/site/lightbox007/photo/abuiyadblogger.jpg</span>" alt="" /></a></li><br />
<li><a href="<span class="Apple-style-span" style="color: red;">رابط المعلن هنا</span>"><img src="<span class="Apple-style-span" style="color: blue;">https://sites.google.com/site/lightbox007/photo/abuiyadblogger.jpg</span>" alt="" /></a></li><br />
</ul><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br /></div>
</div>
مع إدخال <span class="Apple-style-span" style="color: red;">رابط المعلن مكان اللون الاحمر</span> ورابط البنر الخاص به مكان الرابط<span class="Apple-style-span" style="color: blue;"> الأزرق</span> في إنتظار تعليقاتكم أتمنى أن تنال إعجابكم وإلى اللقاء في درس اخر مع تحياتي للاخ <a href="http://www.abu-iyad.com/2010/08/add-images-gallery-widget-with-jquery.html">ابو اياد </a> ،،،</div>
خالد محمد (ابوخلود)http://www.blogger.com/profile/17023136577166291717noreply@blogger.com25tag:blogger.com,1999:blog-3171771270267658652.post-71097091135281008472011-10-07T12:17:00.000-07:002011-10-07T12:17:03.817-07:00طريقة اضافة زر 1+ لجوجل على مدونة بلوجر<div dir="rtl" style="text-align: right;" trbidi="on">
<div dir="rtl" style="text-align: right;" trbidi="on">
<div class="MsoNormal" dir="RTL">
<span lang="AR-YE" style="font-family: Arial, sans-serif;">أصدر موقع جوجل حديثا الزر 1+ ،حيث يسمح لك باقتراح أي موقع معين أو أي شيء أعجبك وذلك عند النقر على الزر 1+ ،فإنك تقوم بإخبار أصدقائك والعالم أن هناك شيء ما يجب الإطلاع عليه ،وبالتالي فإن مقترحاتك سوف تظهر عندما يقومون بالبحث في جوجل ، فهذه الميزة جديدة حيث تسعى جوجل في تطوير محركها بشكل جديد ، ،لذلك ،إذا رأيت هذا الزر في موقع وتريد من أصدقائك إيجاده بسهولة عند بحثهم فقط أنقر الزر1 +</span><span lang="AR-YE" style="font-family: Arial, sans-serif;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="RTL">
<span lang="AR-YE" style="font-family: Arial, sans-serif;">ولإضافة هذا الزر في تدويناتك وفتح المجال للزائرين باقتراح مدونتك نقوم بشرح طريقة تركيب الزر +1 على المدونة . </span><span class="Apple-style-span" style="font-family: Arial, sans-serif;">انتقل الى لوحة تحكم مدونتك ثم اختر ( تصميم ) بعدها تحرير ( HTML ) ثم ضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم .</span></div>
<div class="MsoNormal" dir="RTL">
<span class="Apple-style-span" style="font-family: Arial, sans-serif;">قم بالبحث عن الكود التالي بواسطة لوحة التحكم ( ctrl +f ) : - </span></div>
<div class="MsoNormal" dir="RTL">
<span lang="AR-YE"><span class="Apple-style-span"></span></span></div>
<div id="code">
</body></div>
<span class="Apple-style-span"><span class="Apple-style-span" style="font-size: 15px; line-height: 17px;"><br /></span></span><br />
<span class="Apple-style-span"><span class="Apple-style-span" style="font-size: 15px; line-height: 17px;">ثم قم بلصق الكود التالي قبلة : - </span></span><br />
<span class="Apple-style-span"><span class="Apple-style-span" style="font-size: 15px; line-height: 17px;"></span></span><br />
<div id="code">
<span class="Apple-style-span"><span class="Apple-style-span" style="font-size: 15px; line-height: 17px;"> <script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script></span></span></div>
<span class="Apple-style-span"><span class="Apple-style-span" style="font-size: 15px; line-height: 17px;"><br /></span></span><br />
<span class="Apple-style-span"><span class="Apple-style-span" style="font-size: 15px; line-height: 17px;">والان قم بالبحث عن الكود التالي : - </span></span><br />
<span class="Apple-style-span"><span class="Apple-style-span" style="font-size: 15px; line-height: 17px;"></span></span><br />
<div id="code">
<span class="Apple-style-span"><span class="Apple-style-span" style="font-size: 15px; line-height: 17px;"><data:post.body/></span></span><br />
<span class="Apple-style-span"><span class="Apple-style-span" style="font-size: 15px; line-height: 17px;"><br /></span></span></div>
<span class="Apple-style-span" style="font-size: 15px; line-height: 17px;"><br /></span><br />
<span class="Apple-style-span" style="font-size: 15px; line-height: 17px;"><br /></span><br />
<span class="Apple-style-span" style="font-size: 15px; line-height: 17px;">ثم قم بلصق الكود التالي بعده ليكون<span class="Apple-style-span" style="color: red;"> الزر1+ اسفل التدوينة</span> ، او قم بلصق الكود قبله ليكون<span class="Apple-style-span" style="color: red;"> الزر1+ تحت عنوان التدوينة</span> :</span><br />
<span class="Apple-style-span" style="font-size: 15px; line-height: 17px;"></span><br />
<span class="Apple-style-span" style="font-size: 15px; line-height: 17px;"></span><br />
<div id="code">
<span class="Apple-style-span" style="font-size: 15px; line-height: 17px;"><b:if cond='data:blog.pageType == &quot;item&quot;'></span><br />
<span class="Apple-style-span" style="font-size: 15px; line-height: 17px;"><span class="Apple-style-span" style="font-size: 15px; line-height: 17px;"><g:plusone expr:href='data:post.url' size='<span class="Apple-style-span" style="color: red;">tall</span>'/></span></span><br />
<span class="Apple-style-span" style="font-size: 15px; line-height: 17px;"><span class="Apple-style-span" style="font-size: 15px; line-height: 17px;"></b:if></span></span><br />
<span class="Apple-style-span" style="font-size: 15px; line-height: 17px;"><span class="Apple-style-span" style="font-size: 15px; line-height: 17px;"><br /></span></span><br />
<span class="Apple-style-span" style="font-size: 15px; line-height: 17px;"><span class="Apple-style-span" style="font-size: 15px; line-height: 17px;"><br /></span></span><br />
<span class="Apple-style-span" style="background-color: white; color: #4c4c4c; font-family: Tahoma, arial, Helvetica; line-height: 24px;"></span></div>
ملاحظة : يتوفر زر1+ على 4 قياسات حيث يمكنك إختيار القياس المناسب لك وذلك بإستبدال الكلمة<span class="Apple-style-span" style="color: red;"> <span style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">tal</span></span><span style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: red; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">l</span> من الكود بأحد القياسات الموجودة في الصورة أسفله .<br />
<div class="separator" style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; clear: both; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: center;">
<a class="cboxElement" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjofAyDivpwfc9aGtCuW5AoDAxy2WkR0HNJOmCAOSnKJh0N3OjvnN0gdPPKw5uSt7ZzXy2LqwZhnmsAgAJG7WH1EGhiwoyb405tKWTLdZme509ghxW9ccrG4mKLxv6RxTMkhGq4UATbWhw/s1600/google-plus-one-button-sizes.jpg" imageanchor="1" style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #006699; margin-bottom: 0px; margin-left: 1em; margin-right: 1em; margin-top: 0px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjofAyDivpwfc9aGtCuW5AoDAxy2WkR0HNJOmCAOSnKJh0N3OjvnN0gdPPKw5uSt7ZzXy2LqwZhnmsAgAJG7WH1EGhiwoyb405tKWTLdZme509ghxW9ccrG4mKLxv6RxTMkhGq4UATbWhw/s1600/google-plus-one-button-sizes.jpg" style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" /></a></div>
وإذا أردت إظهار الزر 1+ كذلك على الصفحة الرئيسية ما عليك سوى حذف السطر الأول والأخير من الكود السابق <br />
<br />
<div style="text-align: center;">
<span class="Apple-style-span" style="color: red;"><b>تعليقاتكم مرحبا بها ،،،</b></span></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<a href="http://www.abu-iyad.com/">المصدر : مدونة ابو اياد </a></div>
<div style="text-align: center;">
<br /></div>
</div>
<span class="Apple-style-span" style="font-size: 15px; line-height: 17px;"></span></div>
خالد محمد (ابوخلود)http://www.blogger.com/profile/17023136577166291717noreply@blogger.com10tag:blogger.com,1999:blog-3171771270267658652.post-17036262734004216902011-09-15T12:18:00.000-07:002011-09-23T07:04:16.553-07:00كيف نقوم باضافة تأثيرات حركية على الصور في مدونات بلوجر ؟<div dir="rtl" style="text-align: right;" trbidi="on">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ0pPzuTjj1KuDaymiLndEgMrhQLijjWvQkcagctx7y8Maig6xYnPAJTvOi_iw-jxqMH0eb4QOByvdr5oPvJcECqiflCrCwBHdcsZAalA8yvGq3BW9t8oVELD9bAi0Eh358837UcW95Vc/s1600/polaroid2.jpg"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5652685640250814546" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ0pPzuTjj1KuDaymiLndEgMrhQLijjWvQkcagctx7y8Maig6xYnPAJTvOi_iw-jxqMH0eb4QOByvdr5oPvJcECqiflCrCwBHdcsZAalA8yvGq3BW9t8oVELD9bAi0Eh358837UcW95Vc/s320/polaroid2.jpg" style="cursor: hand; cursor: pointer; float: right; height: 243px; margin: 0 0 10px 10px; width: 320px;" /></a><br />
<div style="text-align: right;">
<br /></div>
<span class="Apple-style-span"><span class="Apple-style-span" style="background-color: white; color: #4c4c4c; font-family: Tahoma, arial, Helvetica; line-height: 24px;">اخوتي الكرام : السلام عليكم ورحمة الله وبركاتة وبعد غيبة طويلة ها انا اليوم اعود مرة ثانية ، نتعلم اليوم اخوتي الاعزاء على خاصية جميلة وهي </span><span class="Apple-style-span" style="background-color: white; font-family: Tahoma, arial, Helvetica; line-height: 24px;">(كيف نقوم باضافة تاثيرات حركية على الصور التي يتم نشرها على مدونات بلوجر )</span><span class="Apple-style-span" style="background-color: white; color: #4c4c4c; font-family: Tahoma, arial, Helvetica; line-height: 24px;"> هذه الخاصية تعطي للصور جمالية وتنسيق رائع عند وضع مؤشر الماوس علي الصورة سوف تميل جانبا وعند إبعاد مؤشر الماوس تعود الصورة لوضعيتها الطبيعية </span><span class="Apple-style-span" style="background-color: white; color: #4c4c4c; font-family: Tahoma, arial, Helvetica; line-height: 24px;">، وايظاً صور الخلاصات "إقرأ المزيد" هي كذلك تطبق عليها هذه الخاصية مما يعطي للمدونة جمالية ورونق رائعين ،،،</span></span><br />
<div>
<span class="Apple-style-span"><span class="Apple-style-span" style="line-height: 24px;"><br /></span></span><br />
<div>
<span class="Apple-style-span" style="background-color: white; font-family: Tahoma, arial, Helvetica; font-size: medium; line-height: 24px;">والآن دعونا لنتوجه لتطبيق الكود : </span><br />
<div>
<span class="Apple-style-span"><span class="Apple-style-span" style="line-height: 24px;"><br /></span></span><br />
<div>
<span class="Apple-style-span" style="background-color: white; color: #4c4c4c; font-family: Tahoma, arial, Helvetica; font-size: medium; line-height: 24px;">- انتقل الى لوحة تحكم مدونتك ثم اختر علامة </span><span class="Apple-style-span" style="background-color: white; font-family: Tahoma, arial, Helvetica; font-size: medium; line-height: 24px;">( تصميم )</span><span class="Apple-style-span" style="background-color: white; color: #4c4c4c; font-family: Tahoma, arial, Helvetica; font-size: medium; line-height: 24px;"> ثم </span><span class="Apple-style-span" style="background-color: white; font-family: Tahoma, arial, Helvetica; font-size: medium; line-height: 24px;">( تحرير HTML )</span><span class="Apple-style-span" style="background-color: white; color: #4c4c4c; font-family: Tahoma, arial, Helvetica; font-size: medium; line-height: 24px;"> ثم ضع علامة</span><span class="Apple-style-span" style="background-color: white; font-family: Tahoma, arial, Helvetica; font-size: medium; line-height: 24px;"> ( صح )</span><span class="Apple-style-span" style="background-color: white; color: #4c4c4c; font-family: Tahoma, arial, Helvetica; font-size: medium; line-height: 24px;"> في خانة </span><span class="Apple-style-span" style="background-color: white; font-family: Tahoma, arial, Helvetica; font-size: medium; line-height: 24px;">" توسيع قوالب عناصر واجهة المستخدم "</span><span class="Apple-style-span" style="background-color: white; color: #4c4c4c; font-family: Tahoma, arial, Helvetica; font-size: medium; line-height: 24px;"> . بعدها قم بالبحث عن الكود التالي وذلك بالاستعانة بلوحة التحكم</span><span class="Apple-style-span" style="background-color: white; font-family: Tahoma, arial, Helvetica; font-size: medium; line-height: 24px;"> ( Ctrl + F )</span><span class="Apple-style-span" style="background-color: white; color: #4c4c4c; font-family: Tahoma, arial, Helvetica; font-size: medium; line-height: 24px;"> :</span></div>
<div>
<span class="Apple-style-span" style="background-color: white; line-height: 24px;"><br /></span><br />
<div id="code">
<span class="Apple-style-span" style="background-color: white; line-height: 24px;"><br /></span><br />
<span class="Apple-style-span" style="background-color: white; line-height: 24px;">]]></b:skin></span></div>
<span class="Apple-style-span" style="background-color: white; line-height: 24px;"><br /></span></div>
<div>
<span class="Apple-style-span" style="background-color: white;"><span class="Apple-style-span"><span class="Apple-style-span"><span class="Apple-style-span" style="line-height: 24px;">ثم قم بوضع الكود التالي قبلة : -</span></span></span></span><br />
<div 0="" 15s="" 3px="" 5px="" 6px="" hover="" id=".post" img="" post="" transform="">
<div 0="" 15s="" 3px="" 5px="" 6px="" hover="" id=".post" img="" post="" transform="">
<span class="Apple-style-span" style="background-color: white;"><span class="Apple-style-span"><span class="Apple-style-span"><span class="Apple-style-span" style="line-height: 24px;"></span></span></span></span><br />
<span class="Apple-style-span" style="background-color: white;"><span class="Apple-style-span"><span class="Apple-style-span"><span class="Apple-style-span" style="line-height: 24px;"></span></span></span></span><br />
<div id="code">
<span class="Apple-style-span" style="background-color: white;"><span class="Apple-style-span"><span class="Apple-style-span"><span class="Apple-style-span" style="line-height: 24px;">.post img {-webkit-transition: -webkit-transform .15s linear;</span></span></span></span><br />
<span class="Apple-style-span" style="background-color: white;"><span class="Apple-style-span"><span class="Apple-style-span"><span class="Apple-style-span" style="line-height: 24px;"><span class="Apple-style-span" style="background-color: white;"><span class="Apple-style-span"><span class="Apple-style-span"><span class="Apple-style-span" style="line-height: 24px;">-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);</span></span></span></span></span></span></span></span><br />
<span class="Apple-style-span" style="background-color: white;"><span class="Apple-style-span"><span class="Apple-style-span"><span class="Apple-style-span" style="line-height: 24px;"><span class="Apple-style-span" style="background-color: white;"><span class="Apple-style-span"><span class="Apple-style-span"><span class="Apple-style-span" style="line-height: 24px;">-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);</span></span></span></span></span></span></span></span><br />
<span class="Apple-style-span" style="background-color: white;"><span class="Apple-style-span"><span class="Apple-style-span"><span class="Apple-style-span" style="line-height: 24px;"><span class="Apple-style-span" style="background-color: white;"><span class="Apple-style-span"><span class="Apple-style-span"><span class="Apple-style-span" style="line-height: 24px;">padding: 5px 5px 5px 5px;</span></span></span></span></span></span></span></span><br />
<span class="Apple-style-span" style="background-color: white;"><span class="Apple-style-span"><span class="Apple-style-span"><span class="Apple-style-span" style="line-height: 24px;"><span class="Apple-style-span" style="background-color: white;"><span class="Apple-style-span"><span class="Apple-style-span"><span class="Apple-style-span" style="line-height: 24px;">-webkit-transform: rotate(<span class="Apple-style-span" style="color: red;">+2deg</span>);</span></span></span></span></span></span></span></span><br />
<span class="Apple-style-span" style="background-color: white;"><span class="Apple-style-span"><span class="Apple-style-span"><span class="Apple-style-span" style="line-height: 24px;"><span class="Apple-style-span" style="background-color: white;"><span class="Apple-style-span"><span class="Apple-style-span"><span class="Apple-style-span" style="line-height: 24px;">-moz-transform: rotate(<span class="Apple-style-span" style="color: red;">+2deg</span>);</span></span></span></span></span></span></span></span><br />
<span class="Apple-style-span" style="background-color: white;"><span class="Apple-style-span"><span class="Apple-style-span"><span class="Apple-style-span" style="line-height: 24px;"><span class="Apple-style-span" style="background-color: white;"><span class="Apple-style-span"><span class="Apple-style-span"><span class="Apple-style-span" style="line-height: 24px;">}</span></span></span></span></span></span></span></span><br />
<span class="Apple-style-span" style="background-color: white;"><span class="Apple-style-span"><span class="Apple-style-span"><span class="Apple-style-span" style="line-height: 24px;"><span class="Apple-style-span" style="background-color: white;"><span class="Apple-style-span"><span class="Apple-style-span"><span class="Apple-style-span" style="line-height: 24px;">.post img:hover {</span></span></span></span></span></span></span></span><br />
<span class="Apple-style-span" style="background-color: white;"><span class="Apple-style-span"><span class="Apple-style-span"><span class="Apple-style-span" style="line-height: 24px;"><span class="Apple-style-span" style="background-color: white;"><span class="Apple-style-span"><span class="Apple-style-span"><span class="Apple-style-span" style="line-height: 24px;">-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);</span></span></span></span></span></span></span></span><br />
<span class="Apple-style-span" style="background-color: white;"><span class="Apple-style-span"><span class="Apple-style-span"><span class="Apple-style-span" style="line-height: 24px;"><span class="Apple-style-span" style="background-color: white;"><span class="Apple-style-span"><span class="Apple-style-span"><span class="Apple-style-span" style="line-height: 24px;">-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);</span></span></span></span></span></span></span></span><br />
<span class="Apple-style-span" style="background-color: white;"><span class="Apple-style-span"><span class="Apple-style-span"><span class="Apple-style-span" style="line-height: 24px;"><span class="Apple-style-span" style="background-color: white;"><span class="Apple-style-span"><span class="Apple-style-span"><span class="Apple-style-span" style="line-height: 24px;">-webkit-transform: rotate(<span class="Apple-style-span" style="color: blue;">-1deg</span>);</span></span></span></span></span></span></span></span><br />
<span class="Apple-style-span" style="background-color: white;"><span class="Apple-style-span"><span class="Apple-style-span"><span class="Apple-style-span" style="line-height: 24px;"><span class="Apple-style-span" style="background-color: white;"><span class="Apple-style-span"><span class="Apple-style-span"><span class="Apple-style-span" style="line-height: 24px;">-moz-transform: rotate(<span class="Apple-style-span" style="color: blue;">-1deg</span>);</span></span></span></span></span></span></span></span><br />
<span class="Apple-style-span" style="background-color: white;"><span class="Apple-style-span"><span class="Apple-style-span"><span class="Apple-style-span" style="line-height: 24px;"><span class="Apple-style-span" style="background-color: white;"><span class="Apple-style-span"><span class="Apple-style-span"><span class="Apple-style-span" style="line-height: 24px;">}</span></span></span></span></span></span></span></span><br />
<span class="Apple-style-span" style="background-color: white;"><span class="Apple-style-span"><span class="Apple-style-span"><span class="Apple-style-span" style="line-height: 24px;"><span class="Apple-style-span" style="background-color: white;"><span class="Apple-style-span"><span class="Apple-style-span"><span class="Apple-style-span" style="line-height: 24px;"><br /></span></span></span></span></span></span></span></span></div>
<span class="Apple-style-span" style="background-color: white; color: #4c4c4c; font-family: Tahoma, arial, Helvetica; line-height: 24px;">يمكنك التحكم في درجة ميلان الصور كما تريد وبإتجاهها كذلك سواء على اليسار أم على اليمين وذلك بإستبدال الرمز<b style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"> (<span style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: red; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">+</span></b>) بالرمز<b style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">(<span style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: blue; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"> </span></b><span style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: blue; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">-</span><b style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><span style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: blue; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">)</span></b> والعكس، حيث تمثل القيمة <b style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><span style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: red; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">2deg+</span></b> درجة الميلان قبل وضع مؤشر الماوس وتمثل كذلك القيمة <b style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><span style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: blue; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">1deg-</span></b> درجة الميلان عند وضع مؤشر الماوس على الصورة .</span><br />
<span class="Apple-style-span" style="background-color: white;"><span class="Apple-style-span"><span class="Apple-style-span"><span class="Apple-style-span" style="line-height: 24px;"><span class="Apple-style-span" style="background-color: white;"><span class="Apple-style-span"><span class="Apple-style-span"><span class="Apple-style-span" style="line-height: 24px;"><br /></span></span></span></span></span></span></span></span><br />
<span class="Apple-style-span" style="background-color: white; color: #4c4c4c; font-family: Tahoma, arial, Helvetica; line-height: 24px;">والتتيجة تكون الصورة على هذا الشكل .</span><br />
<div class="separator" style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; clear: both; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: center;">
<a class="cboxElement" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzbvznBhx5aXFebGfQC80RIrtouwACaZQMk1IWswguAZW7CuD3mr5edxE6QZ_4VWbP8T7BToQGxCOKryqAlduYtONgsb47zb0_x9a6zatGzQXcf-bxX8yL53davYUYGH4DvasyfyhseKw/s1600/polaroid2.jpg" imageanchor="1" style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #006699; margin-bottom: 0px; margin-left: 1em; margin-right: 1em; margin-top: 0px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" target="_blank"><img alt="" height="242" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzbvznBhx5aXFebGfQC80RIrtouwACaZQMk1IWswguAZW7CuD3mr5edxE6QZ_4VWbP8T7BToQGxCOKryqAlduYtONgsb47zb0_x9a6zatGzQXcf-bxX8yL53davYUYGH4DvasyfyhseKw/s320/polaroid2.jpg" style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" width="320" /></a></div>
<br />
<span class="Apple-style-span" style="background-color: white;"><span class="Apple-style-span"><span class="Apple-style-span"><span class="Apple-style-span" style="line-height: 24px;"><span class="Apple-style-span" style="background-color: white;"><span class="Apple-style-span"><span class="Apple-style-span"><span class="Apple-style-span" style="line-height: 24px;"><br /></span></span></span></span></span></span></span></span><br />
<span class="Apple-style-span" style="background-color: white;"><span class="Apple-style-span"><span class="Apple-style-span"><span class="Apple-style-span" style="line-height: 24px;"><span class="Apple-style-span" style="background-color: white;"><span class="Apple-style-span"><span class="Apple-style-span"><span class="Apple-style-span" style="line-height: 24px;"><br /></span></span></span></span></span></span></span></span><br />
<span class="Apple-style-span" style="background-color: white;"><span class="Apple-style-span"><span class="Apple-style-span"><span class="Apple-style-span" style="line-height: 24px;"><span class="Apple-style-span" style="background-color: white;"><span class="Apple-style-span"><span class="Apple-style-span"><span class="Apple-style-span" style="line-height: 24px;"><br /></span></span></span></span></span></span></span></span><br />
<br />
<div style="text-align: center;">
<span class="Apple-style-span" style="font-family: 'Times New Roman', serif;"><span class="Apple-style-span" style="font-weight: 900; line-height: 24px;"><br /></span></span></div>
<span class="Apple-style-span" style="background-color: white; font-family: Arial; font-size: 16px; font-weight: bold;"><b><div align="center" class="MsoNormal" style="direction: ltr; line-height: 18pt; margin-bottom: 0.0001pt; text-align: center; unicode-bidi: embed;">
<b><span dir="RTL" lang="AR-SA" style="background-attachment: initial; background-clip: initial; background-color: white; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; color: red; font-family: Arial, sans-serif; font-size: 12pt;">أتمني من الله العلي القدير أن الدرس سيفيدكم ويرشدكم عن ضالتكم التي تبحثون عليها ، والى اللقاء في موضوع آخر ،</span></b></div>
</b></span><br />
<div style="text-align: center;">
<span class="Apple-style-span" style="background-color: white;"><span class="Apple-style-span"><span class="Apple-style-span"><span class="Apple-style-span" style="line-height: 24px;"><span class="Apple-style-span" style="background-color: white;"><span class="Apple-style-span"><span class="Apple-style-span"><span class="Apple-style-span" style="color: red; line-height: 24px;"><b>استفساراتكم وتعليقاتكم مرحبا بها </b></span></span></span></span></span></span></span></span></div>
<div style="text-align: center;">
<span class="Apple-style-span" style="background-color: white;"><span class="Apple-style-span"><span class="Apple-style-span"><span class="Apple-style-span" style="line-height: 24px;"><span class="Apple-style-span" style="background-color: white;"><span class="Apple-style-span"><span class="Apple-style-span"><span class="Apple-style-span" style="color: red; line-height: 24px;"><b><a href="http://www.abu-iyad.com/2010/12/polaroid-effect-to-blogger-images.html">المصدر مدونة ابو اياد</a></b></span></span></span></span></span></span></span></span></div>
<span class="Apple-style-span" style="background-color: white;"><span class="Apple-style-span"><span class="Apple-style-span"><span class="Apple-style-span" style="line-height: 24px;"><span class="Apple-style-span" style="background-color: white;"><span class="Apple-style-span"><span class="Apple-style-span"><span class="Apple-style-span" style="line-height: 24px;"><br /></span></span></span></span></span></span></span></span></div>
<span class="Apple-style-span" style="background-color: white;"><span class="Apple-style-span"><span class="Apple-style-span"><span class="Apple-style-span" style="line-height: 24px;">
</span></span></span></span></div>
</div>
</div>
</div>
</div>
</div>
خالد محمد (ابوخلود)http://www.blogger.com/profile/17023136577166291717noreply@blogger.com15tag:blogger.com,1999:blog-3171771270267658652.post-74860095105526773122011-04-30T14:45:00.000-07:002011-04-30T15:18:43.117-07:00اعتذر لكم عن غيابي الطويل<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPiQyGtoFOYcbns178KXRiABhxin_B66Zbsq3H8BWWnXTaVNp0jLqs4MAX_YtoYOvmi7O5GSjRcRXCwTvSjzaMSp0O67kDJU6eQjg-zAQM2Xd9K4lGiX3Fe-lxtxEQw7mNH4rI-S2EsHw/s1600/%25D8%25A7%25D9%2586%25D8%25A7+%25D8%25A7%25D8%25B9%25D8%25AA%25D8%25B0%25D8%25B1.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="float:right; margin:0 0 10px 10px;cursor:pointer; cursor:hand;width: 259px; height: 194px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPiQyGtoFOYcbns178KXRiABhxin_B66Zbsq3H8BWWnXTaVNp0jLqs4MAX_YtoYOvmi7O5GSjRcRXCwTvSjzaMSp0O67kDJU6eQjg-zAQM2Xd9K4lGiX3Fe-lxtxEQw7mNH4rI-S2EsHw/s320/%25D8%25A7%25D9%2586%25D8%25A7+%25D8%25A7%25D8%25B9%25D8%25AA%25D8%25B0%25D8%25B1.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5601502895557533666" /></a><br /><div style="text-align: center;"><span class="Apple-style-span">بسم الله الرحمن الرحيم </span></div><div><span class="Apple-style-span"><br /></span></div><div><div style="text-align: center;"><span class="Apple-style-span" style="color: rgb(255, 0, 0); font-family: tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "><span class="Apple-style-span">تحية طيبة واشواقٌ قلبية..</span></span></div><span class="Apple-style-span" style="font-family: tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "><br /><span>اهدي من خلالها سلام الله ورحمته وبركاته لمن يمتلكون احن واطيب القلوب </span><span>اخواني واخواتي </span><span>في عــالــم التدوين والمدونات .</span></span></div><div><span class="Apple-style-span" style="font-family: tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "><span><br /></span></span></div><div><span class="Apple-style-span"><span class="Apple-style-span" style="font-family: tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "><span><span>فقد تغـيبـت مـراسـيـلي وانقطعت حـبـال مواضيعي !! </span>إنـقـطـعـت فـجـأة ودون إنـذار وبـالـرغـمـ مـن إن الكثير منكم رغب في الإطمائنان علي </span></span><span class="Apple-style-span" style="font-family: tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; ">الا أنكم لم تعاتبوني علي تقصيري .. </span><span class="Apple-style-span" style="font-family: tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; ">فواجبي أن أقدم اعتذاري لكم عن <a href="http://www.ee77ee.com/vb/t23547.html" style="text-decoration: none; ">غيابي </a>المفاجئ </span><span class="Apple-style-span" style="font-family: tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; ">وأعلم أن هذا الاعتذار لا يكفي .. </span><span class="Apple-style-span" style="font-family: tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; ">فواجبي أكبر من ذلك بكثير اتجاهكم..</span></span></div><span class="Apple-style-span" style="font-family: tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "><span>ولاكن يعلم الله ان غيابي<a href="http://www.ee77ee.com/vb/t23547.html" style="text-decoration: none; "> </a>كان بسبب انشغالي الكثير ..</span></span><div><span class="Apple-style-span" style="font-family: tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "><span></span><br /><span class="Apple-style-span"><span>ها أنا أمد يدي إليكم وكلي أسف وندم .. </span><span>فاقبلوا اعتذاري هذا .. </span></span></span><div><span class="Apple-style-span"><span></span><span class="Apple-style-span"><span class="Apple-style-span" style="-webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px;"><br /></span></span></span><div style="text-align: justify;"><span class="Apple-style-span"><span class="Apple-style-span" style="-webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "><span class="Apple-style-span" style="line-height: 18px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; "><b>و نعدكم إن شاءالله بمواضيع جديدة و منوعة في القريب</b></span></span></span></div><div style="text-align: justify;"><span class="Apple-style-span"><span class="Apple-style-span" style="-webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "><span class="Apple-style-span" style="line-height: 18px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; "><b><br /></b></span></span></span></div><div style="text-align: justify;"><span class="Apple-style-span"><span class="Apple-style-span" style="-webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "><span class="Apple-style-span" style="line-height: 18px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; "><b> العاجل بإذن الله نأمل أن تحوز رضاكم. كما و نشكر</b></span></span></span></div><div style="text-align: justify;"><span class="Apple-style-span"><span class="Apple-style-span" style="-webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "><span class="Apple-style-span" style="line-height: 18px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; "><b><br /></b></span></span></span></div><div style="text-align: justify;"><span class="Apple-style-span"><span class="Apple-style-span" style="-webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "><span class="Apple-style-span" style="line-height: 18px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; "><b> لكم إخلاصكم و زياراتكم المتواصلة للمدونة.</b></span></span></span></div><div style="text-align: justify;"><span class="Apple-style-span"><span class="Apple-style-span"><span class="Apple-style-span"><span class="Apple-style-span" style="line-height: 18px;"><br /></span></span></span></span></div><div><span class="Apple-style-span"><span class="Apple-style-span"><span class="Apple-style-span" style="line-height: 18px;"><br /></span></span></span></div><div><span class="Apple-style-span"><span class="Apple-style-span"><span class="Apple-style-span"></span><span class="Apple-style-span" style="line-height: 18px;">تحياتي<br /></span></span></span><div><span class="Apple-style-span"><span class="Apple-style-span" style="font-family: tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "><br /></span></span></div></div></div></div>خالد محمد (ابوخلود)http://www.blogger.com/profile/17023136577166291717noreply@blogger.com11tag:blogger.com,1999:blog-3171771270267658652.post-15537004277861561032010-08-04T18:45:00.000-07:002010-08-05T08:51:41.237-07:00اضافة كود المتصلون حالياً في مدونة بلوجر<span style="font-family:arial;"><span style="font-size:130%;">أخواني الكرام هذه الخاصية تتيح لك معرفة عدد الزوار المتصلين بمدونتك أو موقعك حاليا و لتفعيل هذه الخاصية اتبع الشرح المفصل بالصور</span> .<br /><br /></span><br /><br /><div align="center"><div style="text-align: right;"><span style="font-family:Arial;font-size:130%;">أولا : أدخل على هذا الموقع :<a href="http://freeonlineusers.com/">http://freeonlineusers.com/</a></span><br /></div><span style="font-family:Arial;font-size:130%;"><br /></span><div style="text-align: right;"><span style="font-family:Arial;font-size:130%;"> </span></div></div><br /><span style=";font-family:Arial;font-size:130%;">01</span><br /><br /><span style="font-family:Arial;font-size:130%;">اذهب الى sign up بالموقع وابدا عملية التسجيل البسيطة </span><br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEZAdO9ednJqU9acfulwOpB1EwekyMwD-sbSfQCFstQwSinJHgLTDIUeA7EvoS3qZjgNwfkFKR73FZdqrLhGD_clQgfR9VkXCr1M9dLcwTA0Xf5m-pzO0fp_7adUyA77yHyiohAq8Dzrbv/s1600-h/01.jpg"><img id="BLOGGER_PHOTO_ID_5402030574195604578" style="margin: 0px auto 10px; display: block; width: 400px; height: 135px; text-align: center;" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEZAdO9ednJqU9acfulwOpB1EwekyMwD-sbSfQCFstQwSinJHgLTDIUeA7EvoS3qZjgNwfkFKR73FZdqrLhGD_clQgfR9VkXCr1M9dLcwTA0Xf5m-pzO0fp_7adUyA77yHyiohAq8Dzrbv/s400/01.jpg" border="0" /></a><br /><br /><br /><br /><span style="font-size:130%;">02<br /><br />بدأ عملية التسجيل املأ الخانات الفارغة كما في الصورة التالية اختر اسم مستخدم وكلمة مرور بسيطة واضغط<br />register</span><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSxq_5pAq30I_KQRtzk0r-ognAeLSloPTvtsXlOQU6ZHytu85R28o_2aY3e9jkEqbYabhoWDSledqUXUY5_8wXsMnXgbwEHVhTWTh5Ui-Pk5WY_2ruBNDs2JTbqjZlqS7KodlEGk6Q1ruj/s1600-h/02.jpg"><img id="BLOGGER_PHOTO_ID_5402030506815498130" style="margin: 0px auto 10px; display: block; width: 400px; height: 279px; text-align: center;" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSxq_5pAq30I_KQRtzk0r-ognAeLSloPTvtsXlOQU6ZHytu85R28o_2aY3e9jkEqbYabhoWDSledqUXUY5_8wXsMnXgbwEHVhTWTh5Ui-Pk5WY_2ruBNDs2JTbqjZlqS7KodlEGk6Q1ruj/s400/02.jpg" border="0" /></a><span style="font-size:130%;"><br /><br /><br /></span><span style="font-size:130%;">03</span><div align="center"><div style="text-align: right;"><span style="font-size:130%;"><br />ستظهر لك رسالة تخبرك بارسال رسالة بريدية الى بريدك الإلكتروني قم بفتح بريدك الإلكتروني للإكمال عملية التسجيل<br /></span></div><br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9iKQUPhRw1BLbgrNw8-azvdpcvuClaAUx-IR70kEgfziKA_Vf0RN-zPE8zwI1ioLr6cBOl89cC75TCWiaSkHsCYhh_roK_I1swpw98QUx7BdJ9sdb00p9lhAk3VYtfypOs8F33RRaMguc/s1600-h/03.jpg"><img id="BLOGGER_PHOTO_ID_5402030418867749394" style="margin: 0px auto 10px; display: block; width: 400px; height: 190px; text-align: center;" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9iKQUPhRw1BLbgrNw8-azvdpcvuClaAUx-IR70kEgfziKA_Vf0RN-zPE8zwI1ioLr6cBOl89cC75TCWiaSkHsCYhh_roK_I1swpw98QUx7BdJ9sdb00p9lhAk3VYtfypOs8F33RRaMguc/s400/03.jpg" border="0" /></a><span style="font-size:130%;"><br /><br /><br /><div style="text-align: right;">04</div></span><div><div style="text-align: right;"><span style="font-size:130%;"><br />لتفغيل عملية التسجيل اضغط على الرابط في بريدك الإلكتروني كما هو موضح في الصورة التالية<br /></span></div><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9lEe6EI6eo4_1kfE0Km_9Bb84R_QcxypQh_uOYH60IWwtrKl6XDqgggQMkvag11t8Ex_cun710CJAj8hJK0wmEMIsILvvb3del4kpnOO9ETgIRLW-sYOxnoOxcXiztO4emvv7OaE-2VSM/s1600-h/04.jpg"><img id="BLOGGER_PHOTO_ID_5402030337335493234" style="margin: 0px auto 10px; display: block; width: 400px; height: 174px; text-align: center;" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9lEe6EI6eo4_1kfE0Km_9Bb84R_QcxypQh_uOYH60IWwtrKl6XDqgggQMkvag11t8Ex_cun710CJAj8hJK0wmEMIsILvvb3del4kpnOO9ETgIRLW-sYOxnoOxcXiztO4emvv7OaE-2VSM/s400/04.jpg" border="0" /></a><br /><br /><br /><div style="text-align: right;"><span style="font-size:130%;">05</span></div><div><br /><div style="text-align: right;"><span style="font-size:130%;">هذه رسالة تخبرك بأنه قد تم تفعيل حسابك بالموقع ويمكن أن تقوم بانشاء الكود ونسخه الى مدونتك<br /></span></div><br /><div><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo6YugqFIo8wErYhTHnd68IT3waddZEAFCmpWnQm9xbRWOSWaeM3i8hQ9SMKK3vAal_GdokvGBQIXm6t7OqFzBeHzDpsDeoEHNhZME2XU-OsOy2KriNivm9XzkpTSs-2kPAmp2BiK9-_wN/s1600-h/05.jpg"><img id="BLOGGER_PHOTO_ID_5402030250792074946" style="margin: 0px auto 10px; display: block; width: 400px; height: 126px; text-align: center;" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo6YugqFIo8wErYhTHnd68IT3waddZEAFCmpWnQm9xbRWOSWaeM3i8hQ9SMKK3vAal_GdokvGBQIXm6t7OqFzBeHzDpsDeoEHNhZME2XU-OsOy2KriNivm9XzkpTSs-2kPAmp2BiK9-_wN/s400/05.jpg" border="0" /></a><span style="font-size:130%;"></span></div><div><span style="font-size:130%;"></span></div><div style="text-align: right;"><span style="font-size:130%;">06</span></div><div><br /><div style="text-align: right;"><span style="font-size:130%;">على يمين الصفحة بالأعلى ستجد دخول المستخدم كما في الصورة التالية أدخل بريدك الإلكتروني الذي سجلت به وكلمة المرور كما هو موضح في الصورة .<br /></span></div><br /><br /><div><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjatx9FAFZdovx1M4b-2p02bPe6AJ7iZcMoNleZYqpcIpeDNLphASjBhDFfvklSbVSwp7io7f1Vaz9AY-7Q1hYum_dSj9ULoSk4-Ff7C7SGAoXdUZmiqDoTzc7kf7EHeVwdnaqw5cyXxKeD/s1600-h/06.jpg"><img id="BLOGGER_PHOTO_ID_5402030182475010530" style="margin: 0px auto 10px; display: block; width: 400px; height: 136px; text-align: center;" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjatx9FAFZdovx1M4b-2p02bPe6AJ7iZcMoNleZYqpcIpeDNLphASjBhDFfvklSbVSwp7io7f1Vaz9AY-7Q1hYum_dSj9ULoSk4-Ff7C7SGAoXdUZmiqDoTzc7kf7EHeVwdnaqw5cyXxKeD/s400/06.jpg" border="0" /></a><span style="font-size:130%;"></span></div><div><span style="font-size:130%;"></span></div><div><span style="font-size:130%;"></span></div><div style="text-align: right;"><span style="font-size:130%;">07</span></div><div><span style="font-size:130%;"><br /></span><div style="text-align: right;"><span style="font-size:130%;">بعد دخولك الى حسابك اذهب الى أعلى الصفحة واضغط link codes<br /></span></div><br /><br /><div><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmEdT6S4ZXNq7cdPkvYDLj58qqYPeuHjpMyiLgbMfowE3NoeIjyB0RUxuhmSBAaHZzfbsENZxFwr4jW6xouUT2EGR-MrYYvbiwDn0bKGAiwUfJeVU6O7aABPSa8wXbMwi4d0pqoNhnmC9o/s1600-h/07.jpg"><img id="BLOGGER_PHOTO_ID_5402030048551381202" style="margin: 0px auto 10px; display: block; width: 305px; height: 230px; text-align: center;" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmEdT6S4ZXNq7cdPkvYDLj58qqYPeuHjpMyiLgbMfowE3NoeIjyB0RUxuhmSBAaHZzfbsENZxFwr4jW6xouUT2EGR-MrYYvbiwDn0bKGAiwUfJeVU6O7aABPSa8wXbMwi4d0pqoNhnmC9o/s400/07.jpg" border="0" /></a></div><div style="text-align: right;"><span style="font-size:130%;">08</span></div><div><div style="text-align: right;"><span style="font-size:130%;">اكتب عنوان موقعك أو مدونتك أي العنوان الإلكتروني واضغط Add<br /></span></div><br /><br /><div><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKcbc2REGrxDk7THjobPuiJxw61BwWWLoPbrI8vWjGw1D2ZOEc0us_zaImsAv1YkcJ4RsPtzjY0-_6HvePUmP85aq8bSQZv8Wv5mkwX4NB2oPPOHtXLYR67RH0qnvlLjbTPRLwEN7mZS3i/s1600-h/08.jpg"><img id="BLOGGER_PHOTO_ID_5402029970635158402" style="margin: 0px auto 10px; display: block; width: 400px; height: 174px; text-align: center;" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKcbc2REGrxDk7THjobPuiJxw61BwWWLoPbrI8vWjGw1D2ZOEc0us_zaImsAv1YkcJ4RsPtzjY0-_6HvePUmP85aq8bSQZv8Wv5mkwX4NB2oPPOHtXLYR67RH0qnvlLjbTPRLwEN7mZS3i/s400/08.jpg" border="0" /></a></div><div style="text-align: right;">09</div><div style="text-align: right;"><span style="font-size:130%;">ستظهر لك هذه النافذة يمكنك تبديل لون الخط وكذالك يمكنك اختيار اسم ثم اضغط على generate code<br /><br /></span></div><div><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcCavCl5QkmHLAaidMDXLEZMS7FsfIeoqALIMZa2a7tVYD6ag1lpI9ZGURg6i6EaIU0LR0jq21vphyphenhyphen1D-ekJMaV1h3adGaOooxqUF16MwYklkJnjeAF5j2vWUq-kRJSJ23kzm56IWFfqwf/s1600-h/09.jpg"><img id="BLOGGER_PHOTO_ID_5402029884853619618" style="margin: 0px auto 10px; display: block; width: 400px; height: 186px; text-align: center;" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcCavCl5QkmHLAaidMDXLEZMS7FsfIeoqALIMZa2a7tVYD6ag1lpI9ZGURg6i6EaIU0LR0jq21vphyphenhyphen1D-ekJMaV1h3adGaOooxqUF16MwYklkJnjeAF5j2vWUq-kRJSJ23kzm56IWFfqwf/s400/09.jpg" border="0" /></a></div><div style="text-align: right;"><span style="font-size:130%;">10</span></div><div><div style="text-align: right;"><span style="font-size:130%;">قم بنسخ الكود بكامله .</span><br /></div><br /><br /><div><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgyvxgPuYmkU1hfngtgbWMDkRlRX8N1H1TjujP7xAmw-DziI5HfuV0ETocgZ8Qgf6uwQnxKg5duk9cLlQXXJTTU70nN2CG_1eHwA5qo8x4k9qc6JySQqS43uu9_kcnlhk_g4JyEI49WP8w/s1600-h/10.jpg"><img id="BLOGGER_PHOTO_ID_5402029781962960930" style="margin: 0px auto 10px; display: block; width: 400px; height: 116px; text-align: center;" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgyvxgPuYmkU1hfngtgbWMDkRlRX8N1H1TjujP7xAmw-DziI5HfuV0ETocgZ8Qgf6uwQnxKg5duk9cLlQXXJTTU70nN2CG_1eHwA5qo8x4k9qc6JySQqS43uu9_kcnlhk_g4JyEI49WP8w/s400/10.jpg" border="0" /></a><br /><span style="font-size:130%;"></span></div><div><div style="text-align: right;"><span style="font-size:130%;">11</span></div> </div><div style="text-align: right;"><span style="font-size:130%;">الأن اذهب الى مدونتك وادخل الى صفحة </span><span style="color: rgb(51, 102, 255);font-size:130%;"><strong>التخطيط</strong></span><span style="font-size:130%;"> .</span></div><div><img id="BLOGGER_PHOTO_ID_5402029685186252226" style="margin: 0px auto 10px; display: block; width: 49px; height: 26px; text-align: center;" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR4tUN9HpzpLq_Ioi5sTyG4RUAauSHRJ5XXglYeFfm-pidP3ZFfUO2p0xu17Ot0riWgvoUQZpVHLoAlR72FaEMa-x3y5PJBHk0667NMBz4WAOoTAI2gO6gwni-EgQ9ym0y7H55Fjnsddk3/s400/12.jpg" border="0" /><span style="font-size:130%;"></span></div><div><span style="font-size:130%;"></span></div><div style="text-align: right;"><span style="font-size:130%;">12</span></div><div><span style="font-size:130%;"></span></div><div><div style="text-align: right;"><span style="font-size:130%;">ثم اذهب الى </span><span style="color: rgb(51, 51, 255);font-size:130%;"><strong>اضافة أداة</strong></span><span style="font-size:130%;"> كما في الصورة التالية .</span><br /></div><br /><div><div><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDmpxczYK7VarpQh5vD2R4mkDfDElk3gvvzlNmLl_Pnm1bDclXWtjywKxJb0bRXyuc6x7Ii-jTTgI7OGMTsUgP1JqSkrr7wew1QVnmxOrKhMTStE2WLvtJj00O-0pjSWtkhwchABAeKVyX/s1600-h/13.jpg"><img id="BLOGGER_PHOTO_ID_5402029546960502162" style="margin: 0px auto 10px; display: block; width: 264px; height: 49px; text-align: center;" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDmpxczYK7VarpQh5vD2R4mkDfDElk3gvvzlNmLl_Pnm1bDclXWtjywKxJb0bRXyuc6x7Ii-jTTgI7OGMTsUgP1JqSkrr7wew1QVnmxOrKhMTStE2WLvtJj00O-0pjSWtkhwchABAeKVyX/s400/13.jpg" border="0" /></a><br /><span style="font-size:130%;"></span></div><div style="text-align: right;"><span style="font-size:130%;">13</span></div><div><span style="font-size:130%;"></span></div><div><div style="text-align: right;"><span style="font-size:130%;">اختر HTML/JavaScript<br /></span></div><br /><div><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw64ys_CWK32rYYMVh-FuBRV9kKGyJ4TXX2XGu-BipbByJvBmYPutEukDFhFKd2xvwmVNpY0KJoeMPGclG_4v8SaGNkOYkIWvxZYWdcPuymiE4iPuebkkmHt3pQ-nQT6arPrNn_wBe_8v3/s1600-h/14.jpg"><img id="BLOGGER_PHOTO_ID_5402029447749172450" style="margin: 0px auto 10px; display: block; width: 400px; height: 140px; text-align: center;" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw64ys_CWK32rYYMVh-FuBRV9kKGyJ4TXX2XGu-BipbByJvBmYPutEukDFhFKd2xvwmVNpY0KJoeMPGclG_4v8SaGNkOYkIWvxZYWdcPuymiE4iPuebkkmHt3pQ-nQT6arPrNn_wBe_8v3/s400/14.jpg" border="0" /></a><span style="font-size:130%;"></span></div><div><span style="font-size:130%;"></span></div><div><span style="font-size:130%;"></span></div><div style="text-align: right;"><span style="font-size:130%;">14</span></div><div><div style="text-align: right;"><span style="font-size:130%;">قم بلصق الكود في المساحة البيضاء واختر عنوان للأداة كمثال يمكنك كتابة بالعربية المتصلون حاليا أو بلإنجليزية online users ثم اضغط </span><span style="color: rgb(255, 0, 0);font-size:130%;"><strong>حفظ</strong></span><span style="font-size:130%;"><br /></span></div><br /><br /><br /><div><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg8t-lF7U278pBIQcSBY4mxV5u2R_k1ixZ82GO6dPJkBqfQsTF8eqHldMGInL_6Cxw3Zgp0XNDMkZGOyPNZcE1pzqM96ZctJulkvjMnRnCsEXWJIz9PglKfUjb1X2zz1jlcVFrJvA919XI/s1600-h/15.jpg"><img id="BLOGGER_PHOTO_ID_5402029357804059746" style="margin: 0px auto 10px; display: block; width: 400px; height: 332px; text-align: center;" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg8t-lF7U278pBIQcSBY4mxV5u2R_k1ixZ82GO6dPJkBqfQsTF8eqHldMGInL_6Cxw3Zgp0XNDMkZGOyPNZcE1pzqM96ZctJulkvjMnRnCsEXWJIz9PglKfUjb1X2zz1jlcVFrJvA919XI/s400/15.jpg" border="0" /></a><br /><span style="font-size:130%;"></span></div><div style="text-align: right;"><span style="font-size:130%;">15</span></div><div><div style="text-align: right;"><span style="font-size:130%;">من صفحة التخطيط اضظ كضالك على الخيار </span><span style="color: rgb(255, 0, 0);font-size:130%;"><strong>حفظ</strong></span><span style="font-size:130%;"> وقم بعرض المدونة الإلكترونية لمشاهدة الأداة وهي تعمل .<br /></span></div><br /><br /></div><div><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBT-XZcNYuHReBPYPRwZ4-2KKlyHG-FsvEtOaW5qsSJym8LfOn0cWRJE89Y8j8dmooeShpEaBzqVM7ykZS3KasxvwzFNzzVERBZgBNctXXQNGmSplmgA1QU22zLPERjENa92tCjaKIX2t9/s1600-h/16.jpg"><img id="BLOGGER_PHOTO_ID_5402029231077973218" style="margin: 0px auto 10px; display: block; width: 400px; height: 65px; text-align: center;" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBT-XZcNYuHReBPYPRwZ4-2KKlyHG-FsvEtOaW5qsSJym8LfOn0cWRJE89Y8j8dmooeShpEaBzqVM7ykZS3KasxvwzFNzzVERBZgBNctXXQNGmSplmgA1QU22zLPERjENa92tCjaKIX2t9/s400/16.jpg" border="0" /></a> </div><div><br /><br /><span style="font-size:130%;"></span></div><div style="text-align: right;"><span style="font-size:130%;">16</span></div><div><span style="font-size:130%;"></span></div><div style="text-align: right;"><span style="font-size:130%;">النتيجة .<br /></span></div><div><div><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmtam0LdpkkK8uagGmQWFD5_fRKVOP8ZQNwVTmetsSQkb0nRVvbvmJL4Z2EXlug4Taz13fTOI_oNQCebk1M-yqrQu7se8DMDP4knFPqBYpsc9KB2bQcbIGYtDBRNZijvK7xRHkAXzcq0Bc/s1600-h/17.jpg"><img id="BLOGGER_PHOTO_ID_5402029159471423874" style="margin: 0px auto 10px; display: block; width: 249px; height: 97px; text-align: center;" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmtam0LdpkkK8uagGmQWFD5_fRKVOP8ZQNwVTmetsSQkb0nRVvbvmJL4Z2EXlug4Taz13fTOI_oNQCebk1M-yqrQu7se8DMDP4knFPqBYpsc9KB2bQcbIGYtDBRNZijvK7xRHkAXzcq0Bc/s400/17.jpg" border="0" /></a></div><div><span style=";font-family:arial;font-size:130%;"><br /><br /></span><div style="text-align: center;"><span style="color: rgb(255, 0, 0);font-family:arial;font-size:130%;">أرجوا من كل الإخوة الأفاضل الذين استفادو من هذا الشرح المتواضع الدعاء الصالح والمشاركة بالرود وبارك الله فيكم.</span><br /></div><span style=";font-family:arial;font-size:130%;"><br /></span></div></div></div></div></div></div></div></div></div></div></div></div></div><!-- Post end --> <div class="clear"> </div>خالد محمد (ابوخلود)http://www.blogger.com/profile/17023136577166291717noreply@blogger.com63tag:blogger.com,1999:blog-3171771270267658652.post-10435719768147548782010-01-13T10:50:00.000-08:002010-02-17T12:57:18.193-08:00كيف تضيف اداة الرزنامة او التقويم في مدونة بلوجر ؟<div align="center"><span style="font-family:arial;">شرح مفصل لطريقة اضافة رزنامة calendar الى مدونتك :</span></div><div align="center"><strong><span style="font-size:130%;"></span></strong> </div><div style="color: rgb(255, 0, 0);" align="center"><strong><span style="font-size:130%;">01</span></strong></div><div align="center"><strong><span style="font-size:130%;"></span></strong> </div><div align="center"><span style="font-family:arial;">اذهب الى <strong><span style="color: rgb(51, 102, 255);">التخطيط</span></strong> من لوحة التحكم :</span></div><div align="center"><span style="font-family:Arial;"></span> </div><div align="center"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMlSOjPsH0tU-21DEm-Q0MPQOwjJ6y_qFVWdHyB4dnb4U9jCu7i38ohVrJycpOkNLGTyw214zk6KXxt4oOZN-HQABBc_LyPHKhQxxuvvujhES2czzHtVglhIZ7mf7WHiIR9UDYRM1PL1P5/s1600/12.jpg"><img id="BLOGGER_PHOTO_ID_5408302353632409746" style="margin: 0px auto 10px; display: block; width: 49px; height: 26px; text-align: center;" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMlSOjPsH0tU-21DEm-Q0MPQOwjJ6y_qFVWdHyB4dnb4U9jCu7i38ohVrJycpOkNLGTyw214zk6KXxt4oOZN-HQABBc_LyPHKhQxxuvvujhES2czzHtVglhIZ7mf7WHiIR9UDYRM1PL1P5/s400/12.jpg" border="0" /></a><strong><span style="font-size:130%;"> 02</span></strong></div><div align="center"><strong><span style="font-size:130%;"></span></strong> </div><div align="center"><span style="font-family:arial;">اختر <strong><span style="color: rgb(51, 102, 255);">اضافة أداة</span></strong> :</span><br /></div><div align="center"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-oC9d6aZX-YNrOvsWeuTGPeBZYhYJemrbii3dTK-dmlUl4ZMSZI4nPSxzUP0EWRu7Hkopjaoe0fViNblsxslufUkUqUtygksoLxKMaXCyXeLk6Y4CSiw8E8IrPw2Y5mNoT2KOd_5JI8MQ/s1600/13.jpg"><img id="BLOGGER_PHOTO_ID_5408302297108530786" style="margin: 0px auto 10px; display: block; width: 264px; height: 49px; text-align: center;" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-oC9d6aZX-YNrOvsWeuTGPeBZYhYJemrbii3dTK-dmlUl4ZMSZI4nPSxzUP0EWRu7Hkopjaoe0fViNblsxslufUkUqUtygksoLxKMaXCyXeLk6Y4CSiw8E8IrPw2Y5mNoT2KOd_5JI8MQ/s400/13.jpg" border="0" /></a><br /><strong style="color: rgb(255, 0, 0);"><span style="font-size:130%;">03</span></strong></div><strong><span style="font-size:130%;"></span></strong><br /><span style="font-family:arial;"></span><br /><span style="font-family:arial;">من نافذة اضافة أداة اختر <strong><span style="color: rgb(51, 102, 255);">المزيد من الأدوات</span></strong> كما في الصورة التالية :</span><br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5COEkkEg0knoLFiBfe5oDpAoy3ZTTkPo2AcpH-rYjGTpXGvFRyqAFQh0G2kv96MsRhzphlcVFi-ha_S2bm4w4pe3KxJWHCuXDt3-2vd4TJrcvBLps4valTft0qqaEPMVZa0nWLC47fo5Q/s1600/01.jpg"><img id="BLOGGER_PHOTO_ID_5408302227508431778" style="margin: 0px auto 10px; display: block; width: 379px; height: 294px; text-align: center;" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5COEkkEg0knoLFiBfe5oDpAoy3ZTTkPo2AcpH-rYjGTpXGvFRyqAFQh0G2kv96MsRhzphlcVFi-ha_S2bm4w4pe3KxJWHCuXDt3-2vd4TJrcvBLps4valTft0qqaEPMVZa0nWLC47fo5Q/s400/01.jpg" border="0" /></a><br /><strong><span style="color: rgb(255, 0, 0);font-size:130%;" >04</span><br /></strong><br />اختر <span style="font-family:arial;"><strong><span style="color: rgb(51, 102, 255);">Daily Calendar</span></strong>:</span><br /><br /><div><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2uwm9NDNMfaJwCiBMDAKAI_sKBy0-P0ObYJocnH-i6VFZGufa0uQIiUpf1Q9DDxDjBhN-hkpRanPa3L8yCVnySKnPM6c4etHUy3Hrcg1wBIcAIkrMmF9erMCqk30Yb6kWRLsOQBYKLt8f/s1600/02.jpg"><img id="BLOGGER_PHOTO_ID_5408302098865470514" style="margin: 0px auto 10px; display: block; width: 400px; height: 219px; text-align: center;" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2uwm9NDNMfaJwCiBMDAKAI_sKBy0-P0ObYJocnH-i6VFZGufa0uQIiUpf1Q9DDxDjBhN-hkpRanPa3L8yCVnySKnPM6c4etHUy3Hrcg1wBIcAIkrMmF9erMCqk30Yb6kWRLsOQBYKLt8f/s400/02.jpg" border="0" /></a><br /><span style="color: rgb(255, 0, 0);font-size:130%;" ><strong>05</strong></span></div><div><strong><span style="font-size:130%;"></span></strong><br />اختر أي اسم للرزمامة بالعربي أو الإنجليزي أو الفرنسي كما يمكنك التحكم في حجم الرزنامة حسب ما يناسب مدونتك :</div><br /><div><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqEuRlbmYMvFLlAon2tbaTBRNyCzXcZzbmeLcEa5Jwoh3pB91dXencEmT89wKh177vH3vifk-Qas_9Dio4Cf2ZpjfIrmQLP3DdJfRfTFWbn3s79g01BYd0VMUKIwscXwiePwbCV6JZg99c/s1600/03.jpg"><img id="BLOGGER_PHOTO_ID_5408302022182628818" style="margin: 0px auto 10px; display: block; width: 400px; height: 328px; text-align: center;" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqEuRlbmYMvFLlAon2tbaTBRNyCzXcZzbmeLcEa5Jwoh3pB91dXencEmT89wKh177vH3vifk-Qas_9Dio4Cf2ZpjfIrmQLP3DdJfRfTFWbn3s79g01BYd0VMUKIwscXwiePwbCV6JZg99c/s400/03.jpg" border="0" /></a><br /><strong style="color: rgb(255, 0, 0);"><span style="font-size:130%;">06</span></strong></div><div><strong><span style="font-size:130%;"></span></strong><br />قم بحفظ العمل وعرض المدونة لمشاهدة الرزنامة :<br /><br /></div><div><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin5eprzwEJt65APScSqblInaEoYWCpP7oAwKzj6JUoIWmrNNhLlJIqVt3ydHBznqYhbI-niwenvNBWxbb9gn2s2L6QlY67Q_m0o7XfUbZ2MRt7-nwfZScPOBsL_xylxGdpKmAJfwZ3U5fW/s1600/16.jpg"><img id="BLOGGER_PHOTO_ID_5408301935381033506" style="margin: 0px auto 10px; display: block; width: 400px; height: 65px; text-align: center;" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin5eprzwEJt65APScSqblInaEoYWCpP7oAwKzj6JUoIWmrNNhLlJIqVt3ydHBznqYhbI-niwenvNBWxbb9gn2s2L6QlY67Q_m0o7XfUbZ2MRt7-nwfZScPOBsL_xylxGdpKmAJfwZ3U5fW/s400/16.jpg" border="0" /></a><br /><strong style="color: rgb(255, 0, 0);"><span style="font-size:130%;">07</span></strong></div><div><strong><span style="font-size:130%;"></span></strong> </div>مشاهدة الرزنامة على المدونة :<br /><br /><div style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmX6Fx4wbKj8qo-aci6u6pGPvo774d07uQhJ7aUl0vct-qh3ocbg4HDDMzqD0jzuyZ52_tkgq4szCtZBQu5fOryCEPwwcHDmxJbloEjqQmNP5LzSpxhL3xV659XGD3vfUwthoQoegUnKVp/s1600/04.jpg"><img id="BLOGGER_PHOTO_ID_5408301788817947746" style="margin: 0px auto 10px; display: block; width: 400px; height: 240px; text-align: center;" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmX6Fx4wbKj8qo-aci6u6pGPvo774d07uQhJ7aUl0vct-qh3ocbg4HDDMzqD0jzuyZ52_tkgq4szCtZBQu5fOryCEPwwcHDmxJbloEjqQmNP5LzSpxhL3xV659XGD3vfUwthoQoegUnKVp/s400/04.jpg" border="0" /></a><span style="font-weight: bold; color: rgb(255, 0, 0);"><br /><br /><br />لا تنسونا من دعائكم الخالص بظهر الغيب وترك تعليق أو نصيحة أو استفسار أو بريد الكتروني أو روابط مدوناتكم .</span></div>خالد محمد (ابوخلود)http://www.blogger.com/profile/17023136577166291717noreply@blogger.com14tag:blogger.com,1999:blog-3171771270267658652.post-72220820516973970362010-01-13T09:54:00.000-08:002010-01-13T11:24:56.744-08:00كيف تحفظ نسخة احتياطية لمدونة بلوجر ؟<div align="center"><span style=";font-family:arial;font-size:130%;" ><br /></span></div><div align="center"><span style=";font-family:Arial;font-size:130%;" ></span> </div><div align="center"> </div><div align="center"><span style=";font-family:Arial;font-size:130%;" ></span></div><div style="text-align: right;"><div style="text-align: justify;"><span style=";font-family:arial;font-size:130%;" >هذه الخاصية مفيدة جدا بحيث لايمكن الاستغناء عنها لإنها تمثل النسخة الاحتياطية لمدونتك التي أخذت منك الكثير من الوقت والجهد لتصميمها.</span><br /></div><span style=";font-family:arial;font-size:130%;" ><br /></span></div><div align="center"><span style=";font-family:arial;font-size:130%;" ></span></div><div style="text-align: right;"><span style=";font-family:arial;font-size:130%;" >ولعمل نسخة احتياطية لمدونتك اتبع الشرح المصور :<br /><br /></span></div><div align="center"><span style=";font-family:arial;font-size:130%;" ></span></div><div style="text-align: right; color: rgb(255, 0, 0);"><span style=";font-family:arial;font-size:130%;" >الخطوة الأولى :<br /><br /></span></div><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1hzdTxtOiyDsmnMnW9IT2QTC1AlK6a46ULIJS-JdWbeKS0FsOHL_pMqxiP5GUkzoBTLQlMte7OdnDB5kAk3eZ5A0HMoMXwmBHWohgO8sYWIaZkNIsmGs3UmCGfZXPF4DlyQ7x24tmcJb5/s1600-h/01.jpg"><img style="margin: 0px auto 10px; text-align: center; width: 369px; display: block; height: 181px;" id="BLOGGER_PHOTO_ID_5398192632028658114" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1hzdTxtOiyDsmnMnW9IT2QTC1AlK6a46ULIJS-JdWbeKS0FsOHL_pMqxiP5GUkzoBTLQlMte7OdnDB5kAk3eZ5A0HMoMXwmBHWohgO8sYWIaZkNIsmGs3UmCGfZXPF4DlyQ7x24tmcJb5/s400/01.jpg" border="0" /></a><br /><div style="text-align: right; color: rgb(255, 0, 0);"><span style=";font-family:arial;font-size:130%;" >الخطوة الثانية :<br /><br /></span></div><div align="center"><span style="font-family:Arial;"></span><br /></div><div align="center"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk3ey4KUbPO1PbSfihGHXmbIdYB7kkODvCEtMnHm6snPFM5l-zBnpsW58MCl0z1l1wMU3EU3modIlSF5WNmkpk4NhpntCw_n0xtTmNoUnXeLpxZrEuwEL1VcGd2M0oIGMTbUebCJ1NGRM-/s1600-h/02.jpg"><img style="margin: 0px auto 10px; text-align: center; width: 400px; display: block; height: 201px;" id="BLOGGER_PHOTO_ID_5398192577667434018" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk3ey4KUbPO1PbSfihGHXmbIdYB7kkODvCEtMnHm6snPFM5l-zBnpsW58MCl0z1l1wMU3EU3modIlSF5WNmkpk4NhpntCw_n0xtTmNoUnXeLpxZrEuwEL1VcGd2M0oIGMTbUebCJ1NGRM-/s400/02.jpg" border="0" /></a><span style=";font-family:arial;font-size:130%;" ></span></div><div align="center"><span style=";font-family:arial;font-size:130%;" ></span></div><div style="text-align: right; color: rgb(255, 0, 0);"><span style=";font-family:arial;font-size:130%;" >الخطوة الثالثة :<br /><br /></span></div><span style=";font-family:Arial;font-size:130%;" ></span><br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE3wMN1MtVuE7h0FkeZFgnPghVvMDRz-nSekmMnm4fC9LIpsEryiMHtU7brVkVjIvFToZUgDhftVfKGma_e5PiRW5s7eyjzSE0776SxXBfN1vbh1S_Vr9hXJbFV67LgRko0AJt-K21llbm/s1600-h/03.jpg"><img style="margin: 0px auto 10px; text-align: center; width: 400px; display: block; height: 201px;" id="BLOGGER_PHOTO_ID_5398192466934198546" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE3wMN1MtVuE7h0FkeZFgnPghVvMDRz-nSekmMnm4fC9LIpsEryiMHtU7brVkVjIvFToZUgDhftVfKGma_e5PiRW5s7eyjzSE0776SxXBfN1vbh1S_Vr9hXJbFV67LgRko0AJt-K21llbm/s400/03.jpg" border="0" /></a><span style="font-size:130%;"></span><br /><span style="font-size:130%;"></span><br /><span style="color: rgb(255, 0, 0);font-size:130%;" >الخطوة الرابعة :</span><br /><br /><br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6Ry7LFlsry_ALyS7kndBHlRIaQave5tfn5bXv0s6piNZQKlhgH8ZF8qTjc8LF78vG-6BVRpelJ2VVpUD2Zt7xLy7PnRDBaUrSdpqcg3xVvtBqBv8a3TroAp0rcZE2jQDWdhw2Uez3lLNz/s1600-h/04.jpg"><img style="margin: 0px auto 10px; text-align: center; width: 400px; display: block; height: 201px;" id="BLOGGER_PHOTO_ID_5398192399789643202" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6Ry7LFlsry_ALyS7kndBHlRIaQave5tfn5bXv0s6piNZQKlhgH8ZF8qTjc8LF78vG-6BVRpelJ2VVpUD2Zt7xLy7PnRDBaUrSdpqcg3xVvtBqBv8a3TroAp0rcZE2jQDWdhw2Uez3lLNz/s400/04.jpg" border="0" /></a><br /><br /><div style="text-align: center; color: rgb(255, 0, 0); font-weight: bold;"><span style="font-size:130%;">تعليقاتكم تسرنا واستفساراتكم تهمنا<br /></span></div>خالد محمد (ابوخلود)http://www.blogger.com/profile/17023136577166291717noreply@blogger.com20tag:blogger.com,1999:blog-3171771270267658652.post-61546781444764734032009-12-29T09:54:00.000-08:002009-12-29T11:57:27.081-08:00كيف تصمم فوتر ( Footer ) جميل بثلاث خانات اسفل مدونة بلوجر ؟<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_ICSIjq-QLB4GrCwdyu6SKUCoyIdPTh6SzqUaEWmEwB84KGF-aKCDTidM8__Z5wTOY5n83ShYML2dATl_rwD07xHL6eSFWPE34FviiWNvRkvW0AJrSd3UBlSHW3RhDXHtHC8vr4FQxF4/s1600-h/3333333333.png"><img style="margin: 0pt 0pt 10px 10px; float: right; cursor: pointer; width: 320px; height: 80px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_ICSIjq-QLB4GrCwdyu6SKUCoyIdPTh6SzqUaEWmEwB84KGF-aKCDTidM8__Z5wTOY5n83ShYML2dATl_rwD07xHL6eSFWPE34FviiWNvRkvW0AJrSd3UBlSHW3RhDXHtHC8vr4FQxF4/s320/3333333333.png" alt="" id="BLOGGER_PHOTO_ID_5420748211429618162" border="0" /></a><br /><br /><div style="text-align: right;"><div style="text-align: justify;">بسم الله الرحمن الرحيم اخواني الاعزاء بعد شرح <a style="color: rgb(51, 51, 255); font-weight: bold;" href="http://arab-editors.blogspot.com/2009/12/blog-post_23.html">طريقة اضافة شريط آخر مواضيع ( مقالات ) في مدونة بلوجر</a> اليوم نبداء بموضوع آخر وهو<span style="font-weight: bold; color: rgb(255, 0, 0);"> كيفية تصميم فوتر ( footer ) لمدونة بلوجر بثلاث خانات اسفل المدونة </span>ثم نقوم بوضع اشياء جميلة فيه لنجعل المدونة ابداعية واحترافية نوعا ما ، طيب قبل ان نبداء بشرح الخطوات النظر مثال بالصور التالية لكي تعرف فوتر ( footer ) المدونة :<br /></div><br />1 - صورة من قائمة <span style="color: rgb(255, 0, 0); font-weight: bold;">( عناصر الصفحة )</span> قبل عمل الخانات في الفوتر المدونة :<br /><br /><div style="text-align: center; color: rgb(255, 0, 0);"><span style="color: rgb(255, 0, 0); font-weight: bold;">اضغط الصورة لتكبر</span><br /></div><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKsjmxOxlm1A-SRCdE8AfPpNH8NV0TWQvlrT6MWOMP_O5b9VFXuYi85PldhMCvyGxwaTVcFtgjnR3YsM2l6702niRRXntcngxxpOqXD8APj_sj47iZbsHgw0RoSBEz6kqhX6TY3iwlikU/s1600-h/%D9%81%D9%88%D8%AA%D8%B13.png"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 227px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKsjmxOxlm1A-SRCdE8AfPpNH8NV0TWQvlrT6MWOMP_O5b9VFXuYi85PldhMCvyGxwaTVcFtgjnR3YsM2l6702niRRXntcngxxpOqXD8APj_sj47iZbsHgw0RoSBEz6kqhX6TY3iwlikU/s400/%D9%81%D9%88%D8%AA%D8%B13.png" alt="" id="BLOGGER_PHOTO_ID_5420723195194604642" border="0" /></a><br />2 - صور بعد عمل الخانات في فوتر ( footer ) للمدونة ( من جهة <span style="color: rgb(255, 0, 0); font-weight: bold;">لوحة التحكم </span>وايظا من جهة<span style="color: rgb(255, 0, 0); font-weight: bold;"> المدونة</span> ) :<br /><br /><div style="text-align: center; color: rgb(255, 0, 0);"><span style="font-weight: bold; color: rgb(255, 0, 0);">اضغط الصورة لتكبر</span><br /></div><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVO6Qc3TyuRnBBL_NJk6gpxeQTv8oCn3zklz-YDwb3Ph1EvIItJ3dKHgEyFXj1c6g41r9B708T64xqcyaTLzWtNHs12l2W_PgcUVvT4hkmFhyphenhyphen6gU1pog15Udj4_uQzjazMqvUsQy0Ll_o/s1600-h/%D9%81%D9%88%D8%AA%D8%B11.png"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 282px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVO6Qc3TyuRnBBL_NJk6gpxeQTv8oCn3zklz-YDwb3Ph1EvIItJ3dKHgEyFXj1c6g41r9B708T64xqcyaTLzWtNHs12l2W_PgcUVvT4hkmFhyphenhyphen6gU1pog15Udj4_uQzjazMqvUsQy0Ll_o/s400/%D9%81%D9%88%D8%AA%D8%B11.png" alt="" id="BLOGGER_PHOTO_ID_5420724568481432402" border="0" /></a><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh12S7KA3HVM-bMQfVZJNk3I1ggUVZJZpKXg1usjA3CDlWaRa2iZWrYzZL2uelb9x3qCA6zbCU2y3g4rnAr3c_gpuJQo6nqZTxop8gH4stNTQEChjsvijUyWFm5TU5OxrP7WBGGfLuBHIY/s1600-h/%D9%81%D9%88%D8%AA%D8%B12.png"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 139px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh12S7KA3HVM-bMQfVZJNk3I1ggUVZJZpKXg1usjA3CDlWaRa2iZWrYzZL2uelb9x3qCA6zbCU2y3g4rnAr3c_gpuJQo6nqZTxop8gH4stNTQEChjsvijUyWFm5TU5OxrP7WBGGfLuBHIY/s400/%D9%81%D9%88%D8%AA%D8%B12.png" alt="" id="BLOGGER_PHOTO_ID_5420724893806607730" border="0" /></a><br /><span style="font-weight: bold;font-size:100%;" ><span style="color: rgb(255, 0, 0);">الآن وبعد معرفتك للمثال وما المقصود بفوتر footer المدونة نبداء بشرح خطوات عمل الخانات الثلاث في </span></span><span style="color: rgb(255, 0, 0); font-weight: bold;">فوتر المدونة : </span><br /><br /><br /><div style="text-align: justify;"><span style="color: rgb(255, 0, 0);">1 -</span> قم <span style="color: rgb(255, 0, 0); font-weight: bold;">بحفظ نسخة احتياطية لستايل المدونة</span> لتتجنب اي مشاكل قد تحصل لا سمح الله وايظاً اذا كانت عندك ادوات قمت باظافتهم من سابق في فوتر مدونتك قم بنقلهم الى<span style="font-weight: bold;"> </span><span style="color: rgb(255, 0, 0); font-weight: bold;">العمود الجانبي ( side bar )</span> للمدونة .<br /><br /></div><br /><div style="text-align: justify;"><span style="color: rgb(255, 0, 0);">2 -</span> من <span style="color: rgb(51, 51, 255);"><span style="font-weight: bold;">لوحة التحكم</span> </span>اذهب الى قائمة <span style="color: rgb(255, 0, 0); font-weight: bold;">( التخطيط )</span> ثم الى <span style="color: rgb(255, 0, 0); font-weight: bold;">( تحرير HTML )</span> وابحث ( Ctrl +f ) عن الكود التالي :<br /></div><br /><div id="code"><br />]]></b:skin><br /></head><br /><br /></div><br /><br /><span style="color: rgb(0, 0, 0);">ثم قم <span style="font-weight: bold;">باضافة الكود</span> التالي فوقه مباشرة :</span><br /><br /><div id="code"><br /><br /><br />#footer-columns {<br /><br />border-top:1px solid #999999;<br /><br />clear:both;<br /><br />margin:0 auto;<br /><br />background: #ffffff;<br /><br />}<br /><br />#footer-columns h2 {<br /><br />margin: 1.6em 0 .5em;<br /><br />font: bold 16px Arial;<br /><br />padding:10px;<br /><br /><span style="color: rgb(255, 0, 0);">background: #ffffff url(ht</span><span style="color: rgb(255, 0, 0);">tp://img159.imageshack.us/img159/9099/toolbg.jpg) no-repeat center right;</span><br /><br />color: #9b2d15;<br /><br />}<br /><br />.column1 {<br /><br />padding: 0px 5px 3px 5px;<br /><br />width: 30%;<br /><br />float: left;<br /><br />margin:3px;<br /><br />text-align: right;<br /><br />}<br /><br />.column2 {<br /><br />padding: 0px 5px 3px 5px;<br /><br />width: 31%;<br /><br />float: left;<br /><br />margin:3px 3px 3px 5px;<br /><br />text-align: right;<br /><br />}<br /><br />.column3 {<br /><br />padding: 0px 5px 3px 5px;<br /><br />width: 30%;<br /><br />float: right;<br /><br />margin:3px;<br /><br />text-align: right;<br /><br />}<br /><br />.addwidget {<br /><br />padding: 0 0 0 0;<br /><br />}<br /><br />#footer-columns ul {<br /><br />list-style:none;<br /><br />margin:0 0 0;<br /><br />padding:0 0 0;<br /><br />}<br /><br />#footer-columns li {<br /><br />margin:0;<br /><br />padding-top:0;<br /><br />padding-left:0;<br /><br />padding-bottom:.25em;<br /><br />padding-right:15px;<br /><br />text-indent:-15px;<br /><br />line-height:1.5em;<br /><br />}<br /><br />body#layout #footer-columns {<br /><br />width: 100%;<br /><br />margin-left: auto;<br /><br />margin-right: auto;<br /><br />}<br /><br />body#layout .column1 {<br /><br />width: 32%;<br /><br />float: left;<br /><br />}<br /><br />body#layout .column2 {<br /><br />width: 32%;<br /><br />float: left;<br /><br />}<br /><br />body#layout .column3 {<br /><br />width: 32%;<br /><br />float: right;<br /><br />}<br /><br /><br /></div><div style="text-align: justify;"><span style="color: rgb(204, 0, 0);">*</span> السطر الذي <span style="color: rgb(255, 0, 0); font-weight: bold;">باللون الاحمر</span> في الكود اعلاه هو ستايل خلفية عنوان الادوات التي ستضعها في الفوتر ، غير فيه اذا حبيت ستايل آخر او اتركه على ما هو عليه في الكود . ثم قم بالضغط على <span style="color: rgb(255, 0, 0); font-weight: bold;">زر حفظ</span><span style="font-weight: bold;"> </span><span style="color: rgb(255, 0, 0); font-weight: bold;">القالب</span> والى <span style="font-weight: bold;">هنا انتهيا من وضع ستايل الخانات الثلاث .</span><br /><br /></div><br /><span style="color: rgb(255, 0, 0);">3 -</span> قم <span style="font-weight: bold;">بالبحث ( Ctrl + F )</span> عن الكود هذا في مدونتك :<br /><br /><div id="code"><br /><b:section class='footer' id='footer'/><br /><br /></div><br />ثم <span style="font-weight: bold;">استبدله بالكود</span> التالي :<br /><br /><div id="code"><br /><div id='footer-columns'><br /><br /><div class='column1'><br /><br /><b:section class='addwidget' id='col1' preferred='yes' style='float:left;'><br /><br /></b:section><br /><br /></div><br /><br /><div class='column2'><br /><br /><b:section class='addwidget' id='col2' preferred='yes' style='float:left;'><br /><br /></b:section><br /><br /></div><br /><br /><div class='column3'><br /><br /><b:section class='addwidget' id='col3' preferred='yes' style='float:right;'><br /><br /></b:section><br /><br /></div><br /><br /><div style='clear:both;'/><br /><br /></div><br /><br /><b:section class='footer' id='footer'/><br /><br /></div><br /><br /><div style="text-align: justify;">ثم قم بعمل او الضغط على <span style="color: rgb(255, 0, 0); font-weight: bold;">زر حفظ القالب</span> ،، الى هنا انتهينا من تصميم الخانات في الفوتر . ثم انتقل الان الى ع<span style="font-weight: bold;">ناصر الصفحة</span> لتجد الخانات الثلاث ان شاء الله انظافن مباشرة وضع فيهم ما تشاء من الادوات <span style="font-size:130%;"><span style="color: rgb(51, 51, 255);">ومبرووووووووك عليك تصميم فوتر footer جميل </span>. </span><br /></div><br /><span style="font-weight: bold;font-size:100%;" > <span style="color: rgb(255, 0, 0);">ب ) كيفية وضع قائمة وصلات مفيدة للزوار اسفل المدونة :</span></span><br /><br /><div style="text-align: justify;">في اسفل المدونة الالكترونية من الافضل ان يجد الزائر مجموعة وصلات تفيده في التعرف اكثر على المدونة، مثل وصلة <span style="color: rgb(255, 0, 0); font-weight: bold;">اتصل بنا</span>، و <span style="color: rgb(255, 0, 0); font-weight: bold;">خلاصة RSS</span> و<span style="color: rgb(255, 0, 0); font-weight: bold;"> الصفحة الرئيسية</span> ... الخ . لذا سنضع الان مجموعة وصلات جميلة اسفل المدونة.<br /></div><br /><br /><span style="font-weight: bold; color: rgb(255, 0, 0);">*</span> من قائمة <span style="color: rgb(255, 0, 0); font-weight: bold;">تخطيط</span> ثم <span style="color: rgb(255, 0, 0); font-weight: bold;">عناصر الصفحة</span> اضغط على<span style="color: rgb(255, 0, 0); font-weight: bold;"> اضافة اداة</span> ثم قم باختيار اداة <span style="color: rgb(255, 0, 0); font-weight: bold;">HTML / javascript</span>. انظر الصورة التالية :<br /><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAfb5nC56LTPcHXUjBr3Y1LcCR1sMecWNLT2Rcl3YkuRWMHbXp3ETs2QrVJ8il8pwK4QE29H1XXaHWJXh0kIQtWz6sVFiQNSTPHM9CV5FnVbeo7xvEEHRmqcQ3Fjb_v3VB6aCDJbo4sQA/s1600-h/11%D9%81%D9%88%D8%AA%D8%B11.PNG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 282px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAfb5nC56LTPcHXUjBr3Y1LcCR1sMecWNLT2Rcl3YkuRWMHbXp3ETs2QrVJ8il8pwK4QE29H1XXaHWJXh0kIQtWz6sVFiQNSTPHM9CV5FnVbeo7xvEEHRmqcQ3Fjb_v3VB6aCDJbo4sQA/s400/11%D9%81%D9%88%D8%AA%D8%B11.PNG" alt="" id="BLOGGER_PHOTO_ID_5420740294370069426" border="0" /></a><br /><br /><br /><br />ثم قم <span style="font-weight: bold;">باضافة الكود</span> التالي بداخلها :<br /><br /><div id="code"><br /><br /><center><a href="http://<span style="color: rgb(255, 0, 0);">arab-editors.blogspot.com</span>">الصفحة الرئيسية</a> |<br /><br /><a href="http://<span style="color: rgb(255, 0, 0);">arab-editors.blogspot.com</span>/rss.xml">خلاصة RSS</a> |<br /><br /><a href="<span style="color: rgb(255, 0, 0);">arab-editors.blogspot.com/2009/10/blog-post_23.html</span>">اتصل بنا</a> |<br /><br /><a href="<span style="color: rgb(255, 0, 0);">about us link</span>">عن المدونة</a> |<br /><br /><a href="privacy link">privacy</a></center><br /><br /></div><span style="color: rgb(255, 0, 0);">*</span> العنوان الذي <span style="color: rgb(255, 0, 0); font-weight: bold;">باللون الاحمر</span> في الكود أعلاه هو عنوان مدونة <span style="color: rgb(51, 51, 255); font-weight: bold;">( المحررون العرب )</span> أستبدله الى عنوان مدونتك .<br /><br /><div style="text-align: center; color: rgb(255, 0, 0); font-weight: bold;"><span style="font-size:130%;">أرجو ان تستفيدوا من هذا الدرس وأي استفسار او سؤال نحن نرحب بتعليقاتكم عليه ،،،،<br /></span></div><br /><br /></div>خالد محمد (ابوخلود)http://www.blogger.com/profile/17023136577166291717noreply@blogger.com34tag:blogger.com,1999:blog-3171771270267658652.post-5823020502855892032009-12-23T11:09:00.000-08:002009-12-25T10:33:13.119-08:00كيفية اظافة شريط آخر مواضيع المدونة - لمدونات بلوجر ؟<div dir="rtl" style="text-align: right;"><br />بسم الله الرحمن الرحيم اخواني الاعزاء اليوم نبداء بشرح <span style="color: rgb(255, 0, 0);">( اضافة شريط آخر مواضيع المدونة )</span> هذا الشريط مثل شريط الأخبار الذي ترونه في الكثير من المدونات والمواقع العربية ، وبنفس الفكرة اليوم أقدم لكم درس جديد في كيفية إضافة هذا الشريط (شريط آخر المواضيع ) والذي نجده في المواقع والمنتديات بحيث يكسب الصفحة ديناميكية ويسهل للمتصفح التعرف على المواضيع الحديثة في المدونة .<br /><br />مثال للشريط انظر الصورة :<br /><br /><span style="color: rgb(255, 0, 0);">اضغط لتتكبر الصورة </span><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNHyUsFVRIMIxjykhaXXLt7U-uqWifTRmNV7YRvTPXhUBxju7tm1WcH0RShS4A9go2gDdmQocqkr6s3_O_AF_M0yvOD5VZiUQiFKar1X8OoYJNusSr_qXgt4hyphenhyphenooqdYjuPRCFySvEK__s/s1600-h/%D8%B4%D8%B1%D9%8A%D8%B7+%D8%A7%D8%AE%D8%B1+%D8%A7%D9%84%D9%85%D9%88%D8%A7%D8%B6%D9%8A%D8%B9.png"><img style="margin: 0pt 0pt 10px 10px; float: right; cursor: pointer; width: 400px; height: 175px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNHyUsFVRIMIxjykhaXXLt7U-uqWifTRmNV7YRvTPXhUBxju7tm1WcH0RShS4A9go2gDdmQocqkr6s3_O_AF_M0yvOD5VZiUQiFKar1X8OoYJNusSr_qXgt4hyphenhyphenooqdYjuPRCFySvEK__s/s400/%D8%B4%D8%B1%D9%8A%D8%B7+%D8%A7%D8%AE%D8%B1+%D8%A7%D9%84%D9%85%D9%88%D8%A7%D8%B6%D9%8A%D8%B9.png" alt="" id="BLOGGER_PHOTO_ID_5419237477381861842" border="0" /></a><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><span style="color: rgb(255, 0, 0);font-size:130%;" >خطوات الشرح :</span><br /><br /><span style="color: rgb(255, 0, 0);">أولا :</span> قم بالدخول الى حسابك على بلوجر ومن اللوحة التحكم اختر التبويب :<span style="color: rgb(255, 0, 0);">تخطيط</span> - <span style="color: rgb(255, 0, 0);">عناصر ال</span><span style="color: rgb(255, 0, 0);">صفحة</span> وانقر على إضافة أداة في منطقة جزء التخطيط (layout) - <span style="color: rgb(51, 51, 255);">منطقة الوسط </span>- ثم اختر من القائمة<span style="color: rgb(255, 0, 0);"> إضافة HTML/JAVASCRIPT</span>.<br /><br />وانسخ الكود الأتي :<br /><div id="code"><br /><script src="http://sites.google.com/site/taliblogsite/file/Headlines-ar-widget.txt"> </script><script style=""> var nMaxPosts = 10; var sBgColor; var nWidth; var nScrollDelay = 170; var sDirection="right"; var sOpenLinkLocation="N"; var sBulletChar="»»"; </script> <script style="" src="http://<span style="color: rgb(255, 0, 0);">arab-editors.blogspot.com</span>/feeds/posts/default?alt=json-in-script&callback=RecentPostsScrollerv2"> </script><scriqt><br /><ul><span style=";" ><br /><a href="http://arab-editors.blogspot.com/2009/12/blog-post_23.html" title="اضف "> اضف هذه الاداة </a><a href="http://arab-editors.blogspot.com/" title="مدونة المحررون العرب">شريط آخر المواضيع</a></span></ul><br /><!--NoEdit--></scriqt><br /></div><br /><span style="color: rgb(51, 51, 255);">* قم بتغيير عنوان المدونة الذي <span style="color: rgb(255, 0, 0);">باللون الاحمر</span> في الكود الى عنوان مدونتك ...</span><br /><br /><span style="color: rgb(255, 0, 0);">ملاحظة / للعلم طبعا فيه هناك طريقة اخرى لاظافة آخر مواضيع المدونة لمدونات بلوجر بس هذه الطريقة على شكل قائمة مو شريط انظر في العمود الجانبي في مدونة المحررون العرب لتراها : انظر الصورة</span><br /><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKTKYju7ftFJ941u64X8FT2mZ9FxI5YUGICvfKs1zKhTMGyywxOqYLL9U3sjq_bHGDd4Rj38yCgsCzURmgRNLA6vArmSy5QN0bColNG_qfIFhO9lc4h1t9zt0w9lIvzn7pKZG3mxgCnpU/s1600-h/%D9%82%D8%A7%D8%A6%D9%85%D8%A9+%D8%A7%D8%AE%D8%B1+%D8%A7%D9%84%D9%85%D9%88%D8%A7%D8%B6%D9%8A%D8%B9.png"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 240px; height: 400px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKTKYju7ftFJ941u64X8FT2mZ9FxI5YUGICvfKs1zKhTMGyywxOqYLL9U3sjq_bHGDd4Rj38yCgsCzURmgRNLA6vArmSy5QN0bColNG_qfIFhO9lc4h1t9zt0w9lIvzn7pKZG3mxgCnpU/s400/%D9%82%D8%A7%D8%A6%D9%85%D8%A9+%D8%A7%D8%AE%D8%B1+%D8%A7%D9%84%D9%85%D9%88%D8%A7%D8%B6%D9%8A%D8%B9.png" alt="" id="BLOGGER_PHOTO_ID_5419239908966273362" border="0" /></a><br /><br /><br /><span style="color: rgb(255, 0, 0);">ملاحظــــــــــــــــات على الكود اعلاه :</span><br /><div id="code"><br />var nMaxPosts = 10; -يحدد عدد المواضيع التي تظهر في الشريط<br /><br />var sBgColor; - var sBgColor= grey; :اذا كنت تريد تغيير لون الخلفية<br /><br />var nWidth; - لتحديد العرض<br /><br />var nScrollDelay = 185; - لتحديد السرعة كلما قلت القيمة زادت السرعة<br /><br />var sDirection="left"; - لتحديد جهة الحركة. left = Right to left; Right = Left to right; Up = Down to up; Down = Up to down<br /><br />var sBulletChar="»»"; هذا هو الرمز الذي يظهر قبل عنوان اي موضوع على الشريط ويمكنك تغييرة<br /><br /><div style="text-align: center;"><span style="color: rgb(0, 0, 153);">ومبروووووووووووووك عليكم الاظافة ،،،،،،،</span><br /></div><br /><br /></div><div style="text-align: center; color: rgb(255, 0, 0);"><span style="font-size:130%;">تعليقاتكم واستفساراتكم على الموضوع مرحبا بها<br /></span></div><br /><br /></div>خالد محمد (ابوخلود)http://www.blogger.com/profile/17023136577166291717noreply@blogger.com50tag:blogger.com,1999:blog-3171771270267658652.post-86113138006799806902009-12-18T08:55:00.000-08:002009-12-25T07:21:52.099-08:00اكسب واربح المال من Revtwt باستخدام Twitter<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://revtwt.com/index.php?id=60044"><img style="margin: 0pt 0pt 10px 10px; float: right; cursor: pointer; width: 125px; height: 125px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXn9RQyBcBUkUrzCdGQ7rLdoP-F5hv4ib6AGZb7Z-3PoI3_xE3W1gxGhISbKP5iki6wOFf9W5YHFE2YH4qufu5LvxxYfxHlIl6sQ2qBBGW2mH0SRPEFg2YxhcgHXvgIHGkIsooOpMrG_I/s400/TwtAd_referral02.jpg" alt="" id="BLOGGER_PHOTO_ID_5417014770024707650" border="0" /></a><br /><div dir="rtl" style="text-align: right;"><div style="text-align: justify;"><span style="font-size:130%;">اخواني الاعزاء اليوم نبداء بموضوع جديد ومفيد في نفس الوقت ، الموضوع يتعلق <span style="color: rgb(255, 0, 0);">بخدمات تويتر</span> وما ادراك ما تويتر ، الخدمة هذه تتعلق بالربح او كسب اموال عبر الانترنت من خلال الاستمتاع او المشاركة مع الاصدقاء والمتابعون من خلال<span style="color: rgb(51, 51, 255);"> موقع<a href="http://twitter.com/"> تويتر ( Twitter )</a></span> لو كان لديك حساب فيه . ولكن <a href="http://twitter.com/"><span style="color: rgb(51, 51, 255);">توتير ( Twitter )</span></a> لايكون مناسب في حالة انك تريد او ترغب بكسب اموال اظافية عبر الانترنت او مايسمونها الربح من المنزل عبر النت .</span><br /></div><span style="font-size:130%;"><br /></span><div style="text-align: justify;"><span style="font-size:130%;"><span style="color: rgb(51, 51, 255);"><a href="http://revtwt.com/index.php?id=60044">Revtwt</a> لديها الحل :</span> بامكانك وضع مشاركات بها روابط بواسطة موقع <a href="http://revtwt.com/index.php?id=60044"><span style="color: rgb(51, 51, 255);">Revtwt</span></a> وار سالها على حسابك في <a href="http://twitter.com/"><span style="color: rgb(51, 51, 255);">Twitter</span></a> ، وتكسب فلوس في كل مرة يقوم اي صديق او زائر بالنقر على رابطك ( link ) المعطى لك من قبل Revtwt</span><br /></div><span style="font-size:130%;"><br /></span><div style="text-align: justify;"><span style="font-size:130%;"><a href="http://revtwt.com/index.php?id=60044"><span style="color: rgb(255, 0, 0);">Revtwt :</span></a> هي طريقة جديدة مبتكرة لكسب المال عبر الانترنت بواسطة نشر <span style="color: rgb(51, 51, 255);">( post )</span> مشاركات او تويتس <span style="color: rgb(51, 51, 255);">(tweets )</span> بواسطة حسابك في توتير <span style="color: rgb(51, 51, 255);">( Twitter )</span> ، وهي كلمة مختصر من الجملة التالية <span style="color: rgb(255, 0, 0);">( revenue from tweets )</span></span><br /></div><span style="font-size:130%;"><br /></span><div style="text-align: justify;"><span style="font-size:130%;">لتبداء مع Revtwt يجب ان يكون لك حساب في تويتر <a href="http://twitter.com/">( Twitter )</a> وحساب آخر في <a href="http://revtwt.com/index.php?id=60044">( Revtwt ) </a>، وايظا انت محتاج الى ان يكون لك متابعون ( Followrs ) لايقل عن 50 شخص من المتابعون في حسابك لدى تويتر ( Twitter ) اذا اردت هذه الخدمة . لذا اتبع الاخرين يتبعونك ولو على سبيل المجاملة .</span><br /></div><span style="font-size:130%;"><br /><span style="font-size:180%;"><span style="color: rgb(255, 0, 0);"><span style="font-size:130%;">كيف تكسب الاموال( الايرادات ) من خدمة Revtwt ؟</span> </span><br /></span><br /><span style="color: rgb(51, 51, 255);">1 - بواسطة الاحالات : Referrals ) </span><br /><br /></span><div style="text-align: justify;"><span style="font-size:130%;"><span style="color: rgb(255, 0, 0);">برنامج الإحالة من Revtwt </span>هو طريقة ووسيلة رائعة وعظيمة لنشر كلمة من هذه الخدمة الرائعة ولكسب المزيد من المال عبر حسابك في تويتر ( Twitter ) . قم بنشر هذه الروابط الى المتابعون او اشر اليهما بها ، واستلم عن كل واحد يشترك عن طريقك 20 % من عائداتهم لمدى الحياة . Refferals هي عبارة عن روابط او اكواد تعريفية لموقع <span style="color: rgb(255, 0, 0);">Revtwt</span> قم بنشرها عبر <span style="color: rgb(51, 51, 255);">حسابك في تويتر</span> او قم بوضعها في <span style="color: rgb(51, 51, 255);">موقعك او مدونتك</span> طبعاً بعد اشتراكك في هذا الموقع ليشاهدها المتابعون او زوار موقعك وفي حالة النقر عليها والاشتراك بواسطتك من قبل الزواريعطيك Revtwt عائد مقابل الاشتراك بواسطتك ، هذه الاكواد على شكل بنر متحرك ( صورة ) .</span><br /></div><span style="font-size:130%;"><br /><span style="color: rgb(51, 51, 255);">2 - النقرات الاعلانبة ( ad clicks ) :</span><br /><br /></span><div style="text-align: justify;"><span style="font-size:130%;">الاحالات ( Referrals ) هي مجرد تويترات او مشاركة روابط url تعريفية لموقع<span style="color: rgb(255, 0, 0);"> ريفينو تويتس</span> ، لكن <span style="color: rgb(255, 0, 0);">النقرات الاعلانية ( Ad clicks ) </span>هي عبارة عن اعلانات لشركات هذا الاعلانات تجدها في حسابك في هذا الموقع في قائمة<span style="color: rgb(255, 0, 0);"> Post ads</span> . قم باختيار الاعلان للشركة التي تدفع كثير من الفلوس للنقرة الواحدة ثم انشرها عبر <span style="color: rgb(255, 0, 0);">حسابك في تويتر</span> ، فاحيانا بمجرد النقر على اعلان عن شركة ماء تحصل على<span style="color: rgb(255, 0, 0);"> 20 دولار .</span></span><br /><span style="font-size:130%;">طبعاً هنا يمكنك سحب فلوسك اذا وصل رصيدك الى حد 20 دولار او مافوق ، لطلب الدفع يمكنك الحصول على المال المكتسب من هذه الخدمة من خلال حسابك على <span style="color: rgb(255, 0, 0);">PayPal </span>.</span><br /></div><span style="font-size:130%;"><br /></span><div style="text-align: center;"><span style="color: rgb(255, 0, 0);font-size:130%;" ><span style="font-size:180%;">نرجو التعليق على الموضوع للاهمية ،،،</span></span><br /></div><span style="font-size:130%;"><br /></span><br /></div>خالد محمد (ابوخلود)http://www.blogger.com/profile/17023136577166291717noreply@blogger.com47tag:blogger.com,1999:blog-3171771270267658652.post-12650225316666390412009-12-12T09:39:00.000-08:002009-12-25T05:35:14.996-08:00شرح اضافة زر العودة الى اعلى الصفحة لمدونات بلوجر<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY-9qHh6vYSjyv-3Qp2q-aCgXXe2e2Ux6jM1JAyNIH114AgzOS62jgge69BQxE7idmkf8Q0NxYrt0uL8kJkG76V9gF3VS58Fbn49UwV6Tp20gVEzye-vHD0T06U1Wdy1mfRBNlNLvmnLI/s1600-h/02.jpg"><img style="margin: 0pt 0pt 10px 10px; float: right; cursor: pointer; width: 259px; height: 138px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY-9qHh6vYSjyv-3Qp2q-aCgXXe2e2Ux6jM1JAyNIH114AgzOS62jgge69BQxE7idmkf8Q0NxYrt0uL8kJkG76V9gF3VS58Fbn49UwV6Tp20gVEzye-vHD0T06U1Wdy1mfRBNlNLvmnLI/s400/02.jpg" alt="" id="BLOGGER_PHOTO_ID_5414642960585047778" border="0" /></a><br /><div dir="rtl" style="text-align: right;"><div align="center"><span style=";font-family:arial;font-size:130%;" >السلام عليكم اخواني الكرام تحية طيبة اليكم موضوع بسيط وهو كيفية اضافة رز العودة الى الأعلى بقدر ماهو بسيط فهو مهم ولابد منه نبدأ</span></div><div align="center"><span style=";font-family:arial;font-size:130%;" >الشرح على بركة الله .</span></div><span style="font-size:130%;"><br /></span><span style=";font-family:arial;font-size:130%;" ><strong>01</strong> -من لوحة التحكم اختر <span style="color: rgb(51, 51, 255);"><strong>التخطيط</strong></span> وبالإنجليزية <span style="color: rgb(51, 51, 255);"><strong>layout</strong></span> :</span><span style="font-size:130%;"><br /></span><br /><span style="font-size:130%;"><strong>02</strong> - من صفحة التخطيط اختر </span><span style="color: rgb(51, 51, 255);font-size:130%;" ><strong>اضافة أداة</strong></span><span style="font-size:130%;"> :<br /><br /><strong>03</strong> - سوف تظهر لك نافذة بها عدة أدوات اختر منها الأداة </span><span style="font-size:130%;"><strong>HTML/Ja</strong></span><span style="font-size:130%;"><strong>vaScript</strong><span style="font-size:100%;"> الموضحة في الصورة التالية</span> :<br /></span><br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeS1i4Dp_9sMFXV8fZFckePie3Xi1zwMp_xQPZcgM5kr3pQvDND6fEtqgXfPgKIDDs0LjruiC-C9vkn-x9UiKI_U8fZaVMBepeEQBMdSsZ7mfFh62FGDhPH11_YtfUnYHYwMZt7rZ6LLsX/s1600/03.jpg"><img id="BLOGGER_PHOTO_ID_5408854275240912578" style="margin: 0px auto 10px; display: block; width: 400px; height: 140px; text-align: center;" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeS1i4Dp_9sMFXV8fZFckePie3Xi1zwMp_xQPZcgM5kr3pQvDND6fEtqgXfPgKIDDs0LjruiC-C9vkn-x9UiKI_U8fZaVMBepeEQBMdSsZ7mfFh62FGDhPH11_YtfUnYHYwMZt7rZ6LLsX/s400/03.jpg" border="0" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeS1i4Dp_9sMFXV8fZFckePie3Xi1zwMp_xQPZcgM5kr3pQvDND6fEtqgXfPgKIDDs0LjruiC-C9vkn-x9UiKI_U8fZaVMBepeEQBMdSsZ7mfFh62FGDhPH11_YtfUnYHYwMZt7rZ6LLsX/s1600/03.jpg"> </a><p align="center"><span style=";font-family:arial;font-size:130%;" ><strong>04</strong> - والأن نقوم بلصق الكود كما في الصورة التالية كما يمكنك اختيار اسم وليكن <span style="color: rgb(51, 204, 0);"><strong><span style="color: rgb(255, 0, 0);">العودة الى أعلى الصفحة</span></strong> </span>أو <strong><span style="color: rgb(255, 0, 0);">العودة الى الأعلى</span></strong> أو <strong><span style="color: rgb(255, 0, 0);">أعلى </span></strong>فقط ثم اضغط على <strong><span style="color: rgb(255, 0, 0);">حفظ</span></strong> .</span> </p><p align="center">.....................................................................................................................................................................<br /></p><div id="code"><br /><a href="#"><br /><img src="http://i41.tinypic.com/yo66p.jpg"<br />alt="Back to Top"<br />title="Back to Top"<br />style=" display: scroll;<br />position: fixed;<br />bottom: 5px;<br />right: 5px;" /><br /></a><br /></div><br />....................................................................................................<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhciudAAzb4_12bIHb90yGto8vMSwyGz90XqlqltvKEtlkCQzkwVh3JDIiDLT1qOvzjycyHi7zGPbLZvqjlLd0z_DnOUN5O_Lpd4UbEgG1ciP5hQBgFIswrSF2GcDOCQqI_oaWoRpCaXEA/s1600-h/01.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 341px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhciudAAzb4_12bIHb90yGto8vMSwyGz90XqlqltvKEtlkCQzkwVh3JDIiDLT1qOvzjycyHi7zGPbLZvqjlLd0z_DnOUN5O_Lpd4UbEgG1ciP5hQBgFIswrSF2GcDOCQqI_oaWoRpCaXEA/s400/01.jpg" alt="" id="BLOGGER_PHOTO_ID_5414682404642305746" border="0" /></a>.....................................................................<br /><br /><span style="font-size:130%;"><br /><strong>05</strong> -</span><span style=";font-family:arial;font-size:130%;" >مشاهدة الزر على المدونة :</span><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoKYi4B6Ah3TNV0B-JqTaUbyKZQ0WsAL3d_8dChcHcBkpzWfQcbJib56mRJhsBU6i-mYYeY2wXRy_GAUC6s5rX8-YGfU4cuAxtcVwWPx96mZ_icD0mQKiOqnawD0QLyHOcWsNH8-IDEzc/s1600-h/03.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 259px; height: 211px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoKYi4B6Ah3TNV0B-JqTaUbyKZQ0WsAL3d_8dChcHcBkpzWfQcbJib56mRJhsBU6i-mYYeY2wXRy_GAUC6s5rX8-YGfU4cuAxtcVwWPx96mZ_icD0mQKiOqnawD0QLyHOcWsNH8-IDEzc/s400/03.jpg" alt="" id="BLOGGER_PHOTO_ID_5414682778755343090" border="0" /></a><br /><br /><br /><div style="text-align: center;"><span style="color: rgb(255, 0, 0);font-size:130%;" > الرجاء من الزوار الكرام الدعاء الصالح بظهر الغيب وترك تعليق أو تساءل أو استفسار أو نصيحة أو رابط مدوناتكم وشكرا لكم على الزيارة . </span></div></div>خالد محمد (ابوخلود)http://www.blogger.com/profile/17023136577166291717noreply@blogger.com26tag:blogger.com,1999:blog-3171771270267658652.post-61884745318956262992009-12-10T08:18:00.000-08:002009-12-25T05:36:27.433-08:00كيف تعمل فهرس لمدونتك باستخدام خدمة ادوات مشرفي المواقع ؟ انشاء خريطة لمدونات بلوجر<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZh4ebPbSgFuCheQaX7dR7fnpBBwHErPooHfFZ1FlK42PNXM2LCS-D6-dE53-34HSNVIs4aybxiZSiyBNmoQ-zlkTqjqnODeFd0x-9IwSdJD7pZb1GwQpkRVUCMa7-uE6LCDgJugBVBTo/s1600-h/11122.png"><img style="margin: 0pt 0pt 10px 10px; float: right; cursor: pointer; width: 353px; height: 96px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZh4ebPbSgFuCheQaX7dR7fnpBBwHErPooHfFZ1FlK42PNXM2LCS-D6-dE53-34HSNVIs4aybxiZSiyBNmoQ-zlkTqjqnODeFd0x-9IwSdJD7pZb1GwQpkRVUCMa7-uE6LCDgJugBVBTo/s400/11122.png" alt="" id="BLOGGER_PHOTO_ID_5413670626212198530" border="0" /></a><br /><div style="text-align: justify;"><span style="font-size:130%;">بسم الله و الصلاة و السلام على رسول الله.</span><br /><span style="font-size:130%;">خدمة Google Sitemap ( أدوات مشرفي المواقع ) من</span><span style="font-size:130%;"> الخدمات الأكثر شهرة بين صفوف المدونين و أصحاب المواقع لأنها تمكن من تعريف محرك البحث بخريطة الموقع أو المدونة قصد </span><span style="font-size:130%;">أرشفة و فهرست المحتويات بشكل جيد . و في هذا الموضوع بإذن الله سنتعرف طريقة إنشائها لمدونات بلوغر Blogg</span><span style="font-size:130%;">er .</span><br /></div><br /><span style="color: rgb(0, 0, 0);"><span style="font-size:130%;"><span style="color: rgb(139, 0, 0);"><span style="color: rgb(0, 0, 0);"><span style="color: rgb(255, 0, 0);">1 -</span> إنشاء حساب بقوقل باستخدام أي بريد إلكتروني لديك وذلك من خلال :</span><br /><a href="http://www.google.com/" target="_blank">Google</a></span></span></span> <span style="color: rgb(0, 0, 0);"><span style="font-size:130%;"><span style="color: rgb(139, 0, 0);"><span style="color: rgb(0, 0, 0);">تسجيل الدخول</span></span></span></span> <span style="color: rgb(0, 0, 0);"><span style="font-size:130%;"><span style="color: rgb(139, 0, 0);"><span style="color: rgb(0, 0, 0);">إنشاء حساب الآن</span></span></span></span><br /><br /><span><span style="font-size:130%;"><span style="color: rgb(65, 105, 225);"> <span style="color: rgb(0, 0, 0);"><span style="color: rgb(255, 0, 0);">2 -</span>بعد إتمام الخطوات وإنشاء الحساب قم بتسجيل الدخول من خلال ،،</span></span></span></span><br /><span><span style="font-size:130%;"><span style="color: rgb(65, 105, 225);"><a href="http://www.google.com/" target="_blank">Google</a></span></span></span><br /><span><span style="font-size:130%;"><span style="color: rgb(65, 105, 225);">تسجيل الدخول<br />حساب جوجل</span></span></span><br /><br /><span><span style="font-size:130%;"><span style="color: rgb(65, 105, 225);"><span style="color: rgb(0, 0, 0);"><span style="color: rgb(255, 0, 0);">3 -</span>ثم قم بالبحث عن كلمة ( أدوات مشرفي المواقع :) ومن خلال أول رابط يخرج في نتيجة البحث</span><br /><a href="https://www.google.com/webmasters/tools/dashboard?hl=ar" target="_blank">أدوات مشرف الموقع</a></span></span></span><br /><br /><span style="font-size:130%;">انظر الصورة التالية : </span><br /><br /><div style="text-align: center;"><span style="color: rgb(255, 0, 0);font-size:130%;" >اضغط الصورة لت</span><span style="color: rgb(255, 0, 0);font-size:130%;" >كبر</span><br /></div><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgADzi18uig7txKcAHVw1T8nBSuLqQ7EnFL9I87GUb-0HN4UbTHp0divEvRPNYwosjwyGxP2YhlUBv3w6I7frm86UGcRI3nzk_i1QPZwZiFxhl8kVl-9nfk5URBTHc8eJjtq8CTD8KUSys/s1600-h/%D9%85%D8%B4%D8%B1%D9%81%D9%8A+1.png"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 232px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgADzi18uig7txKcAHVw1T8nBSuLqQ7EnFL9I87GUb-0HN4UbTHp0divEvRPNYwosjwyGxP2YhlUBv3w6I7frm86UGcRI3nzk_i1QPZwZiFxhl8kVl-9nfk5URBTHc8eJjtq8CTD8KUSys/s400/%D9%85%D8%B4%D8%B1%D9%81%D9%8A+1.png" alt="" id="BLOGGER_PHOTO_ID_5413647932648315938" border="0" /></a><br /><span style="font-size:130%;"><span style="color: rgb(255, 0, 0);">4 -</span> عند الدخول بحسابك في جوجل تفتح صفحة لوحة التحكم الريسية بحسابك ثم اضغط على زر <span style="color: rgb(255, 0, 0);">( اضافة موقع )</span> ثم يفتح <span style="color: rgb(255, 0, 0);">حقل اكتب فيه عنوان مدونتك</span> ثم اضغط <span style="color: rgb(255, 0, 0);">زر متابعة</span> كما هو في الصورة التالية : </span><br /><br /><br /><div style="text-align: center;"><span style="color: rgb(255, 0, 0);font-size:130%;" >اضغط الصورة لتكبر </span><br /></div><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQwpW7Ro68P5LRvZYEcE9NcSu8i_L90iGK5Dwr5efR-a8JTi9MblUuedKnYSw8J-J8yrNAfiiIhUqKAlE7tLVsc13MGh9HwS0xop708nyIe2bQeu8dg09zYLbLwUkbhlYt4jrYFpYWQ7M/s1600-h/%D9%85%D8%B4%D8%B1%D9%81%D9%8A2.png"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 232px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQwpW7Ro68P5LRvZYEcE9NcSu8i_L90iGK5Dwr5efR-a8JTi9MblUuedKnYSw8J-J8yrNAfiiIhUqKAlE7tLVsc13MGh9HwS0xop708nyIe2bQeu8dg09zYLbLwUkbhlYt4jrYFpYWQ7M/s400/%D9%85%D8%B4%D8%B1%D9%81%D9%8A2.png" alt="" id="BLOGGER_PHOTO_ID_5413650669907970802" border="0" /></a><br /><br /><span style="font-size:130%;"><span style="color: rgb(255, 0, 0);">5 -</span> بعد الضغط على <span style="color: rgb(255, 0, 0);">زر متابعة</span> تفتح صفحة <span style="color: rgb(255, 0, 0);">اثبات الملكية</span> واختر من <span style="color: rgb(51, 51, 255);">طريقة التحقق</span> <span style="color: rgb(255, 0, 0);">( العلامة الوصفية )</span> ثم قم بنسخ الكود والصقة في مدونتك في قسم <span style="color: rgb(255, 0, 0);">head </span> </span><span style="font-size:130%;">تحته مباشرة </span><span style="font-size:130%;">من <span style="color: rgb(51, 51, 255);">قائمة التخطيط</span> -<span style="color: rgb(51, 51, 255);"> تحرير HTML</span> ثم قم بعمل <span style="color: rgb(255, 0, 0);">حفظ للقالب</span> . انظر الصورتين التاليتين : </span><br /><br /><div style="text-align: center; color: rgb(255, 0, 0);"><span style="font-size:130%;">اضغط الصورة لتكبر </span></div><div style="text-align: center;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY43HbtjzItsXRZF-uqXV6k4y1bxOekV3Pho4-jj_wKhW4xUAyXtpmc9jgequCk9dS4w5SMFVxQxrxhIfllD7HFuGQRVNhxbyQd_8WibziUXM-FwVSMzB6TGniUbcWWLPp51TLTCVIF18/s1600-h/%D9%85%D8%B4%D8%B1%D9%81%D9%8A3.png"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 232px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY43HbtjzItsXRZF-uqXV6k4y1bxOekV3Pho4-jj_wKhW4xUAyXtpmc9jgequCk9dS4w5SMFVxQxrxhIfllD7HFuGQRVNhxbyQd_8WibziUXM-FwVSMzB6TGniUbcWWLPp51TLTCVIF18/s400/%D9%85%D8%B4%D8%B1%D9%81%D9%8A3.png" alt="" id="BLOGGER_PHOTO_ID_5413655918692577330" border="0" /></a><span style="color: rgb(255, 0, 0);font-size:130%;" >اضغط الصورة لتكبر </span> </div><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3QXbpOT26hcFNKfzxdFNuZcOvkJhwpx1EWWeP6hSm4kFbBAGTlz8GyOaNhhYEbxvXKlSQB5aH3AXN8l4seog0EQrpZbQ4IdXf1_l1IzFDHyw6gSwXihSxCR2MiAF1LaBDb0urYpKCVW0/s1600-h/%D9%85%D8%B4%D8%B1%D9%81%D9%8A+4.png"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 235px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3QXbpOT26hcFNKfzxdFNuZcOvkJhwpx1EWWeP6hSm4kFbBAGTlz8GyOaNhhYEbxvXKlSQB5aH3AXN8l4seog0EQrpZbQ4IdXf1_l1IzFDHyw6gSwXihSxCR2MiAF1LaBDb0urYpKCVW0/s400/%D9%85%D8%B4%D8%B1%D9%81%D9%8A+4.png" alt="" id="BLOGGER_PHOTO_ID_5413656392007716562" border="0" /></a><br /><span style="font-size:130%;"><span style="color: rgb(255, 0, 0);">6 -</span> بعد نسخ الكود ولصقة في المدونة قم بالضغط على <span style="color: rgb(255, 0, 0);">زر تأكيد</span> كما في الصورة التالية : </span><br /><br /><br /><div style="text-align: center;"><span style="color: rgb(255, 0, 0);font-size:130%;" >اضغط الصورة لتكبر </span><br /></div><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8kGApJx8ghwVPpvkwFM9FRRB_aRWuXGPgJnUedeiV6eyq9a3hOa2pCMqKBcIPbdeP5CKesqIh06vz_AgaIcW0fwzjSMBSbS7bJ2hpa1nPgmoxK15IKDj2msqvz9kEGIW2lY1Ass9y5P4/s1600-h/%D9%85%D8%B4%D8%B1%D9%81%D9%8A+5.png"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 232px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8kGApJx8ghwVPpvkwFM9FRRB_aRWuXGPgJnUedeiV6eyq9a3hOa2pCMqKBcIPbdeP5CKesqIh06vz_AgaIcW0fwzjSMBSbS7bJ2hpa1nPgmoxK15IKDj2msqvz9kEGIW2lY1Ass9y5P4/s400/%D9%85%D8%B4%D8%B1%D9%81%D9%8A+5.png" alt="" id="BLOGGER_PHOTO_ID_5413657351684594626" border="0" /></a><br /><span style="font-size:130%;"><span style="color: rgb(255, 0, 0);">7 -</span> سوف تفتح لك صفحة جديدة ابحث فيها على <span style="color: rgb(255, 0, 0);">ملفات ( sitemap )</span> اضغط على <span style="color: rgb(255, 0, 0);">زر اضافة ملف ( submit a sitemap )</span> ثم قم بوضع او نسخ واحد من الامتدادات التالية في <span style="color: rgb(255, 0, 0);">الحقل</span> ثم اضغط على <span style="color: rgb(255, 0, 0);">زر ارسال ملف</span> كما هو موضح في الصورة او اختار ثلاثة المهم انت حر في اختيار الامتدادات : </span><br /><br /><div id="code"> <span style="color: rgb(255, 0, 0);">feeds/posts/default</span><br /><span style="color: rgb(255, 0, 0);">او</span><br /><span style="color: rgb(255, 0, 0);">atom.xml</span><br />او<br /><span style="color: rgb(51, 51, 255);">/atom.xml?redirect=false&start-index=1&max-results=100</span><br />او<br /><span style="color: rgb(0, 153, 0);">/atom.</span><span style="color: rgb(0, 153, 0);">xml?redirect=false&start-index=101&max-results=100</span><br />او<br /><span style="color: rgb(204, 102, 0);">/atom.xml?redirect=false&start-index=201&max-results=100</span> </div><br /><br /><span style="font-size:130%;">* الامتداد<span style="color: rgb(255, 0, 0);"> باللون الاحمر</span>: يأرشف لك 26 رابط ( موضوع )<br />* الامتداد <span style="color: rgb(51, 51, 255);">باللون الازرق</span> : يارشف لك اكثر من 26 الى حد 100 موضوع او مقالة في مدونتك<br />* الامتداد <span style="color: rgb(51, 204, 0);">باللون الاخضر</span> : يارشف لك اكثر من 100 مقالة في مدونتك</span><br /><span style="font-size:130%;">* الامتداد <span style="color: rgb(153, 51, 0);">باللون البني</span> : يارشف لك اكثر من 200 مقالة </span><br /><br /><br /><span style="font-size:130%;">انضر الصور لتشرح لك كيفية إرسال ملفات sitemap : </span><br /><br /><div style="text-align: center;"><span style="color: rgb(255, 0, 0);font-size:130%;" >اضغط الصورة لتكبر</span><br /></div><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXUbxWGnDye72OyDNigwajb_a3pHvXXbDUPrgvCvUn25NWu8gAtzKierEzOnRYJanFksNLE8Xy4xmOVPvI3roMk74nEoWvZLOBh_saqKm-n1oH8UDYKyJZbJ2Sj01MpUsXWf5lrL7PzFU/s1600-h/%D9%85%D8%B4%D8%B1%D9%81%D9%8A+7.png"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 371px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXUbxWGnDye72OyDNigwajb_a3pHvXXbDUPrgvCvUn25NWu8gAtzKierEzOnRYJanFksNLE8Xy4xmOVPvI3roMk74nEoWvZLOBh_saqKm-n1oH8UDYKyJZbJ2Sj01MpUsXWf5lrL7PzFU/s400/%D9%85%D8%B4%D8%B1%D9%81%D9%8A+7.png" alt="" id="BLOGGER_PHOTO_ID_5413667811739386546" border="0" /></a><br /><br /><div style="text-align: center;"><span style="color: rgb(255, 0, 0);font-size:130%;" >اضغط الصورة لتكبر</span><br /></div><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs7woDsGoGyZwsr9r19UOrtEoJhcv1i6gdoYmckeu4s0UqbEilvqvdD3QZfFq9YiAPtnfQ_4rt11_3Sj4lg2nw0VjO7OOkBr1jnZzFF3otJiH1Otj8W_c2uM2txb3n4hCjbQnLHh0TtPo/s1600-h/%D9%85%D8%B4%D8%B1%D9%81%D9%8A+8.png"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 232px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs7woDsGoGyZwsr9r19UOrtEoJhcv1i6gdoYmckeu4s0UqbEilvqvdD3QZfFq9YiAPtnfQ_4rt11_3Sj4lg2nw0VjO7OOkBr1jnZzFF3otJiH1Otj8W_c2uM2txb3n4hCjbQnLHh0TtPo/s400/%D9%85%D8%B4%D8%B1%D9%81%D9%8A+8.png" alt="" id="BLOGGER_PHOTO_ID_5413668377825724642" border="0" /></a><br /><br /><div style="text-align: center; color: rgb(255, 0, 0);"><span style=";font-family:arial;font-size:130%;" >أرجوا من الإخوة الكرم الذين استفادوا من الموضوع الدعاء</span><br /><span style=";font-family:arial;font-size:130%;" ></span><br /><span style=";font-family:arial;font-size:130%;" >الصالح وترك تعليق وبارك الله فيكم . </span><br /><br /></div>خالد محمد (ابوخلود)http://www.blogger.com/profile/17023136577166291717noreply@blogger.com35tag:blogger.com,1999:blog-3171771270267658652.post-26008069838319267932009-12-08T09:27:00.000-08:002009-12-25T05:35:38.125-08:00اضافة شريط آخر الاخبار لقناة الجزيرة او العربية .<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMxUVM1hkxJKma1YwgZX9TIb4D-FXH7fRKAn50qpjU1LbBa9StuCovM5KZchQ624EsnpzgyXD7vvegJ3K5WaeXrYh31ZFthO1GKCcOHBdAgp7x5QqLdY8tVXfwMDyN51eahlV0dN46wlQ/s1600-h/22%D8%A7%D8%AE%D8%B1+%D8%A7%D9%84%D8%A7%D8%AE%D8%A8%D8%A7%D8%B1.JPG"><img style="margin: 0pt 0pt 10px 10px; float: right; cursor: pointer; width: 308px; height: 161px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMxUVM1hkxJKma1YwgZX9TIb4D-FXH7fRKAn50qpjU1LbBa9StuCovM5KZchQ624EsnpzgyXD7vvegJ3K5WaeXrYh31ZFthO1GKCcOHBdAgp7x5QqLdY8tVXfwMDyN51eahlV0dN46wlQ/s400/22%D8%A7%D8%AE%D8%B1+%D8%A7%D9%84%D8%A7%D8%AE%D8%A8%D8%A7%D8%B1.JPG" alt="" id="BLOGGER_PHOTO_ID_5412932044183998450" border="0" /></a><br /><div style="text-align: justify;"><span style="font-size:130%;">إخواني الكرام السلام عليكم ورحمة الله </span><br /><br /><span style="font-size:130%;">إن شاء الله تكونوا في أتم الصحة والعافية اليوم نبداء بموضوع آخر و جميل وذلك بناءا على طلب ألأخ<span style="color: rgb(51, 51, 255);"> / سلام صاحب مدونة الحصان المرجحية</span> وهو شرح طريقة تزيين مدونتك بشريط لآخر الأخبار لقناتي <span style="color: rgb(0, 153, 0);">( الجزيرة ، العربية ) </span>فهي أداة رائعة تقوم بلفت انتباه الزائر لقرأة أخر الأخبار ومن مدونتك كما تعطي لمدونتك طابع جميل .</span><br /></div><p><span style="color: rgb(255, 0, 0);font-size:180%;" ><br />أولاً : </span><br /></p><div align="center"><span style="font-size:130%;">اذهب إلى <strong style="color: rgb(255, 0, 0);"><span style="color: rgb(102, 102, 204);"><span style="color: rgb(255, 0, 0);">التخطيط</span></span></strong><span style="color: rgb(255, 0, 0);"> </span>من لوحة التحكم بمدونتك .</span></div><br /><div style="text-align: right;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNpquK8WQkLqnTnq2JSvbNx2nTLAe6v2N31BYfdNyOfxx8QQnuPqoyKZjCTVUU2Px8BGbRwUoPBa1ibyVkveQYiUBKC2MTcCMWpSb1fpoNGnnEPw5-txLckqjcxtKgUHnxkYLMSF7bLUM8/s1600-h/01.jpg"><img id="BLOGGER_PHOTO_ID_5403951398402286034" style="margin: 0px auto 10px; display: block; width: 49px; height: 26px; text-align: center;" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNpquK8WQkLqnTnq2JSvbNx2nTLAe6v2N31BYfdNyOfxx8QQnuPqoyKZjCTVUU2Px8BGbRwUoPBa1ibyVkveQYiUBKC2MTcCMWpSb1fpoNGnnEPw5-txLckqjcxtKgUHnxkYLMSF7bLUM8/s400/01.jpg" border="0" /></a><span style="font-size:130%;"><span style="color: rgb(255, 0, 0);font-size:180%;" >ثانياً : </span><br /></span></div><div align="center"><span style="font-size:130%;">اذهب إلي <strong><span style="color: rgb(102, 102, 204);"><span style="color: rgb(255, 0, 0);">اضافة</span> <span style="color: rgb(255, 0, 0);">أداة</span></span></strong><span style="color: rgb(255, 0, 0);"> :</span></span></div><div align="center"><br /></div><div align="center"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqB-HjOdt3wSfRjLZ9Ic-wgzYwdfk7eUB9YSXd9I_YB_HQ_pt3GfTKmL2U_7lRbTqUVnpYq-yIfH4UYOMmmwJBXQDLthpv8oafG4gJ-xWjaMbYLoFxnjYX3_oHkDz_-_-Nb_LhMj6k9Zir/s1600-h/02.jpg"><img id="BLOGGER_PHOTO_ID_5403951226943178146" style="margin: 0px auto 10px; display: block; width: 264px; height: 49px; text-align: center;" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqB-HjOdt3wSfRjLZ9Ic-wgzYwdfk7eUB9YSXd9I_YB_HQ_pt3GfTKmL2U_7lRbTqUVnpYq-yIfH4UYOMmmwJBXQDLthpv8oafG4gJ-xWjaMbYLoFxnjYX3_oHkDz_-_-Nb_LhMj6k9Zir/s400/02.jpg" border="0" /></a></div><div style="text-align: right;"><span style="font-size:130%;"><span style="color: rgb(255, 0, 0);font-size:180%;" >ثالثاً : </span><br /></span></div><div align="center"><span style="font-size:130%;"></span></div><div align="center"><br /><span style="font-size:130%;">ثم قم باختيار ألأداة هذه <span style="color: rgb(255, 0, 0);">( </span><strong style="color: rgb(255, 0, 0);">HTML/JavaScript</strong></span></div><div align="center"><strong><span style="font-size:130%;"></span></strong><br /></div><div align="center"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjul0R_PrPyRhIayUaReivTncZm6UhG5ieyQ8nJsQ3hJmFwUMSZ_8rJwUcIM6R9J20RL9eTcl28XZebNmjW-fCGpSriZvIqHGmWRg-ygDgrOb-wou0lgMogdulb9Ige2eimxRZmXzSipZCt/s1600-h/03.jpg"><img id="BLOGGER_PHOTO_ID_5403951087846991090" style="margin: 0px auto 10px; display: block; width: 400px; height: 140px; text-align: center;" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjul0R_PrPyRhIayUaReivTncZm6UhG5ieyQ8nJsQ3hJmFwUMSZ_8rJwUcIM6R9J20RL9eTcl28XZebNmjW-fCGpSriZvIqHGmWRg-ygDgrOb-wou0lgMogdulb9Ige2eimxRZmXzSipZCt/s400/03.jpg" border="0" /></a><br /><br /><div style="text-align: right;"><span style="color: rgb(255, 0, 0);font-size:130%;" ><span style="font-size:180%;">رابعاً :</span> </span><span style="font-size:130%;"><br /></span></div></div><div align="center"><span style="font-size:130%;">قم بنسخ الكود كاملا التالي :</span></div><div align="center"><br /><div id="code"><br /><script language="JavaScript"><!--<br />var g=new Date(); g=g.getTime()%1000;<br />document.writeln('<iframe width=100% height=18 scrolling=no marginwidth=0 marginheight=0 frameborder=0 src=http://www.faisal1.com/News_Grab/jazeera.php>');<br />// --></script><br /><noscript><!--webbot bot="HTMLMarkup" startspan --><iframe scrolling="no" frameborder="0" width="0" marginheight="0"<br />height="0" marginwidth="0"><!--webbot bot="HTMLMarkup" endspan --><!--webbot bot="HTMLMarkup" startspan --></iframe><!--webbot bot="HTMLMarkup" endspan --></noscript><br /></div><br /></div><div align="center"><br /><div style="text-align: right;"><span style="color: rgb(255, 0, 0);font-size:180%;" >خامساً : </span><br /></div></div><div align="center"><span style="font-size:130%;">قم بلصق الكود في هذه الخانة ثم اضغط حفظ كما هو موضح في الصورة التالية :</span></div><div align="center"><br /></div><div align="center"><div style="text-align: justify;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3eo7tLrf9h4zdxsRwsrmpRjvloy9-z3vGqYdRgOfnRVs-pOzF9VKc6rV_753LiV2TZxoFMVuh31XI37fasFE56FIWIUJ1MyTfMyH-JahY2Fb-a-oh8nOP55rHhYflNdlQfwkY-gn8dnLL/s1600-h/05.jpg"><img id="BLOGGER_PHOTO_ID_5403950934410842450" style="margin: 0px auto 10px; display: block; width: 400px; height: 357px; text-align: center;" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3eo7tLrf9h4zdxsRwsrmpRjvloy9-z3vGqYdRgOfnRVs-pOzF9VKc6rV_753LiV2TZxoFMVuh31XI37fasFE56FIWIUJ1MyTfMyH-JahY2Fb-a-oh8nOP55rHhYflNdlQfwkY-gn8dnLL/s400/05.jpg" border="0" /></a><span style="font-size:130%;"><br />بعد عملية الحفظ تظهر أو تضاف الأداة مباشرة في العمود الجانبي ثم قم بسحب الأداة بواسطة الماوس م<span style="color: rgb(255, 0, 0);">ن العمود الجانبي ( side bar )</span> الى <span style="color: rgb(255, 0, 0);">تحت او اسفل شريط عنوان مدونتك</span> الموجود في <span style="color: rgb(51, 51, 255);">صفحة عناصر المدونة</span> </span>.<br /></div><div style="text-align: right;"><span style="color: rgb(255, 0, 0);font-size:180%;" ><br />سادساً : </span><br /></div><span style="font-size:130%;"><br />اذهب إلى حفظ ثم قم بعرض المدونة الإلكترونية لتشاهد النتيجة :</span><br /><br /><br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq3T-fbEvGgag8576g7JaMXle6Xd2lxTXyunU547A2T8m_n2gHKav8LgJSbPRBladnLfqEJ5YuLzVJ8qpFG4JYYfS_jkmcAAzb29-7GQbkDsQv5LlFxeUmFeBL9s4jkWQuEx9BJo8-aG3C/s1600-h/16.jpg"><img id="BLOGGER_PHOTO_ID_5403950738605361106" style="margin: 0px auto 10px; display: block; width: 400px; height: 65px; text-align: center;" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq3T-fbEvGgag8576g7JaMXle6Xd2lxTXyunU547A2T8m_n2gHKav8LgJSbPRBladnLfqEJ5YuLzVJ8qpFG4JYYfS_jkmcAAzb29-7GQbkDsQv5LlFxeUmFeBL9s4jkWQuEx9BJo8-aG3C/s400/16.jpg" border="0" /></a><br /><br /><br /><div style="text-align: right; color: rgb(255, 0, 0);"><span style="font-size:180%;">سابعاً : <span style="font-size:130%;"><br /></span></span></div><span style="font-size:130%;"><br /></span><span style="font-size:130%;">نهاية العملية ورؤية شريط الأخبار :</span><br /><br /><br /><div><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLU2Twe0UHFZk4ROlBnHmE96dKuic4Cvq9oWekzqwGVCBmdLCyMs30a3WU9U4ag8Biv55FYbdBmiWAEBtKmMG0nnFgaHWZIHvM3G0o_U9nsA9UKGA64F_LqEQOXJIbMDZ85br4lcWREH9B/s1600-h/06.jpg"><img id="BLOGGER_PHOTO_ID_5403950581409799394" style="margin: 0px auto 10px; display: block; width: 322px; height: 241px; text-align: center;" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLU2Twe0UHFZk4ROlBnHmE96dKuic4Cvq9oWekzqwGVCBmdLCyMs30a3WU9U4ag8Biv55FYbdBmiWAEBtKmMG0nnFgaHWZIHvM3G0o_U9nsA9UKGA64F_LqEQOXJIbMDZ85br4lcWREH9B/s400/06.jpg" border="0" /></a><span style="font-size:130%;"> </span></div><span style="font-size:130%;"></span></div><span style="font-size:130%;"></span><br /><p><span style="font-size:130%;"></span></p><p align="center"><span style="font-size:130%;"></span> </p><p style="text-align: right;"><span style="font-size:130%;"><span style="color: rgb(255, 0, 0);font-size:180%;" >ثامناً : </span><br /></span></p><p align="center"><span style="font-size:130%;">ولإضافة شريط الأخبار الخاص <span style="color: rgb(255, 0, 0);">بقناة العربية</span> قم </span><span style="font-size:130%;">بنسخ الكود التالي عوضا عن الكود السابق :</span></p><div align="center"><br /><div id="code"><br /><div width="600"><script src="http://www.alarabiya.net/ara_v_ticker.html"></script></div><br /></div><br /><span style="font-family:arial;"></span></div><div align="center"><span style="font-family:arial;"></span> </div><div align="center"><span style="font-family:Arial;"></span> </div><div align="center"><br /><br /></div><div style="color: rgb(255, 0, 0);" align="center"><span style=";font-family:arial;font-size:130%;" >أرجوا من الإخوة الكرم الذين استفادوا من الموضوع الدعاء<br /><br />الصالح وترك تعليق وبارك الله فيكم . </span></div><span style="font-family:arial;"></span>خالد محمد (ابوخلود)http://www.blogger.com/profile/17023136577166291717noreply@blogger.com25tag:blogger.com,1999:blog-3171771270267658652.post-55742127195306779302009-12-07T07:15:00.000-08:002009-12-25T05:36:59.326-08:00كيف تضع او تظيف اداة استطلاع الرأي في مدونة بلوجر ؟<div style="text-align: right;"><div style="text-align: justify;"><span style=";font-family:arial;font-size:130%;" >بسم الله الرحمن الرحيم ، إخواني الكرام هذه أداة جميلة جدا </span><span style=";font-family:arial;font-size:130%;" >ورائعة ومفيدة وهي أداة </span><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAadVXLZhSenc9dZPEA20QxJ8ZRJP4kkVUlxD9_aP0BIyUIbd00t7F16JIyh3K0D4ZaP2zO_sF3VJAgBkxK_Pv6ZnYUvEZaXRdr5RYYD5Pd5NvnkMREo64fG6s8zRN12W7lZErsW6Ukx8/s1600-h/%D8%A7%D8%B3%D8%AA%D8%B7%D9%84%D8%A7%D8%B9.png"><img style="margin: 0pt 0pt 10px 10px; float: right; cursor: pointer; width: 400px; height: 82px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAadVXLZhSenc9dZPEA20QxJ8ZRJP4kkVUlxD9_aP0BIyUIbd00t7F16JIyh3K0D4ZaP2zO_sF3VJAgBkxK_Pv6ZnYUvEZaXRdr5RYYD5Pd5NvnkMREo64fG6s8zRN12W7lZErsW6Ukx8/s400/%D8%A7%D8%B3%D8%AA%D8%B7%D9%84%D8%A7%D8%B9.png" alt="" id="BLOGGER_PHOTO_ID_5412545569778896674" border="0" /></a><span style=";font-family:arial;font-size:130%;" >استطلاع الرأي حيث أن هذه الأداة تمكنك من اختيار أي سؤال في أي موضوع شئت وعرضه على زوار مدونتك لمعرفة أرائهم حول موضوع ما .</span><br /><span style="color: rgb(255, 0, 0);font-family:arial;font-size:130%;" >إذاً تابعوا معي شرح خطوات إضافة هذه ألأده وهي كالتالي :</span> </div><span style=";font-family:arial;font-size:130%;" ><br /></span></div><div align="center"><span style="font-family:Arial;"></span> </div><span style="color: rgb(255, 0, 0);font-size:130%;" ><strong>اولاً : </strong></span><br /><strong></strong><br /><span style=";font-family:arial;font-size:130%;" >من لوحة التحكم بمدونتك اذهب إلى <strong><span style="color: rgb(51, 102, 255);">التخطيط</span></strong> :</span><br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWCNiR1neYQO0pn1iMzOgzdnVKmV-PHLHourNsaiStPfImvzL18RpQbsVrFuLBewlA19RMtCBKqJtVtrDA4oiT3ObBm10Ri-iOrLifBWDZO-BGTrRh6L9UaeEDbbPbUIP8GezW5bhiLGIB/s1600/12.jpg"><img id="BLOGGER_PHOTO_ID_5408296071887297938" style="margin: 0px auto 10px; display: block; width: 49px; height: 26px; text-align: center;" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWCNiR1neYQO0pn1iMzOgzdnVKmV-PHLHourNsaiStPfImvzL18RpQbsVrFuLBewlA19RMtCBKqJtVtrDA4oiT3ObBm10Ri-iOrLifBWDZO-BGTrRh6L9UaeEDbbPbUIP8GezW5bhiLGIB/s400/12.jpg" border="0" /></a><div align="center"><span style="font-size:130%;"></span> </div><span style="color: rgb(255, 0, 0);font-size:130%;" > <strong>ثانياً : </strong></span><br /><br /><span style=";font-family:arial;font-size:130%;" ><strong><span style="color: rgb(51, 102, 255);"><span style="color: rgb(0, 0, 0);">اختر</span> إضافة أداة</span></strong> :</span><div align="center"><br /></div><div align="center"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhL9eREkrGM1-byk30yjcY1GhzdOz3eLJXr8-G89bM_gwZ3pMU2wwvaKQdaoDwurNmf7BPg_DRxsT5t4KP_Zjidqk_w7cK2VrB06UTPAZHc2bIIDwCqMO_CZLirXLtNbYonz3cB_QIihzgK/s1600/13.jpg"><img id="BLOGGER_PHOTO_ID_5408296014989463698" style="margin: 0px auto 10px; display: block; width: 264px; height: 49px; text-align: center;" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhL9eREkrGM1-byk30yjcY1GhzdOz3eLJXr8-G89bM_gwZ3pMU2wwvaKQdaoDwurNmf7BPg_DRxsT5t4KP_Zjidqk_w7cK2VrB06UTPAZHc2bIIDwCqMO_CZLirXLtNbYonz3cB_QIihzgK/s400/13.jpg" border="0" /></a> <div style="text-align: right;"><span style="color: rgb(255, 0, 0);font-size:130%;" >ثالثاً : </span><br /></div></div><br /><span style=";font-family:arial;font-size:130%;" >ثم اضغط على أداة <strong><span style="color: rgb(51, 102, 255);">استطلاع الرأي</span></strong> الموضحة في الصورة :</span><br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4fcZ84aExLim4cjW4g5HHBxEZebkwV0Kyl_665apHEezTZhuqomrxRAad2pkfS0t5GPTkOdGsal84JDcUOTOIGOWIdjijO0uvt5z8KweIoEhMsXJ7I61XMJHns-qMlPswyvc1WPrB2wlh/s1600/01.jpg"><img id="BLOGGER_PHOTO_ID_5408295934500304194" style="margin: 0px auto 10px; display: block; width: 400px; height: 174px; text-align: center;" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4fcZ84aExLim4cjW4g5HHBxEZebkwV0Kyl_665apHEezTZhuqomrxRAad2pkfS0t5GPTkOdGsal84JDcUOTOIGOWIdjijO0uvt5z8KweIoEhMsXJ7I61XMJHns-qMlPswyvc1WPrB2wlh/s400/01.jpg" border="0" /></a><span style="font-size:130%;"> <strong><span style="color: rgb(255, 0, 0);">رابعاً :</span> </strong><br /></span><span style="font-size:130%;"><br />ستظهر لك هذه النافذة قم باختيار أي سؤال تريد استطلاع رأي زوار مدونتك عليه واختر الإجابات المناسبة ثم اضغط على <span style="color: rgb(51, 51, 255);">حفظ</span> :</span><br /><br /><div><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_zOZs7tBSqx0olFMjoN6fDl7lFdl_l3X3bdz9DYJjO24JmVbUQ45bCO799tFw9r9zQoULkKk4p5Zmij3zkXvNd0xQoXyaGW0XRG3KydWsIO6zWNHe9HDVeYid6k-EHPjXH1mBSoZENK-B/s1600/02.jpg"><img id="BLOGGER_PHOTO_ID_5408295833979499170" style="margin: 0px auto 10px; display: block; width: 400px; height: 357px; text-align: center;" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_zOZs7tBSqx0olFMjoN6fDl7lFdl_l3X3bdz9DYJjO24JmVbUQ45bCO799tFw9r9zQoULkKk4p5Zmij3zkXvNd0xQoXyaGW0XRG3KydWsIO6zWNHe9HDVeYid6k-EHPjXH1mBSoZENK-B/s400/02.jpg" border="0" /></a><span style="color: rgb(255, 0, 0);font-size:130%;" ><strong>خامساً :<br /><br /></strong></span> </div><div> </div><div><span style="font-size:130%;">ثم قم بحفظ العمل وعرض المدونة كما هو موضح في الصورة التالية :<br /><br /></span></div><div> </div><div><br /><div><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_0zpP-ZdAtCFUyJw0SZgV1ECgeTpuaaCaMtdpTMiMmyZh4ReQi5sLNUFoKSMWvgp8RcrPqZp9POEQYZst1QMm3fqYQpLLVCbBGCdJcgSiADSkheYehSSiAh7m2WR_8ZsYBIzr15ru4DmH/s1600/16.jpg"><img id="BLOGGER_PHOTO_ID_5408295736671058258" style="margin: 0px auto 10px; display: block; width: 400px; height: 65px; text-align: center;" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_0zpP-ZdAtCFUyJw0SZgV1ECgeTpuaaCaMtdpTMiMmyZh4ReQi5sLNUFoKSMWvgp8RcrPqZp9POEQYZst1QMm3fqYQpLLVCbBGCdJcgSiADSkheYehSSiAh7m2WR_8ZsYBIzr15ru4DmH/s400/16.jpg" border="0" /></a></div><div><span style="font-size:130%;"></span> </div><div><span style="font-size:130%;"> <strong><br /><span style="color: rgb(255, 0, 0);">سادساً : </span><br /><br /></strong></span></div><div><span style="font-size:130%;"></span> </div><div><span style="font-size:130%;">ظهور الأداة على المدونة وهذا مثال لإستطلاع الرأي حول نيل لقب كأس افريقيا للأمم 2010 :</span><br /><div> </div><div><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6kfvHQIFFsi002ue015y7y19vr9-JcKLAp9PSMYhj1EwtjessTamgR8iDFKLnH2A2tc3cxT7J4cL19eh6I8PMlXlGVxn7rKbB1n8csEg_Tf4sHPATFtH2p4ogUso9Oov535lGjK3Pl5YK/s1600/03.jpg"><img id="BLOGGER_PHOTO_ID_5408295655713810930" style="margin: 0px auto 10px; display: block; width: 349px; height: 207px; text-align: center;" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6kfvHQIFFsi002ue015y7y19vr9-JcKLAp9PSMYhj1EwtjessTamgR8iDFKLnH2A2tc3cxT7J4cL19eh6I8PMlXlGVxn7rKbB1n8csEg_Tf4sHPATFtH2p4ogUso9Oov535lGjK3Pl5YK/s400/03.jpg" border="0" /></a></div><div> </div><div style="text-align: right; color: rgb(255, 0, 0);"><span style="font-size:130%;"><br /></span><div style="text-align: center;"><span style="font-size:130%;">الرجاء من الإخوة الأفاضل الذين استفادوا من هذا الموضوع الدعاء بظهر الغيب وترك تعليق أو نصيحة أو رابط أو بريد الكتروني والى اللقاء في موضوع آخر . </span></div></div></div></div>خالد محمد (ابوخلود)http://www.blogger.com/profile/17023136577166291717noreply@blogger.com12