إبداعاتى

الثلاثاء، 15 يناير 2013

طريقة إستخدام الألوان والخلفيات بالـ css شرح مفصل

7:30 م Hady store 2 تعليقات

تعلم معنا فى هذة التدوينة عن طريقة تفعيل خاصية الـ color فى موقعك أو قالبك وطريقة

إستخدامها بالـ css

لون المقدمة: خاصية 'color'

خاصية color تصف لون عنصر HTML.

فمثلاً تصور أنك تريد أن تكون كل العناوين في الصفحة ملونة بلون أحمر داكن، كل العناوين رمزت باستخدام وسم <h1>، المثال أدناه سيقوم بتوضيح كيفية تحويل كل <h1> إلى اللون الأحمر:

 
 h1 {
  color: #ff0000;
 }

الألوان يمكن أن تحدد باستخدام نظام الأرقام الست عشري كما في المثال أعلاه، أو بأن تختار اسم اللون "red"، أو من خلال قيمة RGB والتي تعني Red وGreen وBlue، مثال: (rgb(255,0,0)).

خاصية 'background-color'

خاصية background-color تحدد لون خلفية أي عنصر.

العنصر <body> يضم كل محتويات وثيقة HTML، لذلك لتغيير خلفية الصفحة بأكملها يجب أن نفعل خاصية background-color على العنصر <body>.

يمكنك أيضاً تفعيل خاصية لون الخلفية على عناصر أخرى مثل العناوين والنصوص، في المثال أدناه قمنا باختيار ألوان خلفية لعنصري <body> و <h1>.

 
 body {
  background-color: #FFCC66;
 }

 h1 {
  color: #990000;
  background-color: #FC9804;
 }

لاحظ أننا قمنا بتفعيل خاصيتين للعنصر <h1> وقمنا بالفصل بين الخاصيتين باستخدام فاصلة منقوطة.

الصورة كخلفية "background-image"

خاصية background-image تستخدم لوضع صورة كخلفية لأي عنصر.

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

لإدخال صورة الفراشة كخلفية للصفحة قم بتفعيل خاصية background-image للعنصر <body> وحدد مسار الصورة:

 
 body {
  background-color: #FFCC66;
  background-image: url("butterfly.gif");
 }

 h1 {
  color: #990000;
  background-color: #FC9804;
 }

انتبه: لاحظ كيف حددنا مسار الصورة بهذا الشكل url("butterfly.gif")، هذا يعني أن الصورة وضعت في نفس المجلد مع ملف التصميم، يمكنك أن تحدد مسار الصور في مجلدات أخرى باستخدام url("../images/butterfly.gif") أو حتى العنوان الكامل للملف: url("http://www.do-by.blogspot.com.net/butterfly.gif").

تكرار صورة الخلفية "background-repeat"

هل لاحظت في المثال أعلاه أن صورة الفراشة تتكرر رأسياً وأفقياً لتغطي كامل الصفحة؟ الخاصية background-repeat تتحكم بتكرار الصورة.

في الجدول أدناه ملخص لأربع قيم يمكن أن تضعها للخاصية background-repeat.

القيمة	الوصف
`Background-repeat: repeat-x`	الصورة ستتكرر أفقياً
`background-repeat: repeat-y`	الصورة ستتكرر عمودياً
`background-repeat: repeat`	الصورة ستتكرر أفقياً وعمودياً
`background-repeat: no-repeat`	لن تتكرر بأي شكل

مثلاً لتجنب تكرار صورة الخلفية يجب أن تكتب الأوامر بهذا الشكل::

 
 body {
  background-color: #FFCC66;
  background-image: url("butterfly.gif");
  background-repeat: no-repeat;
 }

 h1 {
  color: #990000;
  background-color: #FC9804;
 }

تثبيت صورة الخلفية "background-attachment"

الخاصية background-attachment تحدد ما إذا كانت صورة الخلفية ثابتة أو متحركة مع محتويات العنصر.

الصورة الثابتة لن تتحرك مع النص عندما يقوم القارئ بتحريك الصفحة، بينما الصورة المتحركة ستتحرك مع الصفحة بمحتوياتها.

في الجدول أدناه ملخص للقيم التي يمكنك وضعها لخاصية background-attachment، شاهد الأمثلة ولاحظ الاختلاف بين الصورة الثابتة والمتحركة.

القيمة	الوصف
`Background-attachment: scroll`	الصورة ستتحرك مع الصفحة
`Background-attachment: fixed`	الصورة ستبقى ثابتة

المثال ادناه يبين كيفية اختيار القيمة المناسبة لتثبيت صورة الخلفية:

 
 body {
  background-color: #FFCC66;
  background-image: url("butterfly.gif");
  background-repeat: no-repeat;
  background-attachment: fixed;
 }

 h1 {
  color: #990000;
  background-color: #FC9804;
 }

