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!

32 nhận xét

  1. Hello =)))) vừa vào blog thấy post mới :v

    Trả lờiXóa
    Trả lời
    1. Dạo này t bận làm đồ án quá nên cảm xúc còn chui đi đâu hết, cũng k tương tư e nào cả nên k có tâm sự ông ạ :v

      Xóa
    2. Tui thì thích các bài tâm sự, tản mạn hơn là các bài thủ thuật khô khan thế này. Mà tui cũng lười viết vl =))

      Xóa
    3. Ừ. Sắp tới đi phượt đến Bắc Giang thăm nhà bạn chắc có cái để viết. Dạo này toàn liên quan đến học hành thành ra k dám viết vì toàn bức xúc :v

      Xóa
    4. Mong là có cảm xúc để viết k thì khô khan vl :)) K có máy ảnh hịn để chụp nên ảnh còn k đẹp như mơ.

      Xóa
  2. Demo vào bài viết đi bác Cường :D

    Trả lờiXóa
    Trả lời
    1. E chưa dùng codepen.io để làm live demo nên show luôn live theo kiểu kia rồi nhá :3 Phòng khi có xóa bên sidebar trái thì mn k thắc mắc :v

      Xóa
  3. Trả lời
    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

      Xóa
    2. hahaha đến cấp 20 ko rep đc luôn :v

      Xóa
    3. 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.

      Xóa
  4. Nhận xét này đã bị quản trị viên blog xóa.

    Trả lờiXóa
  5. Này lấy trong mấy cái web chia sẻ ở bài dưới phải ko?

    Trả lờiXóa
    Trả lời
    1. K ông. Bài dưới t mới chỉ dùng link số 1. Còn lại share cho ae chứ t chưa dùng. Cái này t tự làm. Hôm qua ngồi học CSS ở bài này bên w3shools thì làm luôn cái hover theo ý mình.

      Xóa
  6. Lâu rồi mới ra bài viết mới ^^ đang cần và rất hữu ích.

    Trả lờiXóa
    Trả lời
    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

      Xóa
  7. Ẹc, cảm xúc tản mạn, tâm sự đâu hết rồi :v

    Trả lờiXóa
    Trả lời
    1. Đó, cảm xúc đó. Thi thoảng a khám phá ra cái mới thì a mới share thôi.

      Xóa
  8. E hóng a làm bài viết tạo Sidebar bên trái

    Trả lờiXóa
    Trả lờ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

      Xóa
  9. Nghiêm cấm mọi hành vi spam comment !!!

    Trả lờiXóa