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. phải như vậy chứ nè

    Trả lờiXóa
  2. 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
  3. ... Cảm ơn Duy ^^

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

      Xóa
  4. Lỗi nhé :))

    Trả lờiXóa
    Trả lời
    1. Em chèn vào cũng lỗi nè anh -_-

      Xóa
    2. Code lỗi. Đã sửa @@

      Xóa
    3. Chèn chỗ nào vậy ?

      Xóa
    4. Chèn phía trên "ban dang xem chuyen muc" xem sao

      Xóa
    5. Để tui làm thử

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

    Trả lờiXóa
  6. 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
  7. 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
  8. Đẹp ghê, thank AD, nhưng làm cái này mất menu trên cùng.

    Trả lờiXóa
    Trả lời
    1. Sao mà mất được nhỉ ?

      Xóa
    2. Bạn xem thử nè www.vanphongit.com

      Xóa
    3. Bạn chèn phía dưới menu xem sao nhé.

      Xóa
    4. Vẫn không được bạn ak.

      Xóa
    5. Xóa css position đi. Rồi chuyển code trước wrapper

      Xóa
    6. Hoặc sửa z-index: 999 thành z-index: 9999 nhé!

      Xóa
  9. 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
  10. Hay hay quá anh ơi ^^

    Trả lờiXóa
  11. 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
  • [PSD] Con Người
    [PSD] Con Người
    22/01/2017 - 0 bình luận
    DEMO   DOWNLOAD
  • Thêm biểu tượng cảm xúc (Reactions) giống Facebook cho Blogspot
    Thêm biểu tượng cảm xúc (Reactions) giống Facebook cho Blogspot
    19/05/2017 - 0 bình luận
    Hướng dẫn Thêm biểu tượng cảm xúc (Reactions) giống Facebook cho Blogspot. Chào các bạn, hôm nay Duy…
  • [ PSD Ảnh Bìa ] Điều Khác Lạ
    [ PSD Ảnh Bìa ] Điều Khác Lạ
    31/08/2017 - 0 bình luận
    Xin Share Ảnh Bìa Điều Khác Lạ !!!!  Ảnh bìa kèm tên chính phụ Liên Hệ Tải Về PSD
  • [PSD] Chờ Mưa Mang Em Về
    [PSD] Chờ Mưa Mang Em Về
    25/03/2017 - 2 bình luận
    DOWNLOAD  CONTACT function disableselect(e){ return false }function reEnable(){…
  • [PSD] Gương Mặt Lạ Lẫm
    [PSD] Gương Mặt Lạ Lẫm
    04/01/2017 - 0 bình luận
    DOWNLOAD
  • [ Report ] Hướng Dẫn RIP SEX 2H Die
    [ Report ] Hướng Dẫn RIP SEX 2H Die
    05/07/2016 - 0 bình luận
    https://www.facebook.com/help/contact/207005222725325 Địa chỉ email của bạn: điền mail mình vô Full …
  • Hướng dẫn get token facebook nhanh gọn và an toàn
    Hướng dẫn get token facebook nhanh gọn và an toàn
    08/08/2018 - 52 bình luận
    Hầu hết tất cả các pro đều lấy token bằng cách vào các web auto like, auto sub hoặc là lấy token ở nguồn trang…
  • Hướng dẫn lấy avatar tài khoản facebook bật khiên
    Hướng dẫn lấy avatar tài khoản facebook bật khiên
    18/06/2018 - 15 bình luận
    Xin chào tất cả các bạn, hôm nay mình xin hướng dẫn các bạn cách lấy ảnh đại diện Facebook của người khác đã …
  • [Blogger Templates] MDFostrap Responsive
    [Blogger Templates] MDFostrap Responsive
    20/06/2017 - 2 bình luận
    Mdfostrap là một template blogger đẹp cho trang blog cá nhân. Với thiết kế chuẩn Responsive, Seo thân…
  • [PSD] Cũng đành thôi - Đức Phúc
    [PSD] Cũng đành thôi - Đức Phúc
    14/07/2017 - 20 bình luận
     Ảnh bìa gốc  Ảnh bìa kèm tên chính phụ Tải Về PSD Tải Photoshop Liên Hệ Nguồn: Dii Nô…
  • [TUT] Đổi Ngày Sinh Không Giới Hạn
    [TUT] Đổi Ngày Sinh Không Giới Hạn
    05/07/2016 - 0 bình luận
    -Thực ra thì cái việc bị giới hạn đổi ngày, tháng, năm sinh trên Faceb…
  • [PSD ẢNH BÌA] - MÙA THU ĐI QUA
    [PSD ẢNH BÌA] - MÙA THU ĐI QUA
    13/11/2017 - 4 bình luận
    Ảnh minh họa Tải về Liên Hệ