نحوه ساخت لوگوی حمایتی برای نمایش در سایت یا وبلاگ

[sky boy]

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

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

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

<a href="http://www.yoursite.com" title="عنوان سایت یا وبلاگ شما" target="_blank"><img src="http://www.yourfile.com/file/image-logo.jpg" alt="عنوان لوگوی سایت یا وبلاگ" title="عنوان لوگوی سایت یا وبلاگ" height="80" width="120" border="0" /></a>

توضیح:
- تگ a و href برای ایجاد یک لینک (hyperlink) در صفحات وب (html) به کار می روند که در اینجا هم باید آدرس سایت یا وبلاگ خود را جایگزین عبارت http://www.yoursite.com کنید.
- تگ img برای نمایش یک تصویر در وب به کار می رود، وقتی این تگ را بین a قرار می دهیم، در واقع لینکی به آن تصویر متصل می کنیم، در قسمت http://www.yourfile.com/file/image-logo.jpg آدرس کامل تصویر لوگوی سایت یا وبلاگ خود را قرار دهید، دقت کنید
- قسمت مربوط به border را برابر صفر قرار دهید، در برخی از مرورگرها برای تصاویری که لینک می شوند، نواری آبی رنگ دور آنها به عنوان پیش فرض نشان داده می شود، برای از بین بردن آن، میزان border را صفر در نظر بگیرید.
- موارد مربوط به ارتفاع (height) و عرض (width) را، با توجه به اندازه پیکسل لوگوی خود، تغییر دهید.

 

[sky boy]

ایجاد باکس برای نمایش و کپی کد لوگو

اگر بخواهیم کاربران از آن استفاده کرده و لوگو را در وبلاگ یا سایت خود به دیگران نشان دهند، باید از باکس هایی برای درج کد با امکان کپی برداری استفاده کنیم،
در اینجا هم روش عادی و ساده و هم شیوه ای که در آن با استفاده از جاوا اسکریپت، قابلیت انتخاب خودکار تمام کد برای کپی راحت تر را اضافه کرده و کار خود را حرفه ای تر جلوه می دهیم.
برای ایجاد یک باکس ساده و قرار دادن کد داخل آن، جهت کپی و استفاده کاربران، از دو تگ textarea و input می توان استفاده کرد،
تفاوت این دو تگ، در تنظیمات متفاوت و ظاهر آنها است،
در نمونه های زیر کار با لوگوی فرضی:

<input type="text" height="25" width="120" dir="ltr" value='<a href="http://www.yoursite.com" title="عنوان سایت یا وبلاگ شما" target="_blank"><img src="http://www.yourfile.com/file/image-logo.jpg" alt="عنوان لوگوی سایت یا وبلاگ" title="عنوان لوگوی سایت یا وبلاگ" height="80" width="120" border="0" /></a>' />

توضیح:
- در قسمت مربوط به ارتفاع (height) و عرض (width)، مقادیر مورد نظر خود را به پیکسل درج کنید.
- dir و ltr چینش کد داخل باکس را به صورت چپ به راست تنظیم می کند (rtl آن را از راست به چپ نمایش می دهد).
- دقت کنید که برای value از علامت ' ' به جای " " استفاده کرده ایم و کد را درون آن قرار داده ایم،
اگر از علامت " " استفاده کنید، دچار مشکل خواهید شد و کد شما به جای نمایش به صورت ساده، به عنوان قسمتی از صفحه پردازش می شود و به درستی نشان داده نخواهد شد.
- ممکن است بخواهید بین لوگو و کد آن فاصله یا خط ایجاد کنید، برای این منظور از تگ های br و hr در html می توانید استفاده کنید.

 

[sky boy]

روش استفاده از تگ textarea

از تگ textarea برای درج یا نمایش متن در فُرم های وب (html) استفاده میشه.

