طريقة إنشاء الجداول على مدونات بلوجر

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

هذا مثال للجدول : 

الترتيب	الموضوع	التصنيف	عدد التعليقات	عدد المشاهدة
ترتيب المواضيع حسب التصنيف وعدد الزيارات والتعليقات
1	إضافة خاصية إقرأ المزيد	إضافات بلوجر	30	245
2	إدراج إعلانات أدسنس	إضافات بلوجر	25	230
3	كيفية إنشاء منتدى	دروس بلوجر	21	190
4	فهرسة مواضيع المدونة	دروس بلوجر	19	187
5	أزرار المفضلات الاجتماعية	أزرار	11	95

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

]]></b:skin>

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

#tableau {
    font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
    font-size: 12px;
    margin: 10px 0;
    width: 100%;
    text-align: right;
    border-collapse: collapse;
}
#tableau th {
    font-size: 13px;
    font-weight: normal;
    padding: 8px;
    background: #b9c9fe url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDwmVZLFJ8TPZTzMOBNuJZcN_6_nIyonF-G9vgRkFgzrm99z_6ktt2moNoTRn2yCkcYSnDmn0MVhpGfEJOAxdoSWHzmWflz5YE6J3B1VWVe1BK-rCwCMzg2L_l-Or2X3zwqyyGLwDEOYIl/s1600/gradhead.png') repeat-x;
    border-top: 2px solid #d3ddff;
    border-bottom: 1px solid #fff;
    color: #039;
}
#tableau td {
    padding: 8px;
    border-bottom: 1px solid #fff;
    color: #669;
    border-top: 1px solid #fff;
    background: #e8edff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJRnN8V5O19roerL53vGqoOn0Lk-dk_8lA1nr4yM6bKSAeyxzmKweK9PeMe2i3Pwf6DRaaKBroHU5TnglNcx1V58S9Ckg0FhUxmSfjn-jBgOlkVAyHeLKhFB2HE5iQ5eZUWbxY8yVjGssI/s1600/gradback.png') repeat-x;
}
#tableau tfoot tr td {
    background: #e8edff;
    font-size: 16px;
    color: #99c;
    text-align:center;
}
#tableau tbody tr:hover td {
    background: #d0dafd url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD564BH-R10YyGQKtrsh81DDrDyOhXSdioMjpG176V4G1NfdDFvSfRNEcU_ekJVL3VJ-CuSGe6vvbkGTmFZXDkEAdrpYOn5Amt8ajXgtjYZZr49muCCWaNdng59d-5c0Lkkw8NjFfuM-jC/s1600/gradhover.png') repeat-x;
    color: #339;
}
#tableau a:hover {
    text-decoration:underline;
}

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

<table id="tableau" summary="ترتيب المواضيع حسب التصنيف وعدد الزيارات والتعليقات">
  <thead>
    <tr>
      <th scope="col">الترتيب</th>
      <th scope="col">الموضوع</th>
      <th scope="col">التصنيف</th>
      <th scope="col">عدد التعليقات</th>
      <th scope="col">عدد المشاهدة </th>
          </tr>
  </thead>
  <tfoot>
    <tr>
      <td colspan="5">ترتيب المواضيع حسب التصنيف وعدد الزيارات والتعليقات</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>1</td>
      <td>إضافة خاصية إقرأ المزيد</td>
      <td>إضافات بلوجر</td>
      <td>30</td>
      <td>245</td>
    </tr>
    <tr>
      <td>2</td>
      <td>إدراج إعلانات أدسنس</td>
      <td>إضافات بلوجر</td>
      <td>25</td>
      <td>230</td>
    </tr>

    <tr>

      <td>3</td>
      <td>كيفية إنشاء منتدى</td>
      <td>دروس بلوجر</td>
      <td>21</td>
      <td>190</td>
    </tr>

    <tr>

      <td>4</td>
      <td>فهرسة مواضيع المدونة</td>
      <td>دروس بلوجر</td>
      <td>19</td>
      <td>187</td>
    </tr>

    <tr>

      <td>5</td>
      <td>أزرار المفضلات الاجتماعية</td>
      <td>أزرار</td>
      <td>11</td>
      <td>95</td>
    </tr>
  </tbody>
</table>

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

وذلك بحذف أو إضافة  الكود ذي اللون الأزرق من بين الأكواد المحصورة بينهما مع تغيير كلمة " الترتيب" بالكلمة التي تريد .

  <thead>
    <tr>
      <th scope="col">الترتيب</th>
   </tr>
  </thead>

 ولإضافة الأسطر الأفقية (1،إضافة خاصية إقرأ المزيد،إضافات بلوجر...) نقوم بتحديد  الوسم .

