Tạo Banner quảng cáo phong cách Ribbon 2 trong 1 độc đáo cho website của bạn

Banner Ads Ribbon style

Hôm nay Iris Tips sẽ chia sẻ cho các bạn cách tạo 1 banner quảng cáo phong cách Ribbon 2 trong 1 độc đáo và chuyên nghiệp cho website của bạn. Đặc biệt banner này được làm hoàn toàn bằng CSS nên sẽ không làm ảnh hưởng đến tốc độ tải trang của website bạn.

Banner này được phân ra làm 2 phần với 2 dải màu riêng biệt, bạn có thể setup lên đến 2 nội dung quảng cáo khác nhau chỉ trong 1 banner duy nhất.

Cách thực hiện

1Đầu tiên bạn vào Chủ đề >> Chỉnh sửa HTML và dán đoạn CSS bên dưới vào trước thẻ ]]></b:skin>

.atb-main-header-banner-wrap{height:150px;width:100%;margin:0 auto;margin-bottom:30px;display:block}
.atb-main-header-banner-compact{-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%}
@media(max-width:880px){.atb-main-header-banner-compact{padding:8px 0}}
.atb-header-banner-image-wrapper{position:relative;width:30%}
.atb-main-header-banner-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;padding:0 8px;width:60%}
@media(min-width:880px){.atb-main-header-banner-content{padding:16px}}
.atb-banner-content-title{font-size:.9em;margin-bottom:.3rem}
@media(min-width:600px){.atb-banner-content-title{font-size:1.3em}}
.atb-banner-content-labels{font-family:Helvetica,sans-serif;font-style:normal;font-weight:400;letter-spacing:.07em;line-height:normal;text-transform:uppercase;font-size:.625em;letter-spacing:.07em;text-transform:uppercase;margin-bottom:.6rem}
.atb-banner-content-labels li{border-left:1px solid currentColor;display:inline-block;margin-left:-40px;margin-right:-3px;max-width:100%;overflow:hidden;padding-left:8px;text-overflow:ellipsis;white-space:nowrap}
.atb-banner-content-labels a{color:currentColor}
.atb-banner-content-labels a:hover{color:#718a83}
.atb-header-banner-image,.atb-header-banner-image img{display:block;width:100%;height:auto}
.atb-main-header-banner{color:#fff;margin:0 auto;max-width:1600px}
.atb-main-header-banner a:hover{color:#efeff0}
@media(min-width:600px){.atb-main-header-banner{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}}
.atb-main-header-banner .atb-main-header-banner-content{padding:32px 16px}
.atb-main-header-banner-content a{color:#fff}
.atb-main-header-banner .atb-main-header-banner-compact{-webkit-box-align:stretch;-webkit-align-items:stretch;-ms-flex-align:stretch;align-items:stretch;height:100%;padding:0}
.atb-main-header-banner .atb-header-banner-image{position:absolute;top:0;bottom:0}
.atb-main-header-banner .atb-header-banner-image img{height:100%;-o-object-fit:cover;object-fit:cover;font-family:object-fit\:cover}
.atb-main-header-banner-entry .atb-header-banner-image-wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-ordinal-group:3;-webkit-order:2;-ms-flex-order:2;order:2;width:40%}
@media(min-width:600px){.atb-main-header-banner-entry{width:50%}}
.atb-main-header-banner-entry:first-of-type{background-color:#ff604a}
@media(min-width:600px){.atb-main-header-banner-entry:first-of-type .atb-header-banner-image-wrapper{-webkit-box-ordinal-group:1;-webkit-order:0;-ms-flex-order:0;order:0}}
.atb-main-header-banner-entry:nth-of-type(2){background-color:#ff9856}
@media(min-width:600px){.atb-main-header-banner-entry:nth-of-type(2){text-align:right}}
@media print{img{max-width:500px;margin:0 auto}}
.atb-main-header-banner{margin:16px 0;overflow:visible}
@media(min-width:600px){.atb-main-header-banner{margin:32px auto 64px}}
.atb-main-header-banner .atb-banner-content-title{font-family:Helvetica,sans-serif;font-style:normal;font-weight:700;letter-spacing:.025em;line-height:1;text-transform:uppercase}
.atb-main-header-banner-entry{position:relative}
.atb-main-header-banner-entry:nth-of-type(2){background-color:#5d7171}
@media(min-width:880px){.atb-main-header-banner-entry:first-of-type:after{background:#313b38!important;bottom:0;content:"";height:100%;position:absolute;right:-50px;top:15px;-webkit-transform-origin:top;transform-origin:top;-webkit-transform:skewY(30deg);transform:skewY(30deg);width:50px;z-index:-1}.atb-main-header-banner-entry:nth-of-type(2){top:30px;margin:0 0 0 50px;position:relative}}
@media(max-width:600px){.atb-header-banner-image-wrapper{width:40%}.atb-main-header-banner-content{padding-top:4px}}
@media only screen and (max-width:900px){.atb-main-header-banner-wrap{display:none}}
a:link{text-decoration:none;outline:none;}

2Dán đoạn HTML sau vào bị trí mà bạn muốn banner hiển thị

<section>
   <div class="atb-main-header-banner-wrap">
      <div class="atb-main-header-banner">
         <div class="atb-main-header-banner-entry">
            <div class="atb-main-header-banner-compact ">
               <div class="atb-header-banner-image-wrapper">
                  <picture class="atb-header-banner-image"> <img src="https://2.bp.blogspot.com/-gEWrR64SnMU/WZB7Lsw2GRI/AAAAAAAAFY0/qqBH10xL9DEp812VKG_cOy3q65j-AP3WQCLcBGAs/s1600/websitedesign.jpg"> </picture>
               </div>
               <div class="atb-main-header-banner-content">
                  <ul class="atb-banner-content-labels">
                     <li class="atb-banner-content-primary-li"> <span>Dịch vụ</span></li>
                  </ul>
                  <h2 class="atb-banner-content-title"><a href="http://iris-tips.blogspot.com/p/premium-services.html">Thiết kế và sửa lỗi website chuyên nghiệp</a></h2>
               </div>
            </div>
         </div>
         <div class="atb-main-header-banner-entry">
            <div class="atb-main-header-banner-compact" data-chorus-optimize-module="entry-box">
               <div class="atb-header-banner-image-wrapper">
                  <picture class="atb-header-banner-image"> <img src="https://2.bp.blogspot.com/-8tuMvOzSjSE/WZB7Lj0RQrI/AAAAAAAAFYw/DGK2fv-nj4wFMQEsnvHNGYu1uJnKB47hQCLcBGAs/s1600/makemoney.jpg"> </picture>
               </div>
               <div class="atb-main-header-banner-content">
                  <ul class="atb-banner-content-labels">
                     <li class="atb-banner-content-primary-li"> <span>Thảo luận</span></li>
                  </ul>
                  <h2 class="atb-banner-content-title"><a href="http://iris-tips.blogspot.com/search/label/Make%20Money?&max-results=6">Bạn có biết cách kiếm tiền online mới nhất hiện nay?</a></h2>
               </div>
            </div>
         </div>
      </div>
   </div>
</section>

3Thế là xong rồi đấy, bạn đã có được 1 banner quảng cáo phong cách Ribbon 2 trong 1 khá chuyên nghiệp rồi phải không nào.

• DEMO

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