Tạo hiệu ứng sóng chuyển màu tại các trang nhãn cho Blogspot

LongAnIT 11/30/2019

Hello các bạn. Tìm kiếm trên mạng thấy code này khá hay của bác Huỳnh Phi Phụng nên mình muốn mang về chia sẻ cho các bạn. Code tên là hiệu ứng sóng chuyển màu tại các trang nhãn cho blogspot. Nói thì khó hình dung ra đúng không thôi thì các bạn xem demo ngay trong link bên dưới mình đưa luôn.
https://www.longanit.com/search/label/SEO
Ok như vậy là các bạn đã thấy được demo hiệu ứng của nó rồi đúng không vậy cách để chúng ta làm nó cho trang blogspot của mình thế nào thì các bạn hãy thực hiện như theo hướng dẫn của mình nhé.

Bước 1: Xác định vị trí chúng ta chèn code: Thường thì code này là dạng kiểu code intro tại trang tĩnh. Vậy thì tôi sẽ đặt code này nằm dưới menu trong blogspot và chèn thêm thẻ điều kiện là chỉ hiển thị ở trang nhãn.

Bước 2:  Đăng nhập vào Blogger - Chủ đề - Chình sửa HTML
Bước 3: Copy toàn bộ đoạn code bên dưới và dán vào phía dưới menu trong blogspot của bạn thường thì nó nằm dưới phần Header trong blog.

<b:if cond='data:blog.searchLabel'>
<style>
.breadcrumbs{display:none}
div#label-intro{z-index:20;margin:0;color:#fff;text-align:center;height:100%;position:absolute;width:100%}
.label-intro{z-index:2;position:absolute;width:100%;height:100%}
div#label-intro div.noi-dung{position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);width:1080px;max-width:100%;text-align:left;padding:0 0 0 8em;box-sizing:border-box}
div#label-intro div.noi-dung i.labels{left:0;position:absolute;top:50%;transform:translate(0,-50%);font-size:6em;font-weight:100;opacity:.3}
div#label-intro div.noi-dung div.title{font-weight:700;font-size:2.5em;text-shadow:6px 6px 0 rgba(0,0,0,0.1)}
div#label-intro div.noi-dung div.content{width:600px;max-width:100%}
/*div#label-intro div.noi-dung div.title small.cap{display:block;font-size:14px;font-weight:300}*/
@keyframes bsw-wave2{0%{transform:translateX(0) translateZ(0) scaleY(1)}50%{transform:translateX(-25%) translateZ(0) scaleY(0.55)}100%{transform:translateX(-50%) translateZ(0) scaleY(1)}}
.waveWrapper{z-index:0;overflow:hidden;position:relative;left:0;top:0;margin:auto;width:100%;height:420px;user-select:none;-webkit-user-select:none}
.bsw-wavebg{position:absolute;width:100%;overflow:hidden;height:100%;bottom:0;background:linear-gradient(-45deg,#f5efef, #EE7752, #E73C7E, #23A6D5, #23D5AB,#764ba2,#7577a9);background-size:400% 400%;-webkit-animation:Gradient 50s ease infinite;-moz-animation:Gradient 50s ease infinite;animation:Gradient 50s ease infinite}
.bsw-bgt{z-index:15;opacity:0.5}
.bsw-bgm{z-index:10;opacity:0.75}
.bsw-bgb{z-index:5}
.wave{position:absolute;left:0;width:200%;height:100%;background-repeat:repeat no-repeat;background-position:0 bottom;transform-origin:center bottom}
.bsw-wavetop{background-size:50% 100px}
.bsw-wave-ani .bsw-wavetop{animation:move-wave 3s;-webkit-animation:move-wave 3s;-webkit-animation-delay:1s;animation-delay:1s}
.bsw-wave-mid{background-size:50% 120px}
.bsw-wave-ani .bsw-wave-mid{animation:bsw-wave2 10s linear infinite}
.bsw-wave-bot{background-size:50% 100px}
.bsw-wave-ani .bsw-wave-bot{animation:bsw-wave2 15s linear infinite}
.bsw_wrapper{margin-top:15px}
@-webkit-keyframes Gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@-moz-keyframes Gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes Gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
</style>
<div class='waveWrapper bsw-wave-ani'>
<div id='label-intro'>
<div class='label-intro'>
<div class='noi-dung'>
<i class='labels fa fa-folder-open'/>
  <div class='title'><!--<small class='cap'>CHUYÊN MỤC</small>--><span><data:blog.pageName/></span></div>
  <div class='content'>Nơi chia sẻ những bài viết, tài liệu, thủ thuật và mẹo vặt hay nhất về &#39;<span style='font-weight:700'><data:blog.pageName/></span>&#39; giúp bạn nhanh chóng tìm ra thứ mình cần!</div>
  </div>
  </div>
</div>
  <div class='bsw-wavebg bsw-bgt'>
    <div class='wave bsw-wavetop' style='background-image: url(&apos;http://front-end-noobs.com/jecko/img/wave-top.png&apos;)'/>
  </div>
  <div class='bsw-wavebg bsw-bgm'>
    <div class='wave bsw-wave-mid' style='background-image: url(&apos;http://front-end-noobs.com/jecko/img/wave-mid.png&apos;)'/>
  </div>
  <div class='bsw-wavebg bsw-bgb'>
    <div class='wave bsw-wave-bot' style='background-image: url(&apos;http://front-end-noobs.com/jecko/img/wave-bot.png&apos;)'/>
  </div>
</div>
  </b:if>
 Bước 4: Save template và thử truy cập vào chuyên mục tại các trang nhãn trong blog của bạn để kiểm tra kết quả nhé.
Nếu trong quá trình thực hiện báo lỗi hay gặp khó khăn vui lòng để lại bình luận bên dưới để được hỗ trợ nhé. Chúc các bạn SEO nhanh lên top.

No comments:

Post a Comment

Nếu phát hiện spam bạn sẽ bị xử lý. Bạn có thể đặt backlink tại đây Hướng dẫn đặt backlink nofollow tại đây