Chào các bạn nay mình lại viết bài nữa đây , bài này mình xin hướng dẫn các anh chị , cách xây dựng 1 hệ thống bật khiên bảo vệ avatar facebook , thật đơn giản , bài này mình không để nguyên 1 source code tổng thể mà mình hướng dẫn các bạn thử nghiệm với cấu trúc website luôn nha đơn giản thôi à , đi luôn nào .
 |
| Hình Minh Họa |
hướng dẫn
Đầu tiên á mình chưa nói đến vấn đề sử dụng với hosting hay blogger gì nha , để tìm hiểu sâu hơn mình chia sẻ bạn cách để test code luôn xem nó có hoạt động luôn hay không nha sau đó up lên trang tĩnh blogger hay hosting thì tùy bạn , quan trong sao nó responsive trải nghiệm tốt là được .
<!DOCTYPE html>
<html>
<head>
<title>Tiêu đề Công Cụ</title>
</head>
<body>
...Nội Dung Hiển Thị...
</body>
</html>- <head> mở thì những mã nhúng css, thẻ meta , thẻ title , ... sẽ nằm dưới nó
- Nếu thẻ </head> đóng thì ngược lại sẽ nằm trên chúng các bạn nhớ nhé.
- <body> nội dung trang web </body> trong cặp thẻ này là nội dung để được hiển thị trên web
ok rồi tạm thời ở đây các bạn chỉ cần hiểu nhiêu đây là được rồi.
Bước 2 : Xây dựng nội dung , Các mã css , js và các thẻ meta cần thiết để google hiểu về trang bạn.
Thêm thẻ meta sau dưới thẻ <head> để web hiểu định dạng và xuất bản đúng font chữ của bạn không bị lỗi.
<meta charset="UTF-8">
Thêm thẻ meta sau để google hiểu bạn đang xem website ở thiết bị nào từ đó google sẽ hiển thị trang web chuẩn size trên các thiết bị khác nhau.
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>Bước 3 : Thêm các mã nhúng css vào trang web của bạn , vị trí đặt css mình có nói bên trên rồi nha .
CSS BOTTRAP
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"/>Tiếp tục các bạn viết css cho công cụ , ở đây thì đã có source code sãn rồi nha chỉ việc copy và dán đúng vị trị thôi à.
CSS TOOL
<link href='https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css' rel='stylesheet'/>
<link href='https://cdn.jsdelivr.net/gh/leminhut/fbtool/khien2/master_style.css' rel='stylesheet'/>
<link href='//fonts.googleapis.com/css?family=Poppins:300,400,500,600,700' rel='stylesheet'/>
<link href='https://cdn.jsdelivr.net/gh/leminhut/fbtool/khien2/_all-skins.css' rel='stylesheet'/>
<style>.lockscreen2{background: url(https://i.imgur.com/S51YZ3l.jpg) center center no-repeat #d2d6de; background-size: cover;height: 100%;width: 100%;position: fixed;}</style>
Bước 4 : Thêm nội dung cho trang web hiển thị .
<div class='lockscreen-wrapper'>
<div class='lockscreen-logo'>
</div>
<div class='lockscreen-box-body'>
<div class='lockscreen-item'>
<center>
Hệ Thống Bật/Tắt Khiên Avatar Facebook
</center>
<div class='lockscreen-image'>
<img alt='User Image' src='https://i.imgur.com/XW8X07p.png'/>
</div>
<form class='lockscreen-credentials form-element margin-top-20' id='guard'>
<div class='form-group has-feedback'>
<input class='form-control' name='access_token' placeholder='Access token' type='txt'/>
</div>
<div class='form-group has-feedback'>
<div class='radio'>
<input checked='' id='turn_on' name='active' type='radio' value='on'/>
<label for='turn_on'>Bật chức năng bảo vệ ảnh đại diện</label>
</div>
<div class='radio'>
<input id='turn_off' name='active' type='radio' value='off'/>
<label for='turn_off'>Tắt chức năng bảo vệ ảnh đại diện</label>
</div>
</div>
<div class='text-center'>
<button class='btn btn-info btn-block btn-flat margin-top-10' id='process' name='submit'>Bật/Tắt Khiên Avatar</button>
<a class='btn btn-info btn-block btn-flat margin-top-10' href='/' id='process' name='submit' target='blank'>Tech Vn</a>
</div>
</form>
<div class='help-block text-center margin-top-20'></div>
</div>
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js'></script>
<script src='https://cdn.jsdelivr.net/gh/leminhut/fbtool/khien2/sweetalert.min.js'></script>
<script src='https://cdn.jsdelivr.net/gh/leminhut/fbtool/khien2/error.js'></script>
<div class='navbar no-items section' id='navbar'></div>Ở đây có một số Mã js mình đã gộp chung về phần hiển thị trên trang web rồi.
Đến đây thì đã hoàn thành , các bạn có thể test xem nó hoạt động hay chưa hãy dùng thử công cụ mình giới thiệu bạn bên trên. Chúc các bạn thành công , giờ đây các bạn có thể up lên trang tĩnh blogger hay trên hosting của bạn vẫn được .
0 Nhận xét