عالم نت

1- JS :

2016-11-25T12:24:00.000-08:00

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

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

أولا قبل البدء .. يجب أن تتعرف على التالى :

1- CSS : أساسيات اللغة
2- CSS : الهوية و التصنيف
3- CSS : طرق الإدخال الثلاثة

1- HTML : أساسيات اللغة
2- HTML : تابع أساسيات اللغة
3- HTML : تابع أساسيات اللغة

أهمية تركيبة الموقع أو الكود

2013-10-31T04:00:00.001-07:00

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

لماذا نولي تركيبة الموقع أو الكود هذه الأهمية ؟

حتى نحصل على موقع قادر على المنافسة ، أول شيء يجب الانتباه له هو عمل كود نضيف . مثال : يجب مراعات تسلسل ال-<tagname> حسب الاهمية ومكان التواجد .فكلمات <tr> لا يمكن استعملها إلا داخل <table>. وكلمات h3 لا يمكن كتابتها إلا بعد أن نكون قد استعملنا h1 و-h2 !!

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

من واجهة أخرى ، تعتبر التركيبة أول منطلق مخطط سيو ويطلق عليها سيو onpage.

كيف تحصل على بطاقة بنكية دولية مشحونة ب 25 دولار ؟

2013-08-07T04:17:00.001-07:00

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

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

بونير تقدم لكم الحل !

بطاقة بنكية دولية (International bank card) مشحونة ب-25 دولار في أول شحن يفوق 100 دولار و أحيانا مشحونة ب 25 دولار ب مجرد تفعيلها !! حل رائع !

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

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

http://180upload.com/ytu6ao68dbg6

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

تنويه : يتم خصم 30 دولار سنويا كمعلوم صيانة.

7- HTML : الروابط و بعض خصائصها الهامة

2013-07-28T17:11:00.002-07:00

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

سنتحدث في هذا الموضوع عن تنسيقات الروابط و بعض إستخداماتها

الرابط يستخدم الكلمة الدلالية <a> و يضاف لها السمة href و يكون كالتالى

<a href="Link">Text Or Image</a>

<a href="http://wd-n.blogspot.com">مدونة عالم نت</a>

يكون الناتج

مدونة عالم نت

إتجـــــــــــــــــــــاه الرابط

توجه الرابط أو إتجاه الرابط Target هى سمة مهمة جدا لابد من إضافتها للروابط

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

لذا من المهم إضافة هذه السمة و هى "target="_blank و هى تسمح للرابط أن يفتح في صفحة جديدة في المتصفح دون فقد الموضوع الحالى

<a href="http://wd-n.blogspot.com" target="_blank">مدونة عالم نت</a>

مدونة عالم نت

هـــــــــوية الروابط

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

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

العنصر المثال مثلا الصورة السابقة و أضفنا لها عنصر الهوية tech كالتالى

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

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

عنوان الموضوع هو http://wd-n.blogspot.com/2013/07/7-html.html فنضيف بعده مباشرة # ثم إسم الهوية

<a href="http://wd-n.blogspot.com/2013/07/7-html.html#tech">شاهد الصورة</a>

شاهد الصورة

عند الضغط على "شاهد الصورة" ينقلك إلى أعلى الصفحة حيث توجد الصورة

رابط المــــــــــــراسلة

بإستخدام خصائص و عناصر HTML يمكن إنشاء رابط المراسلة بوضع بريدك الالكترونى به

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

و من خلاله يستخدم لإرسال الرسائل لصاحب المدونة أو الموقع و يكون شكل الرابط كالتالى

<a href="mailto:someone@example.com">إتصل بنا</a>

<a href="mailto:webphantom18@gmail.com">إتصل بنا</a>

إتصل بنا

6- HTML : تنسيق النص بإستخدام HTML

2013-07-26T19:29:00.001-07:00

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

في هذا الدرس سنتحدث عن النص في html و بعض تركيباتها البسيطة

النص يأخذ العنصر <p> و يعنى paragraph و لا تنسى الكلمة الدلالية المغلقة <p/>

و للإنتقال من سطر إلى أخر سنتخدم العنصر </ br> و هو عنصر به الكلمة الدلالية البادئة و المغلقة و هى لجعل النص يبدأ من سطر جديد مثل التالى

<html>

<body>

<p>مدونة عالم نت<br />عالم نت</p>

</body>

</html>

يكون الناتج

مدونة عالم نت

عالم نت

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

تنسيق الخط

هناك عناصر لتنسيق الخط بإستخدام لغة html بالإضافة إلى أنه يمكن إستخدام المتغيرات المذكورة في درس CSS السادس و هو تنسيق الخط

عناصر html هى كالتالى

العنصر	أهميته
<b>	و هى تعنى أن الخط سميك
<strong>	و تعنى أن الخط سميك
<i>	و تعنى أن الخط مائل
<em>	و تعنى أن الخط مائل
<sub>	و تعنى أن الخط متفرع لأسفل
<sup>	و تعنى أن الخط متفرع لأعلى
<del>	و تعنى أن الخط تم حذفه بوضع خط عليه
<pre>	و تعنى أن الخط أو النص بدون تعديل يظهر كما هو بالمسافات و التشكيل

