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

48 nhận xét:

  1. cảm ơn bác
    kím mãi mới thấy bài này của bác

    Trả lờiXóa
  2. Trả lời
    1. Ẹc, nhưng mà vấn đề là nên chèn chỗ nào :3

      Xóa
  3. Haizz. Mấy bác trên kia lại khen nên k biết :3

    Trả lờiXóa
  4. Muốn hiển thị cái intro đó trong nhãn thì làm sao vậy Duy ?
    Ví dụ: https://i.imgur.com/8ew5fT7.png

    Trả lờiXóa
  5. Xem thêm:
    http://www.bacsiwindows.com/2017/11/tao-intro-tuyet-dep-cho-blogspot-chi-tu-css-va-html.html

    Trả lờiXóa
  6. Đẹp ghê, thank AD, nhưng làm cái này mất menu trên cùng.

    Trả lờiXóa
  7. Blog mình như vầy chèn chỗ nào v bác:
    https://starduongdesign.blogspot.com/

    Trả lờiXóa
    Trả lời
    1. Bạn cứ chèn ở dưới menu cho mình nhé.

      Xóa
    2. Chèn ở trên <!-- ban dang xem chuyen muc --> xem sao

      Xóa
    3. nó cũng chả có gì thay đổi

      Xóa
    4. duy.ripper@gmail.com
      Thêm mình vào xem cho nhé !

      Xóa
    5. đồng ý hi chứ mình thêm rồi mà

      Xóa
    6. Mình đã thêm thử rồi. Với giao diện như blog của bạn thì k hợp với cái này :v

      Xóa
  8. Làm đc rồi nha =)) cảm ơn Duy

    Trả lờiXóa
Mã Hóa Code
CÓ THỂ BẠN ĐANG TÌM