مدونة عاشق النت

جرب الايفون قبل شراءه مجاناً

2013-09-29T22:37:00.002+01:00

iphone

السلام عليكم ورحمة الله وبركاته, في هذه التدوينة سوف أطرح عليكم مفاجأة جديدة من مدونة عاشق النت ، والمفاجأة هي طريقة لتجربة الـIphone أونلاين و العمل به قبل شراءه ,وهي إحدى إبداعات Apple والتجربة مجانية وبدون تدخلات برمجية أو ما شابه, كل ما عليك فعله هو الدخول للموقع وتبدأ في التجربة , كما أنه يمكنك من رؤية جميع التطبيقات الرئيسية فيه ويمكنك من الدخول إليها, لذالك لا تفوت هذه الفرصة الذهبية.

طريقة تجربة الايفون:

كل ما عليك هو الدخول لهذا الموقع:

http://interactiveiphone.com/

قوالب بلوجر ... بدايتك في التصميم

2013-09-06T12:15:00.000+01:00

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

فمرحبا بك في الفصل الأول من دروس تصميم قوالب بلوجر .

أولا : هذه الدروس تفترض منك معرفة أساسيات لغة HTML و CSS . فإن كنت لا تعرف شيئا عن هاتين اللغتين فأنت لا تستطيع إكمال هذه الدروس .

الفهرس

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

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

تصميم المدونة في تدوينة

تصميم المدونة في الصفحة الرئيسية

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

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

بلوجر تعتمد الـxml

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

مثال لتوضيح طريقة عمل الـxml :
في ملف الـxml نضع الوسم التالي :

<name> MedAnassSDK </name>

كما تلاحظ لا يوجد وسم name في HTML لكنه يعمل في xml .

في ملف HTML يوجد مع ملف xml السابق في نفس المجلد نضع التالي بالإضافة إلى بقية الوسوم الضرورية .

يقوم كود الجافاسكربت الخاص بجلب محتوى الوسم <name> الموجود في ملف xml و وضعه في وسم <div> المعرف بالـauthorName الموجود في صفحة HTML .
بصيغة أخرى : يقول الكود javascript للحاسوب : إذهب إلى ملف xml و احصل على المعلومة داخل الوسم <name> و ضعها في وسم <div> المعرف بالـauthorName الموجود في صفحة HTML .
فيظهر كود صفحة HTML في المتصفح كالتالي :

و إن غييرت المعلومة داخل الوسم <name> فإن المعلومة التي ستظهر في ملف HTML ستتغير بدورها .
و بهذه الطريقة سنتكن من تغيير محتويات ملف HTML دون الإضطرار إلى التعديل في أكواده بحيث يكفي أن نعدل المعلومات في ملف xml و سيقوم كود javascript بالعمل .
أما بالنسبة للتغييرات التي سنضطر لعملها في ملف xml نستطيع عملها من خلال برامج متقدمة تقوم بالتنسيق و كل شيء . و هذا هو ما تقوم به بلوجر ، لكن بشكل مطور أكثر .
فمنصة بلوجر هي ذلك البرنامج الذي يقوم بتعديل محتويات الـxml ، و الكود javascript يُظهر كل تلك المعلومات في وسومها المحددة .
إذن يكفي أن نعطي لبلوجر ملف HTML به تصميم المدونة ( الألوان و كل الـCSS ) و هو سيقوم بوضع ما سنكتبه من تدوينات في وسومها المحددة .
لكن السؤال : كيف سيعرف كود javascript الخاص ببلوجر هذه الوسوم المحددة ؟ ففي المثال السابق وضعنا التعريف authorName للوسم <div> و الكود javascript الذي وضعناه يعرف مسبقا أن عليه وضع المعلومات التي جلبها في هذا الوسم إنطلاقا من تعريفه . فإن غيرنا التعريف فلن يضع الكود javascript أي شيء في الوسم <div> .

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

بدلا من أن جعل الكود يتوافق مع التصميم - لنجعل التصميم يتوافق مع الكود .

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

الوسم </ b:widget> خاص ببلوجر و هو يلعب دور التعريف السابق .
كما ترى هذا الوسم لا ينتمي للغة HTML . لكنه ينتمي للـ xml ( فلا وسوم محددة في الـ xml ) ، و بالتالي هذا يفرض علينا أن نقدم تصميمنا في ملف xml و ليس في ملف HTML .

الأدوات التي سنحتاجها

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

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

الأدوات التي تحتاجها لا تقدم لك كل شيء ، بل ما يجعل تصميماتك جميلة هو قدرتك على الإبداع + مهارتك في CSS .

لماذا CSS ؟؟ لأن أكثر ما يحتوي عليه قالب المدونة هو الـ CSS أما وسوم الـ HTML فهي قليلة . و كما تعلم الجمالية تتعلق بالألوان و الصور و غيرها .... و كل ذلك مرتبط بالـ CSS أكثر من الـ HTML .

لذلك أنا ألح على تعلم هاتين اللغتين على جميع أصحاب المواقع .

