Duy Ripper: 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 != &quot;index&quot;'>
<b:if cond='data:blog.pageType != &quot;error_page&quot;'>
<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: &#39;&#39;; opacity: 1; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; background: linear-gradient(transparent, #050a18)}
#intro_postpage:after{content:&#39;&#39;;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>

Bước 3: Lưu mẫu.

Tùy chỉnh

• Đoạn màu đỏ là link ảnh, có thể thay ảnh khác nếu không thích hình ảnh có sẵn.

Lời kết

Chẳng có lời kết gì cả. Chúc các bạn thành công.

View-source: Bác Sĩ Windows