آموزش درج بنر یا قرار دادن عکس در گوشه سایت (با امکان بستن)

قرار دادن لوگو یا عکس ثابت در گوشه وب سایت

احتمالا تاکنون به سایت یا وبلاگی مراجعه کرده باشید و دیده باشین که در گوشه سایت ، حالا گوشه پایین یا گوشه بالا سمت راست یا چپ سایت بنر یا عکسی قرار داده و دوست داشتین تا شما هم در وبلاگ یا سایتتون چنین کاری رو انجام بدین ، شما می تونید این کار رو براحتی و به سادگی چند خط کد انجام بدین ، جهت انجام آموزش رو دنبال کنید …

قرار دادن بنر در گوشه سایت ، کد بنر ثابت گوشه سایت

خب برای اینکار ابتدا به فایل های قالب سایت خود مراجعه کنید ،

1- در ابتدا می بایست قطعه کد زیر رو در فایل footer.php یا انتهای footer سایتتون قبل از بسته شدن تگ </body> قرار بدین :

<div class="banner">
     <span class="close">
           x بستن
     </span>
     <!--آدرس با لینک مقصد عکس-->
     <a href="https://mohandeseit.com">
            <!--آدرس عکس-->
            <img src="http://wp.test/wp-content/uploads/2020/10/Brown-Low.png">
     </a>
</div>
<script>
jQuery(document).ready(function($){
      $(".close").click(function(){
      $(".banner").hide();
      });
});
</script>

نحوه قرار دادن تبلیغ ثابت گوشه سایت ، کد قرار دادن بنر در گوشه سایت

2- اکنون حتما مشاهده خواهید کرد که عکسی در انتهای سایت نشان داده می شود ، خب کافیست قطعه کد استایل زیر رو در فایل style.css قالبتون قرار بدین :

.banner {
   position: fixed;
   left: 0;
   bottom: 0;
}
span.close {
   color: red;
   width: 100%;
   font-size: 1rem;
   padding: 5px;
}

ایجاد بنر گوشه سایت بدون افزونه با قابلیت بستن

3- خب اکنون مشاهده کرد که بنر در گوشه پایین سمت چپ سایت نمایان خواهد شد ، برای اینکه عکس یا لوگو در سمت راست سایت نشان داده شود در کلاس banner بجای left کافیست right بنویسید .

4- و اگر بخواین در گوشه بالای سایت نشون داده بشه کافیست در کلاس banner بجای bottom مقدار top را بنویسید .

5- برای تغییر رنگ اندازه متن دکمه بستن هم کافیست در کلاس close مقادیر دلخواه خود را وارد نمایید.

آموزش ویدیویی رو حتما مشاهده کنید تا براحتی بتوانید بنر یا عکستون رو در گوشه سایتتون قرار بدین.