Cara Memasang Widget Social Media-Box Di Blogspot

Cara Memasang Widget Social Media-Box Di Blogspot - Kali ini saya akan membagikan sedikit Tutorial tentang Cara memasang Social Media-Box Di Blogspot. Social Media Box ini selain berguna untuk Menaikkan Page-View juga berguna untuk Menarik minat Visitor yang Berkunjung ke blog sobat Untuk menKlik tombol sukai atau Mengikuti Blog sobat.. yaa walaupun itu tergantung sih mwehehe..

Di Social Media Box ini saya MenDesign menjadi ada 4, yaitu Facebook,Twitter,G+, dan pengikut Blog. Untuk Melihat Demonya silahkan Lihat di bawah ini.

See the Pen Social Media Box by Muhammad Irva (@justirva) on CodePen.

1. Login Blogger > Tema Edit-Html > Cari Tag </head>.
2. Jika sudah ketemu Copy dan Terapkan Script Js berikut ini sebelum Tag </head> , Tapi Jika di theme Sudah ada maka tidak usah lagi.

 <link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/> 

3.Cari ]]></b:skin> atau </style> Copy dan terapkan CSS di bawah ini.

 /*Widget Social Media-Box - Akhtarvis.blgospot.com*/
@import url(https://fonts.googleapis.com/css?family=Roboto:400,700);
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,adnav,adheader{display:block;}body{line-height:1;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;}

body {
  background: #378FB1;
  padding: 0;
  margin: 0;
  font-family: 'Roboto';
}

* {
  -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: transparent;
  padding: 8px 14px;
  z-index: 2;
  display: table-cell;
  width: 100%;
  font-size: 90%;
  text-transform: uppercase;
  vertical-align: middle;
  border: 1px solid transparent;
  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: #37A0B1;
  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;
} 

4.Lalu buka Tata Letak >Klik Tambah Widget  > HTML/JavaScript > Lalu Copy dan Terapkan Kode HTML di bawah ini.

 <div class="bsd-container">
  <div class="sidebar_about_author">
    <div class='inner_wrapper'>
      <div class='bsdbox-img'>
        <img alt='akhtarvis' class='img-responsive' height='auto' src='https:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDhpdMTnDp4x35ZOUhmA0aeSx25GMsIGNJiGHjpqVqHEUSZTG2quCwYZuC6yIt8uErzMwoCK2_EH9WBd2MfvjdE1JSD7MHwf7paX3NKZ62eB9BftKzAsAck-UtBxse-AcFjYjH8TUoufw/s320/Logopit_1510586303788.png' title='Bloggersstand' width='300' ></img>
        <div class='joinfloat-img'><span class='bsdbox-float'><a href='https://www.blogger.com/follow.g?view=FOLLOW&blogID=4593180265950566504' 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>akhtarvis.blogspot.com</span></h4>
      <p>My Design Is Just For You</p>
    </div>
    <div class='bsdbox-wrap'>
      <ul class='bsdextend'>
        <li class='bsdbox-icon facebook'>
          <a href='ISIKAN URL FP FACEBOOK' 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='ISIKAN URL TWITTER Sobat' 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='ISIKAN URL G+ Sobat' 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> 

Kustomisasi :

1. Ganti Setiap URL yang sudah saya Tandai dengan warna Merah

2.Sobat bisa menggati Akhtarvis sdengan Nama Sobat.

3. Lakukan Step by Step dengan Benar

Mungkin itu saja yang bisa saya sampaikan jika ada kesuliat silahkan tinggalkan di Kolom Komentar yaa.

Baca Artikel Menarik lainnya

Loading...