Notification texts go here Contact Us Buy Now!
Bài đăng

Hiện nội dung khi rê chuột vào ảnh đơn giản mà đẹp

Blog mình nội dung chủ yếu vẫn là tâm tư tình cảm tuổi mới lớn hoặc những thông tin, tình hình trong nước và quốc tế vui vui, thú vị, top trending... Nhưng cảm xúc thì không phải lúc nào cũng có nên ở mục Thích Chia Sẻ này mình sẽ xen thêm cả 1 chút Thủ Thuật Blogspot để có bài này bài kia không blog mình nó mốc mất.

Mỗi ngày bạn học được 1 cái mới, dù đơn giản hay không cũng sẽ làm bạn vui. Hôm nay, 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 nội dung khi rê chuột vào ảnh. 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 đâu.

Live demo:

Tham gia Phú Cường Blogger Group
Cách thực hiện:
Bước 1: Truy cập Quản trị blog - Bố cục - Thêm tiện ích - HTML/Javascript.
Bước 2: Copy toàn bộ code sau vào khung nội dung:
<style> .npcads{position:relative;margin:0 auto} .npcads .contentads{position:absolute;bottom:-30px;background:rgba(0,0,0,.5);color:#f1f1f1;width:100%;padding:10px;left:0;visibility:hidden;opacity:0;transition:all .2s;z-index:2} .npcads:hover .contentads{bottom:0;visibility:visible;opacity:1;z-index:2} </style> <div class='npcads'> <a href='https://www.facebook.com/groups/phucuongblogger/' rel='nofollow' target='_blank'><img src='https://1.bp.blogspot.com/-sHGnqC1adi4/WgsVYNKG3YI/AAAAAAAAA2w/YMqQsOhZLhg4kWBxbrsA0kIb66oE4o2kwCLcBGAs/s1600/wallhaven-45496813-min-min.jpg'/> </a> <div class='contentads'>Tham gia Phú Cường Blogger Group</div> </div>
- Sửa lại link ảnh và nội dung hiển thị phù hợp với blog bạn.
Bước 3: Lưu tiện ích.
Kết luận:
Vậy là mình vừa hướng dẫn xong cho các bạn 1 thủ thuật nho nhỏ giúp blog bạn thêm sinh động hơn. Bạn có thể dùng hiệu ứng này vào nhiều mục đích không chỉ riêng mục tiện ích đâu nhé. Có thể làm cho thumbnail mỗi bài viết, từng hình ảnh trong bài, banner... cái này tùy thuộc vào sự sáng tạo của bạn nha. Chúc các bạn thành công!

About the Author

Có những thứ luôn quẩn quanh cuộc đời bạn và đôi lúc không có lời giải thích, liệu rằng đó có phải là duyên số?!

24 nhận xét

  1. hay quá :v
    1. Thôi e. Spam quá :3 A xóa hết chỗ comment spam kia đi rồi đấy :3 Lỗi js nên k chỉnh lại đc phân trang, e cmt thế kia trên mobile nhìn muốn chết đấy :3
    2. Nó bé tí tẹo mà. Temp free nên bị mã hóa -_- Khó chịu. Biết thế từ đầu a dùng bừa 1 temp xấu hoắc rồi chỉnh như này cũng ok. Tại chỉnh rồi nên giờ k rảnh đâu chỉnh lại temp mới.
  2. Nhận xét này đã bị quản trị viên blog xóa.
  3. đã đọc và sẽ test
  4. Lâu rồi mới ra bài viết mới ^^ đang cần và rất hữu ích.
    1. Giờ lâu lâu mới ra. Lúc mới lập thì cảm xúc dồi dào quá nên 1 ngày có 1 bài :v
  5. Vào thăm blog a nè
    1. Okie e :D
  6. Ẹc, cảm xúc tản mạn, tâm sự đâu hết rồi :v
    1. Đó, cảm xúc đó. Thi thoảng a khám phá ra cái mới thì a mới share thôi.
  7. Đẹp à nha :v
    1. Đơn giản nữa.
  8. E hóng a làm bài viết tạo Sidebar bên trái
    1. Cái này view source ra cũng đc e ạ, a k chống f12 hay chuột phải gì luôn :)) Nhưng nếu thích thì đợi a post bài, mỗi tội sẽ phải chỉnh nhiều lắm vì temp a làm dạng fb nên a chỉnh theo ý a từ trc rồi :3
  9. cmt 1 :v
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.