هذا كل شيء الان إلى الفصل القادم

مقدمة فى انقرائية النصوص على الويب

2013-09-01T14:20:00.000+01:00

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

الموضوع على : http://www.colorslab.net/2012/05/23/انقرائية-النصوص-على-الويب/

تعلم إنشاء قائمة منسدلة بتأثيرات الـCSS 3 و لغة الجي كويري

2013-08-08T10:07:00.000+00:00

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

يتكون الدرس من ثلاثة أجزاء أساسية ، يتعلق الجزء الأول ببنية الـHTML الخاصة بالقوائم ، و يتعلق الجزء الثاني بخصائص الـCSS التي تجعل من القوائم أفقية ، و تضيف التأثيرات اللازمة للحصول على القائمة المنسدلة ، ثم في الأخير الجزء الثالث الخاص بسكربت الجي كويري الذي يضفي الحركية إلى القائمة

حمل مثال المعاينة

تنسيق كود الـHTML الخاص بالقائمة

العنصر الخاص بالقائمة هو <ul> بداخله عناصر <li> , و العناصر <li> تحتوي بدورها على قوائم <ul> فرعية :

<div id="menu">
<ul>

<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>
  <li><a href="#">وصلة فرعية</a></li>
<li><a href="#">وصلة فرعية</a></li>
<li><a href="#">وصلة فرعية</a></li>
</ul>

</li>

<li><a href="#">وصلة رئيسية</a>

  <ul>
  <li><a href="#">وصلة فرعية</a></li>
<li><a href="#">وصلة فرعية</a></li>
<li><a href="#">وصلة فرعية</a></li>
</ul>

</li>

</ul>
</div>

تنسيق خصائص الـCSS الخاصة بالقائمة

نقوم في الأول بتعديل عنصري <ul> بإزالة الهوامش و النقط

#menu ul {
padding:0;
margin:0;
list-style:none;
position:relative; //مهمة
}

نضيف خاصية float بقيمة right ( اليمين ) لعناصر <li> الرئيسية لكي تظهر القائمة أفقية و لا تبقى عمودية :

#menu > ul > li {
float:right;
padding:0;
margin:0;
}

نهتم الان بالخصائص الخاصة بالروابط القائمة الرئيسية ، أي الخصائص التي تعطي للقائمة شكلها الجميل و ألوانها الخلابة ، بالنسبة لي سأضع الخصائص الخاصة بالقائمة التي تظهر في الصورة أعلاه

#menu > ul > li > a {
display:block; //مهمة
font:normal bold 14px tahoma;
background:#3f4040;
min-width:100px;
text-align:center;
padding:10px 15px 10px 15px;
text-decoration:none;
color:#FFF;
border-top:4px solid #FFF;
border-bottom:4px solid #00B4FF;
transition:background 500ms,color 500ms,border-color 500ms;
}
#menu > ul > li > a:hover {
background:#666;
border-top-color:#00B4FF;
color:#00B4FF;
}

الان نضع الخصائص الخاصة بالقائمة الفرعية ، فهي تكون مخفية طبعا ـ لذلك نضيف لها الخاصية display بالقيمة none ، و الخاصية position التي ستأخذ القيمة absolute مهمة أيضا كي لا يأثر ظهور القائمة الفرعية على باقي عناصر الصفحة .

#menu > ul > li > ul {
position:absolute;
top:45px; //إرتفاع القائمة
right:0;
display:none;
}

لم يبق الان سوى إضافة خصائص الـCSS الخاصة بروابط القائمة الفرعية و هي في هذا المثال كالتالي :

#menu > ul > li > ul > li > a {
background:#666;
display:block; //مهمة
font:normal normal 12px tahoma;
padding:5px 10px 5px 10px;
text-decoration:none;
color:#FFF;
border-bottom:1px solid #FFF;
min-width:130px;
}
#menu > ul > li > ul > li > a:hover {
background:#777;
}

قائمة منسدلة بدون الجي كويري

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

#menu > ul > li:hover > ul { display:block; }

تكمن الخدعة هنا في المحددة ، إذ إن لاحظت جيدا ستجد تنسيق التحوم hover في العنصر li .

يمكننا التوقف هنا و لكننا للأسف لن نحصل على التأثير الحركي الذي يميز القوائم المنسدلة ، أي أننا عند تحويم المؤشرة فوق العناصر <li> فإننا لن نرى خروج القائمة الفرعية بشكل سلس ، بل ستخرج آنيا بدون أي تأثيرات حركية

حمل مثال المعاينة ( بدون الجي كويري )

التأثيرات الحركية بالجي كويري

عند تحويم مؤشر الفأرة فوق عناصر <li> الرئيسية تظهر القائمة الفرعية بشكل سلس .
بلغة الجي كويري نقول هذه الجملة باستخدام التابع ()hover و التأثيرات السلسة تأتي بالتوابع ()slideDown و ()slideUp .

