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

Bài viết liên quan:

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.

TẠO BANNER PHONG CÁCH RIBBON CỰC 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

Phan Niệm

Không muốn hoặc không thích, không tồn tại hoặc không thể! Cám ơn các bạn đã ghé thăm, chúc các bạn có những phút giây thoải mái và bổ ích trên blog của mình! Thanks for... Xem thêm về tôi

  1. Bác Niệm sửa lại phần Liên kết giùm em nhé.
    Từ Thái Tính IT thành Tính Getter Blog nhé.

    Trả lờiXóa
  2. Nhận xét này đã bị quản trị viên blog xóa.

    Trả lờiXóa
    Trả lời
    1. Đừng đi cm qăn link bữa bãi nha bạn! với lại hạn chế coppy bài viết của người khác đi, tự mình tìm tòi viết ra hay hơn :)

      Xóa
    2. đó là demo thôi, với lại coppy cũng có nguồn mà :)

      Xóa
    3. oh vậy cố gắng phát triển nha :)

      Xóa