المثال

<html>

<body>

<b>مدونة عالم نت</b>

<strong>مدونة عالم نت</strong>

<i>مدونة عالم نت</i>

<em>مدونة عالم نت</em>

<p>عالم نت<sub>مدونة عالم نت</sub></p>

<p>عالم نت<sup>مدونة عالم نت</sup></p>

<del>مدونة عالم نت</del>

<pre>مدونة عا لم نت</pre>

</body>

</html>

يكون الناتج

مدونة عالم نت

مدونة عالم نت

مدونة عالم نت

مدونة عالم نت

عالم نت _{مدونة عالم نت}

عالم نت ^{مدونة عالم نت}

~~مدونة عالم نت~~

مدونة    عا لم    نت

قالب 25-PIXEL المعرب الرائع

2013-07-24T20:58:00.002-07:00

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

قالب 25 PIXEL معرب من تعريب فريق WD-N

تم تحميل النسخة الإنجليزيه للقالب من موقع urang-kurai

مع الإحتفاظ بجميع حقوق الملكية للمصممين داخل القالب

للتحميل من هنا || لمعاينة القالب من هنا

إترك تعليقا إذا أعجبك

5- HTML : العناوين و بعض التنسيقات

2013-07-23T19:47:00.002-07:00

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

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

العناوين

يعبر عن العناوين في html بإستخدام العناصر <h1> - <h2> - <h3> - <h4> - <h5> - <h6>

مدونة عالم نت

بالطبع كل عنصر يختلف عن الثانى من حيث الحجم و الأهمية

فالعنصر <h1> هو الاكثر أهمية و هو صاحب أكبر حجم في الخط

و عند كتابة العنوان الرئيسى للموقع ينبغى إستخدام <h1> له ثم العناوين التالية في الموقع <h2> ... وهكذا

لا ينبغى إستخدام هذه العناصر عند محاولة الكتابة بخط كبير أو سميك في النصوص و إنما تستخدم العناصر المخصصة لذلك مثل <p> = نص .... <b> = سميك ..... و غيرها من المتغيرات المذكورة في دروس CSS

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

الخطوط الفاصلة

يمكن الفصل بين العناصر و بعضها بإستخدام عنصر </ hr> ليعطى خطا عرضيا يفصل بين العناصر و بعضها مثل التالى

التعليقات

يمكن إضافة تعليقات في لغة html بحيث تساعد المصصم على التنقل بصورة سؤيعة بين العناصر و لمنع النسيان أو لجعل المستند أكثر فهما

هذا التعليق يتم تجاهله بواسطة المتصفح و لا يظهر أبدا في عرض الموقع

و يكون في بين <-- --!>

<html>

<head>

<h1>مدونة عالم نت</h1>

</head>

<body>

<p>عالم نت</p>

</body>

</html>

فيكون الناتج

مدونة عالم نت

عالم نت

إضافة زر أعجبنى للفيس بوك لمدونتك أو موقعك بأشكال مختلفة

2013-07-23T08:55:00.001-07:00

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

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

إضافة زر أعجبنى

و له عدة أشكال مختلفة كالتالى

الشكل الاول:

الكود

يوضع هذا الكود في صفحة html الخاصة بالمدونة أو الموقع ... مباشرة بعد <body>

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

و قم بتغيير رابط الفيس بوك في الكود الثانى https://www.facebook.com/worldnetblog برابط صفحتك

الشكل الثانى:

الكود

يوضع هذا الكود في صفحة html الخاصة بالمدونة أو الموقع ... مباشرة بعد <body>

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

و قم بتغيير رابط الفيس بوك في الكود الثانى https://www.facebook.com/worldnetblog برابط صفحتك

الشكل الثالث:

الكود

يوضع هذا الكود في صفحة html الخاصة بالمدونة أو الموقع ... مباشرة بعد <body>

و قم بتغيير رابط الفيس بوك في الكود الثانى https://www.facebook.com/worldnetblog برابط صفحتك

هاااااام جدا :

يمكنك تغيير حجم هذه الإضافات حسب رغبتك بتغيير المتغيير الموجود في الكود الثانى لكل شكل و هو "300"=data-width
, قم بتغيير الرقم 300 إلى أى حجم تريده و هو بالبيكسل px

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

إضافة سلايد شو slide show إحترافى رائع

2013-07-20T10:47:00.000-07:00

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

في هذا الموضوع سأذكر إضافة ممتازة و جيدة و هى عبارة عن سلايد شو مميز و يمكن إضافته في أى مكان تريده

السلايد شو هى كالتالى تماما

الدرس الاول لتعلم xml

سلسلة دروس xml

الدرس الثانى لتعلم xml

سلسلة دروس xml

كل ما عليك فعله هو إتباع الخطوات البسيطة التالية:

1. فى صفحة التحكم الرئيسية لمدونتك اختر اداة تخطيط "layout"

2. اختر إضافة أداه "Add a Gadget" فى المكان الذى تريد أن تضع به هذه الأداة

3. إختر أداة "HTML/JavaScrript"

