Cara Memasang Kotak Widget Sosial Media Yang Keren Di Blogger

memasang widget sosial media di blog memang bukan suatu keharusan bagi pemilik blog, namun dengan memasangya di blog, diharapkan dapat menjadi media terbaik untuk mempromosikan akun sosial media blog anda agar memiliki pengikut atau like yang banyak.

selain itu penggunaan kotak widget sosial media akan membuat blog anda terlihat lebih keren dan profesional.

baiklah, jika anda berminat untuk mencobanya
silahkan simak tutorial berikut ini

Cara Memasang Kotak Widget Sosial Media Yang Keren Di Blogger

  Demo

pertama tama silahkan login akun blogger anda terlebih dahulu
setelah itu pada halaman dashboard klick Tema > Edit HTML
copy dan paste script css berikut tepat sebelum kode ]]></b:skin> atau </style>

* {
  -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;
}

.terbaru-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 */

#HTML68 .sosmedarl-info h4 {
  background: transparent;
  position: relative;
  padding: 0;
  margin: 0;
  border: 0;
  text-align: center;
  font-size: 120%
}

.sosmedarl-img {
  position: relative;
  max-height: 140px;
  overflow: hidden
}

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

.sosmedarl-img:hover img {
  transform: scale(1.2) rotate(-10deg)
}

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

.sosmedarl-img:hover:before {
  background: rgba(0, 0, 0, 0.6);
}

.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 {
  background: transparent;
  color: #fff;
  padding: 8px 14px;
  z-index: 2;
  display: table-cell;
  width: 100%;
  font-size: 90%;
  text-transform: uppercase;
  vertical-align: middle;
  border: 2px solid #fefefe;
  border-radius: 3px;
  transition: all .3s
}

.sosmedarl-float:hover a {
  background: #e74c3c;
  color: #fff;
  border-color: transparent;
}

.sosmedarl-float a i {
  font-weight: normal;
  margin: 0 5px 0 0
}

.sosmedarl-wrpicon {
  display: block;
  margin: 15px auto;
  position: relative;
}

.sosmedarl-wrpicon .extender {
  width: 100%;
  display: block;
}

.extender {
  text-align: center;
  font-size: 16px
}

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

.extender .sosmedarl-icon a {
  background: #ccc;
  display: inline-block;
  font-weight: 400;
  color: #fff;
  padding: 0 12px;
  line-height: 32px;
  border-radius: 3px;
  font-size: 12px;
  width: 100%;
}

.extender .sosmedarl-icon i {
  font-family: fontawesome;
  margin: 0 3px 0 0
}

.sosmedarl-icon.fbl a {
  background: #3b5998
}

.sosmedarl-icon.ytb a {
  background: #d64136
}

.sosmedarl-icon.crcl a {
  background: #d64136
}

.sosmedarl-icon.fbl a:hover,
.sosmedarl-icon.ytb a:hover,
.sosmedarl-icon.crcl a:hover {
  background: #404040
}

.extender .sosmedarl-icon:hover a,
.extender .sosmedarl-icon a:hover {
  color: #fff;
}

.sosmedarl-info {
  margin: 10px 0 0 0;
  font-size: 13px;
  text-align: center;
}

.sosmedarl-info p {
  margin: 5px 0
}

.sosmedarl-info h4 {
  position: relative;
  margin-bottom: 10px;
  font-size: 16px;
  text-transform: uppercase;
  color: #444;
  font-weight: 700
}

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

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

.sosmedarl-info h4:before {
  margin-left: -50%;
  text-align: right;
}

terakhir klick simpan tema

Catatan : Anda dapat mengganti Value Width: 320px; Sesuai Ukuran Box Yang Anda Inginkan

Selanjutnya kembali Lagi kehalaman dashbord blogger, klick tata letak > Tambahkan Gadget >HTML/Javascript

Copy dan paste script berikut didalam box yang telah disediakan

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>
<div class="terbaru-container">
  <div class="sidebar_about_author">
    <div class='inner_wrapper'>
      <div class='sosmedarl-img'>
        <img alt='Judul Blog' class='img-responsive' height='auto' src='https://Url-Logo-Blog.png' title='Judul Blog' width='300' ></img>
        <div class='aboutfloat-img'><span class='sosmedarl-float'><a href='#' rel='nofollow' target='_blank' title='Join My Grup'><i class='fa fa-user'></i>Join My Grup</a></span></div>
      </div>
    </div>
    <div class='sosmedarl-info'>
      <h4><span>Judul Blog</span></h4>
      <p>Deskripsi Blog Tulis Disini</p>
    </div>
    <div class='sosmedarl-wrpicon'>
      <ul class='extender'>
     <li class='sosmedarl-icon ytb'>
          <a href='#' rel='nofollow' target='_blank' title='Subscribe My Channel'><i class='fa fa-youtube fa-fw'></i>Subs</a>
        </li>
        <li class='sosmedarl-icon fbl'>
          <a href='#' rel='nofollow' target='_blank' title='Like My Fanspage'><i class='fa fa-facebook fa-fw'></i>Like</a>
        </li>
        <li class='sosmedarl-icon crcl'>
          <a href='#' rel='nofollow' target='_blank' title='Follow My Google+'><i class='fa fa-google-plus fa-fw'></i>Follow</a>
        </li>
      </ul>
    </div>
  </div>
</div>

terakhir klick Simpan

Catatan : Anda Dapat Mengganti Text Yang Ditandai Dengan Judul Blog, Url Logo, Descripsi Blog Serta Url Akun Sosial Media Anda

demikianlah artikel Cara Memasang Kotak Widget Sosial Media Yang Keren Di Blogger, semoga dapat bermanfaat bagi anda

Advertisement