|# |

#

|#|

#

|#|

#

|#|

#

|#|

#

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

16- لا تستخدم النصوص المضيئه :
إلا إذا كان زوارك من عام  1996 .... عزيزى المدون ..  إجعل النصوص عاديه جدا. فزوارك من عام 2011

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

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

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

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

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

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

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

24- لا تضع الإعلانات فى وصط التدوينه :
قد يسبب هذا مزيدا من الأرباح على المدى القصير ولكنه سيؤثر بشكل سلبى على العلاقه بينك وبين الزوار.

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

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

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

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

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

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

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

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

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

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

35- استخدم دائما ALT و TITLE للصور على مدونتك :
فهذا الأمر بسيط ويؤثر جدا فى محركات البحث كما يضع توضيحا اكبر للزوار.

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

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

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

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

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

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

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

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

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

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

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

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

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

  1. الرأس ( HEAD ) وهو بمثابة تعريف للصفحه
  2. الجسم ( BODY ) أى محتوى الصفحه
وهكذا فإن شكل الكود لصفحة HTML يكون كالتالى
<HTML>
   <HEAD>
      <TITLE>
عنوان الصفحه
      </TITLE>
   </HEAD>

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

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

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

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

استخدم سى اس اس الإصدار الثالث ( css3 ) لتجميل مدونتك - دليل كامل لكيفية الاستخدام

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

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

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

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

ثانيا : كيف نحصل على إسم معرف خاص بأداه محدده نريد التعديل عليها ؟؟  نحن نقوم بتسمية كل إضافه بإسم مثل ( المتابعون - أقسام المدونه - إشترك معنا - تبادل إعلانى ... وهكذا ) كل ما نفعله أننا سنقوم بالبحث فى كود المدونه عن إسم الأداه ( وليكن إسمها - المتابعون - سنبحث عنه ), وعندها سنجد هذا الكود :
<b:widget id='Followers1' locked='false' title='المتابعون' type='Followers'/>
المتابعون .. هو إسم الأداه التى قمنا بالبحث عنه.
followers1 .. هو إسم المعرف الذى نريده ونحتاجه لعمل تعديلاتنا.

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

رابعا : نبحث عن الكود التالى
]]></b:skin>
خامسا : وهى الخطوه الأهم - إضافة لمسات css3 على الأداه
نضع الأكواد التاليه قبل الكود السابق مباشرة
#followers1 {
نضع هنا الكود الذى نريده
}

#followers1:hover {
نضع هنا الكود الذى نريده
}
والان إنتهى الأمر .. ولكنى كتبت فى الأكواد ( نضع هنا الكود الذى نريده ) إذا ما هو الكود الذى نريده ... لا تتعجلوا سأخبركم الأن.

سأدلكم على الموقع الذى أتعامل معه أنا شخصيا لسهولته ودقته وهو موقع css3 generator الذى يصنع أكواد لهذا الغرض.

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

Border Radius وهو الإختيار الخاص بالحدود ( border ) وشكلها, ويطرح عليك سؤال عندما تدخل على هذا الإختيار وهو
Are your borders going to be rounded equally?    Yes   No
ومعناه هل تريد الحدود الخاصه بالأداه حوافها متماثله فى نسبة الإلتواء ؟؟
إن كنت تريد عمل حواف متماثله فى الإلتواء فقم بإختيار yes وستصبح الحدود على الشكل التالى
وسيكون الكود الخاص بها مثل هذا
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
والقيمه 20px هى مقدار الإلتواء ويمكنك التحكم فيه بالزياده أو بالنقص كما تريد.
أما إن كنت تريد عمل حواف غير متماثله فى الإلتواء فقم بإختيار NO وستصبح الحدود على الشكل التالى
وسيكون الكود الخاص بها مثل هذا
-moz-border-radius-topleft: 50px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 50px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-radius: 50px 0px 50px 0px;
border-radius: 50px 0px 50px 0px;
والقيم 50px و 0px هما مقدار إلتواء الحواف وكما نرى فإن هناك قدره على التحكم فى كل حافه ومقدار إلتوائها من الإربع حواف الموجوده.

