Intro hiển thị hình ảnh hiệu ứng đẹp mắt cho Blogspot



Hello anh em, hôm nay đi dạo trên Codepen thì mình đã vô tình phát hiện được một code hiệu ứng đẹp mắt mà anh em có thể dùng để trang trí cho Blog của mình, đoạn code này có dạng ảnh 3 cột và có hiệu ứng hover rất đẹp, nó có thể dùng làm label langding cho blog của bạn nếu bạn biết cách tùy biến.

Đoạn code

Để thêm vào blog , bạn hãy đặt đoạn code này vào nơi nào mà bạn thích ( có thể là dưới menu hoặc footer )
 <b:if cond='data:blog.url == data:blog.homepageUrl'>
 <b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>
<style class="cp-pen-styles">@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro);
@import url(https://fonts.googleapis.com/css?family=Arial:700);
.snip1543 {
background-color: #fff;
    color: #ffffff;
    display: inline-block;
    font-family: 'Arial', sans-serif;
    font-size: 16px;
    margin: 10px 5px;
    max-width: 405px;
    min-width: 230px;
    overflow: hidden;
    position: relative;
    text-align: left;
    width: 100%;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}
.snip1543 *,
.snip1543 *:before,
.snip1543 *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.45s ease;
  transition: all 0.45s ease;
}
.snip1543 img {
  backface-visibility: hidden;
  max-width: 100%;
  vertical-align: top;
}
.snip1543:before,
.snip1543:after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  content: '';
  background-color: #138882;
  opacity: 0.5;
  -webkit-transition: all 0.45s ease;
  transition: all 0.45s ease;
}
.snip1543:before {
  -webkit-transform: skew(30deg) translateX(-80%);
  transform: skew(30deg) translateX(-80%);
}
.snip1543:after {
  -webkit-transform: skew(-30deg) translateX(-70%);
  transform: skew(-30deg) translateX(-70%);
}
.snip1543 figcaption {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  z-index: 1;
  bottom: 0;
  padding: 25px 40% 25px 20px;
}
.snip1543 figcaption:before,
.snip1543 figcaption:after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #138882;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
  content: '';
  opacity: 0.5;
  z-index: -1;
}
.snip1543 figcaption:before {
  -webkit-transform: skew(30deg) translateX(-100%);
  transform: skew(30deg) translateX(-100%);
}
.snip1543 figcaption:after {
  -webkit-transform: skew(-30deg) translateX(-90%);
  transform: skew(-30deg) translateX(-90%);
}
.snip1543 h3,
.snip1543 p {
  margin: 0;
  opacity: 0;
  letter-spacing: 1px;
}
.snip1543 h3 {
  font-family: 'Arial', sans-serif;
  font-size: 36px;
  font-weight: 700;
  line-height: 1em;
  text-transform: uppercase;
}
.snip1543 p {
  font-size: 0.9em;
}
.snip1543 a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}
.snip1543:hover h3,
.snip1543.hover h3,
.snip1543:hover p,
.snip1543.hover p {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 0.9;
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}
.snip1543:hover:before,
.snip1543.hover:before {
  -webkit-transform: skew(30deg) translateX(-20%);
  transform: skew(30deg) translateX(-20%);
  -webkit-transition-delay: 0.05s;
  transition-delay: 0.05s;
}
.snip1543:hover:after,
.snip1543.hover:after {
  -webkit-transform: skew(-30deg) translateX(-10%);
  transform: skew(-30deg) translateX(-10%);
}
.snip1543:hover figcaption:before,
.snip1543.hover figcaption:before {
  -webkit-transform: skew(30deg) translateX(-40%);
  transform: skew(30deg) translateX(-40%);
  -webkit-transition-delay: 0.15s;
  transition-delay: 0.15s;
}
.snip1543:hover figcaption:after,
.snip1543.hover figcaption:after {
  -webkit-transform: skew(-30deg) translateX(-30%);
  transform: skew(-30deg) translateX(-30%);
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
}