<tbody>

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

<tr>

      <td>1</td>

      <td>إضافة خاصية إقرأ المزيد</td>

      <td>إضافات بلوجر</td>

      <td>30</td>

      <td>245</td>

    </tr>

 ولزيادة عدد الخانات الأفقية ،نقوم بزيادة الكود دي الخلفيةالصفراء تحته مباشرة بعدد المرات التي نريد فيها إضافة الخانات مع تبديل العدد 245 بالكلمة التي تريد .

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

<td colspan="5">ترتيب المواضيع حسب التصنيف وعدد الزيارات والتعليقات</td>

 حيث يتم حساب عرض العنوان بطريقة تلقائية وهو يساوي عدد الخانات العمودية ,حيث يمثل العدد" 5" عدد الخانات العمودية في هذا المثال ويجب تعديله بالعدد المطلوب حسب الجدول الدي تريد إنشاءه.

• وهذه الصورة توضح تنسيق الجدول مع الكود ,إضغط على الصورة لتكبيرها 

Read More

كيف تعمل قائمة - مواضيع ذات صلة او مواضيع مشابهة - اسفل كل موضوع او مقالة في مدونتك او موقعك؟

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

* ملاحظة :  لكن قبل ان نبدا بخطوات  تركيب  هذه  الاضافة تذكر انك عامل اقسام لمدونتك اي كل المواضيع المنشورة في مدونتك موزعة في اقسام ( اقسام المدونة ) 

واي موقع او مدونة لا يوجد بها اقسام فالطريقة هذا غير صالحة لها .... 

والان اسحمولي بشرح خطوات : كيفية اضافة او وضع مواضيع ذات صلة في مدونة بلوجر ؟ 

1 - اذهب الى لوحة تحكم المدونة .

2 - من لوحة تحكم مدونتك اختر قالب - ثم تحرير HTML - ثم متابعة . ( لا تنسى حفظ نسخة احتياطية لقالب مدونتك من اي خطاء قد يقع  )

3 - قم بتوسيع قوالب عناصر واجهة المستخدم اي بوضع علامة صح في المربع .

4 - ابحث عن الكود التالي باستخدام مفتاح ( CTRL+F ) :

</head>

5 - قم بنسخ الكود التالي ثم ضعه او انسخة فوق كود خطوة4 .

<!--RelatedPostsStarts-->

<style>

#related-posts {

float : left;

width : 540px;

margin-top:20px;

margin-left : 5px;

margin-bottom:20px;

font : 11px Verdana;

margin-bottom:10px;

}

#related-posts .widget {

list-style-type : none;

margin : 5px 0 5px 0;

padding : 0;

}

#related-posts .widget h2, #related-posts h2 {

color : #940f04;

font-size : 20px;

font-weight : normal;

margin : 5px 7px 0;

padding : 0 0 5px;

}

#related-posts a {

color : #054474;

font-size : 11px;

text-decoration : none;

}

#related-posts a:hover {

color : #054474;

text-decoration : none;

}

#related-posts ul {

border : medium none;

margin : 10px;

padding : 0;

}

#related-posts ul li {

display : block;

background : url(&quot;http://www.gigaimage.com/images/brrl1rtaziisu0yj6kj6.gif&quot;) no-repeat 0 0;

margin : 0;

padding-top : 0;

padding-right : 0;

padding-bottom : 1px;

padding-left : 16px;

margin-bottom : 5px;

line-height : 2em;

border-bottom:1px dotted #cccccc;

}

</style>

<script src='http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/relatedposts_forblogger.js' type='text/javascript'/><!--RelatedPostsStops-->

6 - ابحث عن الكود التالي في مدونتك بواسطة المفتاح ( CTRL+F ) : 

<data:post.body/>

7 - قم بنسخ الكود التالي ثم الصقة بعد كود خطوة رقم6 : 

<!--RELATED-POSTS-STARTS--><b:if cond='data:blog.pageType == &quot;item&quot;'>

<div id='related-posts'>

<font face='Arial' size='3'><b>مواضيع ذات صلة: </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>

<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font>

<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();

</script></div></b:if><!--RELATED-POSTS-STOPS-->

 

8 - قم بعمل حفظ للقالب . ومبرووووك ،،،،

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

Read More

كيف تقوم بتغيير مؤشر زر الماوس بمدونتك بلوجر

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

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

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

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

<br /> ]]></b:skin>

