Ads

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.

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

Cùng bình luận bài viết

  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