صاحبان وبلاگ بخونن، واسه وبلاگت تو 3 قدم آیکون بساز!

متاسفانه تصاویر مربوط به این آموزش توسط هاست اصلی از بین رفت. ولی متن آموزش همچنان پابرجاست.

اینبار یه مطلب جالب و ویژه داریم. همونطورم که گفتم فقط به درد دوستایی میخوره که وبلاگ یا وب سایت دارن. میخوایم با هم واسه وبلاگمون آیکون طراحی کنیم.

آخه چندوقت پیش داشتم تو مجله ی "اینترنت" (آدرسش www.NetMag.ir) یه مقاله ای در همین مورد میخوندم ولی تستش که کردم کار نکرد، یکم تو اینترنت گشتمو تغییرش که دادم کار کرد. بعدش تصمیم گرفتم که واسه همه ی دوستای گلم بنویسمش که همه ازش استفاده کنن. امیدوارم وب فارسی رو با هم روز به روز کامل و زیباتر کنیم.

خوب اولش باید بدونیم که آیکون چیه؟ به عکس های کوچولویی که کنار نوار آدرس شما تو مرورگر ظاهر میشه میگن آیکون.

(نوار آدرس همونجایی هست که شما آدرس سایت ها رو تایپ میکنید)

 مثلا به عکس های زیر نگاه کنید:

اگه به سایت گوگل برید، کنار نوار آدرس (سمت چپ نوار آدرس) اون عکس بالایی ظاهر میشه که بهش آیکن سایت میگن.

عکس پایینی رو هم ببینید:

اینم آیکون سایت بلاگ اسکای هست که سمت چپ نوار آدرس ظاهر شده!

به اینا میگن آیکون. صاحبان وب سایت ها میتونن اینارو واسه خودشون طراحی کنن چون مستقل هستن ولی وبلاگ ها داستان متفاوتی دارن، چون وبلاگ ها جزو زیر مجموعه ی سرویس دهنده ها محسوب میشن پس آیکون سایت اصلی رو میگیرن واسه روشنتر شدن موضوع به این مثال توجه کنید: مثلا اگه شما یه وبلاگ تو بلاگ اسکای داشته باشید به طور پیش فرض آیکون وبلاگتون همون آیکون بالایی (آیکون بلاگ اسکای) میشه، چون ما زیر مجموعه ی بلاگ اسکای هستیم و این در مورد تمام سرویس دهنده های وبلاگ صادق هست و همه اینجوری هستن (یعنی وبلاگ های میهن بلاگ و پارسی بلاگ و ... آیکون سایت اصلیشونو میگیرن). اما ما اینجا میخوایم این آیکون رو عوض کنیم و یه آیکون بهتری که خودمون طراحی کردیم رو جاش بزاریم. خیلی آسونه، حالا با هم کار میکنیم و میبینیم.

- اولین قدم، طراحی آیکون

اولین کاری که ما باید بکنیم اینه که یه آیکون خفن واسه خودمون طراحی کنیم، برای طراحی آیکون نرم افزارهای زیادی وجود داره مثلا لیست پایینی رو ببینید:

IconWorkshop، IconCool Studio، Icon Toy و Articons Pro و خیلی نرم افزارهای دیگه ای که همه جا ریخته رو زمین!

فقط دقت داشته باشید که این آیکون با بقیه یه فرق کوچولوای داره! باید مشخصات خاصی داشته باشه.

این آیکون ها باید تو سایز 16x16 یا 32x32 باشن (غیر از اینار رو واسه اینکار نمیشه استفاده کرد) و همچنین باید به صورت 16 تا 256 رنگ باشن.

حالا خوب دقت کنید، هر نرم افزاری که واسه طراحی آیکون دارید اصلا مهم نیست! آخه همشون عین هم کار میکنن، یه چیزی تو مایه های زیر رو باید انجام بدید.

اولین قدممون اینه که نرم افزار رو باز کنیم. حالا از منوی File گزینه ی New رو انتخاب میکنیم (دقت داشته باشید که تو بعضی از نرم افزارها باید مشخص کنید که آیکون باید برای ویندوز باشه). حالا پنجره ای باز میشه که اونجا باید مشخص کنید که آیکونتون چه سایز و چه رنگ باشه (معمولا یه قسمتی با نام Colors دارن که باید رو 256 (یا هرچیزی که توش 256 باشه!) تنظیمش کنید. قسمت دیگشون Size یا Size in Pixel هست که باید اندازه رو به نرم افزار بدید (بهتره 32x32 باشه) و در آخر هم روی OK کلیک کنید) و آیکون رو به سلیقه ی خودتون طراحی کنید که دیگه به سلیقه ی شما مربوط میشه.

