Hướng dẫn tạo intro với hiệu ứng tuyệt đẹp cho blogspot

Tác giả Thìn DZ

Xuất bản - tháng 7 17, 2018

Xin chào tất cả các bạn hôm nay mình xin chia sẽ cho mọi người cách tạo một intro giới thiệu cực đẹp và bắt mắt cho mọi người cùng sữ dụng rất chi là dễ sữ dụng ok chúng ta bắt đầu ngay thôi nào !!

CÁCH THỰC HIỆN

Bước 1: Ta chèn đoạn code phía dưới vào nơi bạn thích là được ^^

<style>#intro_homepage{ position: relative; display: table; width: 100%; height: 200px; margin: 0!important; padding: 0!important; z-index: 999; background: url(https://i1.wp.com/wallur.com/wp-content/uploads/2016/12/ghostblade-background-7.jpg?resize=1920%2C1080) no-repeat center center!important; */ background-size: cover!important; background: #3c3c3c;} .intro_homepage_content{position:relative;z-index:3}.intro_label h2{animation:zoomInUp 6s;font-size:45px;font-weight:700;color:rgba(255,255,255,.85);letter-spacinggg:0;margin:0 0 0;padding:0;font-family:"Roboto Condensed",sans-serif;text-transform:uppercase}.intro_label p{animation: zoomInDown 4s; text-transform: uppercase; font-size: 16px; font-weight: 400; color: rgba(255,255,255,0.7); margin: 0; padding: 0; letter-spacing: 2px}.intro_label{margin:0 auto;text-align:center;padding:0}.intro_buttondown a{position:absolute;bottom:10%;left:50%;z-index:2;display:inline-block;-webkit-transform:translate(0,-50%);transform:translate(0,-50%);color:#fff;font:normal 400 20px/1 'Josefin Sans',sans-serif;letter-spacinggg:.1em;text-decoration:none;transition:opacity .3s}.meta_{box-shadow: 0 0 4px rgba(0,0,0,.14), 0 4px 8px rgba(0,0,0,.28);display:table-cell;vertical-align:middle;text-align:center} /* CSS cho trình duyệt Chrome or Cốc Cốc */@-webkit-keyframes slideUpso { from {-webkit-transform: translate(-700px, 0)} to { -webkit-transform: translate(0px, 0px)}}.intro_label h2{ -webkit-animation: slideUpso 2s; -moz-animation: slideUpso 2s; -ms-animation: slideUpso 2s; -o-animation: slideUpso 2s; animation: slideUpso 2s;}/* CSS cho trình duyệt Chrome or Cốc Cốc */@-webkit-keyframes slideUpsos { from {-webkit-transform: translate(0, 1000px)} to { -webkit-transform: translate(0px, 0px)}}.intro_label p{ -webkit-animation: slideUpsos 2s; -moz-animation: slideUpsos 2s; -ms-animation: slideUpsos 2s; -o-animation: slideUpsos 2s; animation: slideUpsos 2s;} @media screen and (max-width: 1010px){ #intro_homepage{display:none}</style><div id='intro_homepage'><div class='meta_'><div class='intro_homepage_content'><div class='intro_label'><h2 class='_title'><i aria-hidden='true' class='fa fa-gg' style=' display:none; font-weight: 900;margin:0 20px 0 0'/>LÊ BÁ LONG<i aria-hidden='true' class='fa fa-gg' style='display:none;font-weight: 900;margin:0 0 0 20px'/><aa style='padding: 0 10px;background:linear-gradient(45deg,#4787ed,#b04eec);border-radius: 10px;'>IT</aa></h2><p>Blog chia sẽ thủ thuật Miễn Phí</p></div></div></div><div class='meta_'></div></div>

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