Tạo Khung Giới Thiệu Đẹp Chuyên Nghiệp Của Bacsiwindows

Giới Thiệu

Bài viết này, mình xin chia sẻ đến các bạn cách tạo khung giới thiệu cho blogspot của mình, các bạn có thể tùy chỉnh text theo ý của mình ngoài mặc định bên dưới.
Hộp giới thiệu này giúp bạn tân trang website, blog của mình hơn, làm nó đẹp và trở nên chuyên nghiệp hơn
Tao Khung Gioi Thieu Dep Chuyen Nghiep Cua Bacsiwindows

Các Bước Thực Hiện

Bước 1: Copy các thư viện bên dưới để vào phần <head> Nội dung </head>
<script src="https://cdn.rawgit.com/matthieua/WOW/1.0.1/dist/wow.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Condensed:300,400,700|Roboto+Slab:400,500,700" media="all">
<link href="https://cdn.rawgit.com/daneden/animate.css/v3.1.0/animate.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" media="all">

Bước 2: Copy đoạn code bên dưới để vào nơi bạn muốn hiển thị trong <body> Nội dung </body> nhé
<div class="why_BSW">

<div class="wrap_why">

<div id="why_BSW-BSW">

<div class="why_BSW-BSW wow flipInX animated" style="visibility: visible; animation-name: flipInX;">

<h2 class="why_BSW-choose-bsw"><div class="why_BSW-small">XUẤT BẢN ĐAM MÊ THEO CÁCH CỦA BẠN

</div><i aria-hidden="true" class="fab fa-gg" style="margin:0 10px 0 0"></i>Vì sao nên chọn Blogspot làm Website chính ?<i aria-hidden="true" class="fab fa-gg" style="margin:0 0 0 10px;transform: rotate(180deg)"></i></h2>

</div></div>

<div class="why-wrap">

<div class="why-left">

<ul>

<li class="wow fadeInUp animated" data-wow-delay="0.2s" style="visibility: visible; animation-delay: 0.2s; animation-name: fadeInUp;">Độ ổn định cao, sử dụng tốt lâu dài, không lo phí phát sinh</li>

<li class="wow fadeInUp animated" data-wow-delay="0.4s" style="visibility: visible; animation-delay: 0.4s; animation-name: fadeInUp;">An toàn, bảo mật cao, không thể bị hack/DDOS và dính mã độc như Wordpress</li>

<li class="wow fadeInUp animated" data-wow-delay="0.6s" style="visibility: visible; animation-delay: 0.6s; animation-name: fadeInUp;">Không phải lo lắng về Hosting hay Server, tất cả đều do Google quản lý</li>

<li class="wow fadeInUp animated" data-wow-delay="0.8s" style="visibility: visible; animation-delay: 0.8s; animation-name: fadeInUp;">SEO rất tốt, thân thiện với các công cụ tìm kiếm như Google, Cốc Cốc,...</li>

<li class="wow fadeInUp animated" data-wow-delay="1.0s" style="visibility: visible; animation-delay: 1s; animation-name: fadeInUp;">Giao diện thân thiện, dễ quản lý, điều hướng và chỉnh sửa</li>

<li class="wow fadeInUp animated" data-wow-delay="1.2s" style="visibility: visible; animation-delay: 1.2s; animation-name: fadeInUp;">Dễ dàng đăng ký và sử dụng Google Adsense kiếm tiền trên Blog</li>

<li class="wow fadeInUp animated" data-wow-delay="1.4s" style="visibility: visible; animation-delay: 1.4s; animation-name: fadeInUp;">Dễ dàng tích hợp các công cụ quản lý như Google Webmaster, Google Analytics...</li>

<li class="wow fadeInUp animated" data-wow-delay="1.6s" style="visibility: visible; animation-delay: 1.6s; animation-name: fadeInUp;">V.v... Xem thêm</li>

</ul></div></div></div></div>
Bước 3: Các bạn copy đoạn CSS bên dưới để vào ]]></b:skin> hoặc để trong thẻ <style> </style> bên trên <div> ở bước 2 để tiện chỉnh sửa.
.text-noty a.l-btn{float:left}
.text-noty a.r-btn{font-weight:700}
#text-noty{background:#ef6f66 url(https://3.bp.blogspot.com/-Uclzj9nCjUE/WtdUakOMRsI/AAAAAAAABZg/w5mTJ7kEeegfFsToKwTEBq0vSzrWj6qFQCLcBGAs/s1300/wave-bg-bacsiwindows.jpg) no-repeat center center;background-size:cover}
.text-noty{width:1080px;max-width:100%;margin:auto;padding:30px 0;text-align:right}
.text-noty a{text-transform:uppercase;font-size:24px;color:white;font-weight:400;font-family:'Roboto Condensed',sans-serif}
.why_BSW{background:#3c3d49 url(https://1.bp.blogspot.com/--nflHzXKElk/WtdKK24FJ6I/AAAAAAAABZA/VamemQQze-AthuwNOu_a0RssRkqAk6ZZwCLcBGAs/s1600/Why-Choose-Blogspot-_BacSiWindows.png) no-repeat center right;float:left;width:100%;padding-bottom:60px;background-size:30%;background-position:85% 85%;position:relative}
.why_BSW:before{content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(https://sqy7rm.media.zestyio.com/background-polygons-2x.png) no-repeat center center;}
.why_BSW h2{color:#f8bc6f;font:700 26px Roboto Condensed;text-align:center;text-transform:uppercase;margin:30px 0;padding:0 10px}
.why_BSW h2 span.small{display:block;font-size:30px}
.why_BSW-BSW{width:900px;margin:auto;max-width:100%;text-align:center}
.why_BSW-BSW h2.why_BSW-choose-bsw{font-family:'Roboto Condensed',sans-serif;text-transform:uppercase;font-size:32px;margin-bottom:50px}
.why_BSW-BSW .why_BSW-small{font-size:12px;font-family:Roboto,sans-serif;font-weight:400;background:rgba(0,0,0,.2);display:table;margin:0 auto 5px;padding:6px 14px;border-radius:100px;color:#7c91ac;letter-spacing:.06em}
div.uu-diem-bsw{}
.why-wrap{width:1080px;max-width:100%;margin:auto}
.why_BSW .why-left{width:60%;max-width:100%;float:left}
.why_BSW .why-left ul{margin:0}
.why_BSW .why-left li{color:#fff;font-size:16px;margin:0 0 8px;line-height:1.5;transition:.35s;-webkit-transition:.35s}
.why_BSW .why-left li:hover{color:#f8bc6f}
.why_BSW .why-left li:before{content:"\f00c";margin:0 10px;font-family:"Font Awesome 5 Free";font-weight:900}
.why_BSW .why-right{}
Bước 4: Save lại và kiểm tra nhé.

Result  ( Chiều rộng nhỏ vì vậy không hiển thị đúng như hình ) hãy xem demo tại Codepen


Lời Kết

Chúc Các Bạn Thành Công

Demo

How To Download File :

Download Here

How To Download File :

Howktech

Muốn giỏi phải học, muốn học thì phải hỏi. Chính vì thế, hãy cùng tham gia thảo luận với nhau để tìm ra câu trả lời nếu có thắc mắc nhé!. Xem thêm về tôi

» Nhận Xét Của Bạn - Hãy Comment Lịch Sự Vì Bạn Có Hiểu Biết.

Loading...