4. إلصق الكود التالى فى المربع HTML الذى يظهر مباشرة ثم إضغط حفظ "Save"

يمكنك التعرف على المزيد عن كيفية إضافة الأداة من هنا

الكود :

مواصفات السلايد شو :

1. خفيف و سهل و حجمه جميل

2. يمكن تغيير حجمه حسب الرغبه و يكمن تغيير سرعته بتغير Scrolldelay="75" width - height

4. يمكن تغيير لون الخلفية إلى اللون الذى تريده bgcolor="red" و قم بتغيير red إلى اسم اللون أو الكود بإستخدام أداة أكواد الألوان من هنا

3. يمكن إضافة أعداد كبيرة لا حصر لها من المواضيع في السلايد شو

و بعد إستخدامه قم بتغيير العنوانين و الروابط و الصور بما تريد و تمت الاضافة بنجاح

7- CSS : تنسيق الروابط

2013-07-19T07:39:00.001-07:00

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

هذا الموضوع خاص بتنسيق الروابط و إضفاء مميزات خاصة لها

يمكن تنسيق الروابط أيضا باستخدام التنسيقات المذكورة في هذه الدروس السابقة

4- CSS : تصميم الموقع

5- CSS : تنسيق النص

6- CSS : تنسيق الخط

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

الرابط a:link
لون الرابط الذى تمت زيارته a:visited
لون الرابط عند وضع الماوس عليه a:hover
لون الرابط النشط a:active

و يجب أن تذكر المتغيرات السابقة الاربعة كما هى بالترتيب في ملف CSS كالمثال التالى

لدينا مثلا رابط مثل هذا

<a href="http://wd-n.blogspot.com" />

و سنضع CSS الخاص به كالتالى

