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 :

css3, animated, sosial share
animated, css3, sosial share

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(http://4.bp.blogspot.com/-2cOi88N_BFo/UPwv8sH_39I/AAAAAAAAApw/vD9_r_Fa87E/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(http://2.bp.blogspot.com/-XVD-f1kc0NA/UPwv8vrZdeI/AAAAAAAAAps/AjnQEbH5Mfc/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(http://1.bp.blogspot.com/--Bd3841SqTo/UPwv9k8JdtI/AAAAAAAAAp0/7tM3LbtEylU/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(http://2.bp.blogspot.com/-6Gz9nRzAFbU/UTETWMMF-4I/AAAAAAAAAyg/d9PeD22zbo8/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.

Berlangganan update artikel terbaru via email:

20 Responses to "Animation Sociall Share With CSS3 "

  1. Replies
    1. hehhehheh, silakan dihapus aja atau di edit aja miss, thank atas kunjungannya.

      Delete
    2. oya... cara menhapus n mencari CSS yg sudah tidak terpakai bgmn ya.. biar loadingnya ringan gitu.

      Delete
    3. Maaf Mizz baru buka blog,
      kurang lebih ya seperti biasa masuk ke template>> Edit HTML>> dan jangan lupa centang, terus cari deh kodenya diatas kode ]]></b:skin>
      dan biar mudah kita harus tau dulu kode panggil HTML nya biasanya diwalai dengan kode
      <div class= "blablabla"

      Delete
    4. terus gimana caranya tahu kalo itu kode gak berfungsi jadi bisa dihapus gitu.

      Delete
    5. Silakan cari Kode CSS antara Kode : <b:skin><![CDATA[ ampai kode ]]></b:skin> Yang tidak termuat dala HTML atau widget, Tapi harus hati2 dan teliti jangan sampai yang masih berguna terhapus. atau kopi dulu kode CSS antara kedua kode tersebut di atas ke Note Pad dan silakan Edit.

      Delete
  2. Tutorial yang sangat berguna sekali sobat,
    sayangnya kodenya banyak sekali yah, tap boleh juga untuk dicoba
    sangat bermanfaat
    terima kasih sudah berbagi

    ReplyDelete
    Replies
    1. Sama2 mas, terimakasih juga atas kunjungannya mas.

      Delete
  3. wew bagus kang dan menarik tampilannya,,,lanjut dah makasih tutornya

    ReplyDelete
    Replies
    1. Terimakasih mas, dan terimakasih juga atas kunjungannya.

      Delete
  4. Bermanfaat sob, thx for share.

    ReplyDelete
  5. pak gmn caranya buat sidebar meredup kaya blog bapak lah gitu...

    ReplyDelete
    Replies
    1. Udah ane post mas silakan di baca :
      http://joens-tutorial.blogspot.com/2013/03/membuat-kotak-gelap-terang-dengan-css.html

      Delete
  6. This comment has been removed by the author.

    ReplyDelete
  7. Selamat sore sahabat, salam sejahtera selalu.

    ReplyDelete

Terimakasih banyak atas kunjungannya, salam silatuhami Alexjoen

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel