▀▄▀▄▀▄▀▄▀▄▀▄ Các bài đăng mới ▀▄▀▄▀▄▀▄▀▄▀
    Kenh sctv1 Kenh sctv1 Kenh sctv1
    Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1
    Kenh sctv1 Kenh sctv5 Kenh HTV2 Kenh SCTV16




Xem truyền hình trực tuyến (Click here)

TẠO CHÚ THÍCH CHO ẢNH (Kiểu 1)

Để minh hoạ cho bài viết, các bạn thường hay gắn các hình ảnh và những lời chú thích cho "nó".
Với thủ thuật dưới đây, khi bạn rê chuột vào ảnh thì lập tức sẽ xuất hiện một bảng chú thích khá đẹp được trượt từ trên hình ảnh xuống phía dưới.
Mời bạn bấm vào Xem thử phía dưới để thấy rõ hiệu ứng của thủ thuật này.




Xem thử


Bạn chỉ cần đăng nhập vào Blog > Chọn Thiết kế > Thêm tiện ích HTML (đối với các bạn đang sử dụng giao diện blogspot mới thì đăng nhập vào Blog > Chọn Bố cục > Thêm tiện ích HTML) rồi dán đoạn code phía dưới vào.

<style>
.imagepluscontainer{
position: relative;
z-index: 1;
}

.imagepluscontainer img{
position: relative;
z-index: 2;
-moz-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

.imagepluscontainer:hover img{
-moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
-moz-transform: scale(1.05, 1.05);
-webkit-transform: scale(1.05, 1.05);
-ms-transform: scale(1.05, 1.05);
-o-transform: scale(1.05, 1.05);
transform: scale(1.05, 1.05);
}

.imagepluscontainer div.desc{
position: absolute;
width: 95%; /* Độ rộng của bảng chú thích */
z-index: 1;
bottom: 0;
left: 5px;
padding: 8px;
background: rgba(0, 0, 0, 0.8); /* Độ trong suốt của bảng chú thích */
color: Yellow; /* Màu chữ */
-moz-border-radius: 12px 12px 12px 12px; /* Kích thước bo tròn cho bảng chú thích */
-webkit-border-radius: 0 0 8px 8px;
border-radius: 0 0 8px 8px;
opacity: 0;
-moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
-moz-transition: all 0.5s ease 0.5s;
-webkit-transition: all 0.5s ease 0.5s;
-o-transition: all 0.5s ease 0.5s;
-ms-transition: all 0.5s ease 0.5s;
transition: all 0.5s ease 0.5s;
}

.imagepluscontainer div.desc a{
color: white; /* Màu chữ của link liên kết */
}

.imagepluscontainer:hover div.desc{
-moz-transform: translate(0, 100%);
-webkit-transform: translate(0, 100%);
-ms-transform: translate(0, 100%);
-o-transform: translate(0, 100%);
transform: translate(0, 100%);
opacity:1;
}
</style>

<div class="imagepluscontainer" style="height: 320px; width: 240px; z-index: 2;">
<img src="Link ảnh" />
<div class="desc">
Nhập lời chú thích tại đây <a href="http://anhdepblog.blogspot.com/2012/04/anh-ong-mat-troi-mat-trang-va-trai-at.html">TẠI ĐÂY</a> Chúc các bạn vui vẻ.</div>
</div>


Bây giờ, bạn cần thay đổi các dòng lệnh màu đỏ để cho phù hợp với ảnh, sau cùng bấm Lưu lại là xong.


* Chú ý ở mục height (chiều cao) và Width (chiều rộng): đây là kích cỡ thật của ảnh, ví dụ ảnh có kích thước như sau: 240x320 thì mục width phải là 240px và height phải là 320px (bạn không thể đặt theo ý mình được)







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


▀▄▀▄▀▄ dunghennessy.blogspot.com ▄▀▄▀▄▀

10 nhận xét:

Trần Đăng Nghiêm nói...

Bạn dũng ơi! Làm sao để add thêm nhiều hình kế bên mà không bị xuống hàng vậy bạn

dunghennessy nói...

Riêng với thủ thuật này, bạn chỉ có thể làm một ảnh ở một hàng riêng biệt.
Còn nếu là ảnh bình thường (không có kèm thủ thuật) thì khi add các ảnh vào bài đăng thì nó sẽ nằm mỗi ảnh một hàng riêng biệt, bây giờ muốn các ảnh nằm trên cùng một hành thì bạn cứ bấm trái chuột vào ảnh phía dưới vào kéo nó lên phía trên là OK.

Trần Đăng Nghiêm nói...

Hixhix. Mình kết hợp code bài này với bài Tạo LIÊN KẾT CHạy Ngang của bạn nhưng chèn thêm ảnh thì nó lại bị xuống dòng. Bạn có code nào cố định không cho xuống dòng không? chỉ mình với

dunghennessy nói...

Vấn đề này để mình nghiên cứu thử xem có được không nha, khi nào có kết quả mình sẽ báo cho bạn...

Trần Đăng Nghiêm nói...

Cám ơn bạn nhiều lắm Dũng nha! Nếu bạn ở Cần Thơ thì mình tặng bạn một bức tranh Thư Pháp liền.

dunghennessy nói...

Cám ơn bạn đã "ngõ lời", mình ở TP.HCM bạn ơi
Hy vọng trong thời gian sau này mình sẽ được gặp bạn

Unknown nói...

Anh ơi, em muốn bảng chú thích chạy sang tay phải thì làm thế nào ạ.

dunghennessy nói...

Vậy thì phải có một đoạn code khác, để hôm nào Anh rảnh sẽ post bài đó cho em tham khảo nha

Unknown nói...

Với Bức hình khổ 960 x 640 hình như bảng ghi chú hiện ra bị độ cao ngắn quá chỉ hiện được nữa chữ cả một dòng đầu tiên,không đọc được,bạn cho tăng độ cao của bảng ghi chú được không? Với lại mình muốn giữ được mấy cái flash động kèm theo bức hình để làm hình Banner trang trí cho blog,như flash bắn pháo hoa đi kèm với bức hình chẳng hạn.

dunghennessy nói...

Độ cao bảng ghi chú sẽ theo độ cao của ảnh, vì vậy nếu ảnh của bạn có độ cao là 960px thì bạn thay đổi dòng lệnh height là 960px là Ok mà...làm lại thử xem (mình có ghi chú thích phía dưới cùng đó)

Đăng nhận xét

 
Powered by by: Blogger