a:link {color:#FFFFFF;} /* لون الرابط*/
a:visited {color:#FFFFFF;} /* لون الرابط الذى تمت زيارته*/
a:hover {color:#FFFFFF;} /* لون الرابط عند و ضع الماوس فوقه*/
a:active {color:#FFFFFF;} /* لون الرابط النشط*/

و نغير أكواد الالوان #FFFFFF إلى الالوان التى نريدها بإستخدام أكواد الالوان

و هكذا تم التنسيق بنجاح

6- CSS : تنسيق الخط بأربعة متغيرات

2013-07-18T16:39:00.001-07:00

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

في هذا الموضوع سنتحدث عن تنسيق الخط داخل لغة CSS بعدة متغيرات بسيطة جدا

هناك طرق أخرى لتنسيق الخط بإستخدام html في الدرس السادس

نوع الخط font-family
نمط الخط font-style
حجم الخط font-size
سمك الخط font-weight

أولا: نوع الخط font-family

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

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

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

عند إضافة نوع من أنواع الخطوط و كان إسم النوع أكثر من كلمة يوضع إسم النوع بين علامتى تنصيص " "

و يفصل بين كل نوع و اخر بفاصلة ,

المثال التالى لنوع الخط و يوضع قبله العنصر المختار selector أو body إذا كان للموقع أو المدونة ككل

body {font-family: "Times New Roman", serif;}

ثانيا: نمط الخط font-style

نمط الخط هو بين نمطيم

الخط العادى normal : و هو الخط العادى حتى بدون كتابة هذا المتغير يظهر الخط بالشكل العادى

الخط المائل italic : و هو الخط بالصورة المائلة كالتالى >> مدونة عالم نت

و أكواد CSS لها هى بالترتيب و يوضع قبلها العنصر المختار selector أو body إذا كان للموقع أو المدونة ككل

body {font-style: normal;}

body {font-style : italic;}

ثالثا: حجم الخط font-size

تستخدم لتحديد حجم الخط و يستخدم عدة طرق للقياس أفضلها البيكسل px

و يجب التمييز بين العنوانين التى تأخذ أحجام <h1>.....<h6> .. و التى ذكرت في أساسيات لغة HTML و الجمل العادية غير العناوين

الكود يكون كالتالى و يوضع قبله العنصر المختار selector

{font-size:10px;}

رابعا: سمك الخط font-weight

تستخدم لتحديد سماكة الخط و هى أيظا نمطين
السمك العادى normal : و هو الخط العادى حتى بدون كتابة هذا المتغير يظهر الخط بالسمك الطبيعى
السمك الأثقل bold : و هو السمك الاثقل من الطبيعى و يكون مثل .. مدونة عالم نت
و أكواد CSS لها هى بالترتيب كالتالى و يوضع قبلها العنصر المختار selector

{font-weight: normal;}

{font-weight: bold;}

كيفية اضافة اداة إتصل بنا باستخدام Google Drive

2013-07-16T18:22:00.001-07:00

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

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

في هذا الموضوع ساذكر إضافة هامة جدا لمدونات بلوجر و هى أداة إتصل بنا .. لكن سيتم هذا بإستخدام جوجل درايف Google Drive

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

الخطوات بسيطة و سهلة إن شاء الله ..

1. يجب أن يكون لديك حساب في جيميل Gmail أو في Google عامة و بعد تسجيل الدخول سنذهب الى موقع جوجل درايف Google Drive من الرابط التالى https://drive.google.com/

2. بعد الدخول الى الموقع من اليمين إختر كلمة إنشاء ثم إختر نموذج كما في الصورة التالية

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

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

5. بعد الضغط على "تم" تظهر كما في الصورة التالية

6. الان نقوم بإختيار "إضافة عنصر" و نضغط على السهم الجانبى و نختر ( نص )

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

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

9. لا تنسى أهم شئ --->> نختر من أعلى يمين الصفحة "إختيار وجهة الرد"

10. بعد ذلك تظهر نافذه نضغط على كلمة إنشاء كالتالى

11. الان .. نعود إلى https://drive.google.com/ لنجد أنه قد تكون نموذجان .. الأول : نموذج >> إتصل بنا ..... الثانى : نموذج >> إتصل بنا (الردود)

12. الان لمتابعة الردود التى تصلك إذهب إلى نموذج "إتصل بنا (الردود)"

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

5- CSS : تنسيق النص بتسعة قيم

2013-07-14T11:26:00.003-07:00

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

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

هناك طرق أخرى لتنسيق النص بإستخدام html في الدرس السادس

لون النص color
موضع النص text-align
تزيين النص text-decoration
تحويل النص text-transform
مسافة بداية النص text-indent
إتجاه النص direction
المسافة بين الحروف letter-spacing
المسافة بين السطور line-height
المسافة بين الكلمات word-spacing

هذا هو المثال الذى سنجرب عليه

<p id='main'>مدونة عالم نت</p>

أولا: لون النص color

هناك 3 طرق لإضافة لون الخط هى

إسم اللون مثل red , green , yellow .....
كود اللون مثل FFFFFF# و هى للون الأبيض .. أكواد الألوان كاملة
القيمة RGB للون مثل (255,255,255)rgb و هى للون الابيض .. أكواد الألوان كاملة

#main {

color: #FFFFFF;

background-colo: black;

}

فتكون كالتالى

مدونة عالم نت

لاحظ لقد إستخدمت لون الخلفية من الدرس السابق (تصميم الخلفية) فقط للتذكير .. بالإضافة للون الخط

ثانيا: موضع النص text-align

هذا المتغير يستخدم لضبط و ضع النص سواء أكان في اليمين right أو اليسار left أو الوسط center أو الملائم justify و هذه القيمة تستخدم لجعل الكتابة متمددة حتى تملئ السطر بالكامل ..

#main {text-align: left;}

#main {text-align: right;}

#main {text-align: center;}

#main {text-align: justify;}

ثالثا: تزيين النص text-decoration

تستخدم لتزيين النص عن طريق إستخدام الخط المستقيم سواء أكان خط فوق النص overline أو خط تحت النص underline أو خط على النص line-through .. لاحظ التالى

إذا كان CSS كالتالى

#main {text-decoration: underline;}

#main {text-decoration: line-through;}

#main {text-decoration: overline;}

فيكون الناتج كالتالى بالترتيب

مدونة عالم نت

رابعا: تحويل النص text-transform

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

#main {text-transform: uppercase;}

#main {text-transform: lowercase;}

#main {text-transform: capitalize;}

خامسا: فاصل بداية السطر text-indent

و تستخدم لوضع مسافة في بداية النص و هى كالتالى

#main {text-indent: 40px;}

و يمكنك تغيير 40 إلى أى رقم أخر حسب حجم المسافة التى تريدها

سادسا: إتجاه النص direction

وهى إتجاه النص من اليسار إلى اليمين ltr كما في اللغة الإنجليزية أو من اليمين إلى اليسار rtl كما في اللغة العربية

#main {direction: ltr;}

#main {direction: rtl;}

سابعا: المسافة بين الحروف letter-spacing

و تستخدم القيم بيكسل px و يمكن إستخدام القيم بالسالب كالتالى

#main {letter-spacing: -2px}

و يكون الناتج

مدونة عالم نت

لقد قمت بتقليل المسافة إلى 2- فقلت المسافة و يمكن زيادتها حسب الرغبة

ثامنا: المسافة بين السطور line-height

و تستخدم القيم بيكسل px أو رقم 1 أو 2 أو 3 أو .... أو نسبة مؤية 100% أو 150% أو ......

#main {line-height: 70%}

تاسعا: المسافة بين الكلمات word-spacing

و تستخدم القيمة بيكسل px كالتالى

#main {word-spacing: 10px;}

فيكون الناتج

مدونة عالم نت

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

4- CSS : تصميم خلفية الموقع بأربع متغيرات

2013-07-11T15:49:00.002-07:00

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

سنتحدث في هذا الموقع عن عدد من الأساسيات الهامة فى عملية تصميم و تركيب خلفية الموقع .. و ليس المقصود بالخلفية هى صورة الخلفية كما الحال في سطح المكتب للكمبيوتر و تغير صورة بصورة أخرى و لكن سنتحدث عن عملية التركيب الكامل لخلفية الموقع من خلال عدد من العناصر المختارة selectors و التتويجات declarations و المتغيرات properties

1. لون الخلفية background-color
2. صورة الخلفية background-image
3. تكرار الخلفية background-repeat
4. موضع الخلفية background-position

هذا هو المثال الذى سنجرب عليه المتغيرات

<p id='main'>مدونة عالم نت</p>

<p id='main2'>عالم نت</p>

أولا: لون الخلفية background-color

يستخدم هذا المتغير background-color ليحدد لون خلفية الموقع و يستخدم معه العنصر المختار حسب الجزء الذى تريد أن يظهر به اللون ...

#main {background-color: orange;}

#main2 {background-color: yellow}

فتكون كالتالى

مدونة عالم نت

عالم نت

و إذا أردت أن تجعل لون الخلفية للموقع ككل تستخدم العنصر body كالتالى

body {background-color: red;}

أما عن الالوان هناك ثلاثة طرق لكتابتها و هى

إسم اللون مثل red , green , yellow .....
كود اللون مثل FFFFFF# و هى للون الأبيض .. أكواد الألوان كاملة
القيمة RGB للون مثل (255,255,255)rgb و هى للون الابيض .. أكواد الألوان كاملة

ثانيا: صورة الخلفية background-image

و يستخدم هذا المتغير background-image ليحدد صورة معينى للخلفية يمكنك تحيد حجمها مسبقا و وضعها خلفيه للموقع أو جعل الصورة متكررة حتى تغطى سطح الموقع بالكامل

و تستخدم كالتالى

#main {background-image: url('image.png');}

و تستبدل image.png برابط الصورة

#main {background-image: url(http://hitskin.com/themes/18/90/15/i_background.png);}

فتكون كالتالى

مدونة عالم نت

عالم نت

إذا أردنا أن نجعل الصورة خلفية للموقع ككل و ليس جزءا محددا نستخدم

body {background-image: url('image.png');}

ثالثا: تكرار الخلفية background-repeat

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

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

لذا نستخدم repeat-x للتكرار الأفقى , و نستخدم repeat-y للتكرار الرأسى

و تكون كالتالى و توضع ضمن العنصر المختار كما ذكرنا سابقا

{background-repeat: repeat-x;}

{background-repeat: repeat-y;}

رابعا: موضع الخلفية background-position

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

{background-position: right top;}

و يتم تغير right top حسب الموضع الذى تريده

و هى غالبا تستخدم معها القيمة background-repeat في صورة no-repeat لمنع تكرار الصورة .(حيث أن عملية التكرار تلقائية) لذلك تستخدم لمنع التكرار

{background-repeat: no-repeat;}

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

{background:#ffffff url('image.png') no-repeat right top;}

و يوضع قبله العنصر المختار

3- CSS : طرق الإدخال الثلاثة

2013-07-09T18:13:00.000-07:00

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

عند كتابة ملفات CSS هناك ثلاثة طرق للكتابة تستخدم لكتابة هذه الملفات هى كالتالى :

1. التركيب الخارجى External style sheet
2. التركيب الداخلى Internal style sheet
3. التركيب المتداخل Inline style

1. التركيب الخارجى External style sheet

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

و يتم إدراج هذا الملف فى HTML الخاص بالموقع بين العنصر <head> و بين <head/> كالتالى :

و يتم إستبدال mystyle.css برابط الملف الذى تم رفعه على الإنترنت

لاحظ أن الملف يتم إنشائه بصورة طبيعية مثل الموضوعين السابقين

الدرس الأول CSS : أساسيات اللغة

الدرس الثانى CSS : الهوية و التصنيف

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

2. التركيب الداخلى Internal style sheet

هذا التركيب هو غالبا الأكثر إستخداما فى قوالب مدونات بلوجر و فى بعض المواقع الأخرى و يت إدراجه مباشرة فى HTML الخاص بالموقع بين العنصر <head> و بين <head/> ... و لكن يتم إدارجهم مع عنصر خاص هو <style>

إذا كان لدين العنصر التالى

<p id='main'>مدونة عالم نت</p>

يكون CSS الخاص به كالتالى

#main {

     color: red;
     text-align: left;
     background: yellow;

}
< /style>
< /head>

يكون الشكل النهائى :

مدونة عالم نت

3. التركيب المتداخل Inline style

و فى هذه الطريقة يتم إستخدام ال CSS كسمة أو صفة فى العنصر مباشرة كالتالى

<p style="color:red;text-align:left;background:yellow;">مدونة عالم نت</p>

فتكون كالتالى

مدونة عالم نت

لكن السؤال هل يمكن و ضع ملف CSS للموقع ككل مع وضع بعض الاستثناءات داخل الصفحات ؟

نعم يمكن ذلك ... فى لغة CSS تكون الأولوية للتركيب الداخلى Internal style و المتداخل Inline style

لاحظ التالى :

إذا كان العنصر كالتالى

<p id='main'>مدونة عالم نت</p>

و كان التركيب الخارجى External style sheet كالتالى

#main {

color: red;

text-align: right;

background: black;

}

و كان التركيب الداخلى Internal style sheet كالتالى

#main {

text-align: left;

backgroound: yellow;

}

فيكون الناتج كالتالى

مدونة عالم نت

لاحظ : تم إستخدام color: red; من التركيب الخارجى

و تم إستخدام backgroound: yellow; و text-align: left; من التركيب الخارجى على الرغم من وجود مثل هذه الخواص فى التركيب الخارجى الإ أن الأولوية تكون دائما للتركيب الداخلى

2- CSS : الهوية و التصنيف

2013-07-08T13:58:00.001-07:00

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

سنتحدث عن مجموعة من المحتويات الهامة فى تنسيق و تنظيم اللغة أثناء إستخدامها

الهوية id ما هى ؟؟

هى عبارة عن إسم يتم إختياره للعناصر و يكون لكل عنصر اسم هوية id خاص به لا يمكن أن يتكرر .. و اسم الهوية هو Selector

واسم الهوية يتم إدراجه فى لغة HTML / XML كصفة أو سمة .. لاحظ المثال التالى

لدينا عنصر HTML كالتالى

<p id="main">مدونة عالم نت</p>

لاحظت أنه تم وضع اسم الهوية id فى صورة سمة ..( للتعرف على السمات راجع الدرس الرابع HTML : السمات أو Attributes )

لعمل ملف CSS الخاص به نسنخدم اسم الهوية id كالتالى و يوضع قبله علامة #

#main {

color: red ;

text-align: left;

background: yellow;

}

