Tambahkan CSS Murni Menampilkan Kontak Sosial Widget

Kontra Widget sangat penting dalam dunia blogging saat ini be'coz memberikan jenis yang sangat unik tampilan dan nuansa ke blog apapun. Widget ini dibuat murni oleh CSS sehingga tidak akan datang masalah apapun dalam menginstal. Widget dibuat untuk tiga jejaring sosial FB, Twitter, Google Plus, dan widget ini tidak termasuk jenis JavaScript be'coz harus kompatibel dan baik install. 



Tambahkan Kontra Widget di Blogger:
  
1.Login Ke Blogger >DashBorad
2.Klik pada Drop Down Menu lalu pilih Tata Letak 
3.Tambah Gadget HTML/JavaScript
4.Paste di bawah kode di dalamnya.


  <style type="text/css">
.container {
  margin: 0px auto;
  width: 300px;
  text-align: center;
}

.btn-sbm {
  display: inline-block;
  vertical-align: top;
  position: relative;
  margin: 0 5px;
  padding-top: 40px;
  width: 75px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  border-radius: 8px;
  -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
}

.btn-sbm:active {
  margin-top: 3px;
}

.btn-sbm:active .btn-sbm-action {
  padding-bottom: 3px;
  -webkit-box-shadow: inset 0 -3px rgba(0, 0, 0, 0.15), inset 0 -1px rgba(0, 0, 0, 0.15);
  box-shadow: inset 0 -3px rgba(0, 0, 0, 0.15), inset 0 -1px rgba(0, 0, 0, 0.15);
}

.btn-sbm:active .btn-sbm-action:after {
  bottom: 3px;
}

.btn-sbm-count {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  line-height: 40px;
  font-size: 19px;
  letter-spacing: -1px;
  color: #555;
  text-shadow: 0 1px white;
  background: #e6eff5;
  border-width: 1px 1px 0;
  border-style: solid;
  border-color: #c5c5c5 #bbb;
  border-radius: 8px 8px 0 0;
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.03) 0%, transparent 40%);
  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.03) 0%, transparent 40%);
  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.03) 0%, transparent 40%);
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.03) 0%, transparent 40%);
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.18), 0 2px rgba(0, 0, 0, 0.07);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.18), 0 2px rgba(0, 0, 0, 0.07);
}

.btn-sbm-count:before, .btn-sbm-count:after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -6px;
  border: 6px solid transparent;
  border-top-color: #e6eff5;
}

.btn-sbm-count:before {
  margin-left: -7px;
  margin-top: 1px;
  border-width: 7px;
  border-top-color: rgba(0, 0, 0, 0.07);
}

.btn-sbm-action {
  display: block;
  position: relative;
  line-height: 32px;
  padding: 2px 0 6px;
  font-size: 14px;
  color: white;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
  border: solid rgba(0, 0, 0, 0.18);
  border-width: 0 1px;
  border-radius: 0 0 8px 8px;
}

.btn-sbm-action:after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 6px;
  left: 0;
  right: 0;
  border-radius: 0 0 6px 6px;
  -webkit-box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.25);
  box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.25);
}

.btn-sbm-tweet {
  background: #83cfe8;
  background-image: -webkit-linear-gradient(top, #83cfe8, #6ebbd4);
  background-image: -moz-linear-gradient(top, #83cfe8, #6ebbd4);
  background-image: -o-linear-gradient(top, #83cfe8, #6ebbd4);
  background-image: linear-gradient(to bottom, #83cfe8, #6ebbd4);
  -webkit-box-shadow: inset 0 -6px rgba(0, 0, 0, 0.16), inset 0 -1px rgba(0, 0, 0, 0.15);
  box-shadow: inset 0 -6px rgba(0, 0, 0, 0.16), inset 0 -1px rgba(0, 0, 0, 0.15);
}

.btn-sbm-tweet:after {
  -webkit-box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.5);
}

.btn-sbm-tweet + .btn-sbm-count {
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.12), 0 2px rgba(0, 0, 0, 0.04);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.12), 0 2px rgba(0, 0, 0, 0.04);
}

.btn-sbm-like {
  background: #6480bd;
  background-image: -webkit-linear-gradient(top, #6480bd, #3c5894);
  background-image: -moz-linear-gradient(top, #6480bd, #3c5894);
  background-image: -o-linear-gradient(top, #6480bd, #3c5894);
  background-image: linear-gradient(to bottom, #6480bd, #3c5894);
  -webkit-box-shadow: inset 0 -6px rgba(0, 0, 0, 0.15), inset 0 -1px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 -6px rgba(0, 0, 0, 0.15), inset 0 -1px rgba(0, 0, 0, 0.2);
}

.btn-sbm-plus {
  background: #626262;
  background-image: -webkit-linear-gradient(top, #626262, #404040);
  background-image: -moz-linear-gradient(top, #626262, #404040);
  background-image: -o-linear-gradient(top, #626262, #404040);
  background-image: linear-gradient(to bottom, #626262, #404040);
  -webkit-box-shadow: inset 0 -6px rgba(0, 0, 0, 0.08), inset 0 -1px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 -6px rgba(0, 0, 0, 0.08), inset 0 -1px rgba(0, 0, 0, 0.3);
}

</style>

<br/>
<div class="container">

     <a href="https://twitter.com/aris_inc1" rel="nofollow" target="_blank"rel="author"  title="Find us on twitter" class="btn-sbm">
      <span class="btn-sbm-action btn-sbm-tweet">Twitter</span>
      <span class="btn-sbm-count">150+</span>
    </a>

    <a href="https://www.facebook.com/pages/Kevins-Boysz/525846667530307?fref=ts" rel="nofollow" target="_blank" title="Find us on facebook" class="btn-sbm">
      <span class="btn-sbm-action btn-sbm-like">Facebook</span>
      <span class="btn-sbm-count">650+</span>
    </a>

    <a href="https://plus.google.com/u/0/103315536973068325014" class="btn-sbm" target="_blank" rel="author" title="Find us on Google+">
      <span class="btn-sbm-action btn-sbm-plus">Google+</span>
      <span class="btn-sbm-count">140+</span>
    </a><br/>
</div><a style="float:right; color: #ffffff"href="http://blogtips-generation.blogspot.com/">Get This</a>

9.Save Template Anda

Cara Mengganti:

• https://twitter.com/aris_inc1 Ganti Dengan URLTwitter Anda.
• https://www.facebook.com/pages/Kevins-Boysz/525846667530307 Ganti Dengan URL Fans Page FB.
• anda
• https://plus.google.com/u/0/103315536973068325014 Ganti Dengan URL Google+ Anda.