Share code làm website đếm ngày yêu cực đẹp

Trên điện thoại có ứng dụng đếm ngày quen nhau dành cho các cặp đôi. Nếu bạn không muốn giống người khác, bạn muốn tự làm một ứng dụng đặc biệt hơn. Hay nói cách khác, bạn muốn tạo bất ngờ cho người yêu bằng cách tự làm ứng dụng đếm ngày quen nhau.

Làm vậy sẽ có ý nghĩa hơn và cho cô ấy cảm thấy được sự chân thành của bạn. Hôm nay, mình chia sẽ cho bạn giao diện trang web đếm ngày yêu do mình tự viết. Trang web này khá lãng mạng với màu sắc hài hòa và dịu dàng được đổ từ hồng sang tím.

Chi tiết về ứng dụng đếm ngày yêu

Được lập trình bởi Lmint.

Xem bản live trang web tại:

https://www.loliteam.design/Love/

Bức ảnh phía trên là giao diện của trang web đếm ngày yêu mà chúng ta sẽ làm. Bây giờ mình xin giới thiệu sơ qua giao diện và các chức năng của trang. Cách chỉnh sửa và hướng dẫn sử dụng mình sẽ viết ngay sau phần giới thiệu này.

Đầu tiên, đồng hồ thời gian sẽ đếm thời gian bắt đầu từ ngày hai bạn quen nhau đến thời điểm hiện tại. Ví dụ trên ảnh, mình đã tự yêu bản thân mình trong thời gian là 6 ngày 10 tiếng 39 phút 06 giây. (Kể từ ngày 01/08/2018 đến 7/08/2018).

Còn ngày kỷ niệm quen nhau sẽ được hiển thị dưới biểu tượng trái tim (giữa hai tấm ảnh). Còn có một chức năng là phát một bài hát bất kỳ trong danh sách bài hát được chuẩn bị trước.

Xem thêm:  Code tạo web bắn cá bằng html\css

Trang web được thiết kế có khả năng tương thích đa thiết bị. Nghĩa là nó sẽ tự co giãn phù hợp với màn hình các thiết bị điện thoại và máy tính bảng. Ảnh dưới đây là giao diện trang web khi hiển thị trên màn hình Iphone 6s/7s.

Mọi thứ vẫn ổn khi hiển thị trên điện thoại.

Quá đã phải không !! Đây là món quà dành tinh thần dành tặng cho người yêu thể sự chân thành và trân trọng nửa kia. Bây giờ, mình sẽ hướng dẫn bạn cách chỉnh sửa và sử dụng trang web đếm ngày yêu này nhé !!!

Hướng dẫn thiết lập trang web và sử dụng

Sau khi tải về và giải nén, hãy đảm bảo bạn có đủ các thành phần như ảnh dưới đây.

Tiếp theo bạn cần một phần mềm hỗ trợ viết code web để chỉnh sửa giao diện. Có thể sử dụng Sublime Text 3, Notepad++ hoặc Visual Studio Code đều được. Miễn sao có thể chỉnh sửa được code là được.

Hướng dẫn chỉnh sửa giao diện

Bắt đầu từ File index.html, hãy mở nó lên bằng phần mềm chỉnh sửa.

Các phần chữ màu trắng trong hình là các nội dung được hiển thị trên trang web. Hãy sửa đổi lại thành nội dung của bạn. Tuy nhiên, phần nội dung nào không thấy xuất hiện trên trang web thì đừng sửa để tránh gặp lỗi.

• Tải 02 tấm ảnh đại diện mà bạn muốn sử dụng rồi bỏ vào thư mục img. 

• Quay trở lại giao diện code, thay đổi tên ảnh trong đường dẫn thành tên file ảnh mà bạn muốn đổi. Ví dụ trong ảnh bên dưới, mình sử dùng ảnh main.jpg làm ảnh đại diện.

Kết quả, ảnh main.jpg được sử dụng để làm ảnh đại diện. Do mình đều viết tên hai ảnh là main.jpg (ảnh trên) nên hai ảnh đại diện sẽ cùng sử dụng chung 1 tấm ảnh.

Thiết lập ngày kỷ niệm

