Sticky Ads & Stick Div Ứng Dụng Tạo Thông Báo, Quảng Cáo với nút tắt ( Close )
Mẫu Code Sticky Ads & Stick Div Ứng Dụng Tạo Thông Báo, Quảng Cáo với nút tắt ( Close ) chân trang ( bottom & footer ) :
<style>
/* Sticky Ads */
.sticky-buttonBottomAd-GiaBaoBlog{position:fixed;bottom:0;right:20px;width:50px;height:50px;border-radius:50px;background-color:#fdd929;box-shadow:0px 4px 12px 0 rgba(9,32,76,.05);z-index:20;overflow:hidden;-webkit-transition:all .2s ease;transition:all .2s ease;opacity:0;visibility:hidden}
.sticky-buttonBottomAd-GiaBaoBlog.sticky{bottom:20px;opacity:1;visibility:visible}
.sticky-buttonBottomAd-GiaBaoBlog > *{display:flex;align-items:center;height:100%}
.sticky-buttonBottomAd-GiaBaoBlog > * svg{margin:auto;fill:inherit}
.sticky-adBottomAd-GiaBaoBlog{position:fixed;bottom:0;left:0;width:100%;min-height:70px;max-height:200px;padding:5px 0;box-shadow:0 -6px 18px 0 rgba(9,32,76,.1);-webkit-transition:all .1s ease-in;transition:all .1s ease-in;display:flex;align-items:center;justify-content:center;background-color:#fefefe;z-index:20}
.sticky-adBottomAd-GiaBaoBlog .sticky-adBottomAd-GiaBaoBlogClose{width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:12px 0 0;position:absolute;right:0;top:-30px;background-color:#fefefe;box-shadow:0 -6px 18px 0 rgba(9,32,76,.08)}
.sticky-adBottomAd-GiaBaoBlog .sticky-adBottomAd-GiaBaoBlogClose svg{fill:#767676}
.sticky-adBottomAd-GiaBaoBlog .sticky-adBottomAd-GiaBaoBlogContent{flex-grow:1;overflow:hidden;display:block;position:relative}
.sticky-adBottomAd-GiaBaoBlogInput:checked + .sticky-adBottomAd-GiaBaoBlog{padding:0;min-height:0}
.sticky-adBottomAd-GiaBaoBlogInput:checked + .sticky-adBottomAd-GiaBaoBlog .sticky-adBottomAd-GiaBaoBlogContent{display:none}
</style>
<input class='sticky-adBottomAd-GiaBaoBlogInput hidden' id='sticky-adBottomAd-GiaBaoBlogIn' type='checkbox'/>
<div class='sticky-adBottomAd-GiaBaoBlog' id='sticky-adBottomAd-GiaBaoBlog'>
<label class='sticky-adBottomAd-GiaBaoBlogClose' for='sticky-adBottomAd-GiaBaoBlogIn'><svg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'><path d='M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z'></path></svg></label>
<div class='sticky-adBottomAd-GiaBaoBlogContent'>
<!--<div class='ads-here' style='display:block;height:60px'/>-->
<center> Ads </center>
<!--End Quảng cáo -->
</div>
</div>
Mẫu Code Sticky Ads & Stick Div
Ứng Dụng Tạo Thông Báo, Quảng Cáo với nút tắt ( Close ) đầu trang ( header & top ) :
<style>
/*sticky ad*/
.sticky-adHeader-GiaBaoBlog { position: fixed; top: 0; left: 0; width: 100%; min-height: 70px; max-height: 200px; padding: 5px 0; box-shadow: 0 -6px 18px 0 rgba(9,32,76,.1); -webkit-transition: all .1s ease-in; transition: all .1s ease-in; display: flex; align-items: center; justify-content: center; background-color: #fefefe; z-index: 20; }
.sticky-adHeader-GiaBaoBlog-close { width: 65px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 12px 0 0; position: absolute; right: 0; top: 70px; background-color: #fefefe; box-shadow: 0 -6px 18px 0 rgba(9,32,76,.08); }
.sticky-adHeader-GiaBaoBlog .sticky-adHeader-GiaBaoBlog-close svg { width: 22px; height: 22px; fill: #000; }
.sticky-adHeader-GiaBaoBlog .sticky-adHeader-GiaBaoBlog-content { overflow: hidden; display: block; position: relative; height: 70px; width: 100%; margin-right: 10px; margin-left: 10px; }
</style>
<div class='sticky-adHeader-GiaBaoBlog jhfdiuh0' id='sticky-adHeader-GiaBaoBlog'>
<div class='sticky-adHeader-GiaBaoBlog-close' onclick='document.getElementById("sticky-adHeader-GiaBaoBlog").style.display="none"'>Tắt QC
<!--
<svg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'><path d='M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z'/></svg>
-->
</div>
<div class='sticky-adHeader-GiaBaoBlog-content'>
<!--vị Trí : Chèn Nội Dung - code Quảng Cáo -->
<center> ADs </center>
<!--Kết Thúc Chèn Nội Dung - code Quảng Cáo -->
</div>
</div>
Liên hệ quảng cáo : Freelancervietlach@Gmail.com
Liên hệ quảng cáo : Freelancervietlach@Gmail.com