فيكون الناتج كالتالى

مدونة عالم نت

ماذا إن كان لدينا مجموعة من العناصر نريد أن نجعل لها نفس ملف CSS .. بحيث لا يمكن أن يتكرر اسم الهوية id أبدا .

فلكل نصر يكون اسم هوية id يختلف عن الاخرين ..

لذلك هناك مايسمى بالتصنيف أو Class

ماهو التصنيف Class ؟؟

هى تماما تشبه اسم الهوية id لكنها تكون لمجموعة من العناصر و تسمى Class و توضع قبله نقطة .

لاحظ المثال التالى

<p class="main">مدونة عالم نت</p>

<p class="main">عالم نت</p>

يكون ملف CSS الخاص به كالتالى

.main {

color: red;

text-align: left;

}

تكون كالتالى

مدونة عالم نت

عالم نت

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

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

هذا مثال يجمع اسم الهوية id و المجموعة class معا

<p class="main" id="main2>مدونة عالم نت</p>

<p class="main" id="main3">عالم نت</p>

ملف CSS الخاص به :

.main {color: red; text-align: left;}

#main2 {background: yellow;}

#main3 {background: green;}

الناتج يكون :>>

مدونة عالم نت

عالم نت

1- CSS : أساسيات اللغة

2013-07-08T04:51:00.001-07:00

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

