Share code trang web tỏ tình troll bạn gái

Hôm nọ có một bạn nhắn tin hỏi minh xin cái code này.Mấy cái này thì nên dùng cho ngày 14-2 hay 1-4 là hay nhất.Trước kia mình đã từng chia sẻ rồi nhưng giờ chẳng nhớ bài đấy đâu mất lên ngồi viết lại luôn.Mình không khuyến khích các bạn dùng cái này để tỏ tình thật vì kết quả sẽ khoảng -1% thành công.Hehe

DEMO các bạn có thể xem Tại Đây

Mình sẽ viết bài này một cách ngắn gọn nhất cho các bạn kể cả không biết code,các bạn có thể coppy paste là dùng được luôn…Nhưng nhớ đổi link facebook thành của bạn đấy nhé 😀

CSS

Về CSS các bạn chỉ cần copy và paste là được. Không có gì cần chỉnh sửa cả .Thậm chí bạn không cần tạo file css luôn vì phía dưới trong html mình có link file css từ web của mình.Nếu bạn biết code bạn có thể tùy biến lại theo ý thích của mình

@font-face {
font-family: Pacifico;
src:url('https://minhchuit.net/font/Pacifico-Regular.ttf') format('truetype');
font-weight:normal;
 font-style:normal;
}
body{
  background: url(https://minhchuit.net/images/noise_lines.png);
  font-family: 'Pacifico', Tahoma;
  overflow: hidden;
  color: #fff;
}
.bgoverlay{
  background: rgb(103,58,183);
  background: rgba(103,58,183,0.7);
  position: absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
}
.container{
  position: relative;
  margin: 120px auto 0 auto;
  width: 320px;
}
.ico{
  display: block;
  width: 320px;
  height: 320px;
}
.open .ico{
  animation: open 6s;
  transform: scale(10);
    user-select: none;
}
.ico .title{
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -110px;
  margin-top: -100px;
  z-index: 4;
  font-size: 50px;
  font-family: 'Pacifico', cursive;
  color: #fff;
  cursor: pointer;
  text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
    user-select: none;
}
.open .ico .title{
  opacity: 0;
  transition: all 0.3s ease;
  top:-150px;
}
.ico:before,
.ico:after,
.ico2:before,
.ico2:after{
  position: absolute;
  top:0;
  left:0;
}
.ico:before,
.ico:after,
.ico2:before,
.ico2:after{
  display: block;
  font-size: 20em;
  color: #ff4081;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f004";
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.ico2:before,
.ico2:after{
  color: #e91e63;
}
.ico:before{
  z-index: 3;
}
.ico:after{
  animation: explode 4s infinite;
}
.ico2:before{
  animation: explodeSmall 3s infinite;
}
.ico2:after{
  animation: explodeSmall 2s infinite;
}
.endtext{
  opacity:0;
  position: absolute;
  top:-100px;
  width:100%;
    text-align: center;
}
.open .endtext{
  top:0;
  opacity: 1;
  animation: show 5s;
}
.endtext .close{
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
  text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
}
.endtext h1,
.endtext h2,
.endtext h3{
  text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
  text-align: center;
  font-weight: normal;
}
.endtext h1{
  font-size: 50px;
}
.endtext h2{
  font-size: 30px;
}
.endtext h3{
  font-size: 20px;
}
@keyframes explode {
    from {
      transform: scale(1);
      opacity: 1;
    }
    to {
      transform: scale(1.6);
      opacity: 0;
    }
}
@keyframes explodeSmall {
    from {
      transform: scale(1);
      opacity: 1;
    }
    to {
      transform: scale(1.2);
      opacity: 0;
    }
}
@keyframes open {
    from {
      transform: scale(1);
    }
    to {
      transform: scale(10);
    }
}
@keyframes show {
    from {
      opacity: 0;
      top: -100px;
    }
    to {
      opacity: 1;
      top:0;
    }
}
h1,h2,h3{
     user-select: none;}
}
#all{
text-align: center;
width: 50%;
margin: 0 auto;
font-weight: bold;
}
.a{
 background: #ff0000;
  border: none;
  font-size: 20x;
  color: #fff;
border-radius: 10px;
padding: 5px 15px 5px 15px;
margin-right: 8px;
font-weight: bold;
}
.b{
   background: #00ff00;
  border: none;
  font-size: 15px;
  color: #fff;
border-radius: 10px;
padding: 5px 15px 5px 15px;
margin-left: 8px;
font-weight: bold;
}
a:link {
color : #fff;
text-decoration: none;
}
a:visited {
color : #fff ;
  text-decoration: none;
}
a:hover, a:active {
color : #fff;
text-decoration: none;
}
HTML