Mở file app.js bằng phần mềm chỉnh sửa. Ở dòng đầu tiên của file app.js, bạn sẽ nhìn thấy như ảnh dưới đây.

Chúng ta sẽ thiết lập ngày kỉ niệm trong dòng này. Bạn cần thay đổi dòng chữ màu xanh lá trong ảnh trên thành ngày tháng kỉ niệm của bạn. Ví dụ, mình muốn ngày kỉ niệm là ngày 30 tháng 10 năm 2016 2 giờ 10 phút 26 giây.

Mình sẽ chỉnh dòng chữ màu xanh lá lại như sau:

2016-10-30T02:10:26

• Phía trước chữ T là ngày tháng
• Phía sau chữ T là thời gian.

Chỉnh sửa xong thì Save lại là được, ảnh dưới đây là kết quả.

Xem thêm: Code INDEX HACKER Mèo Nhảy Theo Nhạc Cực Đẹp

Đồng hồ sẽ tự cập nhật được thời gian và đã đếm chính xác ngày tháng cho bạn. Phần cuối cùng, chúng ta sẽ chỉnh sửa danh sách các bài hát.

Chỉnh sửa danh sách bài hát

Hãy tải các bài hát định dạng .mp3 và bỏ vào thư mục music. Mình có 3 bài hát để sẵn trong thư mục music cho bạn rồi.

Mở lại file app.js để chỉnh sửa danh sách nhạc. Tại dòng thứ 2 trong file app.js, bạn sẽ liệt kê tên của các file nhạc vào mảng dữ liệu của chương trình.

• Nội dung được viết giữa hai dấu ngoặc []
• Mỗi tên bài hát (mỗi phần tử) được bao trong dấu ngoặc kép “” hoặc ”
• Các phần tử cách nhau bởi dấu phẩy.

Mình đã liệt kê xong 3 file nhạc của mình. Khi người khác truy cập vào web và ấn nút phát nhạc, chương trình sẽ tự động phát ngẫu nhiên 1 bài trong số bài hát được liệt kê.

Vậy là xong, việc cuối cùng của bạn là upload mã nguồn lên host để người khác có thể truy cập vào. Nếu bạn chưa biết upload lên host thì hãy xem hướng dẫn tại đây.

Lưu ý, khi upload lên host vẫn phải giữ đúng vị trí các file nhá. Mình đã upload lên host của mình và vẫn giữ đúng thứ tự và vị trí các file.

Mình đã upload lên host và giữ đúng thứ tự các file.
Bạn không cần quan tâm file default.php (nó chỉ là file rác của mình thôi).

Cảm ơn các bạn đã ủng hộ mình, liên hệ mình qua Facebook: facebook.com/Tuandeptraicacbannhe.info

Download CODE

Bạn cần tải bộ code web đã được mình chuẩn bị sẵn tại liên kết dưới đây.

( Xem Cách Vượt Link Rút Gọn )

Mật khẩu giải nén: cieldesignerblog

 Tải code web

Xem Tiếp

Share 10 file png khung ảnh bìa facebook hoa lá đẹp

Hôm nay blog tuyển tập chia sẻ mọi người 10 file png khung ảnh bìa facebook hoa lá đẹp phần 3 để mọi người thỏa sức tải về máy làm tài nguyên của mình.

Xem thêm: PSD Thương Thay Một Kiếp Anh Hào

Dưới đây là 10 file png khung ảnh bìa facebook hoa lá đẹp phần 3:

Xem thêm dịch vụ của FCFChain: Sàn giao dịch tiền điện tử, dịch vụ ICO, dịch vụ MLM, phát triển tiền điện tử, ví tiền điện tử, hệ thống thanh toán, ứng dụng Blockchain, sàn giao dịch tiền ảo, phát triển tiền ảo, ví tiền ảo.

Xem Tiếp

PSD Ảnh Bìa - Cô Đơn Sớm Tối

cieldesigner Chia sẻ file psd ảnh bìa cô đơn sớm tối cho facebook để mọi người thỏa sức tải về máy chỉnh sửa hoặc làm tài nguyên thiết kế của mình.

( Xem Cách Vượt Link Rút Gọn )

   TẢI VỀ

Xem Tiếp

