Tạo intro post cho blogspot ở trang tĩnh và trang bài viết

Hello xin chào các bạn, chúng ta lại gặp nhau trong chuyên mục thủ thuật blogspot. Trong bài viết ngày hôm nay tôi sẽ hướng dẫn các bạn cách để chúng ta tạo một intro post cho blogspot. Nghe có vẻ khá hiểu tuy nhiên hãy nhìn hình bên dưới như mình demo nhé.

Tạo intro  post cho bài viết và trang tĩnh blogspot

Về cách thức hoạt động của code này như sau

1. khi bạn truy cập vào  một bài viết bất kỳ thì phía trên bài viết sẽ hiển thị một hình nền chứa thông tin tiêu đề bài viết và đường link "permaklink" như hình trên.
2. Code có thể tùy chỉnh được tất cả bao gồm hình nền màu sắc, hiệu ứng
3. Code sử dụng thẻ điều kiện </b:if> để tùy biến hiển thị

Các bước tiến hành

Bước 1: Đăng nhập vào Blogger - Chủ đề - Chỉnh sửa HTML
Bước 2: Copy toàn bộ đoạn code bên dưới và dán nó vào phía bên dưới menu trong template của bạn

<!--Bắt đầu intro bài viết hiển thị trên trang bài viết và trang tĩnh blogspot-->
<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>
<b:if cond='data:blog.pageType != &quot;index&quot;'>
<b:if cond='data:blog.pageType != &quot;error_page&quot;'>
<style>
#longanit_postpage{position:relative;display:table;width:100%;height:46vh;margin:0!important;padding:0!important;z-index:999;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYZUxSs6w2y7kgcG5Tp3rnOdg5ZjGBDMFowIOVnTS8iPpcPDGRoXNTURHfNhPxg5lomyY8XI7bbq0kXUgJ32y_qPIkG30sdmda2ekw_ixrHPZnYeoiTC-5cXUkgRal0YT0yNFT7yzzAUA/s1600/banner_longanit.jpg) no-repeat center center!important;background-size:cover!important}
#longanit_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)}
#longanit_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))}
.longanit_postpage_content{position:relative;z-index:3;margin:auto}
.longanit_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;text-align:center}
.longanit_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}
.longanit_postpage_label{margin:0 auto;text-align:center;padding:0}
.longanit_meta_{display:table-cell;vertical-align:middle;text-align:center}
</style>
<div id='longanit_postpage'>
<div class='longanit_meta_'>
<div class='longanit_postpage_content'>
<div class='longanit_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='longanit_meta_'>
</div>
</div>
</b:if>
</b:if></b:if>
<!--Kết thúc intro bài viết hiển thị trên trang bài viết và trang tĩnh blogspot-->

 Bước 3: Tiến hành save lại và xem kết quả. Bạn có thể chỉnh sửa lại một số thứ mình tô đỏ ở trên

Code sử dụng 3 thẻ điều kiện: Chỉ hiển thị trên trang bài viết, trang tỉnh và không hiển thị trên mobile
Thay thế link hình ảnh bằng link sau:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYZUxSs6w2y7kgcG5Tp3rnOdg5ZjGBDMFowIOVnTS8iPpcPDGRoXNTURHfNhPxg5lomyY8XI7bbq0kXUgJ32y_qPIkG30sdmda2ekw_ixrHPZnYeoiTC-5cXUkgRal0YT0yNFT7yzzAUA/s1600/banner_longanit.jpg

Chỉnh sửa độ rộng và chiều cao của bức ảnh banner bạn chỉnh code này: width:100%;height:46vh

Kết luận: Như vậy qua bài viết trên tôi đã hướng dẫn các bạn một tùy chỉnh chuyên sâu áp dụng thẻ điều kiện vào trong blogspot để hoàn thành code tạo intro cho bài viết ở trang tĩnh và trang bài viết cũng như là trên mobile.

Nếu trong quá trình thực hiện báo lỗi hay gặp khó khăn vui lòng để lại bình luận bên dưới để được hỗ trợ nhé. Chúc các bạn SEO nhanh lên top.