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

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

KIỀU GIA HUY / lúc 21:18 ngày Thứ Bảy, 18 tháng 11, 2017 / 1 bình luận

Chia sẻ

Chọn hình thức muốn chia sẻ:
• Copy liên kết
• Facebook
• Google +
• Email

Kết bạn Kiều Gia Huy để cùng trao đổi, học hỏi và nhận nhiều bài viết hay, hữu ích 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.

TỔNG KẾT

Chỉ cần coppy và past là bạn đã có ngay intro post tuyệt đẹp này rồi :)). Chúc các bạn thành công.

View-source: Bác Sĩ Windows