تماس با ما

موبایل: 2565 038 0912

دفتر تهران: 2565 2842 021

دفتر گرگان: 2565 3233 017


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

اکنون تنظیمات خود را در کد های زیر اعمال کرده و آن را در قالب سایت یا وبلاگتان کپی نمائید.
کد نمایش لوگو در بالای سمت راست:


<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>
کد نمایش لوگو در بالای سمت چپ
[code]
<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 میزان فاصله تصویر را از جهت های مختلف نشان می دهد، همانطور که ملاحظه می کنید، این ویژگی ها در اینکه تصویر، کجای صفحه نشان داده شود موثر هستند.


سفارش طراحی سایت

سفارش طراحی سایت

google
yahoo
alexa
ebook
Baidu.com
Wikipedia
Blogger.com
Windows Live
Amazon.com
eBay
Bing
Ask
استانداری گلستان
f shdj, sefaresh, sefaresh .net, sefaresh.net, sthva, sthva nhj kj, sthva.kj, stthva.kj, xvhpd, آیفون, استفاده, اندروید, اپل, اپلیکیشن, اینترنت, باتری, بازار, بازی, دستگاه, دوربین, سامسونگ, سفارش, سفارش دات نت, سفارش دات نت sefaresh.net, سفارش.نت, سیستم, طراح وب, طراحي وب سايت, طراحی, طراحی وب سایت, فناوری, مایکروسافت, موبایل, هوشمند, کاربران, کمپانی, گلکسی, گوشی, گوشی هوشمند, گوگل

نمایش تمامی تگ ها
بسته ویژه مدارس مدارس
بسته ویژه پزشکان پزشکان
بسته ویژه مهندسین مهندسین