/* Demo purposes only */
body {
  text-align: center;
}</style>
<figure class="snip1543">
  <img src="https://www.uaf.nl/Portals/13/EasyDNNnews/180/roostermaker.jpg" alt="sample108" />
  <figcaption>
    <h3>Lập trình viên</h3>
    <p>Là người viết ra các chương trình máy tính. n..</p>
  </figcaption>
  <a href="#"></a>
</figure>
<figure class="snip1543 hover"><img src="https://www.uaf.nl/Portals/13/EasyDNNnews/180/roostermaker.jpg" alt="sample100" />
  <figcaption>
    <h3>Star Nhân IT</h3>
    <p>Là một người đẹp trai và cute.</p>
  </figcaption>
  <a href="#"></a>
</figure>
<figure class="snip1543"><img src="https://www.uaf.nl/Portals/13/EasyDNNnews/180/roostermaker.jpg" alt="sample101" />
  <figcaption>
    <h3>Ninh Thị Anh Thư</h3>
    <p>Người yêu của Nhân ý</p>
  </figcaption>
  <a href="#"></a>
</figure>
<script src='//static.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script >/* Demo purposes only */
$(".hover").mouseleave(
  function() {
    $(this).removeClass("hover");
  }
);
//# sourceURL=pen.js
   </script></b:if></b:if>

Chúc các bạn thành công 

Nhận xét

  1. Demo đi nào. Trôi dạc acc nào rồi Nhân

    Trả lờiXóa
  2. Comeback đi ey...anh nhớ em quá...hết chịu nổi rồi :(

    Trả lờiXóa
  3. https://namripper.blogspot.com/
    Demo

    Trả lờiXóa
  4. Đang rename tích hiện để mai comeback họ Ma nên không rep comment đc :3 ae chịu khó đợi nhé

    Trả lờiXóa
  5. intro mới đẹp share tui đi :v

    Trả lờiXóa
  6. demo: https://www.leanhduc.xyz/
    CTV tại www.leanhduc.xyz

    Trả lờiXóa
  7. Sau khi comeback trick share luôn em này
    [IMG]https://upanhtocdo.com/images/2018/06/24/srrf.png[/IMG]

    Trả lờiXóa
  8. https://i.imgur.com/NB0FOQZ.png
    Chuẩn bị hóng nào :))

    Trả lờiXóa
    Trả lời
    1. Vậy cái acc Lê Văn Huy kia phải của em không Nhân

      Xóa
    2. Cái đó cũng của e, nhưng cho ny rồi

      Xóa
    3. :) rename tích hiện đòi về là về ? WTF tricker :))

      Xóa
    4. thế hôm qua tao nghe mày nói loáng thoáng là chuẩn bị comback gì mà ?
      https://huunhan-bucu.blogspot.com/ éo biết share temp này có bị sao k nữa

      Xóa
    5. :)) Sao toàn temp trên blog t share rồi thế nhờ, :) mà comeback ở đây là rename hiện acc khác đấy em, với lại sao xóa comment vậy nè ? https://i.imgur.com/EnHOkld.png

      Xóa
    6. Share và đã xóa vì phốt ? :) cần anh gửi lại cái temp full + giải mã js copyright cho xem k ?

      Xóa
    7. lộn r , chắc k phải vậy đâu

      Xóa
    8. bởi vì temp m đang dùng edit còn chửa xong

      Xóa
    9. :)) không phải vậy ? hỏi ae blogger xem nào ?

      Xóa
  9. Ố la la, thấy chúng bạn nó post bài "Test curl like by Võ Hữu Nhân" gì gì đó, cho t 1 cái đi Nhân :))

    Trả lờiXóa
  10. ngày nào cũng vào blog hóng có bài share temp giống wapvip kg :)

    Trả lờiXóa
  11. https://www.facebook.com/Stuck.Ru
    Hóng cái tích hiện về nè :)) đổi tên sống ẩn nào

    Trả lờiXóa

Đăng nhận xét

Bình luận sao cho dễ thương xíu nhé :3