قبل إستخدام سكربت الجي كويري يجب دائما ربط الموقع بمكتبة الجي كويري ثم بعدها نكتب سكربتاتنا ، لذلك داخل عنصر رأس الصفحة <head> نضيف ما يلي :

حمل مثال المعاينة ( بالجي كويري )

هذا كل شيء ، إنتهى الدرس .

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

2013-08-07T00:56:00.002+00:00

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

معرفة الجو:

عن طريق البحث عن "Weather" متبوعة بإسم المدينة.

مثلاً :Weather Amman.

معرفة الوقت:

عن طريق البحث عن "إسم المدينة+Time" .
مثلاً :Time Amman.

وحدة القياس:

عن طريق البحث عن "الرقم+إسم الوحدة المراد التحويل منها+TO+إسم الوحدة المراد التحويل إليها" متبوعة بإسم المدينة.
مثلاً :1 meter TO centimeters.

إن أصبت فهو من الله - عز و جل - , و إن أخطأت فهو مني.

قالب Nexus على بلوجر و مجانا هذه المرة

2013-08-01T14:43:00.003+00:00

معـاينـة القـالـب تحميـل القـالـب

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

aaaaa

لاحاجة للدعم الفني

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

دعم المتصفحات

يتوافق قالب Nexus مع جميع المتصفحات الحذيثة و يظهر بنفس التنسيق ، إذ تم إستخدام عناصر الـHTML5 و خصائص الـCSS 3 .
نحاول دائما إستخدام نمط متناسق من الأكواد و الخصائص لتبدوا منطقية و متوافقة مع كل المتصفحات ، و ذلك للحصول على النتائج المطلوبة ، كما نطمح دائما إلى تقليل الأكواد و السكربتات و طلبات الـHTTP لنضمن تصفحا سريعا و مرنا للمواقع التي تستخدم قوالبنا .

السكربتات

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

ندعم أداة مصمم النماذج

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

معاينة القالب

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

الصفحة الرئيسية

عرض التدوينات

صفحة التدوينة

الصفحة الثابتة

صفحة التخطيط

تحميل القالب ( مجاني )

بعد تسطيب القالب

إن كانت لديك صفحات على الفيسبوك و تويتر و غوغل ، عليك أن تظع روابطها يدويا في كود القالب لكي تشتغل الأداة في الصورة

كل ما عليك فعله هو البحث في كود القالب عن
facebookLinkHere و تعويضها بالرابط الخاص بصفحة الفيسبوك الخاصة بك ، نفس الشيء بالنسبة لـ twitterLinkHere و googleLinkHere .

نموذج الصندوق

2013-07-17T22:18:00.000+00:00

يمكننا رؤية صفحة الوب على أنها مجموعة من العناصر التي تحتل مساحات مستطيلة في الواجهة ( صناديق ) ، هذه العناصر تسمى عناصر " Block " ، تقريبا جميع العناصر التي رأيناها في الفصول السابقة من نوع " Block " كـ : <header> ، <p> ، <footer> ... و هذه العناصر التي تظهر في الواجهة يتم ببساطة تسميتها صناديق لأنها تحتل مساحات مستطيلة الشكل و تحتوي على محتوى ، ( تماما كالصناديق ) ، لا داع لتعقيد الأمور بكثرة التسميات ، عنصر أو صندوق إنهما شيء واحد

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

الفهرس

صناديق block ، و صناديق inline .

في لغة الـHTML ، يمكننا تقسيم الصناديق إلى نوعين كبيرين :

عناصر من نوع " Block " ، على سبيل المثال : <p> ، <header>
عناصر من نوع " inline " ، مثلا الروابط : <a></a>

هناك أنواع الأخرى خاصة ، مثلا بالنسبة لخانات الجداول هناك ( table-cell ) أو بالنسبة للقوائم هناك ( list-item ) ، لن نهتم بهذه الأنواع من العناصر الآن لأنها لا تستعمل كثيرا .

سؤال : كيف أعرف هل العنصر من نوع Block أو من نوع Inline ؟

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

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

لتبسيط الصورة حول الفرق بين النوعين من الصناديق

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

أما الجزء الأصفر فهو يمثل مساحة عنصر من نوع inline الذي هو في هذه الحالة رابط <a> ، نعم الروابط <a> تعد من عناصر inline ، و كما بالنسبة لعناصر Block ، يمكن وضع عناصر inline كمحتوى داخل عناصر inline أخرى .

عناصر خاصة ( مهمة )
جميع عناصر الـHTML التي نعرفها الان لها دور خاص بها في بناء موقع الوب ، أي أن العناصر <p> مثلا تصلح لوضع الفقرات ، العناصر <a> تصلح لوضع الروابط ، و هكذا ...

العنصران الجديدان اللذان سنتعرف عليهما الان مهمان جدا ، حيث ليس لهما دور محدد يلعبانه ، فهما يصلحان لأي شيء ، و أيضا لا يصلحان لشيء ، فهما لا يطبقان أي خصائص خاصة بهما على المحتوى بداخلما أبدا ، إذ يجب دائما إضافة خصائص الـCSS يدويا ، فهذان العنصران يصلحان لتعريفهما بالـId و الـClass ، عندما يستعصي ذلك مع العناصر الأخرى ، هذان العنصران هما :

