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

برنامه نویسی وردپرس
, ,
10

سلام خوب هستید این کدهایی که تقدیمتون میکنم رو ازشون استفاده کنید. نکته اول باید بخش 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;
}

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

بخش مورد نظر شما که میخوایین گزینه حذف رو هم داشته باشه باید. این بخش رو باید بعد از بخش 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 پسندیده