Tạo banner phong cách Ribbon cho blogspot/blogger

Hôm nay, xin giới thiệu đến các bạn cách tạo một Banner Ribbon cho blogspot. Đây là một tiên ích khá là đẹp dành cho các bạn treo banner quảng cáo. Sau đây mình sẽ bước vào cách làm.

Các bước thực hiện:

Bước 1: vào Chủ đề > Chỉnh sửa HTML và dán đoạn CSS phía dưới vào trên 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;}

Bước 2: dán đoạn code sau vào nơi mà bạn muốn hiện thị Banner. )Lưu ý là các bạn chỉ dán được vào các Widget bên ngoài thôi nha, Ko dán được vào trong Chỉnh sửa Template)

<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=" http://i47.tinypic.com/s43vkj.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="Link">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=" http://sohanews.sohacdn.com/k:2014/3-03b6216e-9296-44f9-a589-afb87b11b55f-1405494798751/nhung-9x-kiem-vai-chuc-trieuthang-du-chua-co-bang-dai-hoc.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="Link">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>

Lưu ý: Các bạn có thể tùy biến Link, hình ảnh, CSS theo ý mình nha!

Chúc các bạn thành công!

Nguồn: Iris-Tips