23:46 - 22/6/18 / 8 nhận xét

Tạo khung 'bạn nên xem' chữ chạy liên tục

Trước đây bạn hay phải dùng thanh breaking news để mời mọi người chú ý đến những bài viết mới. Tuy nhiên hôm nay mình sẽ hướng dẫn thủ thuật mới, đó là tạo khung "bạn nên xem" hoàn toàn bằng css, chúng ta có thể chỉnh sửa để hướng người đọc tới các bài đăng mà mình muốn.
Các bạn có thể xem demo ngay trực tiếp trên blog: Do bị lỗi trên trang post và trên mobile nên không hiển thị được đầy đủ. Nhưng khi chèn vào trong chỉnh sửa HTML của blog thì sẽ không sao cả.

BẠN NÊN XEM

Dòng chữ 1 Dòng chữ 2 Dòng chữ 3

Cách thực hiện:
Các bạn chèn đoạn code dưới đây vào nơi cần hiển thị

<style>
#mayyoulike{height:42px;line-height:41px;background:#fff;margin:0 auto 15px}
.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:&quot;&quot;;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:650px){#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: 0px}
   30%  {margin-top: 0px}
   40%  {margin-top: -40px}
   60%  {margin-top: -40px}
   70%  {margin-top: -80px}
   90%  {margin-top: -80px}
   100% {margin-top: 0px}}
</style>
<div id='mayyoulike'><div class='mayyoulike-text'>BẠN NÊN XEM</div>
<div class='scroller'><div class='inner'>
     <span><a href='#'>Dòng chữ 1</a></span>
      <span><a href='#'>Dòng chữ 2</a></span>
     <span><a href='#'>Dòng chữ 3</a></span>
</div></div>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-KPXnleGVoIb6zDeh7G-_slw0iknYLJ3eyCUE858eYvWwjl3B5jim28dSgkYUmMJ7S5ebmK0eQMZbLRYiJOnkN39IYm5ADw7PWv0GgPLOXNNN3jtdGelh4I1dmdaxorGblPwjxFwgtAE/s1600/icon-hot.png'/>
  </div>

Ở đây mình cho ẩn tiện ích này trên màn hình có kích thước dưới 650px. Các bạn điều chỉnh lại các thông số và chữ cho phù hợp nhé.
Chúc các bạn thành công. Nếu gặp khó khăn hay thắc mắc hãy bình luận ở bên dưới.

[Khôi Ròm]