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