مكان صورة الخلفية "background-position"

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

هناك طرق مختلفة لتحديد قيمة background-position، لكن كلها تنظم على نسق واحد، فمثلاً القيمة '100px 200px' تضع الصورة الخلفية على بعد 100 بكسل من يسار نافذة المتصفح و200 بكسل من أعلى نافذة المتصفح.

هذا النسق يمكن تحديده أيضاً بالنسبة المؤية من عرض الشاشة وكذلك مقاييس محددة مثل البكسل والسنتيميتر، أو من خلال استخدام كلمات مثل top وbottom وcenter وleft وright.

الجدول أدناه يوضح بالمزيد من الأمثلة

القيمة	الوصف
`background-position: 2cm 2cm`	هذه الصورة وضعت على بعد 2 سنتم من يسار الشاشة و2 سنتم من أعلى الشاشة
`background-position: 50% 25%`	هذه الصورة وضعت في منتصف المسافة من يسار الشاشة وربع المسافة من أعلى الشاشة
`background-position: top right`	هذه الصورة وضعت في أعلى يمين الصفحة

المثال أدناه يوضح كيفية وضع صورة الخلفية في أعلى يمين الشاشة:

 
 body {
  background-color: #FFCC66;
  background-image: url("butterfly.gif");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: right bottom;
 }

 h1 {
  color: #990000;
  background-color: #FC9804;
 }

جمع كل الخصائص "background"

الخاصية background هي اختصار لكل خصائص خلفية العناصر التي قرأتها في هذا الدرس.

باستخدام background يمكنك جمع عدة خصائص وبالتالي تقليل عدد الأسطر التي تكتبها في ملف التصميم وهذا يجعل الملف أسهل للقراءة.

فمثلاً يمكن اختصار هذه الأسطر:

 
 background-color: #FFCC66;
 background-image: url("butterfly.gif");
 background-repeat: no-repeat;
 background-attachment: fixed;
 background-position: right bottom;

باستخدام background يمكن تحقيق نفس النتيجة باستخدام سطر واحد فقط:

 
 background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom;

القائمة ترتب بهذا الشكل - من اليسار إلى اليمين:

background-color | background-image | background-repeat | background-attachment | background-position

إذا لم تكتب خاصية ما سيقوم المتصفح بوضع القيمة التلقائية لهذه الخاصية، فمثلاً لم نضع الخاصية background-attachment وbackground-position في المثال:

 
 background: #FFCC66 url("butterfly.gif") no-repeat;

الخاصيتين لم تحددا وسيقوم المتصفح بوضع القيمة التلقائية لهما والقيم هي كما تعرف scroll وtop left.

اقرء المزيد

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

10:20 ص Hady store لا يوجد تعليقات

.:| بـسـم الله الرحـمـن الرحـيـم |:.

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

.......

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

شرح فيديو

اقرء المزيد

الاثنين، 14 يناير 2013

شرح التعامل مع الـ class و id

8:17 م Hady store لا يوجد تعليقات

id : هو معرّف يتم تحديدة ويمكن أن يندرج تحته عنده فئات ، ويعرّف بوضع علامة [ # ] قبله ويمكن أن يوضع له أى اسم ، ويتم تطبيقه على عنصر واحد فقط داخل الصفحه.

class : يمكن أن تتكرر أكثر من مرة بنفس الصفحة على عكس المعرّفات id ، وتعرّف بوضع نقطه [ . ] قبلها ويمكن أن تضع لها أي إسم. متال للتوضيح أكتر :

#do-by {
 background-color: #15g5d;
 padding: 5px;
}
.blogger {
 color: red;
 font-size: 16px;
}

الفئات class

يوضع بالصيغه التالية داخل أوسمة html المختلفة

<p class="you">الفئات يمكن تتكررها بنفس الصفحة</p>

تابع معى المثال التالي متعدد الفقرات..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="rtl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS الأنماط الإنسابية</title>

<style type="text/css">
<!--
p.blue { color:blue; }
-->
</style>

</head>
<body>

<h1 class="blue">فوائد إستخدام الأنماط الإنسابية</h1>
<p class="blue">فصل محتويات الموقع عن التصميم ، والتحكم بجميع الصفحات من خلال ملف واحد</p>
<p class="blue">ضمان ظهور الموقع بشكل واحد على كافة المتصفحات والأجهزة أخرى</p>
<p>إضافة مزيد من الأحترافية والسهولة لتصميم المواقع</p>

</body>
</html>

المعرّفات id

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="rtl"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS الأنماط الإنسابية</title> <style type="text/css">
 </style>
