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>
This is box title
<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

This is box title
</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>

This is box title
</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

 

4 COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here