Animation Sociall Share With CSS3

Selamat siang sobat blogger, bagaimana kabar hari ini,......???

Salah satu media agar blog atau web dapat lebih mendatang kan pengunjung diantaranya dengan sistem "SHARE" ke sosial bookmark trik  ini mungkin hanya salah salah satunya saja.

Pada kesempatan ini Kolom Tutorial™ akan mencoba membuat sebuah Tutorial yang berhubungan dengan hal tersebut di atas, Tutorial kali ini kita berinama "Animation Sociall Share With CSS3" Untuk Freview gambarnya seperti ini :

VIEW A DEMO

Untuk Tutorialnya sebagai Berikut :

1. Seperti biasa Login ke Akun Blogger sobat

2. Klik Template Klik Edit HTML

3. Jangan Lupa Centang Expand Widget Template

4. Cari kode ]]></b:skin> dan letakan kode CSS dibawah tepat diatas kode ]]></b:skin>

  .scial a
{
text-decoration:none;
color:rgba(0,0,0,.5);
}
.scial
{
display:inline-block;
transition:.3s;
-webkit-transition:.3s;
-o-transition:.3s;
-moz-transition:.3s;
-ms-transition:.3s;
cursor:pointer;
margin:10px 0px;
width:50px;
padding:0px;
height:50px;
font-size:22px;
color:rgba(0,0,0,.5);
text-shadow: 1px 0 0 rgba(0,0,0,.2);
}
.scial:hover
{
padding-right:160px;
}
.scial > span
{
font-weight:900;
display:inline-block;
text-decoration:none;
color:rgba(0,0,0,.5);
margin:5px 7px;
transform:scale(0);
-webkit-transform:scale(0);
-moz-transform:scale(0);
-ms-transform:scale(0);
-o-transform:scale(0);
}
.scial:hover > span
{
transform:scale(1);
transition:0.5s linear;
-webkit-transform:scale(1);
-webkit-transition:0.5s linear;
-moz-transform:scale(1);
-moz-transition:0.5s linear;
-o-transform:scale(1);
-o-transition:0.5s linear;
-ms-transform:scale(1);
-ms-transition:0.5s linear;
}
.fbs
{
background:#5A5AFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-e1_o8pUJ48RZM0enJ8MHKN6MPB384dQRQtZyXIurAHKnnH4Wb4DNwRuULg1Ph2URVcPDUJ1fNO3SQRxbtsiyZtiTz2IIvs7_97unjpjy0zg3QjNl8k4midtz9H5WYv-sPCIgIOVkoRw/s1600/facebook.png) center no-repeat;
background-size:40px;
border-radius:40px;
-moz-border-radius:40px;
-webkit-border-radius:40px;
-ms-border-radius:40px;
border:1px solid transparent;
}
.fbs:hover
{
background-position:95% 50%;
box-shadow:0 0 0 3px #5A5Aff;
border:1px dashed rgba(0,0,0,1);
}
.gp
{
background:#FF4949 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkNiSWMXVl7i5MBLvhakTyzqkmTQh4mv0KLJXttNSIwAefPqqqXPF_GfqmgHen9VSWsRIK7kRIt9R60f9GLxrBUdAYHNTl7adSEDxBtv-QkdCdfNXXL_2UlfDTyEKqhVCPSj82aOZtccs/s1600/gplus.png) center no-repeat;
background-size:40px;
border-radius:40px;
-moz-border-radius:40px;
-webkit-border-radius:40px;
-ms-border-radius:40px;
border:1px solid transparent;
}
.gp:hover
{
background-position:95% 50%;
box-shadow:0 0 0 3px #FF4949;
border:1px dashed rgba(0,0,0,1);
}
.tw
{
background:#00EBFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0EpRWknckhh3Qh96_6Bx1BKQFsfokKjAjWXUZLmM79E3H1_x4SkdmZU0DE1lKJslwIgufYf8yKCLF0reOKnwcRa8woudbpQIshB5YoQs7fqvO3rRmGzswPfWYcNBtegsAOSv7k5ufP8A/s1600/twitter.png) center no-repeat;
background-size:40px;
border-radius:40px;
-moz-border-radius:40px;
-webkit-border-radius:40px;
-ms-border-radius:40px;
border:1px solid transparent;
}
.tw:hover
{
background-position:95% 50%;
box-shadow:0 0 0 3px #00EBFF;
border:1px dashed rgba(0,0,0,1);
}
.st
{
background:#FFB6B3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ4u4ZyWV4JoIWvTlnHuUXZErgh_3XRZAF35sE4ZSR5iFR9Bmw4cuGdYPquoRAkt3c71cJf8kFPXuoh9OlsVGbvUhnEWW2sq_KA66LgUUldn7A5rmyrV3Gr2QjSN0qJMiCnu4bs1pc8rs/s1600/stumbleupon.png) center no-repeat;
background-size:40px;
border-radius:40px;
-moz-border-radius:40px;
-webkit-border-radius:40px;
-ms-border-radius:40px;
border:1px solid transparent;
}
.st:hover
{
background-position:95% 50%;
box-shadow:0 0 0 3px #FFB6B3;
border:1px dashed rgba(0,0,0,1);
}
 

5. Klik Save

6. Kemudian Klik Tata Letak >>>> Klik Add Widget Klik >>> HTML/Javascript

7. Kopi Paste Kode HTML Dibawah ini :

<div class="scial fbs"><span><a href="http://www.facebook.com/sharer.php?u=http://joens-tutorial.blogspot.com/&amp;t=6 Animation Sociall Share With CSS3" rel="external nofollow" target="_blank">Facebook</a></span></div>
<div class="scial tw"><span><a href="http://twitter.com/home/?status=Check this out: Animation Sociall Share With CSS3 http://joens-tutorial.blogspot.com/" target="_blank">Twitter</a></span></div>
<div class="scial gp"><span><a href="https://plus.google.com/share?url=en&amp;url=http://joens-tutorial.blogspot.com/" target="_blank" title="Share On Google Plus !">Google+</a></span></div>
<div class="scial st"><span><a href="http://www.stumbleupon.com/submit?url=http://joens-tutorial.blogspot.com/&amp;title=Animation Sociall Share With CSS3" rel="external nofollow" target="_blank">Stumbleupon</a>
</span></div>

8. Klik Save, dan lihat hasilnya.

Note :

Ganti Tulisan "http://joens-tutorial.blogspot.com/" Dengan alamat blog sobat.

Happy Blogging sobat, semoga artikel ini bisa bermanfaat, teimakasih atas kunjungannya.

M. Alex Joenaedi

Saya hanyalah seorang Newbie di dunia Blogger, Aktivitas Ngeblog dilakukan hanya pada waktu senggang saja atau tidak teratur.

Share this post