<span></span> : من نوع Inline .
<div></div> : من نوع Block .

تكون عناصر <span> و <div> عملية في العديد من الحالات ، و لكن في بعض الحالات يقوم بعض المصممين بإستعمال هذه العناصر بكثرة ، إذ يضعون لها خصائص تجعلها مشابهة لعناصر أخرى موجودة أصلا ، مثال :

بدل إستعمال ما يلي لإدخال عنوان :

<div class="title" style="font-size:large;">العنوان</div>

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

<h1>العنوان</h1>

فهي من ناحية الشكل الخارجي لموقع الوب ، يبدوا عنوان الكود الأول مثل عنوان الكود الثاني ، و لكن يجب دائما صياغة كود منطقي يستطيع أي متصفح فهمه بسهولة ، و كما قلت خصائص الـCSS كلما كان حجم الموقع أقل و كان أسرع بالظهور ، فحتى محرك البحث Google يعتمد على العناصر <title> ، <h1> و غيرها لتمييز الكلمات المهمة في موقعك و جعله في مقدمة نتائج البحث ، و هذا لن يحذث أبدا لو كانت جميع العناصر عبارة عن <div> و <span> .

التحكم في أبعاد الصندوق

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

هل تتذكر الخاصية background-color ، سنستعمل هذه الخاصية كي تظهر لنا المساحة الخاصة بكل عنصر نقوم بتخصيصه .

الخاصيتان الجديدتان هما :

width : و هي تأخذ قيما عديدية تمثل عرض المساحة الخاصة بالعنصر و هي تكون عادة بالبكسل ( px ) أو بالنسبة ( % ) .
height : و هو الإرتفاع ، أي إرتفاع المساحة الخاصة بالعنصر ، تأخذ القيم مثل الخاصية width

لاحظ الكود التالي :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Title</title>
<style>
h1,p { background-color:gray; }
</style>
</head>
<body>
<h1>العنوان</h1>
<p>الفقرة</p>
<p>الفقرة الثانية</p>

</body>
</html>

هذا ما سنشاهد :

المساحة الخاصة بالصناديق أخذت كل عرض الصفحة أي كما لو أن width:100%

الان سنقوم بجعل عرض الفقرات %50 من عرض الصفحة . سنضيف الخاصية التالية

p {
width:50%;
}

و النتيجة :

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

و إذا أردنا أن نجعل من عرض الفقرات ثابثا أي لا يتغير إن غيرنا عرض الصفحة ، فهنا يجب إعطاء القياس بالبكسل :

p {
width:250px;
}

و كل هذه الأشياء فهي نفسها بالنسبة للخاصية height

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

max-width : الحد الأقصى الذي يمكن أن يصل إليه عرض العنصر و هو يعبر عنه دائما بالبكسل ، و لا يمكنه أخذ قيم مئوية .
min-width : الحد الأدنى للعرض .
max-height : الحد الأقصى للإرتفاع .
min-height : الحد الأدنى للإرتفاع .

مثال :

p {
width:60%;
min-width:200px;
}

التحكم في الهوامش

تحتوي كل العناصر من نوع Block على نوعين من الهوامش :

هوامش خارجية .
هوامش داخلية .

لاحظ جيدا الصورة التالية :

الهوامش الداخلية و الخارجية

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

الهامش الداخلي : و هو المساحة بين حدود العنصر و محتواه الداخلي .
الهامش الخارجي : هو المساحة بين حدود العنصر و حدود العنصر الثاني الذي يليه .

في الـCSS ، يمكننا التحكم في هذه الهوامش عن طريق الخاصيتين التاليتين :

padding : الخاصية المسؤلة عن الهوامش الداخلية .
margin : الخاصية المسؤلة عن الهوامش الخارجية .

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

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

لنأخذ مثالا كبيرا نتعرف من خلاله عن الخاصيتين الجديدتين .
لنضع مثلا صفحة وب تحتوي على فقرتين <p> لهما الخصائص التالية :

p {
   width:350px;
   border:1px solid black;
   text-align:justify;
}

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

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

p {
   width:350px;
   border:1px solid black;
   text-align:justify;
padding:20px;
}

أما الان فأريد من فقراتي أن تبعدان قليلا بعضهما عن بعض ، هذا يعني أنه يجب أن نزيد في الهوامش الخارجية

p {
   width:350px;
   border:1px solid black;
   text-align:justify;
padding:20px;
margin:50px;
}

ولكن الهوامش الجانبية أيضا أصبحت كبيرة 50 بكسل !!!

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

margin-top : الهامش الخارجي العلوي .
margin-right : الهامش الخارجي على اليمين .
margin-bottom : الهامش الخارجي السفلي .
margin-left : الهامش الخارجي على اليسار .

