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

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

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

الترتيب	الموضوع	التصنيف	عدد التعليقات	عدد المشاهدة
ترتيب المواضيع حسب التصنيف وعدد الزيارات والتعليقات
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