چگونه لوگوی حمایتی برای نمایش در سایت یا وبلاگ بسازیم؟

javascript-logo-site-weblog

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

ایجاد لوگوی حمایتی برای سایت یا وبلاگ در فتوشاپ و html


قبل از پرداختن به لوگوهای مثلثی و جاوا اسکریپتی، به جهت آسان تر بودن مطلب، اجازه دهید ابتدا به لوگوهای معمولی و نحوه نمایش کد آنها در باکس های html بپردازیم؛ بدین منظور ابتدا یک تصویر به عنوان لوگوی سایت یا وبلاگ خود با اندازه پیکسلی مشخص (بستگی به سلیقه و قالب صفحه شما داد) مثلا 120 در 80 پیکسل، در برنامه های طراحی و گرافیک نظیر فتوشاپ بسازید، سعی کنید در کم ترین فضا بیشترین جذابیت را ایجاد نمایید که این امر تا حدود زیادی سلیقه ای است و بستگی به مهارت شما دارد، آنگاه تصویر مورد نظر خود را که در فتوشاپ ساخته اید، در یک سرور آنلاین یا در یک سرویس رایگان میزبان فایل، آپلود کنید، این کار بدین منظور نیاز است که در وب معمولا تنها تصاویر و فایل هایی قابل استفاده هستند که بر روی سرورها میزبانی شوند و با آدرسی مشخص (url) در دسترس باشند، آنگاه آدرس و تنظیمات خاص لوگوی خود را در نمونه زیر جایگزین کنید.