سنتحدث فى هذه المجموعة عن لغة CSS و هى من أهم الأجزاء فى إنشاء المواقع مع لغة HTML / XML

أولا: عليك أن تتعرف على أساسيات لغة HTML / XML من الدروس التالية

HTML :

الدرس الأول HTML : أساسيات اللغة

الدرس الثانى HTML : تابع أساسيات اللغة

الدرس الثالث HTML : تابع أساسيات لغة

XML :

الدرس الأول XML : أساسيات اللغة

الدرس الثانى XML : تابع أساسيات اللغة

ثانيا: نبدأ شرح درس اللغة فى مجموعة من الدروس المتتالية

ما هى لغة CSS ؟؟

هى تعنى Cascading Style Sheets النمط الورقى المتسلسل و تعنى كيفية عرض عناصر لغة HTML و تمت إضافتها لغة HTML لحل العديد من المشكلات الخاصة بطريقة العرض

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

تنسيق لغة CSS :

تتكون اللغة من جزئيين أساسين هما العنصر المتخار selector و التتويج declaration
selector : و هى العنصر المتخار الذى سنضع له معلومات العرض الخاصة به
declaration : وهى معلومات العرض للعنصر و تتكون من جزئيين property و هى المتغيير (إنظر الامثلة) و تتكون من value و هى القيمة للمتغيير (إنظر الامثلة) .. إذا كان لدينا مقطع كالتالى

<p>مدونة عالم نت</p>

فيكون ملف CSS كالتالى و يمكن أن يكتب بطريقتين

p {color: red; text-align: left;}

أو

p {

color: red;

text align: left;

}

لاحظ color هى لون النص و text-align هى موضع النص

فتكون الناتج كالتالى

مدونة عالم نت

من مميزات اللغة أنه يمكنك أن تضع تعليقات خلالها لتساعدك عند محاولة تعديلها حتى لا تنسى أو لمساعدة غيرك أو للشرح و التوضيح و هى لا تظهر فى عملية العرض خلال الموقع و توضع هذه التعليقات بين العلامتين /* */ ... لاحظ

/*هذا نص*/

p {

color: red; /*هذا اللون*/

text align: left; /*هذا موضع النص*/

}

و الناتج تماما كما هو لا يتغير فيكون

مدونة عالم نت

كيفية إضافة أداه أو Gadget فى مدونات بلوجر ؟

2013-06-28T21:06:00.000-07:00

