Tombol Social Media dengan Efek Transisi

Membuat Tombol Social Media dengan Efek Transisi, Keterbatasan waktulah sehingga saya jarang update artikel di blog ini, beginilah jika kesibukan dunia nyata lebih saya utamakan dibandingkan dunia maya. Pasti semua mengalami hal yang sama dengan saya yang lebih mengutamakan pekerjaan dunia nyata. Dari kesibukan inilah saya menempatkan sedikit untuk memposting artikel agar blog ini masih lebih kelihatan terurus.Dimana pada kesempatan ini saya akan membagikan sebuah widget Social Media dengan Efek Transisi yang bisa Anda gunakan atau memasangnya pada blog, widget Social Media ini bisa dibilang sangat ringan dibandingkan dengan widget Social Media yang banyak bereder di internet karena tidak menggunakan banyak tambahan code seperti JavaScript yang membuat loading blog agak berat diakses.

Widget ini hanya menggunakan CSS dan HTML sebagai kode pemanggil, Tampilannyapun tidak kalah jauh dengan widget-widget Social Media yang dibagikan oleh para master.

Atau silahkan lihat demonya pada link di bawah ini, untuk memastikan suka atau tidaknya Anda untuk memasang pada Blog.

DEMO

Anda suka...? Berikut caranya :

1. Letakkan CSS berikut di atas ]]></b:skin> atau di dalam </style>

#okeshare .iconz {
  background:#E3E3E3 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkAF_9HZKxeC0owbZdpPR6t70AuRG2a2u1C_eVCX7bcfjiMX3EbilP17Iln3VRvZb2flwKMbd3xjBszZnZL9Sa90Po1Os9jxOmmpnBgyiXut-5iOg-vZktCAwqiqAuHRj4mw0BMU_EsVg/s1600/okeshare.png') 0 0 no-repeat;
  -moz-border-radius:40px;
  -webkit-border-radius:40px;
  -o-border-radius:40px;
  border-radius:40px;
  display:block;
  color:#212121;
  float:none;
  height:48px;
  width:48px;
  line-height:48px;
  margin:10px auto 0;
  position:relative;
  text-shadow:0 1px 0 #FAFAFA;
  text-align:center;
  text-decoration:none;
  white-space:nowrap;
  -webkit-transition:width .25s ease-in-out;
  -ms-transition:width .25s ease-in-out;
  -moz-transition:width .25s ease-in-out;
  -o-transition:width .25s ease-in-out;
  transition:width .25s ease-in-out;
  -webkit-box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 2px 3px;
  -moz-box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 2px 3px;
  -o-box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 2px 3px;
  box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 1px 3px;
}

#okeshare a span {
  display:none;
}

#okeshare:hover a span {
  display:inline;
}

#okeshare a span {
  font-size:1.4em;
}

#okeshare:hover .iconz {
  width:250px;
}

#okeshare .fb {
  background-position:0 -384px;
}

#okeshare .twiter {
  background-position:0 -432px;
}

#okeshare .google {
  background-position:0 -480px;
}

#okeshare .pint {
  background-position:0 -528px;
}

#okeshare .linkedin {
  background-position:0 -576px;
}

#okeshare .devart {
  background-position:0 -624px;
}

#okeshare .ytube {
  background-position:0 -672px;
}

#okeshare .rss {
  background-position:0 -720px;
}

#okeshare .fb:hover {
  background-position:0 0;
  color:#0374DD;
}

#okeshare .twiter:hover {
  background-position:0 -48px;
  color:#00A1DF;
}

#okeshare .google:hover {
  background-position:0 -96px;
  color:#A70000;
}

#okeshare .pint:hover {
  background-position:0 -144px;
  color:#C00;
}

#okeshare .linkedin:hover {
  background-position:0 -192px;
  color:#005772;
}

#okeshare .devart:hover {
  background-position:0 -240px;
  color:#4C7A4A;
}

#okeshare .ytube:hover {
  background-position:0 -288px;
  color:#A00;
}

#okeshare .rss:hover {
  background-position:0 -336px;
  color:#EC5601;
}

2. Untuk memanggilnya silahkan letakkan code berikut di dalam elemen halaman HTML/JavaScript

<div id="okeshare"><a href="#" title="Facebook" class="iconz fb"><span>Facebook</span></a>
</div>
<div id="okeshare"><a href="#" title="Twitter" class="iconz twiter"><span>Twitter</span></a>
</div>
<div id="okeshare"><a href="#" title="Google+" class="iconz google"><span>Google+</span></a>
</div>
<div id="okeshare"><a href="#" title="Pinterest" class="iconz pint"><span>Pinterest</span></a>
</div>
<div id="okeshare"><a href="#" title="LinkedIn" class="iconz linkedin"><span>LinkedIn</span></a>
</div>
<div id="okeshare"><a href="#" title="DeviantArt" class="iconz devart"><span>DeviantArt</span></a>
</div>
<div id="okeshare"><a href="#" title="Youtube" class="iconz ytube"><span>Youtube</span></a>
</div>
<div id="okeshare"><a href="#" title="RSS" class="iconz rss"><span>RSS</span></a>
</div>

3. Save dan lihat hasilnya

ADS HERE !!!