Tạo Floating Banner Quảng cáo ẩn hiện trượt dọc theo website

Floating Banner Ads sliding along the website

Hôm nay Iris Tips xin chia sẻ cho các bạn cách tạo banner quảng cáo trượt dọc ở cạnh bên website. Có kèm nút ẩn hiện quảng cáo khá đẹp mắt.

Cách thực hiện

1Vào Bố cục >> Thêm tiện ích HTML/Javascript và dán đoạn code bên dưới vào.

<!-- Start Banner Ads -->
<div id="left-float-banner" style="position: fixed; bottom:2%; left: 5px; z-index: 9; display: none; height: 300px;">
    <a href="javascript:void(0);" class="left-float-banner-btn" style="position: absolute; display: block; left: 0; top: -20px;">
        <span class="fa fa-arrow-circle-left" style="font-size: 20px;"></span>
    </a>
    <div class="left-float-banner-main" style="position: absolute; display: block; left: 0; top: 0;">
        
<div>    <a href="http://iris-tips.blogspot.com" title="Jabanit Matcha &amp; Coffee" target="_blank"  onclick="ga('send', 'event', 'Banner trang LEFT_FLOAT_BANNER', 'Click', 'Jabanit Matcha &amp; Coffee');">
        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsylk3rDRj34Xuhi5VMCX_30F71daRDcMJESeHHeZjeJeFso_UVzp4QV68Z9FWZT9B-7ireCSoGOdH4sNxK4AQ7hX3ieYG8g1G6kSplJ4I58O60OnBLr2hcfsO3okJmYnezwkZU3h-c7IB/s1600/coffee.jpg" alt="Jabanit Matcha &amp; Coffee" title="Jabanit Matcha &amp; Coffee" width="120" height="300" />
    </a>
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="  onload="ga('send', 'event', 'Banner trang LEFT_FLOAT_BANNER', 'Impression', 'Jabanit Matcha &amp; Coffee');" width="0" height="0" />
</div>
    </div>
</div>

<script type="text/javascript">
    var leftFloatBannerModel = new LeftFloatBannerModel();

    $(function ()
    {
        leftFloatBannerModel.Init();
    });
</script>

<style>#left-float-banner{position: fixed; bottom:2%; left: 5px; z-index: 9; display: none; height: 300px;}
#topcontrol{display:none!important}</style>
<script src="https://sites.google.com/site/iristipsblogger/file/public.core.min.js" type="text/javascript"></script>
<!-- End Banner Ads -->

• DEMO

Code này mình trích ra từ một website khác nên script còn hơi khá nặng. Các bạn dùng tạm nhé.
Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm