2010/02/09

طريقة عمل أيقونه عامه لمدونتك

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

 قد يتساءل البعض , ما هي الأيقونة العامة ؟ فإذا نظرت مثلا بجوار رابط موقع بلوجر http://www.blogger.com  بمتصفحك سوف  تجد حرف الـ  B بالون البرتقالي فهذه هي الأيقونة العامة لموقع بلوجر لذلك كل الموقع المشهورة لديها أيقونه عامه خاصة بها تعطي للموقع لمسه فريدة وخاصة مثل جوجل وياهو والفيس بوك والعديد من المواقع .
فمن الجميل أن تضع لمدونتك أيقونه عامه فريدة ومميزه ومختلفة عن الآخرين خاصة بموقعك , لكن يتطلب منك أشياء ، لا تقلق فهي أشياء بسيطة سوف نتحدث عنها الآن .
متطلبات عمل أيقونه لمدونتك :
1)      برنامج لرسم الأيقونة :
تحتاج لبرنامج لرسم أيقونه خاصة بك مثل برنامج الفوتوشوب ويكون مقاس الصورة 20x20 بكسل أو من الأفضل 32x32 بكسل ولاحظ يجب أن تكون الأيقونة مربعة الشكل ويمكنك اختيار امتداد الصورة ما بين gif أو png أو من الأفضل أن يكون الامتداد ico
2)      موقع لرفع الصورة
تحتاج أيضا موقع لرفع الصور مثل موقع imageshack أرفع الأيقونة بأحد مواقع الرفع الكثيرة وأنسخ رابط الصورة وضعه في مكانه داخل الكود التالي :

<link href='رابط الصورة يوضع هنا' rel='shortcut icon'
type='image/vnd.microsoft.icon'/>

*وأخيرا طريقة وضع الكود داخل مدونتك : أذهب إلى هذا المسار ] لوحة التحكم الرئيسية - التخطيط – تحرير html [ وأبحث عن هذا الكود :
<b:skin>
بالضغط على CTRL+f ووضع الكود بها ، وفوقها مباشرة ضع الكود السابق وأحفظ وشاهد التغير .
ملاحظه :
غير كلمة icon الموجودة بنهاية الكود باللون الأحمر بـ gif أو png حسب امتداد الأيقونة التي سوف تضعها .
وتذكر أخذ نسخه احتياطيه قبل إضافة أي كود تجنبا للأخطاء .

وممكن تشوف الشرح على الفيديو التالي :


أنا أعلم أن الفيديو ردئ بعض الشئ لكن ان شاء الله سوف أحسن شرحي بالفيديو مع المواضيع القادمة
ولتحميل الفيديو من هنا ( تحميل الفيديو )
وأتمنى لكم التوفيق
متنساش تشترك فى القائمة البريدية عشان يوصلك احدث الدروس
لتحميل الكود من هنا

هناك 11 تعليقًا:

  1. سلام الله عليك أخي
    طريقة جميلة فعلا ومهمة سيتم تطبيقها قريبا إن شاء الله

    ردحذف
  2. لم تنجح الطريقة ولم تتغير الأيقونة

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

    ردحذف
  4. تم أضافة مقطع فيديو لمذيد من الشرح

    ردحذف
  5. جميل جداً سيتم التطبيق بإذن الله
    جزاك الله خيراً

    ردحذف
  6. أخي الكريم
    قمت بتطبيق الخطوات ولم ينجح معي أيضا..
    امتداد أيقونتي جيف..
    عندي سؤال أيضا : يوجد كودينskin
    فأيهما المقصود؟؟
    أنا وضعت قبل الكود الأول
    جزاك الله خيرا

    ردحذف
  7. كمونة :
    اذن يجب اولا ان تغير الأمتداد الموجود في الكود "المظلل باللون الأحمر في الكود الموجود في هذا الموضوع" إلى gif
    ثم تبحث عن هذا الكود الذي سبق وضعه في الموضوع :
    b:skin
    و سوف تجد بجوارها هذا الكود :
    <![CDATA[/*
    وسوف تجدهما في الجزء الأعلى من HTML
    وشاهد هذه الصورة لتعرف مكان وضع الكود بالضبط :
    http://img534.imageshack.us/img534/1969/12321nl.jpg
    وضع الكود كما بالصورة فوق هذا الكود b:skin

    ويفضل ان تكون الايقونة صغيرة كما ذكرنا 32×32 على الأكثر

    وبأذن الله سوف تعمل

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

    واتمنى لك أخي كمونة التوفيق

    ردحذف
  8. شكرا لك على الايضاحات

    ردحذف
  9. اضافة جميلة يا اخى الكريم
    جارى التطبيق على مدونتى
    ارجو معرفة رايك فى مدونتى
    http://familyandkidsguide.blogspot.com/

    ردحذف
  10. نجحت في شي الحمد لله لولولولولي
    شكرا شكرا
    مدونة مقهى عازبة

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

    ردحذف

يسعدنا تعليقك