TẠO INTRO POST CHO BÀI VIẾT VÀ TRANG TĨNH

Ảnh minh họa

CÁC BƯỚC THỰC HIỆN:

Bước 1: Truy cập vào giao diện chỉnh sửa HTML của Blogspot.

Bước 2: Chèn code bên dưới vào nơi bạn muốn hiển thị (thường là dưới Menu).

<b:if cond='data:blog.pageType != "index"'>
<b:if cond='data:blog.pageType != "error_page"'>
<style>
#intro_postpage{position:relative;display:table;width:100%;height:56vh;margin:0!important;padding:0!important;z-index:999;background:url(https://www.techwyse.com/blog/wp-content/uploads/2015/03/HNCK4011-1300x867.jpg) no-repeat center center!important;background-size:cover!important}
#intro_postpage:before{content: ''; opacity: 1; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; background: linear-gradient(transparent, #050a18)}
#intro_postpage:after{content:'';z-index:0;position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(transparent,rgba(51, 51, 51, 0.15) 0%,rgba(12,23,36,0.4))}
.intro_postpage_content{position:relative;z-index:3;width:70%;margin:auto}
.intro_postpage_label h2{animation: zoomInUp 6s; font-size: 31px; font-weight: 400; color: rgba(255,255,255,.85); margin: 0; padding: 0;text-transform:uppercase}
.intro_postpage_label p{animation: zoomInDown 4s; font-size: 21px; font-weight: 300; color: rgba(255,255,255,0.7); margin: .5em 0 0 0; padding: 0}
.intro_postpage_label{margin:0 auto;text-align:center;padding:0}
.meta_{display:table-cell;vertical-align:middle;text-align:center}
</style>
<div id='intro_postpage'>
<div class='meta_'>
<div class='intro_postpage_content'>
<div class='intro_postpage_label'>
<h2 class='_title' id='post-title'><i aria-hidden='true' class='fa fa-gg' style='margin:0 20px 0 0'/><data:blog.pageName/><i aria-hidden='true' class='fa fa-gg' style='margin:0 0 0 20px'/></h2>
<p><data:blog.url/></p>
</div>
</div></div>
<div class='meta_'>
</div>
</div>
</b:if>
</b:if>