Từ lâu rồi, mình thấy các bạn muốn có một website tỏ tình mà tìm trên mạng toàn code cũ. Không tương thích với điện thoại và đã có nhiều người biết rồi. Cho nên hôm nay, mình share cho bạn code web tỏ tình.
| Tham gia kênh Telegram của AnonyViet 👉 Link 👈 |
Đây là code mình tự vẽ ảnh và tự viết. Mình sử dụng HTML5, CSS3, BS 4 và Javascript để làm. Vì mình dùng Bootstrap 4 cho nên có chức năng tương thích đa thiết bị. Có nghĩa là nó sẽ hoạt động tốt trên giao diện điện thoại.
Lưu ý
Các Iphone cũ có hệ điều hành IOS 9.1 trở xuống sẽ không chạy được tính năng vẽ hình. Vì Ios chưa hỗ trợ javascript nhiều trên IOS 9. Bạn nào dùng IOS 10 thì thoải mái nhé !! Code này sẽ đẹp và nét nhất khi chạy trên trình duyệt Chrome.
Các trình duyệt khác vẫn chạy nhưng mình thấy không nét bằng Chrome.
Video ra mắt
Giao diện website
Mình code 3 trang chính theo thứ tự trang giới thiệu, thông báo và cuối cùng là trang chính với một bức thư tình. Mình chọn font chữ dạng script (viết tay) để cho nó giống một bức thư thật sự. Dưới đây là hình ảnh minh họa cho 3 trang chính của mình.
Trang giới thiệu
Khi mở trên điện thoại Xiaomi A1 của mình.
Trang giới thiệu khi mới vào sẽ có hiệu ứng vẽ tim bằng svg và nhấp nháy rất dễ thương. Hai nút bấm trên dưới với hai chức năng khác nhau. Mình sẽ để bạn tự khám phá nhé !! Khi bạn rê chuột lên chữ Click Here cũng sẽ có hiệu ứng.
Khi bạn ấn vào chữ Click Here thì sẽ chuyển sang trang 2 và đưa thông báo cho cô ấy.
Trang 2
Trang 2 trên giao diện điện thoại
Lá thư sẽ nhảy nhảy dễ thương lắm. Trang này là trang có hiệu ứng nhiều nhất và cũng mất nhiều công sức của mình lắm đấy. Khi bạn rê chuột vào lá thư sẽ được chuyển sang trang 3. Nơi đó sẽ có một lá thư tình !!!
Trang 3
Trang 3 trên điện thoại
Đây chỉ là bức thư tình đơn giản chúng ta sẽ tự viết. Nhưng mình chắc bất cứ cô gái nào nhận lá thư như thế này cũng cảm động lắm.
Hướng dẫn sử dụng Code web tỏ tình AnonyViet
Trước khi tải về, mình sẽ hướng dẫn bạn sử dụng và chỉnh sửa nội dung theo ý bạn. Xin nhắc lại đây là web tỏ tình do mình tự code. Mong bạn tôn trọng bản quyền của mình để mình không thất vọng nhé !
Hãy chắc chắn tải đủ các file như ảnh trên nhé ! Giao diện được code trong 2 file index.html và index2.html, bạn sẽ chỉnh giao diện trong hai file này.
Chỉnh sửa giao diện trang 1 và trang 2
Bạn nên dùng phím tắt Ctrl + F trong trình chỉnh sửa của bạn để tìm những chỗ mình nói cho nhanh. Mình đang sử dụng Sublime Text 3 để code và chỉnh sửa các file code. Bây giờ hãy vào file index.html để chỉnh sửa nội dung.
Đối với trang 1
Bạn có thể chỉnh sửa tên hiển thị trên Tab (thẻ của trình duyệt) theo ý bạn mong muốn. Hãy tìm thẻ <title> và chỉnh sửa lại nội dung bạn muốn.
Thẻ div có chứa class “firstclk” sẽ là nơi bạn chỉnh sửa nội dung của chữ Click Here. Tuy nhiên, đáng buồn là Font chữ của chữ Click Here không hỗ trợ tiếng việt. Cho nên mình mới để tiếng anh cho đẹp luôn và chữ này cũng không khó hiểu với bất kì ai.
Phần nhịp tim của anh do có chuyển động đếm cho nên mình viết bên file myscript.js trong folder javascript. Bạn mở lên và tìm chữ “Nhịp tim của anh” và chỉnh lại nhé.
Để chỉnh sửa nhạc nền thì kéo xuống cuối file index.html và tìm thẻ audio và đổi thành tên tương ứng trong Folder music nhé. Bạn có thể tải bài nhạc bạn muốn về và để trong thư mục (folder) music. Sau đó đổi tên mySong.mp4 thành tên bài nhạc bạn đã tải.
Đối với trang 2
Ở trang tỏ tình thứ hai này do mình thiết kết hiệu ứng vẽ Javascript khá chặt chẽ và khắt khe. Nên bạn chỉ có thể chỉnh lại dòng chữ “Tớ có điều muốn nói…”. Để tránh bị bể giao diện Bootstrap nên bạn chỉ nên chỉnh dòng chữ này thôi.
Hãy tìm kiếm bằng phím tắt cho nhanh bạn nhé !
Chỉnh sửa nội dung trang 3 của code web tỏ tình
Trang 3 thì mình thiết kế mục đích chính của việc tỏ tình. Cho nên làm đơn giản, dễ chỉnh sửa cho bạn dễ dàng thay đổi nội dung lại. Bây giờ, bạn hãy mở file index2.html để chỉnh sửa trang thứ 3 của web tỏ tình.
Vừa vào là bạn sẽ thấy luôn tất cả nội dung trong file index2.html nhé. Hãy chỉnh lại theo ý bạn muốn. Lưu ý là chỗ class something có code javascript hiệu ứng, cho nên không nên ghi dài quá dễ bị bể khi qua điện thoại nhé !
Vậy là xong, sau khi chỉnh sửa thì chỉ còn upload toàn bộ code web tỏ tình lên host và gửi cho bạn nữ kia thôi. Chúc các bác hạnh phúc nhé !
Download toàn bộ Soure Code Web tỏ tình
Nhớ bỏ qua quảng cáo để ủng hộ mình nha.
Bản quyền thuộc về Lmint – anonyviet. Bạn nào có thắc mắc thì liên hệ Facebook của mình nhé !
Chúc bạn thành công
Lmint.
Câu hỏi thường gặp
Code web tỏ tình này có tương thích với điện thoại không?
Có, code được viết bằng Bootstrap 4 nên tương thích với đa số thiết bị, bao gồm cả điện thoại. Tuy nhiên, một số thiết bị iOS cũ (iOS 9.1 trở xuống) có thể không hỗ trợ đầy đủ tính năng vẽ hình.
Tôi có thể chỉnh sửa nội dung trong website như thế nào?
Bạn có thể chỉnh sửa nội dung bằng cách mở các file index.html và index2.html. Sử dụng phím tắt Ctrl + F để tìm kiếm các đoạn cần chỉnh sửa. Lưu ý một số phần hiệu ứng có thể phức tạp hơn và yêu cầu kiến thức về HTML, CSS và Javascript.
Trình duyệt nào chạy code tốt nhất?
Code được tối ưu để chạy tốt nhất trên trình duyệt Chrome. Các trình duyệt khác vẫn có thể chạy được nhưng chất lượng hiển thị có thể không được sắc nét bằng.
fail là đm ad nhé =))
thế ad cua dc e nào chưa ????
=))
gửi ntn vậy ad
Upload lên host rồi gửi tên miền cho bạn nữ xem nhé !
làm thế nào để up lên host ạ ad ? và e k thể nào edit mà save được… ad quay clip lại đi
Mình cũng không phải tài giỏi gì, mà nếu các bạn muốn có title động thì dán đoạn code dưới vào nhé
var txt = ” |My love| ”
var speed = 200;
var loop = null;
function run(){
document.title = txt;
txt = txt.substring(1,txt.length)+txt.charAt(0);
loop = setTimeout(“run()”,speed);
}
run();
Chỗ ” |My love| ” , các bạn thay đổi nội dung trong dấu nháy và nội dung sẽ hiển đó sẽ được hiển thị ở title
Cảm ơn chia sẽ bổ ích của bạn <3
Dán ở đâu vậy
bạn tạo thẻ xog nhét hết vào đó
bạn ơi cho mình hỏi cái đc ko
Sao mình không tạo thêm một button để quay lại index ban đầu vậy…
Mình quên. Bạn dùng BS4 thêm vào nhé !!
cool vaicanoi :v
Sao trên đt nó k chạy nhạc v ad
Đa số điện thoại nó không hỗ trợ play nhạc nền :3
bạn nào có video k cho mình xem với ạ
Tại fanpage facebook.com/anonyvietdotcom nhé
upload toàn bộ code web tỏ tình lên host bằng cách nào ạ
Em nén lại rồi tải vào FTP của host. Sau đó giải nén tại đó thôi em
anh có video hướng dẫn ko anh
nén lại rồi tải vào FTP của host kiểu j anh
Cảm ơn Ad nhiều nhé. Thật sự hữu ích khi ngày 8/3 đang đến rồi ^_^
ad cho em hỏi vào đâu để sửa web ạ,,, in box vào gmail cho em nha,
Cảm ơn AD trước!
trong bài có chỉ rồi mà em
em thấy rồi ạ
em nghĩ ae dùng notepad dễ sửa hơn
k phải cài
với đoạn code ngắn thì sửa dễ, còn bạn dùg notepad nhìn vô mớ code của ad viết thì có mà ngồi ôm đầu :v
muốn đổi messeger làm sao v
Thay đổi messeger sao v anh
ad cho e hỏi.e muốn up cái này vô tin nhắn fb để ny mở ra xem có được ko ad ?
mình bị mất chữ bạn ạ
nó nháy chữ lên xong mất luôn
cả màu tym đỏ nữa
up layer 3 len 1 trang mới ạ hay saoa
Mấy vụ này đc nhiều người hưởng ứng quá
nén như nào ạ ad
– Ghi code vào phần mềm nào v ?
thế cái dòng fb của anh đây? . ấn vô là nó vô fb a à ?
Đang Ở Win 10 Edit HML Sao Ạ
anh việt rip code này giúp em với thị trường bây giờ rất cần những code nhưng website này
http://xyanua.zz.mu/
lucnakarot.000webhostapp.com
ahyhy tui lm đó
sao của tui ko auto play nhạc v nhỉ
sao tui nhảy qua trang 2 luôn kh hiện trang giới thiệu v bạn
gift.huycris.ooo
bác ơi dạy em với
Ad cho hỏi chỉnh sửa xong r h xuất web ra chỗ nào
save lại rồi up lên host thôi
có thằng nào thành công chưa =))
Ad ơi làm thế nào để thay đổi hình nền, tui thấy hình nền trong thư mục img thay đổi nó bằng hình khác với tên giống như vậy nhưng k được. nhạc cũng không thể tự phát ?
CẢM ƠN AD NHIỀU
Hay quá cậu ơi hehe mong bạn tạo thêm nhiều cái nữa nhaaa <3
ad ơi, mình ko vào được link code T.T
link ở cuối bài, tải bình thường mà bạn
a ơi, e hỏi, sao em tải file về mở lên, bấm vào click here thì thấy trang 2 nó đè lên trang 1 mà không tách riêng lẻ 2 trang hả a. mong a rep