Với HTML các bạn cần phải chỉnh sửa lại Title,DescriptionOG Images lại cho phù hợp với nội dung mà các bạn mong muốn.Nếu không thì bạn có thể giữ nguyên cũng được.
Phía dưới có các đường link CSS và JS thì các bạn có thể thay bằng link của các bạn.Nếu trang của bạn đã sử dung Font AwesomeJquery thì các bạn thay đường dẫn của các bạn vào sẽ giảm được 1 chút thời gian load trang.Nếu không các bạn cứ giữ nguyên nhé.
Tại phần cuối code các bạn thay ID Facebook của các bạn thay cho ID của mình đang có nhé.

 
        <meta http-equiv="content-type" content="text/html;charset=UTF-8">
   <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>CHẠM VÀO ĐÂY</title>
    <!-- Tiêu đề của trang -->
     <meta name="description" content="Đoán xem có điều gì bất ngờ tại đây?">
     <!-- Description ngắn -->
     <meta property="og:image" content="https://minhchuit.net/images/cham-vao-day.png">
     <meta property="og:title" content="CHẠM VÀO ĐÂY">
     <!-- Tiêu đề của trang -->
     <meta property="og:type" content="website">
     <meta name="author" content="NGUYEN MINH CHU">
     <link rel="stylesheet" href="https://minhchuit.net/css/valentine.css" type="text/css">
     <link rel="stylesheet" href="https://minhchuit.net/css/fontawesome-free-5.12.1-web/css/all.css" type="text/css">
     <script language="javascript" src="https://minhchuit.net/js/jquery-3.3.1.min.js"></script>
     <script>
         $(document).ready(function(){
          $('.title').click(function(){
            $('.container').addClass('open');
          });
          $('.close').click(function(){
            $('.container').removeClass('open');
          });
        });
     </script>
 
 
  <div class="bgoverlay">
    <div class="container">
      <span class="ico">
        <span class="ico2"></span>
        <span class="title">Chạm Vào<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Đây</span>
      </span>
    <div class="endtext">
      <span class="close" title="Restart"><i class="fa fa-times"></i></span> 
      <!-- Thay câu bạn muốn vào đây -->
      <h1>I love you baby</h1>
      <h2>Làm người yêu tớ nhé <i class="fas fa-heart"></i></h2>
      <div id="all">
        <button class="a" onclick="alert('Cái này thêm cho vui chứ không có bấm được.Vui lòng bấm nút Đồng Ý màu xanh')">Không Đồng Ý</button>
        <!-- Thay câu bạn muốn vào trong phần ngoặc đơn -->
        <button class="b"><a href="https://m.me/MinhChuOfficial">Đồng Ý</a></button>
        <!-- Thay id facebook của bạn vào trong ngoặc kép sau phần m.me/ -->
      </div>
    </div>
  </div>
</div>
CÁCH SỬ DỤNG CODE
Nếu các bạn biết một chút về HTML và CSS thì các bạn có thể tùy biến. Nếu không bạn chỉ cần một cái hosting,1 tên miền và tạo 1 file html rồi copy đoạn mã HTML trên là có thể chạy được rồi. Lưu ý là nhớ thay link facebook của bạn vào nhé.

Trên đây mình đã chia sẻ toàn bộ code của trang này.Các bạn sử dụng giải trí đùa vui thôi nhé.Mình nghĩ nó không có tác dụng tỏ tình thật đâu…hehe
Mình cũng đang viết một phiên bản khác để 14-2 năm tới dùng..Khi cài code có lỗi gì các bạn comment hoặc liên hệ qua facebook của mình để mình hướng dẫn nhé.

Theo dõi
Thông báo của
guest
15 Comments
Cũ nhất
Mới nhất Được bỏ phiếu nhiều nhất
Phản hồi nội tuyến
Xem tất cả bình luận
Tỉnh
Tỉnh
1 năm trước

Lm sao up lên trên web v a

Tịnh
Tịnh
1 năm trước
Trả lời  Tỉnh

đối vs cái cuối cùng, bạn sửa cái extension(phần đuôi) thành .html là đc
có thể phải chỉnh sủa 1 tí phần code

minhchuofficial
Admin
minhchuofficial (@minhchuofficial)
1 năm trước
Trả lời  Tỉnh

Bạn đang gặp vấn đề gì khi up lên web vậy ạ.

huong to
huong to
1 năm trước

past ở đâu v a, e muốn chuyển thành tệp á

minhchuofficial
Admin
minhchuofficial (@minhchuofficial)
1 năm trước
Trả lời  huong to

Nếu bạn chưa hiểu cách sử dụng code thì nhắn tin qua facebook cho mình nha. Mình sẽ hướng dẫn.

huy
huy
1 năm trước

cái style body dung để làm gì vậy ạ

minhchuofficial
Admin
minhchuofficial (@minhchuofficial)
1 năm trước
Trả lời  huy

Dùng để tạo nền và setup font chữ cho trang web đó bạn. Nếu bạn hiểu về CSS thì bạn có thể tùy biến theo sở thích

try
try
1 năm trước

mess không đồng ý kết nối là sao v ạ?

minhchuofficial
Admin
minhchuofficial (@minhchuofficial)
1 năm trước
Trả lời  try

Có thể do bạn chưa đăng nhập facebook trên trình duyệt. Bạn có thể nhắn qua facebook cá nhân của mình để mình hướng dẫn nếu vẫn gặp lỗi nhé. Cảm ơn bạn!

Hoàng Triệu
Hoàng Triệu
1 năm trước

Anh ơi, sao em test bằng VSC thì nó lại bị lỗi mất ạ

minhchuofficial
Admin
minhchuofficial (@minhchuofficial)
1 năm trước
Trả lời  Hoàng Triệu

Hi em. Anh có reply tin nhắn của em qua messenger rồi nha.

Anh Anh
Anh Anh
1 năm trước

Anh ơi hướng dãn em cách up lên web với ạ, với lại Mess từ chối kết nối là sao ạ

minhchuofficial
Admin
minhchuofficial (@minhchuofficial)
1 năm trước
Trả lời  Anh Anh

Bạn nhắn tin qua Facebook của mình nhé. Mình sẽ trả lời chi tiết cho chứ bạn hỏi chung chung nên mình cũng chưa biết trả lời sao.

huy
huy
11 tháng trước

anh ơi sao mess ko chấp nhận ạ

minhchuofficial
Admin
minhchuofficial (@minhchuofficial)
11 tháng trước
Trả lời  huy

Lỗi này có thể do thiết bị mà người sử dụng có version HĐH thấp hoặc chưa đăng nhập messenger. Mình thấy nó có nhiều nguyên nhân mà không biết tổng hợp như nào cả vì nó hơi lằng ngoằng.