TẠO BANNER PHONG CÁCH RIBBON CHẤT CHO BLOGSPOT/BLOGGER
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