Monday, May 11, 2009

Add Favicon to your Blog أضف صورة بجانب عنوان مدونتك

السلام عليكم ورحمة الله وبركاته
بناءً على طلب الأخت:
~ scribble ~

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

.. والأيكونة اللي نحطها بجانب اسم الموقع نسميها ..
.. Favicon ..

وهذا مثال للي نتكلم عنه:

http://lil.d84.googlepages.com/Favicon-favico.jpg


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


ندخل طبعا أول شي على Layout
You can Access directly to the layout from your Dashboard

http://lil.d84.googlepages.com/Favicon-dashboard.jpg

من عقبها نروح لتعديل HTML

http://lil.d84.googlepages.com/Favicon-edit-html.jpg

ولا تنسون تخزنون نسخة احتياطية من المدونة .. في حالة حد خبصولعوز المدونة !! ..
So it is good to backup your blog

http://lil.d84.googlepages.com/Favicon-backup-blog.jpg


الحين نضيف الكود اللي نباه
نتأكد أن الكود اللي نبا نضيفه يكون في الهيد .. يعني بين:

<head > and <head/> tags


فأحسن شي نكتبه تحت الهيد تاغ .. وشوفوا انا وين حطيت الكود مالي
يريت تحطونه فنفس المكان بالضبط .. عشان ما يكون في اي مشكلة
"أنا حطيته في الهيد وتحت التايتل مباشرة"

http://lil.d84.googlepages.com/Favicon-add-code.jpg

الكود:
الصورة المستخدمة للمثال: http://lil.d84.googlepages.com/shy.gif
عنوان الصورة: http://lil.d84.googlepages.com/shy.gif

<link href='http://lil.d84.googlepages.com/shy.gif' rel='shortcut icon' type='image/gif/'>


"كتجربة حطوا الكود مثل ما هو وخزنوا المدونة ورفرش المتصفح وشوفوا النتيجة
وعقب غيروا العنوان الازرق بعنوان الصورة اللي بتستخدمونها"


ملاحظات مهمة:

(1)
يجب مراعاة قياسات الصورة المستخدمة .. لأن القياس المثالي يكون:
16×16 pixels


(2)
لاحظوا أنكم لازم تغيرون الكود على حسب امتداد الصورة مالتكم
لأن الامتداد يختلف مثل:
jpg
gif
ico
في المثال اللي انا استخدمته .. امتداد الصورة هو
gif
وفي الكود
type='imge/gif'/
"الرجاااااء التأكد من هذي الخطوة عشان ما تقولون ما طلع لكم"


(3)
لا مانع من استخدام صورة متحركة
لو تلاحظون مثال مدونتي .. ترا الأيكونة تتحرك




في النهاية .. إذا عندكم أي سؤال لا تترددون بطرحة
ولمزيد من الدروس: دروس وأفكار تقنية

ولا تنسوني من صالح الدعاء

12 comments:

Scribble said...

ولك تسلمي لي

الله يجزيج الخيير ويبارك فييج

ماقصرتي والله ..

شكرا عزيزتي ..

:)

وجاري التطبيق ...

Scribble said...

مايستوي حملت الصورة وحطيتها بس مايرضى يحفظ التغيراات :s

lil.D said...

print screen please

Scribble said...
This comment has been removed by the author.
Scribble said...

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

http://www.arb-up.com/files/arb-up-2008-6/4e957887.jpg

lil.D said...

فالكود في فراغ بين كلمة لينك والقوس، أول الكود، خلي كلمة لينك لاصقة فالقوس، شوفي الكود اللي فالموضوع كيف

وردي علي خبر

Scribble said...

انشغلت شوي ونسيت ارد عليج =) ..

..

بالنسبه للكود سويت مثل ماقلتي ومااستوى .. ! ..

:s
>>> ادري ازعجتج ^^'

lil.D said...

غريبة يا سكربل؟ ... متاكده عدلتي الكود؟

مستر مطوع said...

يزاج الله خير ... جاري التخبيص


^-^"

Scribble said...

يس يس

استوى واخيرا .. ^^

كان في خطأ باخر الكود وانتبهت عليه ..

lil.D said...

مستر مطوع:

بالتوفيق بالتخبيص

lil.D said...

Scribble:

يالشريرة :( خليتيني افكر وافكر لول
يالله اهم شي استوى

ههههه شكل الايكونه وهي ترمش عدال اسم مدونتج حلووو هههه