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

You may like these posts

2 Comments

  1. Hieu Quoc
    quen lắm :(| :(|
    • Nguyễn Quang Sáng
      quen lắm luôn à
  1. Để chèn mã hay sử dụng: <i rel="pre">code_here</i>
  2. Để chèn một trích dẫn, hãy sử dụng: <b rel="quote">your_qoute</b>
  3. chèn ảnh, hãy sử dụng: <i rel="image">url_image_here</i>
Để lại bình luận theo chủ đề của bài viết, bình luận có Liên kết sẽ không được hiển thị.
Quản trị viên và tác giả blog có quyền hiển thị, xóa, đánh dấu spam, trên các nhận xét đã đăng
data-ad-format="link"