قرار دادن یک لوگوی ثابت در گوشههای سایت یا وبلاگ (معرفی سایت QuickRibbon.com)
قبل از اینکه بخواهم مطلبی بنویسم، برای اینکه متوجه منظورم شوید، بالا، سمت راست سایت را نگاه کنید (شمال شرقی). یک ریبون معلق در هوا میبینید که بر روی آن نوشته شده است «به آفتابگردان خوش آمدید» و لینک داده شده است به آفتابگردان.
این نوع ریبونها را در سایتها و وبلاگهای مختلف به نشانههای مختلف (مثلا به نشانهی اعتراض به ساماندهی سایتهای ایرانی، یا به نشانه ایجاد انگیزه در رأی دادن و ...) دیدهاید.
اگر شما هم قصد دارید چنین ریبونی در سایت یا وبلاگ خود داشته باشید، دو راه وجود دارد.
1- یک راه این است که به سایت QuickRibbon مراجعه کنید و خیلی سریع ریبونی با متن مورد نظرتان بسازید و کدی که میدهد را بر روی وبلاگ خود قرار دهید.
در این سایت متنتان را وارد میکنید و مشخصات ریبون را میگویید، در همان لحظه کد مربوط به آن را دریافت میکنید...
اما متأسفانه یک مشکل وجود دارد و آن این است که متون فارسی در این سایت ساپورت نمیشوند و حروف آن از هم جدا نوشته میشود:
البته من به طراحان سایت ایمیل زدم و خواهش کردم که این موضوع را بررسی کنند، اما به نظرم نیازی به چنین سایتی نیست، راه دوم را ببینید.
2- اما راه دوم این است که خودتان یک ریبون در فتوشاپ یا هر نرمافزار دیگر با فرمت PNG یا GIF بسازید و با استفاده از کدی که در ادامه میآورم، آن را در سایت یا وبلاگتان قرار دهید.
توجه کنید که باید این ریبون طوری طراحی شود که بکگراند آن نامرئی یا
Transparent باشد که از کنار ریبون بشود سایت اصلی را
دید و دقیقاً شبیه یک ریبون عمل کنید.
ضمن اینکه حتما لازم نیست به صورت یک ریبون باشد. شاید بخواهید به صورت یک مثلث
باشد که گوشه صفحه را پر کند یا هر شکل دیگری، دایره و ... . فقط بکگراند آن
ترنسپرنت باشد.
کدی که این کار را انجام میدهد، کد زیر است:
<a href="http://www.aftab.cc" target="_blank"><img src="http://aftab.cc/uc/Hamid/862/ribbon.gif" border="0" width="200" height="200" style="position:absolute; right:0px; top:0px; margin:0px; padding:0px"></a> |
راهنمای رنگهای این کد را دقت کنید:
√ آدرس جایی که کاربر، با کلیک بر روی ریبون به آنجا هدایت
شود.
√ آدرس عکسی که به عنوان ریبون در نظر گرفتهاید.
√ طول و عرض عکس
√ جلو عبارت Position دو کلمه میتوانید بنویسید. اگر کلمه
absolute را بنویسید، این لوگو در بالای سایت ثابت میماند و با اسکرول کردن صفحه،
اسکرول میشود. (مثل
این صفحه) اما اگر کلمه fixed را بنویسید، میشود چیزی شبیه به
این
صفحه همانطور که میبینید، کادری که خاصیت fixed دارد، در هوا معلق است. اما
مشکلی که دارد، این است که این حالت در مرورگر اینترنت اکسپلورر 6 به پایین (مرورگر
اکثر کاربران ایرانی است) ساپورت نمیشود و احتمالاً نمای سایت را به هم میزند.
بنابراین، انتخاب fixed اگر چه زیباتر و جذابتر است، اما عیبی هم دارد که عرض
کردم. انتخاب با شماست...
پس از اینکه کد بالا را نسبت به چیزی که میخواهید، تنظیم کردید، آن را در هر کجا از کدهای سایت یا وبلاگ خود که خواستید قرار بدهید!
همین!
خسته نباشید...
حمید رضا نیرومند