</head>
<body>
<h1 id="red">شروحات أساسيات اللغه من مدون</h1>
<p class="blue">فصل محتويات الموقع عن التصميم ، والتحكم بجميع الصفحات من خلال ملف واحد</p>
<p class="blue">ضمان ظهور الموقع بشكل واحد على كافة المتصفحات والأجهزة أخرى</p>
<p>إضافة مزيد من الأحترافية والسهولة لتصميم المواقع</p>
</body>
</html>

أتمنى إنى أكود قد أفدتكم

اقرء المزيد

الأحد، 13 يناير 2013

ما هى css وطريقة إستخدامها شرح مفصل

9:23 ص Hady store لا يوجد تعليقات

تعلم معنا كيف يتم إستخدام css وكيف تعدل عليها شرح مفصل لمدونة مدون

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

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

وتعال نتخيل سوياً على أنك قبلت تنفيذ موقع متوسط الحجم لأحد العملاء ، و بطبيعة الحال تحتاج لبرمجة ما يزيد عن العشر صفحات ـ وفرضاً أيضاً أنك انتهيت من الموقع بعد عمل متواصل ـ وعرضت الموقع على العميل وتعتقد أنه أصبح جاهز للاستخدام الآن . ماذا لو فاجأك العميل بطلب تغيير حجم الخط من القيمة "2" إلى القيمة "3" مثلاً هل ستضطر لفتح كل صفحة و التعديل في كل فقرة من فقراتها لتغير هذه القيمة!...

ماذا لو كان الموقع مكوناً من 50 صفحة ؟!
و ماذا لو كان يعمل على المشروع أكثر من شخص بشكل منفصل ؟

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

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

فوائد إستخدام تقنية CSS

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

كيف يتعرف متصفح الإنترنت على هذه التقنية ؟

1- Browser Defaults..في الحقيقة إننا نستخدم نوعاً من أنواع الأنماط الانسيابية في صفحاتنا دون أن ندري . و لنأخذ هذا المثال:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
هذا الوسم يستخدم لتسمية الصفحة
<title>عنوان الصفحة</title>
</head>
<body>

<p>تقنية تتهتم بتحديد شكل وتصميم المواقع</p>

</body>
</html>

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

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

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

طرق تعريف CSS داخل الصفحات

2- External ملف منفصل بإمتداد css تسمية بإي أسم يحتوى على كافة تنسيقات الموقع ومن ثم تربط به جميع صفحات الموقع كما في المثال التالي:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>عنوان الصفحة</title>

<link href="css/style.css" rel="stylesheet" type="text/css" />

</head>
<body>

<p>تقنية تتهتم بتحديد شكل وتصميم المواقع</p>

</body>
</html>

الوسم <link /> يكتب فيه مسار ملف css سواء كان بمجلد خاص أو بنفس مكان الصفحات ومن ثم يوضع الكود بالكامل برأس كل الصفحات بين الوسم <head>

<link href="css/style.css" rel="stylesheet" type="text/css" />

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

.me {
 color: #FFFFFF;
 background-color: #333;
 border: 2px solid #666;
 font-family: Tahoma;
 width: 100px;
}
p.you {
 color: #EAEAEA;
 background-color: #333;
 border: 2px solid #666;
 font-family: Tahoma;
 width: 50px;
}

3- Internal فيها يتم إضافة جميع قيم css برأس الصفحه بين وسمين <style> لتعريفهم على المتصفح ومن ثم توضع ايضا داخل برأس الصفحة بين الوسم <head> كما في الحالة السابقة ومنه تطبق هذه الأوامر على جميع فقرات الصفحه.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>عنوان الصفحة</title>

<style type="text/css">
<!--
p.you {
 color: #FFFFFF;
 background-color: #333;
 border: 2px solid #666;
 font-family: Tahoma;
 width: 100px;
}
-->
</style>

</head>
<body>

<p>تقنية تتهتم بتحديد شكل وتصميم المواقع</p>

</body>
</html>

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

<style type="text/css">

CSS styles here

</style>

المتصفحات القديمة لا تفهم الوسم style ولا تدعم تقنيه CSS لذا فهى عادة تتجاهلة وتعرض مابين هذا الوسم من أوامر على أنه محتوى ضمن الصفحة! ولتفادى هذه العملية في تلك المتصفحات التعيسة نقوم بوضع جميع أوامر css داخل تعليق comment element حتى إن حدث لا قدر الله وظهر موقعك لأحد مستخدمي هذه المتصفحات لا تظهر له الأوامر كمحتويات بالصفحة.

<style type="text/css">
<!--

CSS styles here

-->
</style>

4- in-line وفيها تطبق أوامر الـ css مباشرة داخل اوسمه html كما بالمثال التالي:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit

