با عرض سلام خدمت کاربران محترم سایت زردیس
در این مطلب میخواهیم کد قرار دادن عکس در سمت چپ و راست سایت رو برای شما دوستای عزیز قرار بدهیم.
در این مطلب علاوه بر این کد به شما کد دیگری نیز آموزش میدهیم که بنر گوشه ای فقط در نسخه موبایل سایت نشان داده شود.
ما اول یک بنر گوشه سایت میسازیم که در همه دستگاه ها نشان داده بشود و بعد با اضافه کردن یک دستور خیلی ساده css میایم و اون بنر گوشه ای رو محدود میکنیم به دستگاه های موبایل ، که اینکار با تنظیم رزولوشن انجام میشه.
توی این قسمت ما اول عکس مورد نظر مان را آپلود میکنیم و لینک مستقیم آن را کپی میکنیم که در مراحل بعدی به آن نیاز خاهیم داشت.
قدم دوم: تعیین لینک مقصد
فرض کنید ما بنر یا تصویر مورد نظرمان را ایجاد کردیم. وقتی که کاربر روی آن کلیک میکند چه اتفاقی قرار است رخ بدهد؟ مشخصاً قرار است که وارد یک صفحه جدید شود. پس آدرس یا لینک صفحه مقصد هم برای ما مهم است. ما فرض میکنیم که شما میخواهید با کلیک کردن روی بنر به صفحه خودتان در پیام رسان درنا منتقل شوید.
توی این قسمت من کد های لازم رو برای شما نوشتم. شما به راحتی میتونید با کم و زیاد کردن عددها به سایز و مکان مورد نیاز خود برسید.
<div id="banner-botton" style="position:fixed; z-index:100; left:0px; bottom: 0px;"> <a href="http://dornamedia.ir/your-account" target="_blank"> <img src="https://zardis.net/ads/img/120x240.gif" alt="dorna" style="height:100px; width:100px;"> </a> </div>
position:fixedچیست؟ این قسمت را نباید تغییر دهید. چون به مرورگر میگوید که قرار است موقعیت المان ما ثابت باشد و با اسکرول قابل تغییر نیست.
اگر میخواهید تصویر ثابت باشد و با تغییر اسکرول دیگر نمایش داده نشود ، مقدار را به “position:absolute” تغییر دهید.
z-index:100 چیست؟ در حالت عادی این مقدار برای همه المان ها برابر عدد 1 است. که ما اینجا آن را برابر 100 قرار دادیم تا روی تمام المان های دیگر قرار بگیرد. جالب است بدانید اگر مقدار آن را منفی کنید دیگر بنر شما دیده نخواهد شد.
left:0px چیست؟ این گزینه می گوید که فاصله المان از سمپ چپ مرورگر باید برابر 0 باشد ، یعنی به سمت چپ مرورگر بچسبد.
bottom: 0px چیست؟ این گزینه هم مانند بالا می گوید که فاصله این بنر از پایین برابر صفر باشد ، یعنی به پایین بچسبد.
href چیست؟ شما در این قسمت لینک مقصد خودتان را باید قرار دهید. در این مثال فرض شد که لینک مقصد شما، صفحه درنای شما است. پس این لینک را که در قدم دوم برداشته بودیم را استفاده میکنیم.
target=”_blank” چیست؟ این قسمت اختیاری است و شما نیز میتوانید آن را بردارید. کار این کد این است که وقتی شما روی عکس کلیک میکنید لینک مقصد شما در یک صفحه یا tab جدید باز شود.
تا اینجا کد ها مربوط به موقعیت قرار گیری بنر و وضعیت لینک خروجی را چک کردیم.
src چیست؟ این قسمت ما لینک عکس یا بنرمان را باید داخل ” ” کپی کنیم. این لینک را در قدم اول به دست آوردیم.
alt چیست؟ این قسمت الزامی نیست اما برای موتور های جست و جو میتواند مفید باشد. توضیحی مختصر راجع به عکس باید بنویسید.
height:100px چیست؟ این قسمت ارتفاع عکس ما را مشخص می کند. میتوانید بسته به عکس خود این عدد را تغییر دهید.
width:100px چیست؟ این قسمت هم طول عکس ها را نشان میدهد.میتوانید بسته به عکس خود این عدد را تغییر دهید.
برای اینکه بنر ما فقط در موبایل نشان دهده شود کد زیر را در قسمت css سفارشی تنظیمات قالبتان کپی کنید. ما در کد زیر تنظیم کرده ایم که اگر دستگاهی دارای رزولوشن بیش از 600 پیکسل بود ، بنر نشان داده نشود. شما میتوانید این عدد را کم یا زیاد کنید.
@media only screen and (min-width: 600px) {
#banner-botton{display:none!important;}
}
با توجه به سیستم مدیریت محتوای خودتان از کد ها در جای مناسب استفاده کنید.
اگر مشکلی بود دیدگاه ارسال کنید.
موفق باشید
- کد خبر 12572
- 256 بازدید
- بدون نظر
اخبار زردیس | جدیدترین اخبار ایران و جهان
تمامی حقوق مطالب برای "اخبار زردیس"محفوظ است و هرگونه کپی برداری بدون ذکر منبع ممنوع می باشد.
طبق ماده 12 فصل سوم قانون جرائم رایانه ای کپی برداری از قالب و محتوا پیگرد قانونی خواهد داشت.