<textarea cols="20" rows="2" dir="ltr"><a href="http://www.yoursite.com" title="عنوان سایت یا وبلاگ شما" target="_blank"><img src="http://www.yourfile.com/file/image-logo.jpg" alt="عنوان لوگوی سایت یا وبلاگ" title="عنوان لوگوی سایت یا وبلاگ" height="80" width="120" border="0" /></a></textarea>

توضیح:
- همانطور که می بینید، textarea تفاوتهایی با input دارد، در اینجا از cols و rows به جای width و height برای عرض و ارتفاع باکس، استفاده می شود.
- مقدار value در textarea وجود ندارد و به جای آن باید کد را بین تگ های textarea قرار دهیم.
- در تاپیک آموزش CSS در بخش مورد نظر در انجمن برنامه نویسی در ایرانجمن گفته شده که
تقریبا تمام تگ ها، می توانند از استایل css استفاده کنند،
در اینجا هم اگر نیاز به تنظیمات بیشتر دارید، می توانید از تگ style استفاده کنید.

 

[sky boy]

استفاده از جاوا اسکریپت برای انتخاب خودکار و کپی کد لوگو

یک قابلیت حرفه ای تر برای کد لوگو و آن قرار دادن امکان انتخاب خودکار (auto select)، جهت کپی کد به صورت یکجا و کمک به راحتی بیشتر کاربران است،
بدین منظور باید از جاوا اسکریپت (Javascript) کمک بگیریم
تابع جاوا اسکریپتی:

<script type="text/javascript">
function autoselect(){
var text_input = document.getElementById ('logo');
text_input.focus ();
text_input.select ();
}
</script>

توضیح:
- در این تابع، از سه ویژگی document.getElementById، text_input.focus و text_input.select استفاده شده است.
- این تابع را ترجیحا در قسمت هِدر صفحه، بین تگ های head کپی کنید.
نحوه فراخوانی و استفاده از تابع:

<input type="text" id="logo" height="25" width="120" dir="ltr" onfocus="autoselect();" value='<a href="http://www.yoursite.com" title="عنوان سایت یا وبلاگ شما" target="_blank"><img src="http://www.yourfile.com/file/image-logo.jpg" alt="عنوان لوگوی سایت یا وبلاگ" title="عنوان لوگوی سایت یا وبلاگ" height="80" width="120" border="0" /></a>' />

توضیح:
- تقریبا نحوه استفاده از این روش با حالت معمولی یکسان است با این تفاوت که در اینجا باید یک آی دی برای تگ input تعریف کنیم و تابع را با رویداد onfocus فراخوانی نمائیم.
- آی دی تعریف شده در اینجا، عبارت دلخواه logo است، اگر دقت کنید، در تابع هم، همین آی دی به عنوان مقصد در نظر گرفته شده است.


ادامه دارد..

 

[sky boy]

ساخت لوگوهای مثلثی با جاوا اسکریپت و css

خب گفتم که، لوگوهای قابل نمایش در صفحات وبلاگ یا سایت، به تصاویر ثابت برای حمایت از خود آن سایت یا وبلاگ محدود نمیشه،
بلکه با استفاده از جاوا اسکریپت و css میشه در گوشه های صفحات وب، نمادهایی مثلثی شکل (یا به شکل های دیگر) جهت مناسبت ها ی مختلف یا اعلام حمایت از موضوعی خاص قرار داد،
برای این کار ابتدا در برنامه های گرافیکی و طراحی، یک طرحی با ابعاد 170 در 170 پیکسل (یا اندازه دلخواه) ترسیم کنید،
به نوعی که خطی به صورت مورب اون تصویر رو دو نیم کرده باشه (در واقع تبدیل به دو مثلث)،
بسته به اینکه در کدام قسمت از صفحه (چپ، راست، بالا یا پائین) بخواهید لوگو را نمایش دهید، نوع برش هم متفاوت خواهد بود،
حالا قسمتی را که باید پس زمینه شفاف داشته باشد، تا زمینه ی پشت سر آن دیده شود، با ابزارهای موجود در فتوشاپ یا هر برنامه ای نظیر کمندهای دسته lasso tool پاک کنید
تا به صورت پیکسل های چهار خانه مربعی و شفاف در آید، پس از اینکه طراحی لوگوی خود تمام شد، باید تصویر را با فرمت gif یا png ذخیره کنید
(اگر بتوانید با فرمت gif و بدون افت کیفیت، از تصویر خروجی بگیرید بهتر است،
چون در مرورگرهای قدیمی تر هم پس زمینه شفاف آن پشتیبانی می شود در صورتی که برای png اینطور نیست)
تا قسمت شفاف تصویر مورد نظر در وب دیده نشود و لوگو به صورت مثلثی به نظر برسد
(در واقع لوگوهای مثلثی، یک تصویر به شکل مربع هستند که یک طرف آنها شفاف شده است)؛
تصویر زیر میتونه راهنمایی تون کنه:

 

