Xin chào các anh em, hôm nay tớ sẽ viết tiếp một bài thủ thuật dành cho những anh em nào đang làm Blogger có thể theo dõi và làm theo như mình :D



Cách làm: Các bạn dán code này vào bên dưới menu hoặc footer
<b:if cond="data:blog.url == data:blog.homepageUrl"> <b:if cond="data:blog.isMobileRequest == " false=""><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: #4B77BE;  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: #1F3A93;  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></b:if></b:if><br />
<br />
<figure class="snip1543">  <img alt="sample108" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEjvjtAA84Q4F2KHDKoyUgPOd9ke6j7mQ7NBpbRg8XpN_hj10s8I4nco3wcnTz23OyMnvikLsWX5NKycOeIqAvXcryDrygRm1k-8VV4tRW4Ptg4Pyx0mDCN3unTmwMKR9YEuEw70tK23tP/s320/nguyengia1988.jpg" />  <figcaption>    <h3>
THÔNG TIN ADMIN</h3>
Đang đi làm ngành nghề kinh doanh, tốt nghiệp ngành Công Nghệ Thông Tin và có niềm đam mê với thiết kế đồ họa và blog...<br />
    Hiện đang sinh sống và làm việc tại TPHCM.<br />
  </figcaption>  <a href="https://www.blogger.com/blogger.g?blogID=3792803740190609948#"></a></figure><figure class="snip1543 hover"><img alt="sample100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEjvjtAA84Q4F2KHDKoyUgPOd9ke6j7mQ7NBpbRg8XpN_hj10s8I4nco3wcnTz23OyMnvikLsWX5NKycOeIqAvXcryDrygRm1k-8VV4tRW4Ptg4Pyx0mDCN3unTmwMKR9YEuEw70tK23tP/s320/nguyengia1988.jpg" />  <figcaption>    <h3>
GIỚI THIỆU WEBSITE</h3>
Mới thành lập vào đầu tháng 12 năm 2018 và phát triển cho đến bây giờ được rất nhiều bạn ủng hộ...<br />
    Trang web này chuyên chia sẻ Thủ Thuật Facebook - Ảnh Bìa Đẹp - Thủ Thuật Windows cam kết hoàn toàn miễn phí.<br />
  </figcaption>  <a href="https://plus.google.com/110048594766565676376"></a></figure><figure class="snip1543"><img alt="sample101" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEjvjtAA84Q4F2KHDKoyUgPOd9ke6j7mQ7NBpbRg8XpN_hj10s8I4nco3wcnTz23OyMnvikLsWX5NKycOeIqAvXcryDrygRm1k-8VV4tRW4Ptg4Pyx0mDCN3unTmwMKR9YEuEw70tK23tP/s320/nguyengia1988.jpg" />  <figcaption>    <h3>
VỀ TÍNH CÁCH</h3>
Tôi là một hòa nhã và thích thoải mái...<br />
    Có đam mê đọc sách và đã có gia đình.<br />
  </figcaption>  <a href="https://plus.google.com/110048594766565676376"></a></figure><script src="//static.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js"><script src='https://code.jquery.com/jquery-2.2.4.min.js'/><script>/* Demo purposes only */$(".hover").mouseleave(  function() {    $(this).removeClass("hover");  });//# sourceURL=pen.js   </script>

Đơn giản quá phải không nào... :D

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

Tags