طريقة إضافة أداة أو Gadget فى مدونات بلوجر

كل ما عليك فعله هو إتباع الخطوات البسيطة التالية:

1. فى صفحة التحكم الرئيسية لمدونتك اختر اداة تخطيط "layout"

2. اختر إضافة أداه "Add a Gadget" فى المكان الذى تريده

3. إختر أداة "HTML/JavaScrript"

4. إلصق كود الأداة فى مربع HTML الذى يظهر مباشرة ثم إضغط حفظ "Save"

إنتهت الإضافة بنجاح

خريطة للمدونة من أجمل الخرائط

2013-06-28T20:56:00.002-07:00

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

فى هذا الموضوع سأذكر أفضل كود لإنشاء خريطة للمدونة أو أقسام و تستخدمها كما تشاء

هناك طريقتان لعرضها :

الأولى : على اليمين فى الصورة عندما يكون العمود الجانبى للمدونة عريضا حوالى 330 إلى 360 بيكسل

الثانية: على اليسار فى الصورة عندما يكون العمود الجانبى للمدونة ضيق نسبيا حوالى 140 إلى 180 بيكسل

لمعاينة هذه الأداة من هنا

كل ما عليك فعله هو إتباع الخطوات البسيطة التالية:

1. فى صفحة التحكم الرئيسية لمدونتك اختر اداة تخطيط "layout"

2. اختر إضافة أداه "Add a Gadget" فى المكان الذى تريد أن تضع به هذه الأداة

3. إختر أداة "HTML/JavaScrript"

4. إلصق الكود التالى فى المربع HTML الذى يظهر مباشرة ثم إضغط حفظ "Save"

يمكنك التعرف على المزيد عن كيفية إضافة الأداة من هنا

الكود:

<div id="container">
 <ul class="nav">
<li>
   <div class="nested">
    <a href="#"target="_blank">قسم 1</a>
    <ul>
<li><a href="#"target="_blank">تعديل 1</a></li>
<li><a href="#"target="_blank">تعديل 2</a></li>
<li><a href="#"target="_blank">تعديل 3</a></li>
<li><a href="#"target="_blank">تعديل 4</a></li>
</ul>
</div>
</li>
<li>
   <div class="turqoise-white nested">
    <a href="#"target="_blank">قسم 2</a>
    <ul>
<li><a href="#"target="_blank">تعديل 1</a></li>
<li><a href="#"target="_blank">تعديل 2</a></li>
<li><a href="#"target="_blank">تعديل 3</a></li>
<li><a href="#"target="_blank">تعديل 4</a></li>
</ul>
</div>
</li>
</ul>
<br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />

<ul class="nav">
<li>
   <div class="red-white nested">
    <a href="#"target="_blank">قسم 3</a>
    <ul>
<li><a href="#"target="_blank">تعديل 1</a></li>
<li><a href="#"target="_blank">تعديل 2</a></li>
<li><a href="#"target="_blank">تعديل 3</a></li>
<li><a href="#"target="_blank">تعديل 4</a></li>
</ul>
</div>
</li>
<li>
   <div class="ye-white nested">
    <a href="#"target="_blank">قسم 4</a>
    <ul>
<li><a href="#"target="_blank">تعديل 1</a></li>
<li><a href="#"target="_blank">تعديل 2</a></li>
<li><a href="#"target="_blank">تعديل 3</a></li>
<li><a href="#"target="_blank">تعديل 4</a></li>
</ul>
</div>
</li>
</ul>
</div>
<br>

لاحظ أنه عليك تغير كلمات "قسم" و "تعديل" بما تريد و ضع الرابط مكان العلامة #

3- XML : الصلاحية

2013-06-28T18:47:00.002-07:00

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

سنتحدث في هذا الموضوع عن أشياء مهمة و خفيفة

طريقة إختيار العنصر : مثل <Price>

لا يجب أن يكون هناك مسافات فاصلة في لبعنصر إذا كان أكثر من كلمة مثل <bookprice> و يفضل أن تضع علامة "_ " فتكون <book_price> هكذا أفضل أما <book price> خطأ خطأ
يمكنك أن تستخدم الحروف و الأرقام و غيرها من بعض العلامات
لا يجب أن يبدأ العنصر بكلمة XML

هذه اللغة تستخدم أيضا السمات أو Attributes و التى تستخدمها لغة HTML
عليك أن تعرف جيدا أن السمات لا تحمل معلومات بل إنها توضح طرق العرض أى أنها لا تعبر من لغة XML
للتعرف على السمات أو Attributes من لغة HTML من هنا

صلاحية لغة XML :

كيف يكو ن المستند المكتوب بهذه اللغة صحيحا هناك أمرين هامين هما ... التركيب الجيد و الصلاحية ( validation)

التركيب الجيد و هى الخصائص المذكورة فى الدرس الثانى

أما الصلاحية ... فهى أن المستند له تركيب جيد و مطابق لقواعد تعريف الميستند فيما يسمى DTD أو Document Type Definition

و تكون فى هذه الصورة <!DOCTYPE note SYSTEM "note.dtd"> و توضع بعد إصدار لغة XML و هى لتحديد بناء مستند XML