[sky boy]

حالا تنظیمات خودتون رو داخل کد های زیر اعمال کنید و اون رو در قالب سایت یا وبلاگتان قراربدید.

کد نمایش لوگو در بالا سمت راست:

<script type="text/javascript">
logo = '<div style="z-index:999; position:absolute; right:0px; top:0px; border:0px;">';
logo += '<img src="http://yourfile.com/logo.gif" alt="عنوان لوگوی حمایتی" width="170" height="170" border="0" /></div>';
document.write(logo);
</script>

کد نمایش لوگو در بالا سمت چپ:

<script type="text/javascript">
logo = '<div style="z-index:999; position:absolute; left:0px; top:0px; border:0px;">';
logo += '<img src="http://yourfile.com/logo.gif" alt="عنوان لوگوی حمایتی" width="170" height="170" border="0" /></div>';
document.write(logo);
</script>

کد نمایش لوگو در پائین سمت راست:

<script type="text/javascript">
logo = '<div style="z-index:999; position:absolute; right:0px; bottom:0px; border:0px;">';
logo += '<img src="http://yourfile.com/logo.gif" alt="عنوان لوگوی حمایتی" width="170" height="170" border="0" /></div>';
document.write(logo);
</script>

کد نمایش لوگو در پائین سمت چپ:

<script type="text/javascript">
logo = '<div style="z-index:999; position:absolute; left:0px; bottom:0px; border:0px;">';
logo += '<img src="http://yourfile.com/logo.gif" alt="عنوان لوگوی حمایتی" width="170" height="170" border="0" /></div>';
document.write(logo);
</script>

توضیح:
- ساختار کدهای بالا بسیار ساده هست، دستورات جاوا اسکریپت یک تصویر را با ویژگی های css به خروجی ارسال می کنند و
عناصر css باعث می شوند که لوگو در گوشه های صفحه و بالاتر از سایر لایه ها به نمایش دربیاید.

- z-index موقعیت تصویر را نسبت به لایه های زیرین نشان می دهد، هر چه عدد z-index یک ویژگی، برای یک عنصر بیشتر باشد، آن لایه بالاتر از لایه های دیگر در صفحه نشان داده می شود.

- position:absolute باعث می شود که لوگو با اسکرول صفحه جا به جا شود، می توانید از مقادیر fixed برای لوگوهای ثابت نیز استفاده کنید.به این صورت position:fixed

- ویژگی های left، right، top و bottom میزان فاصله تصویر را از جهت های مختلف نشان می دهد،
همانطور که دیدید، این ویژگی ها در اینکه تصویر، کجای صفحه نشان داده شود موثر هستند.

موفق باشید

 

[shikabzar.ir]

ممنون ازاموزش های خوبتان.
لطفا اگرمیشود در مورد متد getelementbyid یکمی توضیح بدید.

 

[elnaz66]

ممنون از اموزشهای خوبتون