Chia sẻ code tạo widget Join Our Site đẹp cho Blogspot (Blogger)

Hôm nay mình sẽ chia sẻ code tạo widget Join Our Site đẹp cho Blogspot (Blogger) đẹp và rất ấn tượng. Rất đẹp và chỉ vài bước thôi nhé.

Tạo widget Join Our Site đẹp cho Blogspot (Blogger)

Tiến hành

1. Các bạn Đăng nhập vào Blogger >> Bố cục >> Thêm tiện ích >> HTML/Javascript >> Thêm toàn bộ code sau vào:

<div class="bsd-container">
  <div class="sidebar_about_author">
    <div class='inner_wrapper'>
      <div class='bsdbox-img'>
        <img alt="Bloggersstand" class="img-responsive" height="auto" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHgIUN_2nc7fCMmusTiUwlPozgZYrO3bogq5Z-RiCVnHRbfgOaQpHXP7v0FDf3UZzGL9gD14gqwQBJV8PhhPRBRPc0wHHgkVC-cLmQQWvDRLPinCLn4xMbLMrFlniFl6DLiXFGGI2zjyA/s1600/subscribe+to+bloggersstand+feed.jpg" title="Bloggersstand" width="300" />
        <div class='joinfloat-img'><span class='bsdbox-float'><a href='https://www.blogger.com/follow-blog.g?blogID=7895223685482212181' rel='nofollow' target='_blank' title='Join Our Site'><i class='fa fa-laptop'></i> Join Our Site</a></span></div>
      </div>
    </div>
    <div class='bsdbox-info'>
      <h4><span>www.AdminHieu.Tk</span></h4>
      <p>Thủ Thuật - Ảnh Bìa Chất</p>
    </div>
    <div class='bsdbox-wrap'>
      <ul class='bsdextend'>
        <li class='bsdbox-icon facebook'>
          <a href='https://www.facebook.com/hieublogger' target='_blank' title='Follow us on Facebook'><i class='fa fa-facebook fa-fw'></i>Follow Us</a>
        </li>
        <li class='bsdbox-icon twitter'>
          <a href='https://twitter.com/quochieu823' target='_blank' title='Follow us on Twitter'><i class='fa fa-twitter fa-fw'></i>Follow Us</a>
        </li>
        <li class='bsdbox-icon circle'>
          <a href='https://plus.google.com/102863154291663751662' rel='nofollow' target='_blank' title='Follow us on Google+'><i class='fa fa-google-plus fa-fw'></i>Circle Us</a>
        </li>
      </ul>
    </div>
  </div>
</div>
<style>
@import url(http://fonts.googleapis.com/css?family=Roboto:400,700);
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,adnav,adheader{display:block;}*{margin:0;padding:0;}html{display:block;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{background:transparent;}table{border-collapse:collapse;border-spacing:0;}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

a,
a:visited {
  color: #555;
  outline: none;
  text-decoration: none;
}

a:hover,
a:focus,
a:visited:hover {
  color: #22a1c4;
  text-decoration: none;
}

.bsd-container {
  position: relative;
  display: block;
  background: #fff;
  width: 320px;
  margin: 5% auto;
  padding: 10px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  overflow: hidden;
}


/* Sosial Media Widget */
.bsdbox-info h4 {
  background: transparent;
  position: relative;
  padding: 0;
  margin: 0;
  border: 0;
  text-align: center;
  font-size: 110%
}

.bsdbox-img {
  position: relative;
  max-height: 135px;
  overflow: hidden
}

.bsdbox-img img {
  max-width: 100%;
  width: 100%;
  transition: all .6s;
}

.bsdbox-img:hover img {
  transform: scale(1.2) rotate(-9deg)
}

.bsdbox-img:before {
  content: '';
  background: rgba(0, 0, 0, 0.2);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  transition: all .3s
}

.bsdbox-img:hover:before {
  background: rgba(0, 0, 0, 0.5);
}

.joinfloat-img {
  width: 56%;
  position: absolute;
  top: 36%;
  bottom: 36%;
  left: 22.6%;
  z-index: 4
}

.bsdbox-float {
  text-align: center;
  display: table;
  width: 100%;
  height: 100%
}

.bsdbox-float a {
  background: transparent;
  color: #37B185;
  padding: 8px 14px;
  z-index: 2;
  display: table-cell;
  width: 100%;
  font-size: 90%;
  text-transform: uppercase;
  vertical-align: middle;
  border: 1px solid #37B185;
  border-radius: 4px;
  transition: all .3s
}

.bsdbox-float:hover a {
  background: #37B185;
  color: #fefefe;
  border-color: transparent;
}

.bsdbox-float a i {
  font-weight: normal;
  margin: 0 6px 0 0
}

.bsdbox-wrap {
  display: block;
  margin: 14px auto;
  position: relative;
}

.bsdbox-wrap .bsdextend {
  width: 100%;
  display: block;
}

.bsdextend {
  text-align: center;
  font-size: 17px
}

.bsdextend .bsdbox-icon {
  display: inline-block;
  border: 0;
  margin: 0;
  padding: 0;
  width: 32%;
}

.bsdextend .bsdbox-icon a {
  background: #768187;
  display: inline-block;
  font-weight: 410;
  color: #fefefe;
  padding: 0 12px;
  line-height: 32px;
  border-radius: 4px;
  font-size: 11px;
  width: 100%;
}

.bsdextend .bsdbox-icon i {
  font-family: fontawesome;
  margin: 0 4px 0 0
}

.bsdbox-icon.facebook a {
  background: #3b5998
}

.bsdbox-icon.twitter a {
  background: #19bfe5
}

.bsdbox-icon.circle a {
  background: #d64136
}

.bsdbox-icon.facebook a:hover,
.bsdbox-icon.twitter a:hover,
.bsdbox-icon.circle a:hover {
  background: #415471
}

.extender .bsdbox-icon:hover a,
.extender .bsdbox-icon a:hover {
  color: #fefefe;
}

.bsdbox-info {
  margin: 11px 0 0 0;
  font-size: 12px;
  text-align: center;
}

.bsdbox-info p {
  margin: 6px 0
}

.bsdbox-info h4 {
  position: relative;
  margin-bottom: 11px;
  font-size: 15px;
  text-transform: uppercase;
  color: #37B185;
  font-weight: 600
}

.bsdbox-info h4 span {
  position: relative;
  display: inline-block;
  padding: 0 11px;
  margin: 0 auto;
}

.bsdbox-info h4:before,
.bsdbox-info h4:after {
  position: absolute;
  top: 52%;
  overflow: hidden;
  width: 50%;
  height: 1px;
  content: '\a0';
  background-color: rgba(0, 0, 0, 0.07);
}

.bsdbox-info h4:before {
  margin-left: -50%;
  text-align: right;
}
</style>

2. Tùy chỉnh các thông số hay đường link được tô màu ở trên.
3. Lưu Mẫu và tận hưởng thành quả.
Chúc các bạn thành công.

Có lẽ bạn thích?