نفس الشيء بالنسبة للهوامش الداخلية

padding-top
padding-right
padding-bottom
padding-left

هناك أيضا الكتابة المختصرة ، فإذا أردنا أن نخصص كل الهوامش على حدة ، لا داع لأن نكتب كل خاصائص الـpadding أو margin ، يمكننا أن نكتب بإختصار

margin: top right bottom left;
padding: top right bottom left;

بهذا الترتيب تماما ، فالترتيب هنا مهم ، شاهد المثال لكي تفهم :

margin: 5px 10px 6px 8px;

في هذه الكتابة المختصرة لدينا ما يكافئ ما يلي :

margin-top:5px;
margin-right:10px;
margin-bottom:6px
margin-left:8px;

توسيط الصناديق

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

لنشاهد المثال :

p {
   width:350px;
   border:1px solid black;
   text-align:justify;
padding:20px;
margin:auto;
margin-top:30px;
}

عند إستخدام القيمة auto ، فإن الهوامش الجانبية تصبح متساوية ، لهذا يصبح من الضروري التحكم في الهوامش العلوية و السفلية عن طريق الخصائص margin-top و margin-bottom .

→ الفصل التالي الفصل السابق ←

كيفية أنشاء Windows 8 وجهة المترو في بلوجر

2012-12-30T18:58:00.001+00:00

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

عيش التجربة

ما هو METRO UI Menu واجهة المترو؟

إذا كانت لديك خبرة عن واجهة Microsoft Windows 8، أو مجموعة من هواتف ذكية جديدة تعمل بنظام Windows Phone 8، هذه القائمة UI METRO ليست شيئا جديدا بالنسبة لك. مستوحاة هذه القائمة من واجهة ويندوز 8. تمكن المدون Syed Faizan Ali من تطوير واجهة المترو الموجوده في نظام الويندوز الثامن إلى منصة بلوجر وتثبيتها في القالب، إذا كان أي شخص لا يزال غير مصدق في ذلك، يمكن إجراء النظر لقطة شاشة التالية.

كيف تبدوا القائمة المترو الظهور؟

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

متطلبات التركيب:

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

كيفية إنشاء ويندوز 8 وجهة المترو في بلوجر؟

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

الخطوة الأولي: إضافة الجزء الأول CSS:

انتقل إلى لوحة التحكم توجه إلى صفحة >> القالب > ثم> تحرير HTML .

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

الآن في البحث عن ]]></b:skin> ثم قبله مباشرة ألصق الكود الآتي:

/*===MBL METRO UI Menu==*/

body {
font-family:sans-serif;
}
a {
text-decoration:none;
}
.mblmetromenu {
width:960px;
margin:auto;
}
@media screen and (max-width:960px) {
.mblmetromenu {
width:100%;
}
}

/* MblMetroMenu */
.MblMetroMenu {
position:relative;
}
.om-nav {
position:absolute;
width:100%;
z-index:999;
display:none;
}
.om-ctrlbar {
width:100%;
height:48px;
}
.om-ctrlitems {
margin:auto;
padding:0px;
height:48px;
display:inline-block;
text-align:center;
}
.om-ctrlitem {
height:48px;
width:48px;
display:none;
cursor:pointer;
float:left;
opacity:0.5;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=50)" !important;
filter: alpha(opacity=50) !important; /* For IE8 and earlier */ }
.om-ctrlitem:hover {
opacity:0.8;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=80)" !important;
filter: alpha(opacity=80) !important; /* For IE8 and earlier */ }
.om-activectrlitem {
opacity:1 !important;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)" !important;
filter: alpha(opacity=100) !important; /* For IE8 and earlier */ }
.om-controlitems {
width:960px;
margin:auto;
}
.om-controlitem {
height:48px;
cursor:pointer;
}
.om-closenav {
float:left;
}
.om-movenext {
float:right;
}
.om-itemholder {
margin:auto;
padding:20px 0px;
}
@media screen and (max-width:960px) {
.om-closenav {
position:absolute;
z-index:9999;
left:0;
top:0;
}
.om-movenext {
position:absolute;
z-index:9999;
right:0;
top:0;
}
.om-controlitems {
width:100%;
}
.om-itemholder {
width:100%;
}
}
.om-centerblock {
display:inline-block;
}
.om-item {
display:none;
}
.om-showitem {
margin:5px;
float:left;
display:none;
}
/* END MblMetroMenu */

/* TILE BUTTONS */
/* Standar Buttons */
.tile-bt {
text-align:center;
cursor:pointer;
width:90px;
height:90px;
}
.tile-bt a {
display:block;
padding-top:12px;
text-decoration: !important;
}
.tile-bt img {
margin:0 auto 0 auto;
padding-bottom:5px;
height:48px;
width:48px;
position:relative;
display:block;
}
.tile-bt span {
font-size:12px;
padding-bottom:10px;
display:block;
}
.tile-bt:active {
opacity:0.5;
}
/* End Standard Buttons */