Kiếm Tiền từ Honeygain (Chia sẻ unused internet data)

Chào các bác và mọi người,

Em xin giới thiệu một application trên điện thoại (hiện tại chưa có bản cho IOS) và trên máy tính được chia sẻ trên một số diễn đàn kiếm tiền online như Beermoneyforum,...

1, Tên application: Honeygain
https://r.honeygain.money/TUANB614

2. Các thức tiến hành:
+) Án vào link đăng kí bên trên và chọn tải application từ play store (nếu chỉ muốn kiếm bằng dung lượng internet thừa (unused internet data) trên điện thoại.
Nếu muốn kiếm tiền qua dung lượng thừa của đường truyền internet bằng máy tính thì cần tải thêm phần mềm về cài đặt trên máy tính qua google chrome.
+) Sau khi cài đặt thì tiến hành đăng kí như thông thường

Chú ý là: trước bước điền email và mật khẩu thì ấn ngay vào ô " "Redeem coupon code"

Khi đấy hộp ô Redeem coupon code sẽ xuất hiện, các bác điền "TUANB614" vào ô đấy rồi

nhập email + mật khẩu. Các bác sẽ được cộng 5 USD (tuơng đương bằng việc đã share

50GB) vào tài khoản rồi ạ.

Đây là mã coupon mà trang này dành cho các thành viên của trang Beermoneyforum ạ.

+) Một tài khoản cho phép sử dụng nhiều thiết bị.
+) Đường truyền internet không bị ảnh hưởng khi cài đặt phần mềm này
+) Cứ 10 GB được chia sẻ thì sẽ nhận lại được 1 USD
+) Nếu chia sẻ liên tục trong tháng (720h) thì sẽ nhận được khoảng 50 USD

3) Thanh toán:
- Thanh toán qua paypal
- Min pay: 20 USD

Các bác và mọi người tham khảo:
- https://www.beermoneyforum.com/threads/honeygain-reviews-scam-or-legit.41642/
-

Nếu các bác thấy xúc được thì xin các bác đăng kí qua link của em ạ
https://r.honeygain.money/TUANB614

Cảm ơn các bác nhiều ạ.

Xem Tiếp

Thủ Thuật Reg Tên Miền Có Dấu

Hello Xin Chào Tất Cả Các Bạn Mình Là Tuấn. Hôm nay mình xin chia sẻ đến các bạn cách để reg một tên miền có dấu. vd: Tuấnđẹptrai.tk Thì thủ thuật rất là đơn giản

Các bạn vào trang http://xn--domain.net/  rồi gõ tên miền có dấu mà bạn muốn reg

Coppy Dòng ASCII compatible rồi vào trang tên miền mà các bạn muốn mua dán dòng code đó vào là các bạn có thể reg được tên miền có dấu độc nhất vô nhị trất chơi người dơi :v

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

Có leech đi đâu thì cũng nhớ nguồn, cái gì cũng có cái giá của nó, bạn tôn trọng người khác thì người khác sẽ tôn trọng bạn :)!

Xem Tiếp

Code tạo đồng hồ, ngày tháng năm chuẩn đẹp bằng js cho Blogspot

Code tạo đồng hồ, ngày tháng năm chuẩn đẹp bằng js cho Blogspot.

LIVE DEMO

Cách thực hiện

Chèn code này vào bất cứ vị TRÍ nào muốn hiện, hoặc widget HTML/Javascript trong Bố cục.

<center><script>var myVar=setInterval(function(){myTimer()},1000); function myTimer() {var d=new Date(); var t=d.toLocaleTimeString(); document.getElementById("h").innerHTML=t;}</script>
<span id="h"></span>
<script type="text/javascript">
n=new Date();if(n.getTimezoneOffset()==0)t=n.getTime()+(7*60*60*1000);else t=n.getTime();n.setTime(t);var dn=new Array("Chủ nhật","Thứ 2","Thứ 3","Thứ 4","Thứ 5","Thứ 6","Thứ 7");d=n.getDay();m=n.getMonth()+1;y=n.getFullYear()
document.write(dn[d]+", "+(n.getDate()<10?"0":"")+n.getDate()+"/"+(m<10?"0":"")+m+"/"+y)
</script></center>
<style>
#h {font-weight:400;
    display: block;
    font-size: 30px;
    margin: 0 0 5px;
    letter-spacing: 5px;
}
</style>