ional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>عنوان الصفحة</title>
</head>
<body>

<p style="font:normal 12px Tahoma; color:#FF0000; background:#FFDDFF;">تقنية

تتهتم بتحديد شكل وتصميم المواقع</p>

</body>
</html>

المصدر|html free code

اقرء المزيد

الخميس، 10 يناير 2013

كود المتابعه على المواقع الاجتماعيه بشكل وتاثير إحترافى

4:04 م Hady store 3 تعليقات

اهلا بكم فى العاده نحن نقوم بوضع كل ما هو جديد ومفيد لك

هذه التدوينة أيضا هى حصرية ولن تجد هذة الإضافة إلا هنا فقط فى مدونة مدون

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

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

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

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

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

--------------------------------------------------------------------

إذهب إلى رئيسية بلوجر<إضافة اداه<جافاسكريبت وضع بها الكود التالى

<html>
<head>
<style>
#social {
margin:5px auto 0 auto;
text-align: center;
}

#social img {
margin-right: 2px;
margin-left: 0px;
}

#social img:hover {
opacity: 0.6;
}
</style>
</head>
<body>


<div id='social'>
<a href='#'><img alt='Twitter' src='http://img221.imageshack.us/img221/3171/twittericont.png' title='تابعنى على تويتر'/></a>
<a href='#'><img alt='Feed' src='http://img521.imageshack.us/img521/3997/rssiconldl.png' title='الخلاصات'/></a>
<a href='#'><img alt='Facebook' src='http://img707.imageshack.us/img707/5055/facebookiconq.png' title='تابعنى على الفيس بوك'/></a>
<a href='#'><img alt='Google Plus' src='http://img9.imageshack.us/img9/6204/googleplusiconl.png' title='جوجل بلس'/></a>
<a href='#'><img alt='Youtube' src='http://img835.imageshack.us/img835/1835/youtubeiconf.png' title='تابعنى على يوتيوب'/></a>

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


</body>
</html>

الآن قم بتغيير اللون مع الوصلات الخاصة بك

فى رعاية الله

اقرء المزيد

السبت، 5 يناير 2013

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

4:53 م Hady store 3 تعليقات

كثيرا ما اجد من يسئل عن طريقة تغيير اتجاه الاعمدة وهية امر سهل جداً نعم سهل جداً

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

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

أنت الآن تسطيع أن تفعل هذا بدون أن تطلب من أحد يوجد ايضا كثيراً من المدونين

لا يهمهم أن يعرفون ولكن هذا خطا لانهم يظنون ان هذا صعب فقط مع هذا الشرح البسيط

المقدم من مدونة مدون تسطيع تغير اتجاه الاعمده فى بلوجر.

طريقة تبديل اتجاه العامود من اليمين الى اليسار

ابحث عن الكود التالى

main-wrapper

ربما تجده بهذا الشكل أو ما شابه قليلا

#main-wrapper {
float: left;
margin-left: 40px;
margin-top: -20px;
width: 600px;
}

قم بتغيير كلمة left بكلمة right

ابحث عن الكود التالى

sidebar-wrapper

قد تجده بهذا الشكل

sidebar-wrapper {
float: left;
margin-left: 18px;
margin-top: 7px;
width: 287px;
}

قم بتغيير كلمة left بكلمة right

طريقة تبديل اتجاه العامود من اليسارالى اليمين

ابحث عن الكود التالى

main-wrapper

قد تجده بهذا الشكل

#main-wrapper {
float: right;
margin-right: 40px;
margin-top: -20px;
width: 600px;
}

قم بتغيير كلمة right بكلمة left

ابحث عن الكود التالى

sidebar-wrapper

قد تجده بهذا الشكل

sidebar-wrapper {
float: right;
margin-right: 18px;
margin-top: 7px;
width: 287px;
}

قم بتغيير كلمة right بكلمة left

هذا كل ما فى الأ

اقرء المزيد

الخميس، 3 يناير 2013

شرح تركيب قائمه إحترافية لمدونات بلوجر

11:53 ص Hady store 7 تعليقات

كود قائمة جميله وإحترافية لمدونات بلوجر بتقنية الـ css قائمة رائعه

بمعنى الكلمة تصميمها بسيط والوانها هادئه ورائعه مصدرها هو

موقع way2blogging هو كل ما فعلته هو تعريب القائمة وإزالة منها الإضافات

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

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

إذهب إلى لوحة تحكم بلوجر الرئيسية >تحريرhtml
إبحث عن ]]></b:skin> ثم ضع الكود التالى قبله

