TẠO NÚT BẤM DOWNLOAD CHO BLOG/WEBSITE

GroupMMO tháng 1 07, 2017

Trên các trang Web/Blog, các bạn thường xuyên thấy họ cho download một số phần mềm, tiện ích... thông qua các nút bấm "DOWNLOAD" hoặc xem thử thông qua nút "DEMO". Tuỳ các trang Web/Blog mà các nút bấm này khá đẹp, có hiệu ứng động, khi rê chuột vào nó sẽ thành hình khác hoặc chữ Download sẽ biến thành màu khác...

ở đây tôi sẽ hướng dẫn các bạn cách tạo nút bấm "DOWNLOAD" có hiệu ứng động (thay đổi hình hoặc chữ Download đổi màu khi rê chuột vào) mà không cần phải nhờ phần mềm hỗ trợ nào hết chỉ cần bạn dán code và thay đổi link ảnh vào mà thôi.'

Khi đang soạn bài bình thường, muốn nút bấm "DOWNLOAD" này xuất hiện ở đâu, bạn chỉ cần bấm vào thẻ HTML ở phía trên khung soạn thảo để sang chế độ HTML rồi dán code phía dưới vào, sau đó bấm thẻ VIẾT để trở về chế độ soạn thảo bài viết tiếp tục.

ĐÂY LÀ CODE:

<a href="http://dunghennessy.blogspot.com/" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcDuSFAPNWSpLALVQDIrTJhHpoJz_cC0LuOFPbNSZVzhETWLwd5ddvatGKqc3gEwD5Dl7eGMLzzBB-QIKBFcmUsY0Bnb3sTQepp7YC2Uw87i3QvGC6PSF8s28h02PnY5dIoy4oBg0Ki5g/s1600/cooltext655930958.png';"

onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhVuh6UQSWmYXP6YFRN1QKwpiLN2WeiBiVYoYiWMuUzx_xLLM3fn6-GM0i1XUOBWlKbAM1R0G0QEtsrYHWeY5wgBPGiTE-5XKqkZ7bM3PWodkcK-9oW4ChX98wW5jaGD752RMHgM_PJEQ/s1600/cooltext655930958MouseOver.png';" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcDuSFAPNWSpLALVQDIrTJhHpoJz_cC0LuOFPbNSZVzhETWLwd5ddvatGKqc3gEwD5Dl7eGMLzzBB-QIKBFcmUsY0Bnb3sTQepp7YC2Uw87i3QvGC6PSF8s28h02PnY5dIoy4oBg0Ki5g/s1600/cooltext655930958.png" /></a>

Bây giờ, bạn thay đổi các dòng lệnh màu đỏ, xanh, vàng để phù hợp với blog của mình, trong đó:

* Link màu đỏ: Là link mà mình muốn nút bấm liên kết đến (có nghĩa là khi bấm vào nút này sẽ đưa bạn đến link download phần mềm nào đó để download).

* Link màu xanh (2 link): đây là hình ảnh ban đầu của nút bấm khi chưa rê chuột vào.

* Link màu hồng: đây là hình ảnh sẽ thay đổi khi rê chuột vào.

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