Cảm ơn Bacsiwindow đã chia sẻ bài viết hữu ích này

Xem Tiếp

Chia Sẻ Cách Tạo Tài Khoản Google Drive Unlimited Mới Nhất 2019

Chia Sẻ Cách Tạo Tài Khoản Google Drive Unlimited Mới Nhất 2018

Khái Niệm Google Drive : Google Drive là dịch vụ lưu trữ và đồng bộ hóa tập tin được tạo bởi Google. Nó cho phép người dùng có thể lưu trữ tập tin trên đám mây, chia sẻ tập tin, và chỉnh sửa tài liệu, văn bản, bảng tính, và bài thuyết trình với cộng tác viên. Google Drive hỗ trợ rất nhiều cho việc lưu trữ các thông tin quang trọng trong công việc cũng như học tập .Tuy nhiên, mới 15GB có lẽ là không đủ đối với một số bạn ở ây. Do đó, mình sẽ hướng dẫn các bạn mẹo tạo cho mình một tài khoản Google Drive miễn phí không giới hạn dung lượng.

HƯỚNG DẪN TẠO TÀI KHOẢN GOOGLE DRIVE UNLIMITED

Bước 1: Tạo tài khoản CCCApply

Trước hết người dùng truy cập vào trang web sau đây: https://home.cccapply.org/
Chúng ta chọn Canada Colleage và nhấn Apply để tiếp tục.

Giao diện web chuyển sang nội dung mới, người dùng nhấn vào Apply to Cañada College Now

Nhấn Create an Account để tạo tài khoản mới.

Nhấn tiếp vào nút Begin Creating My Account để chuyển sang giao diện trang web mới. Chúng ta giữ nguyên trang web này.


Tiếp đến người dùng nhấn vào link bên dưới để chọn ngẫu nhiên một người cho việc tạo tài khoản.
http://www.fakenamegenerator.com/
Sau khi truy cập trang web trên sẽ xuất hiện giao diện thông tin như bên dưới.

Chúng ta cần sao chép thông tin tên ở trang web này và dán vào trang web tạo tài khoản trên OpenCCC. Gồm First Name và Last Name rồi tích chọn theo hình.

Kéo xuống dưới phần Date of Birth, bạn hãy nhập năm sinh nhiều tuổi một chút, 1990 trở về trước chẳng hạn.
Tiếp tục tai phần Social Security Number tích chọn vào Social Security Number.

Tiếp tục truy cập vào một trang web khác để lấy số SSN theo link dưới đây.
http://www.theonegenerator.com/ssngenerator
Trong trường hợp link bên trên đã quá tải truy cập, người dùng truy cập vào một số link bên dưới để lấy số SSN.
https://www.ssn-verify.com/generate
https://fakena.me/fake-social-security-number/
Nhấn vào nút Generate để nhận dãy số SSN.

Tiếp đến sao chép dãy số SSN này vào hộp Social Security Number ở trang OpenCCC, không gõ dấu “-”. Bạn cần điền dãy số SSN này vào cả ô Repeat nữa. Cuối cùng nhấn Continue để tiếp tục.

Sang trang tiếp theo, phần Email chúng ta sẽ cần nhập địa chỉ Gmail cá nhân đang sử dụng.
Tiếp đến phần số điện thoại, chúng ta cần sử dụng một số điện thoại giả. Truy cập vào link bên dưới để lấy số điện thoại.
http://www.fakeaddressgenerator.com/Random_Address/US_California
Sau khi truy cập trang web trên nhìn bên phải giao diện ngoài cùng bạn sẽ thấy hộp thoại Custom Generate. Tai đây bạn hãy thiết lập tiểu bang là CA (California) và nhấp vào Generate.

Ngay sau đó bạn sẽ nhìn thấy thông tin mới và tìm tới dòng Phone Number. Đây sẽ là số điện thoại mà bạn cần dùng.

Người dùng hãy nhập số điện thoại vào ô Main telephone number.



