Tạo ảnh có hiệu ứng xoay tròn cho Blog | minh lương và mọi người

Thứ Bảy, 5 tháng 7, 2014

Số lượt xem bài này:

Tạo ảnh có hiệu ứng xoay tròn cho Blog

Để cho bài viết của Blog sinh động, ta nên cải tiến cách chèn ảnh vào bài viết. Tôi xin chia sẽ với các bạn cách chèn ảnh vào Blog mà khi độc giả rê chuột vào thì ảnh sẽ xoay tròn và nếu kích vào ảnh sẽ chuyển sang một trang mà bạn chỉ định trước.

Ví dụ tôi muốn làm hai ảnh dưới đây có hiệu ứng xoay tròn khi rê chuột vào trong bài viết của Blog:

http://luong1950.blogspot.com/search/label/H%C6%B0%E1%BB%9Bng%20d%E1%BA%ABn

http://luong1950.blogspot.com/search/label/H%C6%B0%E1%BB%9Bng%20d%E1%BA%ABn

Để làm được điều này bạn dùng đoạn code nhúng sau đây:

<style type="text/css">
.CircleHover1k img{-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;transition:all 0.5s ease;padding:4px;background: #eee;background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);-moz-box-shadow: 0 0 3px rgba(0,0,0,.7);box-shadow: 0 0 3px rgba(0,0,0,.7);}
.CircleHover1k img:hover{-moz-transform: scale(1.2) rotate(-350deg);-webkit-transform: scale(1.2) rotate(-350deg);-o-transform: scale(1.2) rotate(-350deg);-ms-transform: scale(1.2) rotate(-350deg);transform: scale(1.2) rotate(-350deg);-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);}
</style>
<a href="LINK CỦA TRANG MỞ RA KHI KÍCH CHUỘT VÀO ẢNH" target="_blank" class="CircleHover1k"><img src="LINK ẢNH 1" alt="Chú thích cho ảnh 2"/></a>
<a href="LINK CỦA TRANG MỞ RA KHI KÍCH CHUỘT VÀO ẢNH" target="_blank" class="CircleHover1k"><img src="LINK ẢNH 2" alt="Chú thích cho ảnh 2"/></a>
/*muốn đưa bao nhiêu ảnh vào thì các bạn cứ thêm bấy nhiêu dòng như trên vào tiếp*/

Muốn thêm bao nhiêu ảnh thì các bạn thêm bấy nhiêu dòng sau vào:

<a href="LINK CỦA TRANG MỞ RA KHI KÍCH CHUỘT VÀO ẢNH" target="_blank" class="CircleHover1k"><img src="LINK ẢNH " alt="Chú thích cho ảnh "/></a>

Và đây là kết quả chèn ảnh vào bài viết với hiệu ứng xoay tròn lúc bạn đưa chuột vào ảnh và lúc kích vào ảnh sẽ mở ra bài đăng có chứa ảnh đó (tôi chỉ làm cho 2 ảnh )

Suares cắn Chiellini

Sao phải đợi ?

Đăng nhận xét

1- Nhận xét chỉ nên liên quan đến bài đăng, phải có tính chất xây dựng và có văn hóa !
2- Để chèn biểu tượng cảm xúc vào nhận xét, các bạn nhập các ký hiệu bên dưới của hình vào phần viết nhận xét.
3- Việc nhập tài khoản Google của bạn và nhập 2 từ xác minh trước lúc gửi nhận xét là bắt buộc !
4- Các bạn có thể chèn Video trên Youtube hay ảnh bằng cách dán link của video (trên thanh địa chỉ) hay link ảnh trực tiếp ở khung soạn thảo nhận xét !
5-Các bạn có thể post code trong nhận xét nhưng phải mã hóa code trước ! Để mã hóa code các bạn vào đây