Chia Sẻ Widget Covid - 19 Cho Blogger/ Blogspot Sử Dụng Boostrap



Để làm được widget này các bạn vào Bố Cục - Thêm tiện ích - HTML/Javascript



Sau đó các bạn chèn đoạn mã này vào:

<div class="container">
<!-- Card stats -->
<div class="card card-stats">
<!-- Card body -->
<div class="card-body">
<div class="col">
<h5 class="card-title text-uppercase text-muted">Total Cases</h5>
<span class="h2 font-weight-bold total_cases color-red count">0</span>
</div>
<div class="icon icon-shape bg-gradient-red text-white rounded-circle shadow">
<i class="fas fa-users"></i>
</div>
</div>
</div>
<div class="card card-stats">
<!-- Card body -->
<div class="card-body">
<div class="col">
<h5 class="card-title text-uppercase text-muted">Deaths</h5>
<span class="h2 font-weight-bold deaths color-blue count">0</span>
</div>
<div class="icon icon-shape bg-gradient-blue text-white rounded-circle shadow">
<i class="fas fa-procedures"></i>
</div>
</div>
</div>
<div class="card card-stats">
<!-- Card body -->
<div class="card-body">
<div class="col">
<h5 class="card-title text-uppercase text-muted">Recovered</h5>
<span class="h2 font-weight-bold recovered color-green count">0</span>
</div>
<div class="icon icon-shape bg-gradient-green text-white rounded-circle shadow">
<i class="fas fa-child"></i>
</div>
</div>
</div>

</div>
Sau đó chèn thêm CSS để làm đẹp Widget:

<style>

.text-muted {
color: #8898aa !important;
}

.text-uppercase {
text-transform: uppercase !important;
}

.text-white {
color: #fff !important;
}

.shadow {
box-shadow: 0 0 2rem 0 rgba(136, 152, 170, 0.15) !important;
}

.rounded-circle {
border-radius: 50% !important;
}

.font-weight-bold {
font-weight: 700 !important;
}



h1.title {
font-size: 1.4rem;
font-weight: 700;
text-align: center;
margin: 1rem 0;
}

.col {
max-width: 100%;
flex-basis: 0;
flex-grow: 1;
}

.card {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
border: 1px solid rgba(0, 0, 0, 0.05);
background-color: #fff;
background-clip: border-box;
border: 0;
box-shadow: 0 0 2rem 0 rgba(136, 152, 170, 0.15);
border-radius: 10px;
margin-bottom: 10px;
}

.card-body {
min-height: 1px;
padding: 1.5rem;
display: flex;
padding: .7rem 1.2rem;
border-radius: 15px;
}

.card-body .h2 {
font-size: 1.3rem;
}

.card-body .icon {
width: 3rem;
height: 3rem;
max-width: 100%;
flex: 0 0 auto;
}

.card-body h5 {
font-family: 'Roboto','DM Serif Text', sans-serif;
font-size: 10px;
margin-bottom: 5px;
}

.icon-shape {
display: inline-flex;
padding: 12px;
text-align: center;
border-radius: 50%;
align-items: center;
justify-content: center;
}

.icon-shape i,
.icon-shape svg {
font-size: 1.2rem;
}

.bg-gradient-red {
background: linear-gradient(87deg, #f5365c 0, #f56036 100%) !important;
}

.bg-gradient-blue {
background: linear-gradient(87deg, #11cdef 0, #1171ef 100%) !important;
}

.bg-gradient-green {
background: linear-gradient(87deg, #2dce89 0, #2dcecc 100%) !important;
}

.bg-gradient-orange {
background: linear-gradient(87deg, #fb6340 0, #fbb140 100%) !important;
}
@media (min-width: 767px) {
.social {
position: absolute;
right: 0;
top: 33.33%;
}
.social ul {
display: flex;
flex-direction: column;
list-style: none;
padding: 0;
margin: 0;
}

.social ul li {
margin: 5px 10px;
}

.social ul li a {
color: #403f4c;
font-size: 25px;
height: 50px;
width: 50px;
text-decoration: none;
}

.social ul li a:hover {
color: #272523;
}
}

</style>
Nếu chưa có kho thư viện Boostrap thì bạn thêm đoạn này trên thẻ </head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
Và thư viện FontAwesome để hiện thị Icon
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"/>
Vậy là xong các bạn lưu lại và chiêm ngưỡi nha