Mới gần đây mình có rảnh rảnh một xíu và đã thiết kế mẫu quảng cáo giống với Google Adsense có thể tắt đi khi click chọn dấu "x". Do gọi là đơn giản nên mình không làm giống 100% được vì khi click tắt đi nó còn hiển thị ra mấy mục chọn lí do nữa cơ nên nếu bạn nào muốn làm thêm thì có thể tự code nhé. Và bài học thứ 2 trong series học web của chúng ta hôm nay là hướng dẫn tạo quảng cáo giống Google Adsense đơn giản nhé.
Cách thức hiện
Bước 1: Truy cập blogger.com - Chủ đề - Chỉnh sửa HTML.
Bước 2: Thêm 3 thư viện sau trước thẻ
</head>(nếu có cái nào rồi thì bỏ đi nhé)
<!-- Thư viện font Roboto -->
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet"/>
<!-- Thư viện Font Awesome v4.7 -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
<!-- Thư viện Jquery -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js' type='text/javascript'/>
Bước 3: Chèn CSS sau trước
]]></b:skin>
#show-ga { /* Thành phần cha chứa toàn bộ quảng cáo*/
margin: 15px 0; /* Khoảng cách giữa quảng cáo và các lề */
}
.npc-ga-1 { /* Class cho quảng cáo 1 */
background: #fff; /* Đặt màu nền là màu trắng */
max-width: 715px; /* Đặt chiều ngang tối đa là 715px, có thể đặt là 100% nếu bạn thích nhưng phải căn chỉnh nhiều hơn */
position: relative; /* Đặt thuộc tính position là relative */
display: inline-block; /* Đặt thuộc tính display dạng inline-block */
}
.npc-ga-1 ul {
margin: 0;
padding: 0;
}
.npc-ga-1 ul li {
list-style-type: none; /* Bỏ dấu chấm trước mỗi li */
width: 50%; /* Chia độ rộng mỗi li là 50% */
float: left; /* Căn hết lề trái, nó sẽ giúp kéo các li còn lại lên cứ mỗi đủ 100% tạo 1 hàng mới */
position: relative;
}
.npc-ga-1 .ga-img { /* Đặt chiều ngang và chiều cao cố định cho ảnh bên trái của quảng cáo */
width: 341px;
height: 179px;
overflow: hidden; /* Nếu kích thước vượt sẽ tự động ẩn đi phần thừa */
}
.ga-img img {
width: 100%;
height: 100%;
}
.ga-info {
padding: 5px 0;
}
.ga-info h2 {
margin: 0;
font-size: 22px;
font-weight: 500;
color: #212121;
}
.ga-info h2 a {
text-decoration: none; /* Loại bỏ mọi thuộc tính trang trí text như underline (phổ biến) */
color: #212121;
font-family: 'Roboto', san-serif; /* Đặt kiểu font */
}
.ga-info p {
margin: 10px 0;
position: relative;
}
.ga-info p a {
font-size: 20px;
color: #666;
text-decoration: none;
position: relative;
font-family: 'Roboto', san-serif;
}
.ga-info p a:before { /* Tạo 1 tiền tố trước a */
content: "QC"; /* Thuộc tính content luôn bắt buộc có khi dùng :before hay :after */
background: green;
padding: 1px 3px; /* Khoảng cách giữa chữ và viền, đường bao với 1px: trên, dưới và 3px: trái, phải */
border-radius: 3px; /* Giá trị bo tròn đường viền là 3px */
color: #fff;
font-size: 15px;
display: inline-block;
margin-right: 5px;
font-family: 'Roboto', sans-serif;
}
.ga-info p a:hover { /* Hiệu ứng khi rê chuột vào phần tử */
text-decoration: underline;
}
.ga-link a {
font-size: 16px;
text-decoration: none;
color: #999;
font-family: 'Roboto', san-serif;
}
.ga-link a:hover {
text-decoration: underline;
}
.ga-more {
margin-top: 25px;
}
.ga-more a {
background-color: #4e92df;
border-radius: 2px;
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.24); /* Hiệu ứng đổ bóng */
font-family: "Roboto", sans-serif;
font-weight: 500;
text-decoration: none;
color: #fff;
padding: 10px 23px;
}
.ga-tool {
position: absolute; /* Đặt position là absolute, sẽ hay đặt trong thuộc tính position là relative để điều chỉnh */
top: 0; /* Vị trí so với phía trên là 0px */
right: 0; /* Vị trí so với bên phải là 0px */
}
.ga-tool a {
text-decoration: none;
position: relative;
}
.ga-tool a:before {
font-family: fontawesome;
color: #00aecd;
transition: all 0.3s ease; /* Thuộc tính transition kiểu chuyển động mượt mà hơn, hãy thêm các tiền tố -o-, -moz-, -webkit- trước transition để áp dụng cho nhiều trình duyệt khác nhau */
cursor: pointer; /* Trỏ chuột là hình bàn tay */
}
a.ga-question:before {
content: "\f05a"; /* Giá trị của 1 font trong font awesome, xem bằng cách view ra lấy thuộc tính :before của nó tại trang chủ của fontawesome */
}
a.ga-exit:before {
content: "\f00d";
}
a.ga-question:hover:before,
a.ga-exit:hover:before {
opacity: 0.8; /* Độ trong suốt */
}
a.ga-question:after {
content: 'Quảng cáo của Google';
font-size: 11px;
color: #212121;
background: #fff;
float: left;
margin-right: 5px;
margin-top: 2px;
padding: 1px 2px;
opacity: 0;
visibility: hidden;
transition: all 0.2s ease;
}
a.ga-question:hover:after {
opacity: 1;
visibility: visible;
}
@media all and (max-width: 770px) { /* Responsive với chiều ngang tối đa là 770px thì quảng cáo sẽ bị ẩn đi khi chiều ngang thiết bị trong khoảng 0px - 770px. Do mình lười nên mình cho ẩn luôn, bạn hoàn toàn có thể css cho ổn hơn */
#show-ga {
display: none;
}
}
Bước 4: Chèn HTML hiển thị quảng cáo vào chỗ nào bạn muốn
<div id='show-ga'>
<div class='npc-ga-1'>
<ul>
<li>
<div class='ga-img'>
<a href='https://www.phucuongblogger.com/search/label/template-blogger?&max-results=8' target='_blank'><img alt='Responsive Template Blogger 2018' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD4g8VDInMwbVJ0HBr6e8p4gkyPL8di_oQJGVJ9VFBa-toAlRRgAMR_qFYVwLMMMVaLaOmuOxRfeqyiDvOqZbN22eizwn_1FLEFz7XN1iIJXPs0JycpIxHDQmInlekCXNOtZWyhAKuW34G/s1600/landing-page-375x195+%25281%2529.png' title='Responsive Template Blogger 2018'/></a>
</div>
</li>
<li class='ga-info'>
<h2><a href='https://www.phucuongblogger.com/search/label/template-blogger?&max-results=8' target='_blank'>Responsive Template Blogger</a></h2>
<div class='ga-tool'>
<a class='ga-question'/>
<a class='ga-exit' id='hide-ga'/>
</div>
<p><a href='https://www.phucuongblogger.com/search/label/template-blogger?&max-results=8' target='_blank'>Bộ sưu tập các mẫu giao diện đẹp và tối ưu SEO cho bạn lựa chọn.</a></p>
<div class='ga-link'>
<a href='https://www.phucuongblogger.com/'>phucuongblogger.com</a>
</div>
<div class='ga-more'>
<a href='https://www.phucuongblogger.com/search/label/template-blogger?&max-results=8' target='_blank'>Tìm hiểu thêm</a>
</div>
</li>
</ul>
</div>
</div>
Tùy chỉnh lại thông tin cho phù hợp với blog bạn nhé.
Bước 5: Chèn Jquery sau trước
</body>
<script type='text/javascript'>
$(document).ready(function(){ // Khởi tạo hàm
$('#hide-ga').click(function(){ // Lựa chọn phần tử và set hành động click cho nó
$('#show-ga').hide(500); // Ẩn đi phần tử #show-ga sau hành động click tức toàn bộ quảng cáo với speed là 500
});
});
</script>
Bước 6: Lưu template lại.
Lời kết
Trên đây là một trong nhiều mẫu quảng cáo giống Google Adsense mình muốn giới thiệu đến cho các bạn. Ngoài ra các bạn hoàn toàn có thể tự làm các mẫu khác vì còn nhiều mẫu lắm. Chúc các bạn thành công và hiểu phần giải thích code của mình nhé.