Tương tự để điền thông tin địa chỉ, nhấn vào link dưới.
http://www.fakeaddressgenerator.com/Random_Address/US_California

Bạn sao chép các thông tin địa chỉ ở trang trên và nhập thông tin vào mục Permanent Address như hình dưới đây. Gồm Street Address, City, State ZIP Code. Tích chọn vào ô I have verified the address entered is correct. Nhấn Continue để tiếp tục.
Tiếp đến sang giao diện Create an Account, bạn cần nhập tên tài khoản, mật khẩu gồm 7 đến 20 ký tự có cả số và chữ, câu hỏi bảo mật, mã PIN.
Khi đã hoàn thành xong các phần cần điền nhấn Creat My Account.

Sau đó chúng ta sẽ thấy thông báo tạo tài khoản thành công, kèm theo đó là số CCCID cá nhân. Nhấn Continue để tiếp tục.

Bước 2: Xin vào trường đại học

Quay lại địa chỉ: https://home.cccapply.org/ làm theo các hướng dẫn ban đầu, tuy nhiên lần này ta chọn Sign inthay vì Create an Account để đăng nhập tài khoản vừa tạo vào

Tiếp đến click vào Start Application để chuyển sang phần nhập thông tin cá nhân.
Sang giao diện mới này, người dùng sẽ điền các thông tin cá nhân cần thiết theo từng mục trong danh sách ngoài cùng ở bên trái giao diện.
Đầu tiên là Enrollment Infomation, bạn nhập các thông tin như hình dưới đây rồi nhấn Continue.


Phần Account/Mailing Infomation, chúng ta tích chọn vào ô My mailing address is the same as the Permanent Address in my OpenCCC Account above tại phần Current Mailing Address, sau đó nhấn Continue.

Phần Personal Infomation, bạn điền các mục như hình rồi cũng nhấn vào Continue.





Phần Education, điền các tùy chọn tương tự như hình và nhấn Continue.




Phần Citizenship/Military chọn U.S. Citizen, None apply to me và nhấn tiếp Continue.

Phần Residency cũng điền các mục tương tự như hình và nhấn Continue.


Phần Needs & Interest chọn tiếp các phần bên dưới và nhấn tiếp Continue.


Phần Consent tích chọn vào I Consent rồi nhấn tiếp Continue.

Phần Review Application, kiểm tra lại toàn bộ các thông tin đã nhập trong nội dung rồi tích chọn vào ô I have reviewed this application and confirm it its complete and accurate ở bên dưới cùng của trang.





Cuối cùng sang giao diện mới nhấn Continue.

Bước 3: Nhận tài khoản Google Drive Unlimited

Như vậy chúng ta đã hoàn thành xong các bước đăng ký. Bây giờ người dùng cần truy cập vào tài khoản Gmail dùng đăng ký bên trên để nhận email xác nhận. Email đầu tiên chúng ta sẽ nhận ngay sau đó.
Tuy nhiên, bạn sẽ cần chờ tới các email tiếp theo để hoàn thành việc đăng ký sử dụng Google Drive không giới hạn.


Tài khoản và mật khẩu sẽ được cung cấp sẵn trong 2 email gửi tới người dùng. Bạn đơn giản chỉ cần đăng nhập vào Google Drive.



Nhấn Accept để đồng ý với điều khoản. Sau khi đăng nhập thành công bạn nên đổi lại mật khẩu cho dễ nhớ
Lưu ý: Nếu chúng ta nhận được email đầu tiên thì chỉ cần đợi một giờ hoặc vài giờ sau để nhận được email xác nhận tiếp theo.
Trên đây là bài viết cách tạo tài khoản Google Drive Unlimited, để có thể lưu trữ tài liệu miễn phí, không giới hạn dung lượng, sử dụng thoải mái vô thời hạn.

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

Nguồn : J2TEAM COMMUNITY

Xem Tiếp

Tạo khung chứa code tuyệt đẹp và chuyên nghiệp cho Blogspot sử dụng Highlight Js

