Code Intro Blog cực đẹp 2020 - Intro Homepage
by Admin in
Code blogspot
126 lượt xem

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.

Code Intro Blog cực đẹp 2020
DEMO Code Intro Blog cực đẹp 2020

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.

Share Post:

Related Posts

0 0 bình chọn
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments