Tạo khung chữ "bạn nên xem" cho blogspot bằng CSS animation

Như các bạn thấy đấy, mình làm thumbnail rất dở. Nhưng không sao, nội dung vẫn là chính phải không nào.
Vì thủ thuật này làm từ css nên chúng ta phải tự tùy chỉnh chữ và link. Nhưng đặc điểm của nó là chúng ta thích điều hướng người đọc đến trang nào là tùy chọn của mình, rất tiện lợi.

Thủ thuật này trước đây mình đã viết khi làm cộng tác viên ở Blogkiemtien.vn, tuy nhiên mình đã tùy biến thêm là khi rê chuột vào hiệu ứng sẽ dừng.

Cách thực hiện

Demo

Các bạn có thể xem demo ngay bên ngoài trang chủ blog này trên desktop và laptop, trên mobile thì mình đã ẩn vì nó không phù hợp.

Bước 1: Truy cập blogger.com > chủ đề > chỉnh sửa html > dán css lên trên

]]></b:skin>

#mayyoulike {
  height:42px;
  line-height:41px;
  background:#fff;
  margin:15px auto 0;
}

.mayyoulike-text {
  background:#7596c8;
  line-height:40px;
  float:left;
  font-size:17px;
  padding:0 15px;
  color:#FFF;
  position:relative;
  margin-right:25px;
  border-radius:3px 0 0 3px;
}

.mayyoulike-text:after {
  width:0;
  height:0;
  border-top:20px solid transparent;
  border-bottom:20px solid transparent;
  border-left:20px solid #46a28d;
  position:absolute;
  right:-20px;
  top:0;
  content:"";
  display:block;
  border-left-color:#7596c8;
}

#mayyoulike a {
  color:#333;
  transition:.3s;
  overflow:hidden;
}

#mayyoulike a:hover {
  color:#7596c8;
}

#mayyoulike img {
  float:right;
  width:35px;
  padding-right:5px;
}

#mayyoulike {
  box-sizing:border-box;
  background:#fff;
  box-shadow:0 0 12px rgba(0,0,0,0.1);
  border:1px solid #d5d5d5;
  border-radius:3px;
}

@media (max-width:720px) {
  #mayyoulike {
    display:none;
  }
}

.scroller {
  height:40px;
  line-height:40px;
  float:left;
  margin-left:7px;
  overflow:hidden;
  display:inline-block;
}

.scroller span {
  display:block;
  font-size:18px;
  overflow:hidden;
}

.scroller .inner {
  animation:scroll 10s infinite ease-out;
}

@keyframes scroll {
  10% {
    margin-top:0;
  }
  30% {
    margin-top:0;
  }
  40% {
    margin-top:-40px;
  }
  60% {
    margin-top:-40px;
  }
  70% {
    margin-top:-80px;
  }
  90% {
    margin-top:-80px;
  }
  100% {
    margin-top:0;
  }
}

@media (max-width:800px) {
  #mayyoulike img {
    display:none;
  }
  .mayyoulike-text {
    padding:0 8px;
  }
}
.scroller:hover .inner{-webkit-animation-play-state:paused;-moz-animation-play-state:paused;-ms-animation-play-state:paused;-o-animation-play-state:paused;animation-play-state: paused}
}

Bước 2: Chèn HTML vào nơi cần hiển thị.

<div id='mayyoulike'>
    <div class='mayyoulike-text'>BẠN NÊN XEM</div>
    <div class='scroller'>
        <div class='inner'>
            <span><a href='https://www.chiasetemplate.blog/' rel='nofollow' target='_blank'>Kho giao diện blogspot chất lượng cao hoàn toàn miễn phí</a></span><span><a href='/2018/07/css-loading-website-cuc-chat.html'>Css Loading Website hiệu ứng thầy trò Tây Du Ký thỉnh kinh</a></span>
            <span><a href='/2018/07/tạo-widget-tab-nằm-ở-sidebar-bằng-css.html'>Tạo widget dạng tab nằm ở sidebar hoàn toàn bằng CSS</a></span>
        </div>
    </div><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJT_gJxJxbKRpl3Cg6NCQQH_1-rIy22ddzaUzKue1Ag-mI-qPsIVcgbFJTrBP1SXfXsHQx3ZJtYhrnDbLvD13BA-WpDfrBH5L15gDR9LM0Bxvw35jzK3OSToo-AZkH44WmcIaBtUn-Ngc/s1600/icon-hot.png' /></div>

Bước 3: Chỉnh sửa và lưu chủ đề lại.

Tổng kết

Thủ thuật trên rất đơn giản và dễ sử dụng phải không nào. Mình cho ẩn tiện ích này trên màn hình có kích thước dưới 720px, các bạn có thể tùy chỉnh lại.
Ngoài ra các bạn có thể tùy biến lại khung này bằng code marquee.
Chúc các bạn thành công. Đừng quên để lại like và comment nhé!