Chào các bạn, nếu như tinh ý và có theo dõi blog Ciel Designer từ lâu chắc hẳn các bạn cũng nhận ra điều mới thay đổi gần đây trên blog mình, đól à Theme mới và kèm theo đó là khung chứa code mới. Khung chứa code lần này không đơn thuần chỉ là một background và một border đơn giản nhạt nhòa nữa, mà nó rất nhiều màu sắc, phân chia ra từng cụm từ khóa trong đó, trông rất đẹp và chuyên nghiệp.

Sử dụng highlight javascript, chúng ta có thể dễ dàng tạo ra khung đựng code này trong 3 nốt nhạc mà không cần phải làm quá nhiều! Bài viết này mình sẽ hướng dẫn các bạn tạo khung chứa code đó, bên cạnh đó cũng trả lời yêu cầu của nhiều bạn gửi đến cho mình, hứa sẽ làm mà đến hôm nay mới có thời gian viết hướng dẫn.

Cách thực hiện

Truy cập trang quản trị Blogger, thêm toàn bộ bên dưới vào trước thẻ </head> trong Template.

<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/atom-one-dark.min.css' rel='stylesheet'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
  $('pre').each(function(i, block) {
    hljs.highlightBlock(block);
  });
});
//]]>
</script>

và lưu lại.

Cách sử dụng

Các bạn đặt code cần làm nổi bật vào giữa thẻ <pre> như này:
CSS

<pre class='css'>
<!-- nếu code là CSS -->
</pre>

Javascript

<pre class='javascript'>
<!-- nếu code là javascript -->
</pre>

HTML

<pre class='xml'>
<!-- nếu code là các thẻ HTML -->
</pre>

Tùy biến

Có rất nhiều giao diện khác nhau cho chúng ta lựa chọn, tuy nhiên cái mình sử dụng là giao diện tối có tên là Atom-one-dark

Còn đây là giao diện sáng có tên là Atom-one-light

Bạn có thể ghé qua trang chủ của highlight js để xem các mẫu nhé. Chúc thành công!

Nguồn Bacsiwindow

Xem Tiếp

PSD Sao Kê Ngân Hàng Vietcombank

Hello Anh Em hôm nay mình share cho anh em psd Hóa Đơn Tiền Điện để các bạn có thể xác minh các ví như Perfect Money, Paypal, . . .

. Link Download: Tại Đây ( Cách vượt link rút gọn )

Xem Thêm: Code tạo đồng hồ, ngày tháng năm chuẩn đẹp bằng js cho Blogspot

Loading...

Xem Tiếp

Share PSD Mockup Team Cực Đẹp

Hello anh em. hôm nay mình có lục lại bộ nhớ thì có thấy một mockup ra đời khá là lâu của Việt Designer mà thấy trên blog mình chưa share nên mình tiện edit cho anh em dùng luôn nhé !

Link Download: Google Driver ( Cách Vượt Link Rút Gọn )
( Anh em chịu khó bỏ qua quảng cáo Tmearn giúp mình nha . . . rất xin lỗi vì sự bất tiện này )

Loading...

Xem Tiếp

Hướng Dẫn Các Tìm Font Trong Một File PSD

Chào các bạn, blog mình là Ciel Designer blog chuyên chia sẻ PSD Ảnh bìa, Mockup, FONT,… Thường thì những PSD mình share mình không kèm theo link font chữ và cũng nhiều bạn comment hỏi font chữ nhưng mình không tiện để trả lời hết được nên hôm nay mình viết bài này để Hướng dẫn cách tìm font trong một file PSD.

Ở đây mình đang mở 1 PSD Ảnh bìa, các bạn để ý phần layer text nhé nếu font đó bạn chưa cài vào máy thì photoshop sẽ hiện hình dấu chấm than ở layer text đó.

Các bạn nhấn đúp vào icon đó thì photoshop sẽ hiện lên thông báo dòng chữ tiếng anh thì bạn để ý hàng thứ 2 đó là tên font máy bạn chưa cài. Cụ thể ở đây font máy mình chưa cài là SHImogenAgnes.

Biết được tên font rồi thì bạn chỉ cần search google vào tải về cài là được. Nếu bạn chưa biết cách thêm font chữ vào máy tính thì có thể xem hướng dẫn tại đây
Cài font xong rồi việc còn lại là mở lại photoshop tiếp tục edit ảnh thôi. Chúc các bạn thành công!

Xem Tiếp