16‏/05‏/2009

Add Favicon to your Blog ..

الدرس طلبته من اختي .. lil.D
وماقصرت حطت الدرس بالتفصيل 
الله يجزيها الخير ويبارك فيها وييسر لها كل خير ..

:)
..

>> انتبهتوا ان مدونتي كاشخه اليوم :p
::
::



السلام عليكم ورحمة الله وبركاته
بناءً على طلب الأخت:
    >>> ^^يعني انا ~ 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)
لا مانع من استخدام صورة متحركة

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


هالموقع فيه ايكونـات حـلوة .. 


http://www.evelyns-place.com 





:)





5 COMMENT.s:

Twinkle يقول...

بصراحة درس عجييب
وياسلاااااام على كشخة المدونة اليوووم
حلو القلم :)

مشكوورة عالدرس انتي والاخت lil.D
يعطيها العافيه

بالنسبة للصورة حلوة لانها تميز المدونة
بس تعرفين انا مرة حطيت كود في ال HTML
وعفسلي المدونة خلاها تنعكس

اخاف اجرب واتوهق

رجاوي يقول...

انتي دوم في المقدمه باسلوبك الراقي ومدونتج المتميزة شكرا للدرس نتظر المزيد

Scribble يقول...

twinkle ..
شكراا من ذووقج =)
تصدقين لو ماتنعفس الاكواد ماتتعلمين ^^ اسألي مجرب

مره حاولت اخبص فيها واعتفست المدونه فووووق تحت ورديت عدت كل شي من يديد ^^"


..

رجاوي .. مشكووره حبيبتي >> اخجلتي تواضعي خخ

احمد يقول...

www.shbabgamed1.blogspot.com

غير معرف يقول...

تمتع بالمواضييع الممميزه عن العنايه بالبشره http://www.shbabgamed1.blogspot.com/

إرسال تعليق

 
Blog Template by Delicious Design Studio