<?xml version="1.0" encoding="‘UTF-8"?>

<!DOCTYPE note SYSTEM "note.dtd">

<note>

<subject/>بيع هاتف<subject>

<description/>الهاتف مزود بكاميرا و شريحتين و .... <description>

<price>150</price>
<note/>

فيكون معنى المثال السابق

<!DOCTYPE note

[

<!ELEMENT note (subject,description,price)>

<!ELEMENT subject (#PCDATA)>

<!ELEMENT description (#PCDATA)>

<!ELEMENT price (#PCDATA)>

أى أن subject , description , price هى عبارة عن معلومات PCDATA# و هذه المعلومات نختصرها كلها فقط بإستخدام <!DOCTYPE note SYSTEM "note.dtd">

الأخطاء فى لغة XML غير مقبولة:

إذا كان هناك أخطاء فى مستند XML فإن المستند لن يعمل لأنه مصصم على أن يكون سريعا و صغيرا و متوافقا

و ذلك بعكس لغة HTML فإذا كان هناك أخطاء لا مشكلة سيعمل المستند و لكن ستظهر أخطاء فى طريقة العرض

4- HTML : السمات أو Attributes

2013-06-27T17:35:00.000-07:00

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

فى هذا الدرس سنتحدث عما يسمى بالسمات أو Attributes

ماهى السمات ؟؟

هى عبارة عن بعض الإضافات و التى نضيفها لعناصر اللغة و هذه السمات Attributes تعطى معلومة إضافة لزيادة التوضيح فى طريقة العرض أو التنسيق فيما بينها

و هذه السمات Attributes تكون فى بداية العنصر .. بصورة أدق تكون فى الكلمة الدلالية البادئة و تكون فى هذه الصورة

name="value"

حيث أن Name تتغير طبقا للسمة التى سنضعها و Value هى قيمة السمة و هى مختلفة مثلا فى المثال التالى

<a href="http://wd-n.blogspot.com">wd-n</a>

نلاحظ أن السمة جاءت فى الكلمة الدلالية البادئة <a> ..... أما href هى اسم السمة و هى سمة للروابط و الموضوع بين " " هو الرابط أو قيمة السمة فتظهر هكذا wd-n

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

<a id='3alem net "wd-n" blog'></a>

هنا كلمة wd-n وضعت بين علامتى تنصيص لأننا نريدها فى القيمة لذا إستخدمنا العلامات المفردة ' ' فى بداية و نهاية القيمة

بعض أهم السمات المستخدمة :

class	و هى تعطى فقط تصنيف للعناصر بحيث يصبح لكا عنصر صنف ينتمى له مثلا صنف الرسائل أو صنف التعليقات
id	و تعطى لكل عنصر اسم هوية خاص به و كل عنصر يوضع له اسم مختلف عن الأخرين
style	و هى تحدد معلوات عن شكل و طريقة العرض فيما يعرف ب لغة CSS و سيتم شرحها لاحقا بإذن الله
title	و هى تعطى معلومات إضافيه للعنصر

قالب MXfluity المعرب

2013-06-26T22:32:00.000-07:00

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

قالب MXfluity معرب من تعريب فريق WD-N

تم تحميل النسخة الإنجليزيه للقالب من موقع B Template

مع الإحتفاظ بجميع حقوق الملكية للمصممين داخل القالب

التحميل من هنا || المعاينة من هنا

ضع تعليقا إذا أعجبك حتى نستمر

قالب SkyBlue المعرب

2013-06-26T11:54:00.001-07:00

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

قالب Johny Joss Banget معرب من تعريب فريق WD-N

تم تحميل النسخة الإنجليزيه للقالب من موقع B Template

مع الإحتفاظ بجميع حقوق الملكية للمصممين داخل القالب

التحميل من هنا || المعاينة من هنا

ضع تعليقا إذا أعجبك حتى نستمر

قالب قالب Johny Joss Banget المعرب

2013-06-25T16:39:00.001-07:00

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

قالب Johny Joss Banget معرب من تعريب فريق WD-N

تم تحميل النسخة الإنجليزيه للقالب من موقع blogger templates

مع الإحتفاظ بجميع حقوق الملكية للمصممين داخل القالب

التحميل من هنا || المعاينة من هنا

ضع تعليقا إذا أعجبك حتى نستمر

إضافة مواقع التواصل الإجتماعى

2013-06-23T22:21:00.002-07:00

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

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

و هى إضافة مواقع التواصل الإجتماعى

كل ما عليك فعله هو إتباع الخطوات البسيطة التالية:

1. فى صفحة التحكم الرئيسية لمدونتك اختر اداة تخطيط "layout"

2. اختر إضافة أداه "Add a Gadget" فى المكان الذى تريد أن تضع به مواقع التواصل الإجتماعى

3. إختر أداة "HTML/JavaScrript"

4. إلصق الكود التالى فى المربع HTML الذى يظهر مباشرة ثم إضغط حفظ "Save"

يمكنك التعرف على المزيد عن كيفية إضافة الأداة من هنا

الكود:

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