/* Large Buttons */
.tile-bt-large {
width:190px;
height:90px;
line-height:90px;
text-align:center;
cursor:pointer;
}
.tile-bt-large a {
display:block;
text-decoration: !important;
}
.tile-bt-large img {
vertical-align: middle;
margin:auto;
padding:0px;
position:relative;
width:48px;
height:48px;
}
.tile-bt-large span {
vertical-align: middle;
display:inline;
}
.tile-bt-large:active {
opacity:0.5;
}
/* End Large Buttons */
/* Extralarge Buttons */
.tile-bt-extralarge {
text-align:center;
cursor:pointer;
width:190px;
height:190px;
}
.tile-bt-extralarge a {
display:block;
padding-top:52px;
text-decoration: !important;
}
.tile-bt-extralarge img {
margin:0 auto 0 auto;
padding-bottom:22px;
height:80px;
width:80px;
position:relative;
display:block;
}
.tile-bt-extralarge span {
font-size:14px;
padding-bottom:20px;
display:block;
}
.tile-bt-extralarge:active {
opacity:0.5;
}
/* End Extralarge Buttons */

/* END TILE BUTTONS */

/* SHADOW LIST */
.shadow-white, .shadow-black, .shadow-blue, .shadow-green, .shadow-red {
/*display:inline-block;*/
}
.shadow-white:hover {
box-shadow:0px 0px 6px 3px #fff;
-webkit-box-shadow:0px 0px 6px 3px #fff;
-moz-box-shadow:0px 0px 6px 3px #fff;
-o-box-shadow:0px 0px 6px 3px #fff;
-ms-box-shadow:0px 0px 6px 3px #fff;
}
.shadow-blue:hover {
box-shadow:0px 0px 6px 3px #38D1F7;
-webkit-box-shadow:0px 0px 6px 3px #38D1F7;
-moz-box-shadow:0px 0px 6px 3px #38D1F7;
-o-box-shadow:0px 0px 6px 3px #38D1F7;
-ms-box-shadow:0px 0px 6px 3px #38D1F7;
}
.shadow-green:hover {
box-shadow:0px 0px 6px 3px #AACA37;
-webkit-box-shadow:0px 0px 6px 3px #AACA37;
-moz-box-shadow:0px 0px 6px 3px #AACA37;
-o-box-shadow:0px 0px 6px 3px #AACA37;
-ms-box-shadow:0px 0px 6px 3px #AACA37;
}
.shadow-red:hover {
box-shadow:0px 0px 6px 3px #E81750;
-webkit-box-shadow:0px 0px 6px 3px #E81750;
-moz-box-shadow:0px 0px 6px 3px #E81750;
-o-box-shadow:0px 0px 6px 3px #E81750;
-ms-box-shadow:0px 0px 6px 3px #E81750;
}
.shadow-black:hover {
box-shadow:0px 0px 6px 3px #444;
-webkit-box-shadow:0px 0px 6px 3px #444;
-moz-box-shadow:0px 0px 6px 3px #444;
-o-box-shadow:0px 0px 6px 3px #444;
-ms-box-shadow:0px 0px 6px 3px #444;
}
/* END SHADOW LIST */
/* BACKGROUND LIST */
/* Solid Colors */
.solid-blue { background:#00BBE2; }
.solid-blue-2 { background:#2C84EE; }
.solid-darkblue { background:#044E94; }
.solid-violetred { background:#781766; }
.solid-red { background:#E51400;}
.solid-red-2 { background:#E81750; }
.solid-pink { background:#FF539B; }
.solid-purple { background:#D02090; }
.solid-orange { background:#FB8F02; }
.solid-orange-2 { background:#FF6600; }
.solid-orange-3 { background:#DD5F37; }
.solid-coral { background:#CD5B45; }
.solid-green { background:#67B239; }
.solid-green-2 {background:#96BF01; }
.solid-darkgreen { background:#016C38; }
.solid-olive { background:#999900}
.solid-grass { background:#CDCD00; }
.solid-darkred { background:#5F0000; }
.solid-gold { background:#FEE9AE; }
.solid-yellow { background:#F7D100; }
.solid-black { background:#000; }
.solid-smoke { background:#F5F5F5; }
/* End Solid Colors */

/* MISC */
.clearspace { clear: both; }
.floatleft { float:left; }
.floatright { float:right; }
.none { display: none !important; width:0px !important; }
.light-text {
color:#fff;
}
.dark-text {
color:#1e1e1e;
}
.gradient {
background: -moz-linear-gradient(-45deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,0.3))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, rgba(255,255,255,0) 00%,rgba(255,255,255,0.3) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%); /* IE10+ */
background: linear-gradient(-45deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%); /* W3C */
}
.margin-5 { margin:5px; }

ثم قم بحفظ القالب ، الآن دمجنا جزء CSS في قالب دعونا نرى كيفية استخدامها.

الخطوة الثانية: الجزء الثاني HTML:

الآن أنه يعتمد كليا على الشخص الذي يريد وضع هذه القائمة. المكان المثالي كم قولناها تحت الرأس المدونة.

في قائمة تحكم مدونتك توجه إلى تخطيط و أضف أدات HTML/Javascript و ألصق فيها الكود التالي:

<div class="mblmetromenu">

<div data-navid="om-nav" class="tile-bt-extralarge solid-violetred shadow-black margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2xI-84JaD5R0yjDfByuU4Y8ejIm2UhLbXeZMt4qS7ia0H0kTa_zXiHD7kAFQvXKjGz8GlkiX7N9lN1YPBLR9wZDhztTvzqJSjqqEjga_c0e1DP9NN1jMm9iW1GBl4DwMbOMv3CrrhIrM/s1600/home.png" alt="" />
<span class="light-text">Homepage</span>
</a>
</div>

<div data-navid="om-nav" class="tile-bt-large solid-coral shadow-red margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivvV4Cei5yEQ0FfQb682ZDy1xEYLWQnTDc58kRxeoK716yn6WbmNL_V0bJo8zGX7aEMpryylazzojsIKejaFjkwGHVR-rKfwevrGhyphenhyphen5B1AtaKCINmCSvTp8FSgguPrNNX-aWhxCj3rCTQ/s1600/messanger.png" alt="" />
<span class="light-text">About US</span>
</a>
</div>

<div data-navid="om-nav2" class="tile-bt solid-purple shadow-blue margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlCbTgVhpu9jhTSS8cESN0ZpyCEMU9AgF22jKB9YDjWoTwr1b6EabFGDft09icKBD1DXmBlIwbnAntisWrQDgChEtauCw2kkVz_kN4HLgWmN5sKTOhzEByQQff1fKBz5KW4ftdLcLe7jk/s1600/rss.png" alt="" />
<span class="light-text">Rss Feeds</span>
</a>
</div>

<div data-navid="om-nav" class="tile-bt-large solid-red shadow-red margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP30S2yVyumYfRdIOEhomLxlmMlA6U_b2Sk4VQxO-U8wRMZuMYQamggzDbNeyfstMAIZEpkWBcttOBOoNxhE2iiFxPN18EEEv17oUx54xv28t-BlYmNGZoslBGvRr1m0kkQDiNQOM1fNQ/s1600/search.png" alt="" />
<span class="light-text">Search</span>
</a>
</div>

<div data-navid="om-nav2" class="tile-bt solid-darkred shadow-red margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgokPUriDLy6xTjkH6GYrT1kWl4-gjQcaUOqgV9Bc3mojO8yjU7yBTlNUx602_pZLs_LkxRUsXdfc9-Pxb0Dn8OVW6vALiVnImsopskvjzS8GqSe7sx9kCylsLj4TMIiwvnt4HGsQ1JGZw/s1600/mail.png" alt="" />
<span class="light-text">Contact US</span>
</a>
</div>

<div data-navid="om-nav2" class="tile-bt solid-black shadow-black margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0jALCF_EgsGLH3wWokg0xDr28x1aiDY_XElH5InOzlrmCPYEAP-6x49l3Dpru6gNEJO4fu4oLN1Muqx_TuegszZicKQ1ikry0qZchKFhrporqojvRbPvgY8-UoTz5Ubox38Tn6PnaLTc/s1600/help.pn" alt="" />
<span class="light-text">Get HELP</span>
</a>
</div>

<div data-navid="om-nav2" class="tile-bt solid-orange shadow-black margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrNvEVBV1zDWBbPWl-7_8N-2s_RAWliOCtFpVjSZWy1nJbhosr7ipvJaUkKcLllasTPprvobDU_uKYtOSx5qoBgVmRaKDZD3Gn9bKpdXaPV_DXe4U17SjWefZ0MLT29FKu4AYfDUIYubw/s1600/youtbe.png" alt="" />
<span class="light-text">YouTube</span>
</a>
</div>

<div data-navid="om-nav2" class="tile-bt solid-darkblue shadow-blue margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUVxQOx3HX-MVD5cgVDfjs82zIsH9b6Kz6IkXI2djmRX2cdy2ECxNITpNv7KVpD_jyMNn8dUfmLh5WhHdY1dSK5Ps_ZYTmdvdV4x8ia6z3MGqQE1WipkIOKV8dZk7qjU2VV0v6RHSgIa0/s1600/face.png" alt="" />
<span class="light-text">Facebook</span>
</a>
</div>

<div data-navid="om-nav" class="tile-bt-large solid-blue shadow-blue margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkuz6gfEjw1g8TiizBbkdfyZaXbvCgKbxR4-mb7Fje5BnGCOWtpgwarCvZOOt4YzIqenswAQM2dfLGHZkK1JiLQIzkgVaWzGE7NIK9wy7LVH1TjYWaRQnWZaI8JIIh63NgqVGiRHVVkqg/s1600/photo.png" alt="" />
<span class="light-text">Photos</span>
</a>
</div>

<div data-navid="om-nav2" class="tile-bt solid-olive shadow-green margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyA-IypczuAnV4eQzXbZqlc51FJcV9tqm-q1huwu6fQDoHCIgvdN-Vr769l1OWsKkJRLrEVo6Wy_hJRMNE8BihqGkGuCHVqPOqkIH7wV6M475Iyot3fBW7-wPbKB2RrsD6nfF87xabjd8/s1600/music.png" alt="" />
<span class="light-text">Music</span>
</a>
</div>

<div data-navid="om-nav" class="tile-bt-large solid-blue-2 shadow-blue margin-5 floatleft MblMetroMenu">
<a href="http://konozblog.blogspot.com" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfI3tc8RVUtiohmArGePHAP59wOpmeLmFV-m-0EXpI5rhK1woEZcgmIGuxz2XcV5bfpKg9p0yqRh9N-t2F8kbR1ZNRGd6XDyBR-CLfuAF_uqG-eYzh0pkcJ4KymJkHaqAJoFOJC9_3l1I/s1600/MBL.png" alt="" />
<span class="light-text">konozblog</span>
</a>
</div>

</div>

هذا كل شيء. وقد تم دمج وجهة نظام ويندوز 8 تبدو وكأنها قائمة التنقل في موقع الويب الخاص بك.

تذكر: يمكن استخدام هذه القائمة على أي منصة تدعم HTML أو CSS والخ.

اتمنى ان تكون نالت اعجبكم «•¨•» وإن شاء الله فى القريب العاجل هناك بعض المفاجآت الجديدة.فاتبعوني وتأكدوا أن كل من مرّ وأصبح من متابعي مدونتي , سأسارع وأصبح من متابعي مدونته. وفي انتظار ردودكم الطيبه وارائكم واستفسارتكم. والسلام عليكم ورحمه الله وبركاتة

المصدر

ده أنا مدون كدا وموقعي ليس لها مثيل

2012-12-11T23:14:00.001+00:00

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

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

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

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

اول ما شطح نطح:

تقال لمن خرج عن نص الوفاء للذين حوله , او اولئك الذين منحوا الفرصة للاخرين لوضع رجلهم على اول السلم, ليستكملوا هم الصعود بذكاء ووفاء , علمته الرماية كل يوم فلما أشتد ساعده رماني ، ربما كثيرين منه يريد أن يصبح مدوناً متميزاً وقد يكون السبب جني الارباح , وربما تمتلكون أسباب أخرى , ومعظمكم يعلم أن بداية التدوين تبدأ من إختيار القالب المناسب للمدونه ومن ثم المحتوي , هنالك من إحترف التدوين وسهر وأصبح لعدة ليالي يقوم بتقديم هذا المحتوي الذي يراه مناسباً كي يتحقق الهدف المنشود وهؤلاء لاخوف عليهم في هذه الخطوه التي تعدّ مهمه جداً في بداية دخولك لعالم التدوين , وأعتقد أن الكثيرين يعلمون أن هذا هو بداية الطريق !! ولكن نأتي الان لمن لايتقنون آي شي ولايعلمون عنه شيئاً لا يعرفون ما معنى كلمة مدونة أصلا وهولاء لم يكن عليهم خوفاً عندما بدأ المطورين العرب من مد يد المساعده مجاناً وذلك حسناً لنيتهم وتعاونهم , وإلى هنا أعتقد أنه لاتوجد أي مشكلة في الخطوة الاولى أذا أردت أن تسلك درب النجاح لان الكثيرين من المطورين العرب يمدّون لكم يد المساعده !! المشكلة الخطيره التي أحدثها من دخل عالم التدوين جديداً ويريد الشهره على حساب غيره في زمن وجيز ، أؤكد ان بعضكم إعتقد أن المشكله هي النسخ واللصق من المدونات الأخرى !! ،، صراحه هذه مشكله ليست بالخطيره , بل المشكله هي عندما يشقى ويتعب المطوّر العربي بمساعدتك تقوم أنت وفي ثواني بمسح الحقوق !! صرآحه لا ادري ما الفائده التي يجنيها الشخص من مسح الحقوق , هل تستمتع عندما تضيّع مجهود الآخرين ؟؟ هل لتوضح انك من صممت هذا القالب ؟؟ أنت وجدت من ساعدك في تعريب وتطوير قالبك تقوم بمسح جهوده ؟؟ , صراحه فهذا أخطر خطأ لأنك بهذا توقف المعرّب والمطوّر من مساعدة الآخرين لانك جعلت من سهره وجهدة هباءاً , لذلك أتمنى أن تراعوا لهذه النقطه , وصراحه هذه لاتفيدك في النمو والتطور كمدون بشئ بل أنها ستقف عقبه في تقدمك !!

مصباح الطريق:

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

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

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

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

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

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

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

شخصيات ناجحة تعلم منهم | الكاتب : محمد الدهيمي , الكاتب : وائل نووت , الكاتب :أحمد مجدى |~
مصدر فكرة التصميم: معمل ألوان |~