نقم الإن بإضافة الكود الذى أنشأناه فى مكانه المخصص فى كود html الذى ذكرناه سابقا ( نضع هنا الكود الذى نريده ) ليصبح شكله كالتالى :
#followers1 {
-moz-border-radius-topleft: 50px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 50px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-radius: 50px 0px 50px 0px;
border-radius: 50px 0px 50px 0px;
}
ولكن يتبقى الأن جزء آخر من الكود وهو
#followers1:hover {
نضع هنا الكود الذى نريده
}
ولنعرف أن الوسم 
:hover
يحدد شكل الأداه عند المرور عليها بمؤشر الماوس, ونستطيع استخدامه لعمل تأثير من خلال إعطاء شكل للأداه فى العرض العادى وعند مرور الماوس عليها يتغير شكلها لتعطى بذلك تأثيرا ساحرا على الأداه, ومن الممكن أن يكون الكود كاملا كالآتى
 #followers1 {
-moz-border-radius-topleft: 50px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 50px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-radius: 50px 0px 50px 0px;
border-radius: 50px 0px 50px 0px;
}

#followers1:hover {
-moz-border-radius-topleft: 100px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 100px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-radius: 100px 20px 100px 20px;
border-radius: 100px 20px 100px 20px; 
}
وكما نلاحظ فالقيم 50px , 0px هى القيم التى ستكون عليها حواف الأداه فى الوضع العادى
والقيم 100px و 20px هى القيم التى ستكون عليها حواف الأداه عند مرور الماوس عليها

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

Box Shadow وهو الإختيار الخاص بظل الأداه, وهو يضيف ظلا للأداه,
ويعطيك الموقع إختيارات عديده للتحكم فى شكل الظل ولونه ودرجة وضوحه ( عليك أنت القيام بالتجربه ) وسيكون الكود المعطى من الموقع كالتالى
-webkit-box-shadow: 3px 3px 5px 4px #000000;
-moz-box-shadow: 3px 3px 5px 4px #000000;
box-shadow: 3px 3px 5px 4px #000000;
Text Shadow وهو الخيار الذى يعطى ظلا للكتابه أو للخط المستخدم فى الأداه.
وهناك الكثير من الإختيارات الأخرى ولكنى سأتركها لكم لتجربتها بأنفسكم والتوصل إلى ما تريدونه.

كما يمكنكم التحكم فى لون الخلفيه بإضافة الكود التالى إلى الأكواد
background:#ff3388;
ويتحكم الكود البرتقالى فى اللون ونستطيع تغييره كما نريد.
ومن الممكن أن يصبح الكود النهائى كالتالى ( هذا الكود من كود مدونتى ) :
#Followers1 {
padding: 10px;
background:#ffd600;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#Followers1:hover {
padding: 10px;
background:#fae46f;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;
}
أتمنى أن تكون هذه التدوينه قد أدت المطلوب منها.

عمل ألبوم صور فى التدوينه أو فى المدونه عموما بتأثير جميل جدا عند مرور الماوس عليه





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

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

ناتى لمرحلة التنفيذ والأكواد الآن :

المرحله الاولى بعمل كود HTML للصور : 
لوضع الألبوم فى داخل التدوينه سوف نستخدم تعديل HTML الخاص بالتدوينه التى نقوم بتدوينها ونضع هذا الكود فى المكان الذى نود وضع الألبوم فيه
<a href="javascript:void(0);" class="album">
  <img src="URLIMAGEN_1" class="photo1" />
  <img src="URLIMAGEN_2" class="photo2" />
  <img src="URLIMAGEN_3" class="photo3" />
