قرار دادن یک لوگوی ثابت (یک ریبون) در گوشه‌های سایت یا وبلاگ (معرفی سایت QuickRibbon.com)

قرار دادن یک لوگوی ثابت در گوشه‌های سایت یا وبلاگ (معرفی سایت 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 اگر چه زیباتر و جذاب‌تر است، اما عیبی هم دارد که عرض کردم. انتخاب با شماست...

پس از اینکه کد بالا را نسبت به چیزی که می‌خواهید، تنظیم کردید، آن را در هر کجا از کدهای سایت یا وبلاگ خود که خواستید قرار بدهید!

همین!
خسته نباشید...
حمید رضا نیرومند

.

ارسال سؤال یا نظر

---

1- PARI:
بوسیله: , در: Monday, 2009 June 08-کد: 899
مرسی عالی بود خیلی کمکم کرد

---

2- سيد محمد جواد طاهري:
بوسیله: , در: Saturday, 2010 August 21-کد: 2035
داداش خيلي ممنون.
به دردم خورد
يا علي

---

3- علی خانی:
بوسیله: , در: Tuesday, 2012 May 29-کد: 4363
یک راهنمایی می‌خواستم.
من پایین سایتم سمت چپ گوگل+1 گذاشتم و بالاش نوشتم که امتیاز بدهند.
اگر بخوام یک مستطیل زیر این قسمت قرار بدم حالا چه بصورت عکس یا هر شکل دیگری میتونید راهنمایی کنید چکار کنم؟

---

4- نوید:
بوسیله: , در: Friday, 2012 September 28-کد: 4978
دقیق توضیح بده که چجوری پشت زمینه یا بک گراندعکس رادرفتوشاپ ترنسپیرنت یا شفاف کنیم و با چه ابزاریدرفتوشاپ این کارصورت میگیرد.

---

5- حسین خشکی نژاد:
بوسیله: , در: Sunday, 2019 June 30-کد: 16053
سپاس از توضیحات و زحماتتون