.w2bmenu *{margin: 0;padding: 0;}
ul.w2bmenu {list-style: none;line-height: 1;overflow: visible !important;}
ul.w2bmenu:after{margin: 0;padding: 0;content: ' ';display: block;height: 0px;clear: both;}
ul.w2bmenu li{list-style: none;position:relative;float: right;margin: 0 !important;padding: 0 !important;}
ul.w2bmenu li a{margin: 0;padding: 12px 16px !important;font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif !important;color: #6b6b6b !important;text-shadow: 0 1px 0 #fffs;font-weight: 700 !important;text-transform: uppercase !important;font-size: 12px !important;display: block !important;border: 0 none !important;}
ul.w2bmenu li a:hover,ul.w2bmenu li a.hoverover{background: #f5f5f5 !important;}
ul.w2bmenu ul{position: absolute;display: none;top: 100%;border:1px solid #ccc;}
ul.w2bmenu li:hover > ul{display: block;}
ul.w2bmenu ul li{float: none;min-width: 160px;background:#f5f5f5;text-shadow: none;}
ul.w2bmenu ul li a{padding: 12px 14px;text-transform: none;font-weight: normal;}
ul.w2bmenu ul li a:hover,ul.w2bajaxmenu ul li a.hoverover{background: #fff !important;}
ul.w2bmenu ul ul{display: none;right: 100%;top: 0;}
/* AJAX Menu Stylings */
ul.w2bajaxmenu li div.submenu {display: none;position: absolute;width: 600px;z-index: 90;right: -1px;top: 100%;overflow: hidden;min-height: 150px;background: #fff;border:1px solid #cccccc;border-top: 0 none;}
ul.w2bajaxmenu li:hover div.submenu {display: block;}
ul.w2bajaxmenu ul ,ul.w2bajaxmenu ul li{display: block !important;border: 0 none !important;margin: 0 !important;padding:0 !important;}
ul.w2bajaxmenu ul li{background: none !important;float: none !important;}
ul.w2bajaxmenu ul.verticlemenu{position: absolute;width: 33%;left:0;top:0;bottom: 0;background: #f5f5f5;}
ul.w2bajaxmenu ul.postslist {position: relative;display: block;width:65%;float: right;margin: 8px 0 !important;background: none;}
ul.w2bajaxmenu ul.postslist li{display: block;overflow: hidden;border-bottom: 1px #eee solid;position: relative;min-height: 60px;padding: 8px 8px 8px 110px !important;}
ul.w2bajaxmenu ul.postslist li:last-child{border-bottom: none 0;}
ul.w2bajaxmenu ul.postslist li .imgCont{position: absolute;left: 0;top:8px;width: 100px;height: 60px;overflow: hidden;border:1px solid #dcdcdc;font-size: 0;line-height: 0;}
ul.w2bajaxmenu ul.postslist li .imgCont img{position: relative;top:-20px;padding: 0;width: 100px;height: 100px;display: block;}
ul.w2bajaxmenu ul.postslist li a{display: block;line-height: 1.4;padding: 0 !important;}
ul.w2bajaxmenu .loader{background:url('http://i.imgur.com/SeivG.gif') no-repeat scroll 0 0 transparent;width:50px;height:22px;position: absolute;top:50%;margin-top: -11px;right:5px;}
ul.w2bajaxmenu .menuArrow {border-bottom: 4px solid transparent;border-top: 4px solid transparent;border-right: 4px solid #999999;display: block;height: 0;margin-top: -4px;position: absolute;right: 11px;top: 50%;width: 0;}
#w2bajaxmenu {background: #ededed;background: -moz-linear-gradient(top, #ededed 0%, #e0e0e0 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ededed), color-stop(100%,#e0e0e0));background: -webkit-linear-gradient(top, #ededed 0%,#e0e0e0 100%);background: -o-linear-gradient(top, #ededed 0%,#e0e0e0 100%);background: -ms-linear-gradient(top, #ededed 0%,#e0e0e0 100%);background: linear-gradient(to bottom, #ededed 0%,#e0e0e0 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#e0e0e0',GradientType=0 );border: 1px solid #cccccc;}

ثم إذهب إلى إضافة اداه جافاسكريبت

وضع به الكود التالى

<ul id="w2bajaxmenu" class="w2bmenu">
    <li>
        <a href="#">الرئيسية</a>
    </li>
    <li>
        <a href="#"><<إنضم إلينا</a>
        <ul>
            <li><a href="#">فيس بوك</a></li>
            <li><a href="#">تويتر</a></li>
            <li><a href="#">يوتيوب</a></li>

        </ul>
    </li>
    <li>
        <a href="#">من نحن</a>
        <ul>

        </ul>
    </li>
    <li><a href="#">عن مدونة مدون</a></li>
</ul>

غير ما يلزم بالكود

اقرء المزيد

الأحد، 30 ديسمبر 2012

شرح تصميم أزرار إحترافية لمدونتك

11:48 ص Hady store 1 تعليق

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

السلام عليكم ورحمة الله وبركاته ..

هذي أضافة حلوه وأعجبتني وطبقتها وحبت أشرحهاوهو تصميم زر

إحترافى أون لاين بدون العناء فى أى شئ أنت تختار الألوان والأبعاد

وكل شئ هذة الفكره أعجبتنى كثيراً لان الكثير لا يتقن الفوتوشوب

جيداً فهذا يسهل عليهم تصميم بنر حسب رغبتهم يتحكمون فى كل شئ

مثل ما ذكرت .

الان نتوجه إلى صلب الموضوع أولى أدخل على الموقع التالي

إلى الموقع

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

وببعد الانتهاء من ضبط الالون والشكل أضغط على الزر الي عملته

ثم أنظر أسفل مكان الزر سوف تجد فراغان الاول صغير والثاني كبير أنسخ الكود الي بالفراغ الكبير

ثم توجه إلى تصميم >> تحرير html

أبحث عن الوسم التالي " ]]></b:skin> "

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

سوف تكون بهذا الشكل

"<a href="#" class="myButton">my button</a>"

بمكان علامة المربع أضف الرابط وبمكان "my button" أضف الاسم الظاهر لزر

مثال

"<a href="http://mdwanblog.blogspot.com/" class="myButton">مدونة مدون</a>"

اقرء المزيد

الجمعة، 28 ديسمبر 2012

كود الإعلانات بشكل جديد ومساحات مختلفة لمدونات بلوجر

2:10 ص Hady store لا يوجد تعليقات

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

الكود يظهر الإعلانات بشكل جديد غير العادى وايضاً بمساحات

مختلفة غير المساحه 125x125 لقد غيرت هذة المساحه بمساحه أخرى

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

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

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

حتى لا يأخذ مكان كبير من المدونة شاهد الصوره التالية

هذا هو شكل الكود بسيط ورائع ولا يأخذ مكان

لوحة التحكم الرئيسية > التخطيط > إضافة اداة جافاسكريبت

<div align="center">
<table border="2px " cellpadding="2" cellspacing="6" width="50%" bgcolor="#ffffff">
<tbody><tr>

<td><center><a href="رابط المعلن" rel="nofollow"><img border="0" alt="وصف الإعلان" width="180" src="http://img515.imageshack.us/img515/7149/88858688.gif" title="أعلن هنا" height="72" /></a></center></td>

<td><center><a href="رابط المعلن" rel="nofollow"><img border="0" alt="وصف الإعلان" width="180" src="http://img515.imageshack.us/img515/7149/88858688.gif" title="أعلن هنا" height="72" /></a></center></td>

<td><center><a href="رابط المعلن" rel="nofollow"><img border="0" alt="وصف الإعلان" width="180" src="http://img515.imageshack.us/img515/7149/88858688.gif" title="أعلن هنا" height="72" /></a></center></td>

<td><center><a href="رابط المعلن" rel="nofollow"><img border="0" alt="وصف الإعلان" width="180" src="http://img515.imageshack.us/img515/7149/88858688.gif" title="أعلن هنا" height="72" /></a></center></td>

</tbody></table>

</div>

ملحوظة/ المساحه المستخدمة هى 180 عرضاً و 72 طولاً

"الآن مع الالوان وتغير الكود ليناسبك"

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

إذا إستفدت من الموضوع فلا تحرم غيرك من الإستفادة

اقرء المزيد

الاثنين، 24 ديسمبر 2012

خدمة أطلب تصميمك تعود من جديد سارع بحجز طلبك

7:29 م Hady store لا يوجد تعليقات

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

أهلا بكم جميعا وأتمنى أن تكونوا بخير ....

فى تدوينة سابقه قدمت هذه الخدمة واغلقت بعد عدة أيام شاهدها من هنا

ولكن الآن نفس الخدمة ونفس الشروط تقريباً هذه الخدمة تقدم مجاناً من مدونة مدون فقط

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

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

مميزات الخدمة

تصميم جيد / إحترافى / أقل وقت

الشروط

أثناء التقدم بطلب تصميم أترك رابط مدونتك
إسم مدونتك
مجال المدونة / الموقع
أبعاد التصميم
نوع التصميم (حدد نوع تصميمك)
الطلب سوف يكتب على صفحه المدونة عبر الفيس بوك لتصميم أسرع فى الوقت
رابط صفحتنا على الفيس بوك هــــنا

دمتم بخير

اقرء المزيد

نبذه عن الكاتب بشكل جديد ورائع لمدونات بلوجر

3:19 ص Hady store لا يوجد تعليقات

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

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

كل تدوينة ويمكنك التحكم فى العرض او اللون او أى شئ آخر تريد التعديل عليه على الكود

المخصص لذلك وهو الـ css سوف أضع لك علامات على الأشياء الهامة الذى تعدل عليها إذا أردت

ذلك مثل العرض الارتفاع أشياء كهذا.

الخطوة الأولى تركيب الـ css

الذهاب إلى لوحة التحكم الرئيسية> تصميم> تحرير HTML.
ننصح بأخذ نسخه إحتياطية لتجنب أى أخطاء لا قدر الله
ثم إبحث عن ]]></b:skin>

وضع الكود التالى فوقه

.author_info {
float: right;
width: 520px;
padding: 10px;
border: 5px double #000000;
margin-bottom: 15px;
margin-top: 15px;
background: #FCDFFF;
        font-family:verdana;



}
.author_info h3 {
margin-bottom: 10px;
        font-family:consolas;


}
.author_photo {
float: right;
margin: 15 5 6 15px;
}
.author_photo img {
border: 1px dashed #4C7D7E;
}

الخطوة الثانية إضافه القطعه

والآن نبحث عن <div class='post-footer-line post-footer-line-1'/>

ثم إلصق الكود التالى أسفله

<b:if cond='data:blog.pageType == "item"'>
<div class='author_info'>
<div class='author_photo'>
<img alt='author' src='http://img801.imageshack.us/img801/8797/32834310.png'/ height="110" width="120"></div>



                   <div align="center"> <h3><p> مدونة مدون تهتم ببلوجر والفوتوشوب من دروس واضافات وهاكات وايضاً ملحقات الفوتوشوب ،خطوط،أكشنات،إستايلات،أيقونات،كل شئ عن الفوتوشوب ملحقات إحترافية </p><h3>
                   </div>

                   <div align="center"><p>تابعنى على <a href='http://twitter.com/mdwan_blogger'>تويتر</a> أو <a href='http://www.facebook.com/mdwanblog'>فيس بوك</a><br</p></div>
                   

</b:if>

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

إحفظ القالب

اقرء المزيد

السبت، 22 ديسمبر 2012

الطريقه الأفضل والأسرع لإضافة الـ META TAGS لمدونات بلوجر

4:55 م Hady store 1 تعليق

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

السلام عليكم ورحمة الله وبركاته

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

الميتا تاج عبارة عن نص مخفيه في رأس الصفحة

وتستخدمه المحركات البحث لإرشفة مدونتك

ويعتبر الميتا تاج مهم جدا

شرح طريقة أضافة الكود

أتجه لوحة التحكم الخاص بمدونتك> تصميم>تحريرhtml

أعمل توسيع للقالب

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

<b:include data='blog' name='all-head-content'/>

أضف بعدهـ مبــاشـــــرة

الكود التالــي

<meta content='وصف الصفحة ويفضل يكون قليلاً ' name='description'/>
<meta content='هنا ضع الكلمات المفتاحية " وصف اقسام الموقع بشكل عام " ' name='keywords'/>
<meta content='الكاتب أو المؤلف . ' name='author'/>

أستبدل ما بلون الأزرق بما هو مطلوب

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

ميتا،تاج،محرك بحث،كلمات دلالية،بلوجر،تحسين،أرشفة

اقرء المزيد

الخميس، 20 ديسمبر 2012

كود الإعلانات النصية بتقنية الـ css من مدونة مدون

11:13 م Hady store 1 تعليق

كود الإعلانات النصية بشكل احترافى ومميز ورائع لمدونات بلوجر

من تصميمى العديد يظن أن هذا صعباً هذا أسهل مما تتصور لقد صممته

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

أيضا أذا اردت تغير شيئا ما فى الكود مثل اللون الهوامش الاطارات او ما شابة ذلك

على حسب رغبتك فقط عدل على الجزء المخصص فى ذلك وهو الـ css

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

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

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

أولا الكواد الخاص بالـ css

#navlist {
    margin: 0px auto 0px auto;
    padding: 0px;
    list-style-type: none;
    float: center;
    display: block;


}

#navlist a {
    background-color:#CFECEC;
    border: 1px solid #EDEDED;
    font-family: tahoma ;
    font-size: 12pt;


    text-decoration: none;
    color:#F6358A;
    display: block;
    text-align: center;
    line-height: 30px;
    padding-right: 0px;
    margin-right: 0px;

}
#navlist a:hover {
    background-color:#F660AB;
    border: 1px solid #000000 none;
    font-family: tahoma;
    font-size: 12pt;
    text-decoration: none;
    color: #000000;
    display: block;
    text-align: center;
    line-height: 30px;
    padding-right: 0px;
    margin-right: 0px;

}

ثانياً الكود كاملاً

<html>
<head>
<p>تم تصميم الكود بواسطة مدونة مدون</p>
<title>كود الإعلانات النصية</title>
<style type="text/css">
#navlist {
    margin: 0px auto 0px auto;
    padding: 0px;
    list-style-type: none;
    float: center;
    display: block;


}

#navlist a {
    background-color:#CFECEC;
    border: 1px solid #EDEDED;
    font-family: tahoma ;
    font-size: 12pt;


    text-decoration: none;
    color:#F6358A;
    display: block;
    text-align: center;
    line-height: 30px;
    padding-right: 0px;
    margin-right: 0px;

}
#navlist a:hover {
    background-color:#F660AB;
    border: 1px solid #000000 none;
    font-family: tahoma;
    font-size: 12pt;
    text-decoration: none;
    color: #000000;
    display: block;
    text-align: center;
    line-height: 30px;
    padding-right: 0px;
    margin-right: 0px;

}

</style>

</head>

<body>



<ul id="navlist">
<table width="25 %" align="center">
<tr>
<td width="25%" align="center">
<a target="_blank" href="#" >إعلانك النصى هنا</a>
<tr>
<td width="25%" align="center">
<a target="_blank" href="#" >إعلانك النصى هنا</a>
<tr>
<td width="25%" align="center">
<a target="_blank" href="#" >إعلانك النصى هنا</a>
<tr>
<td width="25%" align="center">
<a target="_blank" href="#" >إعلانك النصى هنا</a>
<tr>
</tr></table>
<table width="25%" align="center">
<tr>
<td width="25%" align="center">
<a target="_blank" href="#" > إعلانك النصى هنا</a>
<tr>
<td width="25%" align="center">
<a target="_blank" href="#" >إعلانك النصى هنا</a>
<tr>
<td width="25%" align="center">
<a target="_blank" href="#" > إعلانك النصى هنا</a>
<tr>
<td width="25%" align="center">
<a target="_blank" href="#" >إعلانك النصى هنا</a>
</td></tr>
</table></ul>


</body>
</html>

ثم قم بتغير ما باللون الأحمر بالروابط الخاصه بك

اقرء المزيد

تحميل خط مختار خط مربعى رائع التصميم

12:26 ص Hady store لا يوجد تعليقات

الآن خط مختار خط جميل وهو مربعى وتصميمه رائع بمعنى الكلمة تستطيع إستخدامة

فى تصاميمك هو خط أكثر سماكه وهو من أجمل الخطوط

المستخدمه فى التصميمات خط جميل للفوتوشوب حمله الآن وجربه بنفسك

ولا تتردد فقط حمله ثم ضعه فى حزمه الخطوط الخاصه بك على جهازك

ثم استخدمه وتمتع بجمال ورعه الخط

عدد ملفات الخط : 1

الصيغ المتوفرة : TTF

حجم الملف : 38.7 كيلوبايت

المصدر : 2y20

اقرء المزيد

الاثنين، 17 ديسمبر 2012

فتح باب التبادل الإعلانى النصى فى مدونة مدون

5:33 ص Hady store 112 تعليقات

أولاً أهلا بكم جميعاً...

ثانياً نحن نعلن عن فتح باب التبادل الإعلانات النصية فقط فى مدونة مدون

إعلانك سوف يكون أسفل هيدر المدونة كل ما عليك هو فقط ملئ البيانات المطلوبة

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

إقرأ الشروط

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

البيانات المطلوبة

إسم مدونتك
إختصاص المدونة
رابط مدونتك

اقرء المزيد

بحث

الثلاثاء، 15 يناير 2013

لون المقدمة: خاصية 'color'

خاصية 'background-color'

الصورة كخلفية "background-image"

تكرار صورة الخلفية "background-repeat"

تثبيت صورة الخلفية "background-attachment"

مكان صورة الخلفية "background-position"

جمع كل الخصائص "background"

الاثنين، 14 يناير 2013

الفئات class

الأحد، 13 يناير 2013

فوائد إستخدام تقنية CSS

كيف يتعرف متصفح الإنترنت على هذه التقنية ؟

طرق تعريف CSS داخل الصفحات

الخميس، 10 يناير 2013

السبت، 5 يناير 2013

الخميس، 3 يناير 2013

الأحد، 30 ديسمبر 2012

الجمعة، 28 ديسمبر 2012

الاثنين، 24 ديسمبر 2012

السبت، 22 ديسمبر 2012

الخميس، 20 ديسمبر 2012

الاثنين، 17 ديسمبر 2012

المشاركات الشائعة

الصفحات

أقسام المدونة

أقسام المدونة

أرشيف المدونة الإلكترونية

عن المدونة

مدونات