نقوم مباشرة بلصق الكود التالي قبل الكود السابق :

body, a, a:hover {cursor: url(http://cursors3.totallyfreecursors.com/thumbnails/apple-tmani.gif), progress;}<br /> 

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

يمكننا تغيير الأيقونة المتحركة والتي هي عبارة عن صورة من نوع gif من خلال الرابط التالي :

http://cursors3.totallyfreecursors.com/thumbnails/apple-tmani.gif

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

. Totally Free Cursors :

. http://cursors.funutilities.com/ : 

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

Read More

كيفية انشاء عدة فروع في كل صفحة مثل مدونتي

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

مثلا يمكننا تقسيم صفحة واحدة الى عدة فروع مثل :

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

قسم الفيديو هنا نقوم بكتابة ملخص صغير عن محتوى القسم " نفس الشىء هنا "

قسم البرامج هنا نقوم بكتابة ملخص صغير عن محتوى القسم  " نفس الشىء هنا "

قسم الترفيه هنا نقوم بكتابة ملخص صغير عن محتوى القسم  " نفس الشىء هنا "

قسم الألعاب  هنا نقوم بكتابة ملخص صغير عن محتوى القسم  " نفس الشىء هنا "

تفاصيل أكثر :

أول شىء هو يجب أن تعرف معنى صفحة ومعن رسالة على مدونة بلوجر ؟

ماذا تعني صفحة على مدونة بلوجر؟ الصفحة يمكن الوصول اليها من خلال صفحات التحرير  وهي موجودة بالأعلى أما رسالة جديدة 

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

نفترض أنني أريد انشاء عدة فروع بصفحة واحدة ماذا أفعل ؟

* أقوم بالضغط على رسالة جديدة 

* أقوم باختيار عنوان لهذه الرسالة وهو اسم القسم الذي اريد انشائه مثلا قسم "الفيس بوك" أكتب الفيس بوك بعنوان الرسالة

* ابدأ بكتابة فروع هذا القسم مثال

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

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

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

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

دعنا نكمل !

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

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

* بعدها أقوم بالذهاب الى صفحات التحرير اختار صفحة جديدة 

* أقوم بتسميتها "منوعات" على سبيل المثال ثم أقوم بتقسمها الى عدة أقسام مثل قسم الفيس بوك قسم الصور قسم الفيديو ................الخ.

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

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

Read More

43 خطأ فى تصميم مدونتك يجب أن تتجنبهم

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

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

1- يجب أن يعرف الزائر ما تقدمه المدونه فى ثوانى :

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

2- إجعل محتوى مدونتك منظما :

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

3- لا تستخدم خطوط غير مقرؤه :

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

4- لا تستخدم الخطوط الصغيره جدا :

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

5- لا تجعل روابط مدونتك تفتح فى صفحات جديده :

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

6- لا تقم بتحديد حجم صفحة المتصفح للقارىء :

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

7- لا تطلب تسجيل من الزوار إلا عند الضروره القصوى :

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

8- لا تشرك الزائر فى أى خدمات أو إشتراكات دون علمه :

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

9- لا تستخدم الفلاش :

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

10- لا تستخدم خلفيه موسيقيه على مدونتك :

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

11- لو كان من الضرورى وضع موسيقى على مدونتك إجعل الزائر هو من يبدأ بتشغيلها :

كلما جعلت الزائر هو المتحكم كلما أحب مدونتك وحافظ على زيارتها دائما.

12- لا تزحم مدونتك بالإضافات :

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

13- لا تستخدم صفحة بدائه لمدونتك :

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

14- يجب أن تضع سبل الاتصال بك على مدونتك :

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

15- إجعل الزائر يستخدم زر الرجوع للخلف :

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

16- لا تستخدم النصوص المضيئه :

إلا إذا كان زوارك من عام  1996 .... عزيزى المدون ..  إجعل النصوص عاديه جدا. فزوارك من عام 2011

17- إجعل روابطك سهله وغير معقده :

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

18- دائما إستخدم HTML لعمل العظام و إستخدم CSS لإضافة المظهر الجذاب :

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

19- تأكد من امكانية عمل بحث كامل فى كل محتوى مدونتك :

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

20- تجنب وضع القوائم المنسدله :

يجب على الزائر أن يرى كل قوائم مدونتك وأزرارها أمام عينيه كى يستطيع الوصول إليها بسهوله ويسر.

21- استخدم النصوص بدلا من الصور :

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

22- لو إستخدمت روابط لملفات PDF بى دى أف, أخبر الزائر بذلك قبل أن يضغط على الرابط :

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

23- لا تزعج الزائر بالكثير من الاختيارات فى مظهر المدونه :

عزيزى المدون .. الزائر يريد المحتوى فقدمه له بسهوله

24- لا تضع الإعلانات فى وصط التدوينه :

قد يسبب هذا مزيدا من الأرباح على المدى القصير ولكنه سيؤثر بشكل سلبى على العلاقه بينك وبين الزوار.

25- تجنب المقدمات :

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

26- لا تضع الكثير من أزرار التنقل فى مدونتك :

خير الأمور ما قل ودل .. لا تشتت الزائر بكثرة الروابط والأزرار التى تؤدى نفس الغرض. قلل وكن مفيدا قدر الإمكان.

27- لا تستخدم برنامج فرونت بيج :

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

28- تأكد من مطابقة قالب مدونتك لكل المتصفحات :

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

29- ضع عناوين للروابط :

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

30- لا تخفى توجه الرابط على المتصفح :

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

31- إجعل الروابط ظاهره :

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

32- لا تلون النصوص بدون داعى :

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

33- اجعل الروابط التى زارها الزائر من قبل بلون مختلف ومميز :

حيث أن الزائر يريد دائما ان يعرف اين هو من ضمن الروابط التى ضغط عليها فاجعلها بلون مميز قليلا لتسهل عليه معرفتها والدخول الى باقى الروابط.

34- لا تستخدم الصور المتحركه GIF على مدونتك :

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

35- استخدم دائما ALT و TITLE للصور على مدونتك :

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

36- لا تستخدم الألوان القاسيه :

فمثل هذه الألوان تسبب الصداع للزائر, لذا تجنبها واستخدم الألوان الهادئه والمريحه للعين.

37- لا تستخدم النوافذ المنبسقه :

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

38- ابتعد عن الروابط التى تحتوى على جافا سكريبت :

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

39- ضع روابط هامه فى اسفل المدونه :

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

40- لا تقدم الصفحات الشديدة الطول للزوار :

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

41- لا تجعل عرض مدونتك أكبر من عرض المتصفح :

فهو أمر مزعج .. لذا إجعل دائما عرض مدونتك ملائما لعرض المتصفح وهو غالبا ما يكون 1024 * 768 بيكسل.

42- لا تترك اخطاء لغويه أو إملائيه فى مدونتك :

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

43- لو إستخدمت رمزا للتحقق فى مدونتك فإجعله واضحا :

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

Read More

كيف تنشىء صفحتك الأولى بإستخدام لغة HTML إتش تى إم إل

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

والآن سنتعرف على أول أمر تبدأ به صفحة HTML :

<HTML>

.....................

</HTML>

ووظيفة هذا الأمر أنه يخبر المتصفح أننا سنتكلم معه بلغة HTML كى يبدأ هو فى التعامل معها.

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

صفحة HTML تكون مكونه من جزئين

1. الرأس ( HEAD ) وهو بمثابة تعريف للصفحه
2. الجسم ( BODY ) أى محتوى الصفحه

وهكذا فإن شكل الكود لصفحة HTML يكون كالتالى

<HTML>

   <HEAD>

      <TITLE>

عنوان الصفحه

      </TITLE>

   </HEAD>

   <BODY>

المحتوى الذى تريد وضعه فى الصفحه

   </BODY>

</HTML>

وهذه الصيغه لابد لك أن تحفظها عن ظهر قلب, وهى ليست بالشىء الصعب ومع تكرار التعامل بها ستحفظها أعلم ذلك.

والآن دعونا نطبق هذه الأكواد عمليا

1. إفتح Notepad جديده كى تقم بتحرير الأكواد فيها, وإنتبه أنه لابد لك من أن تكتب الأكواد بيدك ولا تقم بنسخها ولصقها فى النوت باد, وذلك حتى تحفظها بسهوله, لأنى أضع هذه الدروس لكى تتعلمها لا لكى تنسخها.
2. قم بكتابة أكواد الصفحه التى اتفقنا عليها سابقا, وقم بكتابة عنوان الصفحه اذى تريده والمحتوى النصى الذى تريد وضعه فى جسم الصفحه
3. قم بحفظ الملف ونسميه بالإسم الذى نريده, ولكن علينا أن نختار الإمتداد كالتالى ( yaso.html ) وذلك الإمتداد هو الإمتداد الخاص بلغة إتش تى إم إل.

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

وهكذا أصبح لديك صفحة إنترنت قمت أنت بتكويدها بنفسك.

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

Read More