Hướng dẫn tạo quảng cáo giống Google Adsense đơn giản

Are you sure?

You want to turn off ads.

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é.

Hướng dẫn tạo quảng cáo giống Google Adsense đơn giản

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?&amp;max-results=8' target='_blank'><img alt='Responsive Template Blogger 2018' src='https://3.bp.blogspot.com/-76Tq3ewItT0/WwewuHtcFjI/AAAAAAAACBk/US0ExORinDwUEglF0dTJwhEQSpLfS17PwCLcBGAs/s1600/landing-page-375x195%2B%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?&amp;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?&amp;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?&amp;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 $(&#39;#hide-ga&#39;).click(function(){ // Lựa chọn phần tử và set hành động click cho nó $(&#39;#show-ga&#39;).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é.
Tác giả: Phú Cường Blogger

Tôi là Cường, sinh viên năm cuối ngành Điện tử - Viễn thông trường Đại học Bách Khoa Hà Nội. Say hello to you!

  • Không được backlink và nói tục. Hãy là một độc giả có ý thức.

    26 nhận xét:

    1. Seri học blogspot cơ bản à. Chú thích nhiều dữ :v

      Trả lờiXóa
      Trả lời
      1. Nếu tính ra thì nó ở tầm trên cơ bản tí vì cơ bản thì phải dạy css là gì hay trích dẫn từng thuộc tính rồi cho ví dụ cơ :3 t mà làm thế thì hết cả thanh xuân :))

        Xóa
    2. Thấy chữ (i) nhỏ với dấu (x) là ko giống đâu nha :D

      Trả lờiXóa
      Trả lời
      1. Ừ k giống mà ô @@ t bảo k fake đc 100% đầu bài r mà :)) muốn giống thì thay bằng kí tự chắc mới đc.

        Xóa
      2. cẩn thận GA kiện ông đấy :v

        Xóa
      3. Vãi :)) khi nào kiếm đc tiền từ cái này thì nó mới kiện ô ơi :3

        Xóa
      4. Mà t mới edit lại chữ i và dấu x luôn rồi :v phải đổi là quảng cáo bởi pcb mới đc :v

        Xóa
      5. Thôi vậy là ok lắm rồi :)

        Xóa
    3. thư viện thứ 2 bị lỗi thiếu dấu kết thúc kìa a

      Trả lờiXóa
      Trả lời
      1. À ừ, a quên đó, do code trên sublime nên tiện tay copy qua luôn k để ý lắm :v

        Xóa
    4. Chuyên nghiệp phết :D. À mà bài này của ô bị xung đột code gì rồi cái tim bên trái sidebar ko hoạt động :v

      Trả lờiXóa
      Trả lời
      1. K xung đột gì đâu ô, nó k hoạt động trên mobile và trong trường hợp f5 lại trang chứ k phải vào từ việc tiêu đề bài viết thì js đó sẽ k chạy đc dẫn đến k lấy đc data :3

        Xóa
    5. ủa sao mở lại cmt blogger r a :v

      Trả lờiXóa
      Trả lời
      1. E like stt đó rồi còn hỏi. Do fb k quý mình chứ sao.

        Xóa
      2. hỏi để châm biếm :v ai vẻ share cho lắm haha :v

        Xóa
      3. Share k ảnh hưởng e nhé. Có phải a bị chặn noti là vì share đâu :)) liên quan quá cơ. Htrc dành nguyên 1 buổi fix, có cả ô Hưng Hoàng Văn giúp nhưng do lỗi từ fb k rõ như nào nên 1 số blog k nhận đc noti sau 1 tgian dùng thôi.

        Xóa
      4. Nhận xét này đã bị tác giả xóa.

        Xóa
      5. Trc a hỏi e css xóa đi rồi còn gì :v Làm gì còn nút xóa đâu :))

        Xóa
      6. em xóa được rồi :v lêu lêu :p

        Xóa
      7. Cái này trước Star Cường cũng dùng 1 lần rồi mà.

        Xóa
    6. TRông khá giống đó. Nếu không để ý cứ tưởng thật..

      Trả lờiXóa
      Trả lời
      1. Hì, thanks bạn. Sẵn tiện bên mình cũng đang có event, nếu bạn muốn có thể tham gia.

        Xóa

    Nhận bài viết mới