</a>
مع مراعاة استبدال الكلام باللون الأحمر بروابط الصور المراد وضعها فى الألبوم, ثم نقم بحفظ التدوينه.

ولو أردنا وضع الألبوم فى أى مكان آخر فى المدونه كل ما علينا فعله هو عمل إضافة أداةHTML/JAVASCRIPT ولصق الكود السابق بها ثم عمل حفظ.

المرحله الثانيه وهى إضافة تأثير CSS على الكود ونقوم بإتباع الآتى :
إذهب إلى تحرير HTML الخاص بقالب المدونه وقم بالبحث عن
</head>
 ثم قبله مباشرة ضع الكود التالى :
<style>
  .album {
    display:block;
    position: relative;
    vertical-align: top;
    width: 250px;
    z-index: 5;
  }
  .album img {
    border: 10px solid #ABC;
    display: block;
    height: 250px;
    left: 0;
    position: absolute;
    top: 0;
    width: 250px;
  }
  /* un agregado para que las imágenes se ponga en primer plano */
  .album img:hover {
    z-index: 1000;
  }
@-moz-keyframes image1 {
    0% {-moz-transform: rotate(0deg) translate(0, 0) scale(1.0);}
    100% {-moz-transform: rotate(-6deg) translate(-130px, -3px) scale(1.1);}
  }
  @-webkit-keyframes image1 {
    0% {-webkit-transform: rotate(0deg) translate(0, 0) scale(1.0);}
    100% {-webkit-transform: rotate(-6deg) translate(-130px, -3px) scale(1.1);}
  }

  @-moz-keyframes image2 {
    0% {-moz-transform: rotate(0deg) translate(0, 0) scale(1.0);}
    100% {-moz-transform: rotate(0deg) translate(0, -3px) scale(1.1);}
  }
  @-webkit-keyframes image2 {
    0% {-webkit-transform: rotate(0deg) translate(0, 0) scale(1.0);}
    100% {-webkit-transform: rotate(0deg) translate(0, -3px) scale(1.1);}
  }

  @-moz-keyframes image3 {
    0% {-moz-transform: rotate(0deg) translate(0, 0) scale(1.0);}
    100% {-moz-transform: rotate(6deg) translate(130px, -3px) scale(1.1);}
  }
  @-webkit-keyframes image3 {
    0% {-webkit-transform: rotate(0deg) translate(0, 0) scale(1.0);}
    100% {-webkit-transform: rotate(6deg) translate(130px, -3px) scale(1.1);}
  }

  .album:hover .photo1, .album:focus .photo1 {
    -moz-animation-name: image1;
    -moz-animation-duration: .2s;
    -moz-transform: rotate(-6deg) translate(-130px, -3px) scale(1.1);
    -webkit-animation-name: image1;
    -webkit-animation-duration: .2s;
    -webkit-transform: rotate(-6deg) translate(-130px, -3px) scale(1.1);
  }
  .album:hover .photo2, .album:focus .photo2 {
    -moz-animation-name: image2;
    -moz-animation-duration: .2s;
    -moz-transform: rotate(0deg) translate(0, -3px) scale(1.1);
    -webkit-animation-name: image2;
    -webkit-animation-duration: .2s;
    -webkit-transform: rotate(0deg) translate(0, -3px) scale(1.1);
  }
  .album:hover .photo3, .album:focus .photo3 {
    -moz-animation-name: image3;
    -moz-animation-duration: .2s;
   -moz-transform: rotate(6deg) translate(130px, -3px) scale(1.1);
    -webkit-animation-name: image3;
    -webkit-animation-duration: .2s;
    -webkit-transform: rotate(6deg) translate(130px, -3px) scale(1.1);
  }
</style>
ثم قم بحفظ القالب.

والآن قد إنتهينا وتستطيع نشر تدوينتك وترى التأثير على مجموعة الصور.

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

Twitter Delicious Facebook Digg Stumbleupon Favorites More