Star Quốc BlogClose

Thứ Hai, 25 tháng 6, 2018

Share Intro Hình Ảnh Hiệu Ứng Đẹp Chất Cho Blog

Hello xin chào 500 anh em mình đã trở lại rồi đây :)) 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



Bước 1:  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 /><figure class="snip1543">  <img alt="sample108" src="https://i.imgur.com/VSNwyRS.jpg" />  <figcaption>    <h3>THÔNG TIN ADMIN</h3>Đang là sinh viên năm 2 trường CĐSP Quảng Trị chuyên ngành Tiếng Anh có niềm đam mê với thiết kế đồ họa và blog...<br />
    Hiện đang sinh sống tại Quảng Trị,Việt Nam.<br />
  </figcaption>  <a href="https://www.blogger.com/blogger.g?blogID=3792803740190609948#"></a></figure><figure class="snip1543 hover"><img alt="sample100" src="https://i.imgur.com/uIPPAnI.jpg" />  <figcaption>    <h3>GIỚI THIỆU WEBSITE</h3>Được chính thức thành lập vào tháng 4 năm 2017 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://www.blogger.com/blogger.g?blogID=3792803740190609948#"></a></figure><figure class="snip1543"><img alt="sample101" src="https://i.imgur.com/mcsNqZr.jpg" />  <figcaption>    <h3>VỀ TÍNH CÁCH</h3>Tôi là một con người khá ít nói,không thích nơi quá ồn áo hay náo nhiệt...<br />
    Luôn luôn nhạy cảm trong chuyện tình cảm,nên chưa có ai thích hợp để yêu và vẫn còn độc thân.<br />
  </figcaption>  <a href="https://www.blogger.com/blogger.g?blogID=3792803740190609948#"></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>
Nguồn : Star Nhân IT

Facebook Twitter Google+

28 nhận xét:

  1. Trả lời
    1. Biết rồi đó làm lại cái khác chất hơn

      Xóa
  2. khá là ok....Tối rảnh háng, mát chim qua blog em chơi tý nha!!!...Lâu ko thấy bác qua xaolone kakaka :)

    Trả lờiXóa
  3. Uhm đc đấy, mà phảI lấy về sửa lại chút cho đỡ rối mắt

    Trả lờiXóa
  4. phải đấy ! Bố muốn nổi đấy , rồi sao

    Trả lờiXóa
    Trả lời
    1. :)) Sửu là đây chứ đâu

      Xóa
    2. trẩu ăn không nói có ! Vui lắm à

      Xóa
    3. M cút khỏi Blog tao nhá Nam biến :)) bớt sủa

      Xóa
    4. bớt qua blog bố sủa đi con trai

      Xóa
    5. T con m à thằng kia bùn cười vãi bố lớn tuổi hơn m đấy ăn nói cẩn thận cái mồm

      Xóa
  5. Thủ thuật này nhìn cũng hay đấy e :)

    Trả lờiXóa
  6. comment để lên top bình luận

    Trả lờiXóa
  7. đã lên top và típ tục cmt
    #cmt8

    Trả lờiXóa

© 2017 Star Quốc Blog