من آیکون زیر رو طراحی کردم: (سلیقه ی خوشکل منو ببینید!!!!!!!!!!!!!!)

(البته آیکون خیلی کوچیکه و من بزرگش کردمو اینجا گذاشتم)

- دومین قدم، آپلود آیکون

خوب بعد از طراحی آیکون شما باید اونو وارد فضای اینترنت کنید، برای این کار میتونید از میزبان های رایگان عکس یا همون "هاست" استفاده کنید (توجه کنید که هر هاستی این فایل ها رو پشتیبانی نمیکنه، آخه اینا فرمتشون ICO هست، درضمن ما به لینک مستقیم هم نیاز داریم)

کلی تو اینترنت گشتم تا سایت پایینی رو پیدا کردم (پدرم در اومد)

(درضمن من فقط این سایت رو معرفی کردم، مسئولیت استفاده از این سایت بر عهده ی خود شماست)

وب سایت www.merrypic.com این فایل هارو رایگان و با لینک مستقیم آپلود میکنه، به این سایت برید و روی Browse کلیک کنید و فایلتون رو انتخاب کنید و بعد آپلود رو بزنید، بعدش صفحه ای باز میشه که چندتا لینک رو نشون میده، دنبال گزینه ی Direct Link بگردید و آدرس مقابلشو کپی کنید و نگه دارید. (ما باید از همین آدرس استفاده کنیم.)

اینم از آپلود آیکونمون، آخرین قدممونو پایین بخونید.

- آخرین قدم، تنظیمات وبلاگ

در آخرین گام به بخش ویرایش قالب که در قسمت مدیریت همه ی وبلاگ ها قرار داره برید (منظورم جایی هست که کدهای قالب وبلاگتون اونجا قرار داره)

حالا فقط کافیه که آدرس آیکون خودتونو  (همونی رو که بالا گرفتیم) تو کد پایینی وارد کنید و این کد رو وارد قالب وبلاگتون کنید.

خوب به کد دقت کنید:

<link href="ADDRESS" rel="icon" type="image/x-icon" />

تنها کاری که باید بکنید اینه که آدرس اون فایلی رو که آپلود کردیم رو بجای اون قسمت قرمز رنگ وارد کنید. (یعنی میشه یه چیزی تو مایه های کدهای پایینی)

<link href="http://www.merrypic.com/files/eeawwl8bm1ruo5vfvlat.ico" rel="icon" type="image/x-icon" / >

در این مثال قسمت قرمز رنگ آدرس آیکونی هست که من واسه خودمو آپلود کرده بودم (یادتون باشه که آدرس من با آدرس شما متفاوته)

راستی.. بجز قسمت آدرس دیگه به هیچ قسمتی دست نزنید.

خیلی خیلی مهم: حتما بعد از آدرس، .ico رو بزارین (باید فرمتش رو حتما ذکر کنید، درغیر این صورت آیکون رو نشون نمیده، فرمت آیکونها، ICO هست)

حالا کدی رو که بهش آدرس دادین رو در بخش ویرایش قالب وبلاگتون و بین <Head> </Head> وارد کنید. عکس پایینی رو ببینید: (شماره ی 1 داره میگه که به کجا در بخش مدیریت وبلاگمون بریم. شماره ی 2 داره کد ما رو نشون که بین اون 2تا Head وارد کردیم.)

(اگه عکس رو ذخیره کنید، بزرگتره!)

در آخرین گام تنظیمات قالبتون رو ذخیره کنید و برید وبلاگتون رو ببینید.

عکس پایینی، عکس وبلاگ منه: (خوشکل شد؟)

البته این وبلاگ، وبلاگ رسمی من نیست و من واسه تست اونو ایجاد کردم.

اگه شما همه ی کارهارو درست انجام دادید و آیکون رو نشون نداد، فایل های Temp و کوکی و هرچیزه دیگه ای رو که مرورگر شما ذخیره میکنه رو پاک کنید (به روش زیر)

در اینترنت اکسپلورر به Tools و بعد Internet Option برید و روی Delete Files کلیک کنید و در پنجره ی باز شده حتما گزینه ی Delete all offline content رو انتخاب کنید.

در فایر فاکس به Tools برید و بعد Clear Private Data رو انتخاب کنید، در پنجره ی باز شده همه ی گزینه هارو انتخاب کنید  و بعدم روی Clear… کلیک کنید تا دخل همشون رو بیاره!

 راستی، تا یادم نرفته بگم که شما میتونید کتاب الکترونیکی این آموزشو از آدرس پایین دانلود کنید:

http://www.4shared.com/file/141439658/37bbc694/Icon_ebook.html