تنظیم تصویر شناور برای به صورت ثابت در تمام صفحات وب سایت

سلام دوستان چطور میتونم صفحه مشابه به تصویر زیر برای وب سایت ایجاد کنم که یک تصویر به صورت اسکرول قرار بدم و امکان حذف این تصویر برای کاربران امکان داشته باشه؟
annotation-2020-08-05-184917_cafz99

مچکرم از شما عزیزان @Angel @arash @arta @Hosein @Meysam_Kiani

سلام ، این دوتا افزنه برای وردپرس هست من خودم اعلان ترافیک نیم بها رو با این افزونه ها داشتم و خوب بودن


1 پسندیده

خیلی مچکرم
با استفاده از این دو افزونه میشه تصویر هم قرار داد؟

خواهش میکنم علی جان
راستش عکس رو تست نزدم ، متن رو تست کردم دکمه لینک دار و … هم میشه اینارو میدونم FontAwosame و… اینارم میدونم میشه اما خود تصویر و مطمئن نیستم ی تست بزنید احتمال داره بشه

1 پسندیده

افزونه های خوبی بودن ولی برای تصویر حالت بدی داشتن و قابلیت ضربدر هم نداشت برای اینکه کاربر دچار مشکل نشه به هر حال مچکرم از معرفی تون :pray: :pray:

خواهش میکنم اما اولی ک دادم این قابلیت رو داره فکر میکنم

1 پسندیده

اره ولی حیف که نمیشه اسکرول کرد و اوردن تصویر پاین صفحه!

پس ببین با کد در بیارش من این یه نمونه کد هست میزارم برات خودت چیزایی ک میخوای اضافه کن و بزار داخل فوتر آخر کد های فوتر قبل از بسته شدن تگ body

> <div style="z-index:99999999999999999999999999;background:#2ea5dd;color:#fff;text-align:center;width:100%;position:fixed;bottom:0px;"><a style="font-size:14px;padding:0px 0px;width:100%;display:block;color:#fff;font-weight:bold;" href="https://forums.7ho.st/" target="_blank" rel="nofollow">برای ورود به انجمن بزرگ سون هاست کلیک کنید</a></div>

1 پسندیده

خیلی ممنون ازت الان دارم از همین کد استفاده میکنم با تصویر فقط ی مشکل ریز داره اینکه امکان ضربدر نداره که کاربر اینا حذف کنه راهی هست برای چنین کاری؟

سلام خوب هستید این کدهایی که تقدیمتون میکنم رو ازشون استفاده کنید. نکته اول باید بخش html رو درست کنید نکته دوم هم باید بخش css :
بخش HTML :

<div class="fixedbox">
    <div class="reldiv">
        <h6>آیا به مشاوره نیاز دارید؟</h6>
  </div>

نکته : میتونید اینجا عکس قرار بدید یا اینکه متن یا هرچیزی که دوست دارید.

بخش CSS :

.fixedbox {
    font-family: tahoma;
    background: #ffffff;
    border-radius: 5px;
    position: fixed;
    right: 10px;
    bottom: 10px;
    width: 100%;
    border: 1px solid #D9DEE1;
    z-index: 100;
    text-align: center;
}
.fixedbox .reldiv {
    padding: 20px;
}

.fixedbox h6 {
    font: 500 12pt/18px tahoma;
    border-bottom: 1px solid #D9DEE1;
    color: #526066;
    padding: 0 0 15px 0;
    margin: 0;
    text-align: center;
}
.fixedbox p {
    color: #333;
    font: 500 11pt/18px tahoma;
    margin: 20px 0 0px 0;
    text-align: center;
}

خب تا به اینجا ما یه همچین چیزی پایین صفحه اضافه کردیم :

بخش مورد نظر شما که میخوایین گزینه حذف رو هم داشته باشه باید. این بخش رو باید بعد از بخش html وارد کنید :

function hide() {
document.getElementById("imgbox2").style.visibility = "hidden";
}

کد نهایی به این صورت هست.
کد HTML : (میتوانید در بخش هدر یا فوتر سایت قرار بدید)

<div class="fixedbox" id="imgbox2">
  <button onclick="hide()" style="float: left; ">Close</button>
  <div> </div>
    <div class="reldiv">
        <h6>آیا به مشاوره نیاز دارید؟</h6> 
  </div>
  <script> 
  function hide() {
    document.getElementById("imgbox2").style.visibility = "hidden";
}
</script>

کد CSS

.fixedbox {
    font-family: tahoma;
    background: #ffffff;
    border-radius: 5px;
    position: fixed;
    right: 10px;
    bottom: 10px;
    width: 100%;
    border: 1px solid #D9DEE1;
    z-index: 100;
    text-align: center;
}
.fixedbox .reldiv {
    padding: 20px;
}

.fixedbox h6 {
    font: 500 12pt/18px tahoma;
    border-bottom: 1px solid #D9DEE1;
    color: #526066;
    padding: 0 0 15px 0;
    margin: 0;
    text-align: center;
}
.fixedbox p {
    color: #333;
    font: 500 11pt/18px tahoma;
    margin: 20px 0 0px 0;
    text-align: center;
}

.imgbox {
 text-align: left;
 width: 200px;
 border: 2px solid #607D8B;
 margin: 5px;
 padding: 6px;
 height:80px;
 overflow:hidden;
}

موفق باشید

5 پسندیده

سلام میثم جان خلیلی ممنون که وقت گذاشتد و بنده را راهنمایی کردید خیلی ممنونم ازت :pray: :+1:

1 پسندیده