اول از همه به یه تصویر جهت اون مناسبت نیاز دارین که بسته به سلیقه خودتون می تونید بسازید.
الان تو اکثر وبلاگها لوگوهای مثلثی که سمت چپ یا راست وبلاگ قرار می گیره مرسوم شده. ولی شما خودتون می تونید ابتکارات جدید تری داشته باشید . منظور اینکه حتماً لزومی نداره که مثلثی باشه .
[ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]
اما اگر که خواستین مثلثی باشه باید تو فتوشاپ مثلث رو بسته به اینکه سمت چپ یا راست وبلاگ باشه درست کنید و با فرمت png ذخیره کنید تا نیمه پائینی خالی از تصویر باشه.
مثل این لوگو که یه لوگوی مثلثی هستش .
[ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]
(کد نمونه هم مربوط به همین تصویر هستش .)
بعد از درست کردن لوگو باید تصویر خودتون رو داخل فضایی که تو اینتر نت در اختیار دارین آپلود کنید . حالا این فضای رایگان باشه و یا متعلق به وبلاگ خودتون فرقی نمی کنه .مهم دسترسی به لینک اصلی تصویر هستش .
بعد از این نوبت میرسه به مرحله کد مخصوص به لوگو .البته این کد معمولاً درون یک فایل جاوا اسکریپت جاسازی شده .
برای راحتی شما من این کد رو قرار دادم که قسمتهای مهمش رو براتون توضیح بدم .( البته بازم می گم کار زیاد سختی نیست . مخصوصاً برای کسانی که تا حالا با کدهای قالب وبلاگشون سر و کله زدن.)
مواردی رو که در موردش توضیح دادم و یا قابل تغییر هستن رو رنگی کردم.
تو تغییر دادن کدها مواضط نقطه ها و ممیز و کلن بقیه عناصر هم باشین. چون حذفشون ممکنه کارتون رو به هم بریزه.
// JavaScript Document
res = “<div style=\” z-index:1000; position:absolute; left:0px; top:0px; border-width:0px; \”>”
res += “<img src=\”http://rozze.persiangig.com/image/logo/narjess.png\” width=\”170\” height=\”170\” ”
res += “border=\”0\” usemap=\”#narjess\” /><map name=\”narjess\” id=\”narjess\”> ”
res += “<area shape=\”poly\” alt=\”گل نرگس پس کی میائی\” coords=\”1,1,169,1,169,169\” ”
res += “href=\”http://WWW.roze.ir/” target=\”_blank\” /></map></div>”
document.write(res);
اول از همه کد بالا رو درون یه نرم افزار ویرایش متن مثل نت پد کپی پست کنید.
تو خط اول چیزهایی که مهمه: position:absolute این کد باعث میشه که لوگوی شما بالاتر از سایر عناصر وبلاگ قرار بگیره . اگر که نیاز داشتین لوگوتون روی عناصر قرار نگیره (بسته به نوع لوگوتون ) مقدار position رو خالی بزارین. برای مثال لوگوی ایام فاطمیه
دستور بعدی هم برای چپ یا راست بودن هستش.left/right که با توجه به لوگوی طراحی شده تغییرش بدین . همچنین می تونید فاصله از کناره ها رو هم با تغییر عدد ۰ تغییر بدین .دستور بعدی هم که معلومه مربوط به قرار گرفتن لوگودر بالا هستش که نیازی به تغییر نداره . ولی می تونید فاصلش از بالای صفحه رو تغییر بدین.
border-width:0px; ضخامت حاشیه. اگر که نیازی به حاشیه مقدار ۰ رو تغیر بدین
تو خط بعدی آدرس تصویر و عرض و ارتفاع اون هستش . که اونم با توجه به لوگو تغییر پذیره .
خط سوم هم مربوط ضخامت حاشیه (”border=\”0\”) و نام و نشان لوگو هستش .
خط چهارم هم نحوه لینک دادن و مشخصات نوشته بادکنکی لوگوتون هستش و ناحیه که لینک دادین.
خوب خط پنجم که اخرین خط ویرایش شما هستش مربوط به لینک لوگو هستش که می تونید آدرس سایتتون رو وارد کنید . و همچنی نحوه باز شدن لینک.
بعد از اتمام ویرایش کدها با فرمت js. ذخیرش کنید (دقت کنید که اگر متن فارسی استفاده کردین با یونی کد ذخیره کنید) و مانند تصویر توی نت آپلود کنید به صورتی که به لینک مستقیمش دسرسی داشته باشید.
حتماًاین کد براتون آشناست :<script src=’http://www.roze.ir/logo/narjess.js’></script>
این همون کدیه که اکثر سایتها و وبلاگهای ارائه دهنده لوگوی مناسبتی ازتون می خوان درون قالب وبلاگتون قرار بدین. شاید حدس زدنش زیاد سخت نباشه که شما آدرس همون فایل جاوایی رو که ذخیره کردین رو درون این کد قرار بدین .
و در انتها مثل همیشه می تونید این کد رو درون قالب وبلاگ خودتون و یا دوستانتون در محل مربوطه قرار بدین.
محلش رو هم که دیگه می دونید نه ؟
بین این دو تا کد
</head>
<script src=’http://www.roze.ir/logo/narjess.js’></script>
<body>
این دوتا کد رو تو همه قالبهای وبلاگ و سایت میشه پیدا کرد . فقط باید یکم دنبالش بگردین
امید وارم که این آموزش کاربردی بوده باشه . البته بازم می گم من از برنامه نویس زیاد سر در نمایرم . اگر جایش گنگ و نامفهوم بود و یا اشتباه توضیح دادم خوشحال میشم که کمکم کنید.
منبع: