Google Drive direct download link generator

Trình tạo liên kết html

Get Code

Kết quả

Hiển thị nội dung trong suốt trên thumbnail đơn giản và đẹp

Xin chào các bạn, đã đến với blog của mình hôm nay ở bài viết này mình xin chia sẻ tới các bạn 1 hiệu ứng đẹp nhưng vô cùng đơn giản. Đó là hiện đoạn text trong suốt trên thumbnail. Thủ thuật chỉ dùng CSS và HTML, không có Javascript nên không ảnh hưởng nhiều đến tốc độ tải trang.
Hiển thị nội dung trong suốt trên thumbnail đơn giản và đẹp

Bước 1: Đăng nhập Blogger ==> Bố cục ==> Thêm tiện ích ==> HTML/Javascript
Bước 2: Dán đoạn code bên dưới vào khung HTML ==> Lưu
<style>
*{box-sizing:border-box;}.container{position:relative;max-width:800px;margin:0 auto;}.container img{vertical-align:middle;}.container .content{position:absolute;bottom:0;background:rgba(0,0,0,0.5);color:#f1f1f1;width:100%;padding:10px;}.content {opacity: 0.7;}
</style>
<div class="container">
  <img src="https://4.bp.blogspot.com/-42OgdSRvDtc/Wo0bCV-uh1I/AAAAAAAAEOk/HQ4yWHmrED8S9cCxUgWI4z0R70qI6DdmgCLcBGAs/s1600/Qu%25C3%25AD%2B%25C4%2590z%2Bv%25C3%25A3i.jpg" alt="Thủ Thuật Blogspot, Nguyễn Ngọc Quí Đz" style="width:100%;">
<div class="content">
<h1>Tiêu đề</h1>
<p>Nội dung...</p>
</div></div>

Chỉnh sửa tùy ý:

Kích thước và màu nội dung: color:#f1f1f1;width:100% (sửa % và mã màu f1f1f1 theo ý bạn, xem mã màu Tại đây)
Kích thước ảnh: style="width:100%; (sửa % theo ý bạn)


Thủ Thuật Blogspot, Nguyễn Ngọc Quí Đz

Nguyễn Ngọc Quí Đz

Nội dung...

Chúc các bạn thành công !

Nguồn: W3schools

CHIA SẺ BÀI VIẾT CHO MỌI NGƯỜI:

  1. Chưa hình dung được không hiểu lắm ^^ ttt nha ông :<

    Trả lờiXóa
  2. Tui tạm thời nghỉ Blog 1 thời gian mong bác đừng xoá liên kết với tui nhé ! Khi nào có thể tui sẽ quay trở hoạt động tiếp ! Cảm ơn bác !

    Trả lờiXóa
  3. bán domain .com .net .me 100k card .. free chuyển tên miền về blogger ?..lh :lexuanmy50@gmail.com

    Trả lờiXóa
  4. ồ liên kết của tôi mất đâu rồi

    Trả lờiXóa