parsgreen.com
article

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

javascript-logo-site-weblog

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

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


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

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


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

روش استفاده از تگ 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 می توانید استفاده کنید.

روش استفاده از تگ 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 قرار دهیم.
- در آموزش مقدماتی html گفتیم که تقریبا تمام تگ ها، می توانند از استایل css استفاده کنند، در اینجا هم اگر نیاز به تنظیمات بیشتر دارید، می توانید از تگ style استفاده کنید.

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


اکنون که با نحوه نمایش کد لوگوی حمایتی برای سایت یا وبلاگ خود آشنا شدیم، بد نیست یک قابلیت حرفه ای تر برای آن در نظر بگیریم و آن قرار دادن امکان انتخاب خودکار (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 است، اگر دقت کنید، در تابع هم، همین آی دی به عنوان مقصد در نظر گرفته شده است.

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


همانطور که گفتیم، لوگوهای قابل نمایش در صفحات وبلاگ یا سایت، به تصاویر ثابت برای حمایت از خود آن سایت یا وبلاگ محدود نمی شوند، بلکه با استفاده از جاوا اسکریپت و css می توان در گوشه های صفحات وب، نمادهایی مثلثی شکل (یا به شکل های دیگر) جهت مناسبت ها ی مختلف یا اعلام حمایت از موضوعی خاص قرار داد، بدین منظور ابتدا در برنامه های گرافیکی و طراحی، نظیر فتوشاپ، طرحی با ابعاد 170 در 170 پیکسل (یا اندازه دلخواه) ترسیم کنید، به نوعی که خطی به صورت مورب آن تصویر را دو نیم کرده باشد (در واقع تبدیل به دو مثلث کند)، بسته به اینکه در کدام قسمت از صفحه (چپ، راست، بالا یا پائین) بخواهید لوگو را نمایش دهید، نوع برش هم متفاوت خواهد بود، آنگاه قسمتی را که باید پس زمینه شفاف داشته باشد، تا زمینه ی پشت سر آن دیده شود، با ابزارهای موجود در فتوشاپ نظیر کمندهای دسته lasso tool پاک کنید تا به صورت پیکسل های چهار خانه مربعی و شفاف در آید، پس از اینکه طراحی لوگوی خود را به پایان بردید، باید تصویر را با فرمت gif یا png ذخیره کنید (اگر بتوانید با فرمت gif و بدون افت کیفیت، از تصویر خروجی بگیرید بهتر است، چون در مرورگرهای قدیمی تر هم پس زمینه شفاف آن پشتیبانی می شود در صورتی که برای png اینطور نیست) تا قسمت شفاف تصویر مورد نظر در وب دیده نشود و لوگو به صورت مثلثی به نظر برسد (در واقع لوگوهای مثلثی، یک تصویر به شکل مربع هستند که یک طرف آنها شفاف شده است)؛ تصویر زیر می تواند راهنمای شما باشد.
javascript-photoshop-logo
اکنون تنظیمات خود را در کد های زیر اعمال کرده و آن را در قالب سایت یا وبلاگتان کپی نمائید.
کد نمایش لوگو در بالای سمت راست:
<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 که یک ویژگی css است، برای یک عنصر بیشتر باشد، آن لایه بالاتر از لایه های دیگر در صفحه نشان داده می شود.
- position:absolute باعث می شود که لوگو با اسکرول صفحه جا به جا شود، می توانید از مقادیر fixed برای لوگوهای ثابت نیز استفاده کنید.
- ویژگی های left، right، top و bottom میزان فاصله تصویر را از جهت های مختلف نشان می دهد، همانطور که ملاحظه می کنید، این ویژگی ها در اینکه تصویر، کجای صفحه نشان داده شود موثر هستند.
sectionدسته بندی: آموزش کاربردی » JavaScript
related مطالب بیشتر:
» نمایش پیام صفحه در حال بارگذاری با جاوا اسکریپت
» اعتبار سنجی فرم های وب با جاوا اسکریپت
» ساخت منوی آکاردئونی با جاوا اسکریپت و CSS
» ساخت پنل چند سربرگی (tabbed panel) با جاوا اسکریپت و CSS
» نمایش پیام در بالا یا پائین صفحات وبلاگ و سایت با جاوا اسکریپت
commentنظرات (۱۲ یادداشت برای این مطلب ارسال شده است)
نویسنده: baran
زمان: ۱۶:۵۵:۲۶ - تاریخ: ۱۳۹۱/۰۳/۳۰
سلام دوست عزیز خسته نباشید
راستش من اصلا چیزی در مورد لوگو نمیدونم چه برسه که بخوام تو فتوشاپ درستش کنم
میشه یه لطف کنین و به وبم بیاید و توضیحات کامل رو در مورد چگونگی قرار دادنش برام توضیح بدید؟
خواهش خیلی گشتم ولی توضیحی که بتونه قانع ام کنه ندیدم_لطفا لطفا الان خیلی به کمکتون احتیاج دارم
من منتظرماااااااااااااااااااا
پاسخ: 
سلام
لوگو چیز پیچیده ای نیست! یک عکس جهت نمایش نماد وبلاگ شما، کاملا هم سلیقه ای است. تنها راهنمایی ما این است که یک بار مطلب را به صورت کامل بخوانید، اگر کمی با فتوشاپ آشنا باشید، مشکلی نخواهد بود، متاسفانه امکان توضیح بیشتر برایمان مقدور نیست.
نویسنده: کنکاش
زمان: ۰۶:۳۶:۴۸ - تاریخ: ۱۳۹۱/۰۴/۳۰
سلام. به به. واقعا که چه قدر خوب یاد دادید. دمتون گرم. فقط یه سوالی وقتی کد لوگوی خودمون را میزاریم از طریق input کد لوگوم وسط نمیفته و میچسب به سمت چپ اون قسمت و یا کادر این مشکل برای لوگو هایی که می خوام به صورت تکی هم بزارم پیش میاد و وسط قرار نمیگیره ؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟
پاسخ: 
سلام
برای تنظیم عناصر وب در وسط یک بلاک، از تگ center در html استفاده کنید.
<center><input ... /></center>
البته شیوه حرفه ای تر و بهتر انجام این کار استفاده از css و خاصیت text-align:center است.
نویسنده: کنکاش
زمان: ۱۷:۵۸:۳۷ - تاریخ: ۱۳۹۱/۰۴/۳۱
تشکر
تشکر
نویسنده: دلتنگ کربلا
زمان: ۱۷:۰۲:۴۰ - تاریخ: ۱۳۹۱/۰۷/۰۱
خیلی خیلی خیلی خیلی خیلی خیلی خیلی عالی بود ممنون
نویسنده: محدثه
زمان: ۱۹:۴۰:۴۳ - تاریخ: ۱۳۹۱/۱۰/۱۴
عالـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــی
بود تاحالا از این توضیح بهتر ندیده بودم
نویسنده: ناهید
زمان: ۱۳:۳۹:۴۴ - تاریخ: ۱۳۹۱/۱۱/۰۱
ممنووووووووووووووون :)
نویسنده: دینا
زمان: ۱۱:۱۰:۴۷ - تاریخ: ۱۳۹۱/۱۱/۱۶
با سلام و سپاس فراوان
لطفاً بفرمایید چرا هیچکدام از 4 کد آخر که جای لوگو را تعیین می کنند در سیستم من جواب نمی دهند ، مرورگر من firefox18 است. (src ها را نیز مانند مثال های قبلی، به صورتی مناسب تغییر دادم.)
پاسخ: 
سلام
ممنون از یادآوری شما، مشکل بررسی و آموزش اصلاح شد، لطفا از کدهای جدید استفاده کنید.
نویسنده: علی جویافر
زمان: ۱۴:۳۸:۰۵ - تاریخ: ۱۳۹۲/۰۲/۲۴
سلام
کدتون عالی بود
ممنون
نویسنده: بهمن
زمان: ۰۱:۵۱:۴۰ - تاریخ: ۱۳۹۲/۰۶/۱۵
سلام
من ميخواستم بدونم چرا در قسمت ويرايش قالب وقتي ميخوام عکس لوگوي بالاي وبلاگ رو تغيير بدم و آدرس عکسي که خودم آپلود کردم رو بدم با پيغام امکان درج عبارت asalchat.com در قالب وبلاگ وجود ندارد مواجه ميشم.
در ضمن اندازه عکس رو هم تو فتوشاپ درست کردم و اندازه همون عکسيه که از قبل بود.
ممنون ميشم اگه راهنمايي بفرماييد.
پاسخ: 
سلام
پاسخ این سوال را باید مدیریت سایت بلاگفا بدهد که محدودیت های بیش از حدی بر کاربران اعمال می کند! دلیل مشاهده پیام این است که به ذعم مدیریت سایت مزبور آدرس مورد نظر یک آدرس تبلیغاتی است، باید فایل تصویر خود را در آدرسی دیگر آپلود کنید.
زمان: ۰۱:۱۲:۳۸ - تاریخ: ۱۳۹۲/۱۲/۲۲
مرسی خیلی جالب و خوب بود
خیلی کمکم کرد
و من الله توفیق
نویسنده: nimarasi
زمان: ۱۲:۵۲:۵۲ - تاریخ: ۱۳۹۳/۰۹/۰۵
عالی بود اجراش میکنم
زمان: ۰۰:۰۴:۱۶ - تاریخ: ۱۳۹۳/۱۱/۱۳
کد لوگو ی وبلاگ رو کجا قرار بدم؟
پاسخ: 
در بخش کدها و اسکریپت های اختصاصی کاربر (این عنوان ممکن است در سیستم های وبلاگی مختلف کمی فرق کند) یا در ویرایش کد HTML قالب.




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

7 × 3
 refresh
آگهی
seonab.com
طراحی نرم افزار اندروید
رنگین کمان عکس
Ranginkamaan.com

آرشیو عکس های باکیفیت با موضوعات متنوع...