Code Intro Blog cực đẹp 2020 – Intro Homepage

Code Intro Blog cực đẹp 2020 cho các Blogspot đây nè.

Dưới đây mình chia ra làm 2 Intro, một cái có background, một cái không có background để các bạn dễ lựa chọn.

1. Code Intro Blog cực đẹp 2020 có Background

Bước 1: Đăng nhập Blog -> Chủ đề -> Chỉnh sửa html

Bước 2:Bạn copy và chèn code bên dưới vào bất cứ nơi nào mà bạn muốn đặt intro.

Bước 3: Lưu lại và xem kết quả.

Bạn có thể thay thế background bằng hình ảnh khác, thay thế link này bằng link ảnh bạn muốn: https://i1.wp.com/wallur.com/wp-content/uploads/2016/12/ghostblade-background-7.jpg

<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:&quot;Roboto Condensed&quot;,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 &#39;Josefin Sans&#39;,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>

2. Code Intro Blog cực đẹp 2020 không có Background

Bước 1: Đăng nhập Blog -> Chủ đề -> Chỉnh sửa html.

Bước 2:Bạn copy và chèn code bên dưới vào bất cứ nơi nào mà bạn muốn đặt intro.

Bước 3: Lưu lại và xem kết quả.

<!-- sTART INTRO -->
<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"></i>LINH PRODUCTIONS 
<i aria-hidden="true" class="fa fa-gg" style=" display:none;   font-weight: 900;margin:0 0 0 20px"></i><aa style="padding: 0 10px; background:linear-gradient(45deg,#4787ed,#b04eec);   border-radius: 10px;">BLOG</aa>
</h2>
<p>Blog chia sẻ thủ thuật miễn phí</p>
</div>
</div></div>
<div class="meta_">
</div>
</div>
<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: #3F3D3D;}

.intro_homepage_content{position:relative;z-index:3}
.intro_label h2{animation:zoomInUp 6s;font-size:45px;font-weight:700;color:#FFF;letter-spacinggg:0;margin:0 0 0;padding:0;font-family:"Roboto Condensed",sans-serif;text-transform:uppercase}
.intro_label p{animation: zoomInDown 10s; text-transform: uppercase; font-size: 16px; font-weight: 400; color: #FFF; 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,100%);transform:translate(0,100%);color:#fff;font:normal 400 20px/1 'Josefin Sans',sans-serif;letter-spacinggg:.1em;text-decoration:none;transition:opacity .3s}
.meta_{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;
}
</style>
<style>
@media screen and (max-width: 1010px){
.wrapid {display:none}
.menu-con .logo a {
    padding: 0!important;
    text-transform: uppercase;
    font-size: 24px;
    letter-spacing: 1px;
    width: 100%;
    left: 0;
    line-height: 55px;
    height: 55px;
}
.menu-con .logo img {
    float: none;
    position: relative;
    top: 29%;
padding-top: 23px;
    padding-left: 20px;
}
.menu-con li{display:none;float:none;width:100%}
.fa-lg {display:none}

#menu-chinh {
    z-index: 9999;
    width: 100%;
    height: 55px;
    top: 0;
    padding: 0;
}
#menu-chinh, #menu-chinh.change {
    background: #222;
}
.wrap-menu {
    width: 100%!important;
    margin: 0 auto;
}
.menu-con {
    margin: 0 auto;
    width: 100%!important;
    position: relative;
}
.menu-mobile {
    display: block;
    position: absolute;
}
.menu-con a {
    color: #fff!important;
    font: 700 27px Roboto Condensed;
    display: inline-block;
    padding: 10px 17px;
    text-decoration: none;
    color: #464646;
    text-transform: none;
    transition: .1s;
}
.menu-con .logo {
    position: absolute;
    width: 100%;
    text-align: center;
    display: block;
    height: 55px;
    line-height: 55px;
}
    #intro_homepage{display:none!important}
</style>
<!-- eND iNTRO -->

3. Đến lượt bạn

Bạn đã cài được intro cho blog chưa?

Đừng quên đăng kí kênh Youtube LINH PRODUCTIONS để ủng hộ Linh nhé. Cám ơn các bạn.