Widget tác giả cho Blogger/Website

Trong bài này mình sẽ hướng dẫn bạn tạo một widget tác giả cho bloger, còn các website khác thì cũng áp dụng đoạn code này được luôn nha :))

Bước 1: Truy cập Blogger của bạn (blogger.com).
Bước 2: Layout (Bố cục), sau đó tạo thêm tiện ích HTML/Javascript và sao chép đoạn code bên dưới:

body{line-height:1;display:block;}*{margin:0;padding:0;}

<style>
* {
  box-sizing: border-box;
}
a,
a:visited {
  text-decoration: none;
}
.terbaru-container {
  width: 100%;
  padding: 10px;
}
.sosmedarl-img {
  position: relative;
  max-height: 140px;
  overflow: hidden
}
.sosmedarl-img img {
  max-width: 100%;
  width: 100%;
}
.sosmedarl-img:before {
  content: '';
  background: rgba(0, 0, 0, 0.3);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.aboutfloat-img {
  width: 55%;
  position: absolute;
  top: 35%;
  bottom: 35%;
  left: 22.5%;
  z-index: 3
}
.sosmedarl-float {
  text-align: center;
  display: table;
  width: 100%;
  height: 100%
}
.sosmedarl-float a {
  color: #fff;
  display: table-cell;
  text-transform: uppercase;
  vertical-align: middle;
  border: 2px solid #fefefe;
}
.sosmedarl-float:hover a {
  border-color: transparent;
}
.sosmedarl-float a i {
  margin: 0 5px 0 0
}
.sosmedarl-wrpicon {
  margin: 15px auto;
}
.extender {
  text-align: center;
}
.extender .sosmedarl-icon {
  display: inline-block;
  width: 32%;
}
.extender .sosmedarl-icon a {
  color: #fff;
  line-height: 32px;
  width: 100%;
}
.sosmedarl-icon.fbl a {
  background: #3b5998
}
.sosmedarl-icon.twitt a {
  background: #19bfe5
}
.sosmedarl-icon.crcl a {
  background: #d64136
}
.sosmedarl-icon.fbl a:hover,
.sosmedarl-icon.twitt a:hover,
.sosmedarl-icon.crcl a:hover {
  background: #404040
}
.sosmedarl-info {
  margin: 10px 0 0 0;
  font-size: 15px;
  text-align: center;
}
.sosmedarl-info h4 {
  margin-bottom: 5px;
  font-size: 16px;
  text-transform: uppercase;
}
.sosmedarl-info h4:before {
  margin-left: -50%;
  text-align: right;
}
</style>
<div class="terbaru-container">
  <div>
    <div>
      <div class='sosmedarl-img'>
        <img height='auto' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8TQE2Q9jQyBHQfnQr-wccyM-F1LblTr_9SaIlDSteRh6uGqUPsqlXVeNR-DT5d3wzexHsXpm3mEdaOt2EO9NYqh8B_EzS2Iel9ApX15PYdXlVLWoUgmzJDoBly7kijtfYTuqcXnCExZc/s1600/myAvatar.png' width='300' ></img>
        <div class='aboutfloat-img'><span class='sosmedarl-float'><a href='#' rel='nofollow' target='_blank'><i class='fa fa-user'></i>Tác giả</a></span></div>
      </div>
    </div>
    <div class='sosmedarl-info'>
      <h4><b>Huỳnh Trọng Đức</b></h4>
      <p>Học sinh cá biệt</p>
    </div>
    <div class='sosmedarl-wrpicon'>
      <ul class='extender'>
        <li class='sosmedarl-icon fbl'>
          <a href='#' target='_blank'class='fa fa-facebook fa-fw'></a>
        </li>
        <li class='sosmedarl-icon twitt'>
          <a href='#' target='_blank'class='fa fa-twitter fa-fw'></a>
        </li>
        <li class='sosmedarl-icon crcl'>
          <a href='#'target='_blank'class='fa fa-google-plus fa-fw'></a>
        </li>
      </ul>
    </div>
  </div>
</div>

* Lưu ý: Ở phần mình tô màu bạn có thể chỉnh nó tùy ý hoặc có thể xóa đi cũng được :))