Widget Social Share With FontAwesome

elsaviara.com - Widget Social Share With FontAwesome yang akan saya share kali ini adalah tombol yang di sediakan untuk pengunjung blog bagi yang ingin share artikel di blog kita ke sosmed seperti facebook, twitter, G+, pinteres dan feeds blog .Widget sosial share with fontawesome ini memiliki efek hover yang sangat menarik yang bisa menyebunyikan dan memunculkan icon sosmed yang di pasang pada widget sosial share ini .Sebelumnya widget ini telah di share di blognya dian anarchyta dan di blognya mbah dinan jika anda tertarik untuk memasangnya di blog berikut cara pemasangannya .

Cara Memasang Widget Sosial Share With FontAwesome

Log in ke dasboard blogger
Click Template
Click Edit HTML
Masukkan kode css di bawah ini di atas kode ]]></b:skin> atau </stryle>

<style type='text/css'> .sosial ul{position:relative;height:45px;margin:0;padding:0;list-style:none} .sosial li {position:relative;float:left;margin:0;padding:0;width:20%;height:20px} .sosial li a {display:block;height:40px;line-height:40px;font-weight:bold;color:#fff;text-align:center;border-top:4px inset rgba(0,0,0,.1)} .sosial li a span{display:block;font-family:FontAwesome;font-size:40px;line-height:50px;width:50px;height:50px;border-radius:100px;border-bottom:3px solid #fff;position:absolute;background:#666;color:#fff;left:35%;top:135%;transition:all 0.3s ease 0s;opacity:0;visibility:hidden} .sosial li a:hover span{content:"";position:absolute;top:-150%;left:35%;display:block} .sosial li:hover span{opacity:1;opacity:1;visibility:visible} .sosial li:nth-child(1) a,.sosial li:nth-child(1) a span{background: #4A5E99} .sosial li:nth-child(2) a,.sosial li:nth-child(2) a span{background: #00BFFF} .sosial li:nth-child(3) a,.sosial li:nth-child(3) a span{background: #d34836} .sosial li:nth-child(4) a,.sosial li:nth-child(4) a span{background: #C92228} .sosial li:nth-child(5) a,.sosial li:nth-child(5) a span{background: #F99C58} @media screen and (max-width:414px){ .sosial ul{height:220px} .sosial li {float:right;width:100%;height:44px;transition: all .5s} .sosial li a span{left:35%;top:135%} .sosial li a:hover span{content:"";position:absolute;top:-40%;left:-10%} .sosial li:hover{width:90%} } </style>

Kemudian simpan kode html di bawah ini di atas kode <data:post.body/> atau di bawah <div class='post-footer'>. karena beberapa template berbeda peletakannya. Pasang saja diantara dua kode tersebut.

<div class='sosial' id='sosial'> <ul> <li><a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url' rel='nofollow' target='_blank'><span class='fa-facebook'/>Facebook</a></li> <li><a expr:href='"http://twitter.com/intent/tweet?url=" + data:post.url' rel='nofollow' target='_blank'><span class='fa-twitter'/>Twitter</a></li> <li><a expr:href='"https://plus.google.com/share?url=" + data:post.url' rel='nofollow' target='_blank'><span class='fa-google-plus'/>Google +</a></li> <li><a expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url' rel='nofollow' target='_blank'><span class='fa-pinterest'/>Pinterest</a></li> <li><a expr:href='data:blog.homepageUrl + "feeds/posts/default?alt=rss"' rel='nofollow' target='_blank'><span class='fa-rss'/>My Feeds</a></li> </ul> </div>

Jika anda merasa tampilan nya terlalu lebar silahkan masukan
.sosial {max-width:80%}
pada cssnya .

Demo Widget Social Share With FontAwesome

See the Pen mVVaZz by Elsa Viara Blog (@elsaviara) on CodePen.

Demikian Widget Social Share With FontAwesome dan cara pemasangannya semoga bermanfaat dan sebelumnya saya juga pernah share silahkan di baca Cara Memasang Widget Facebook Twitter Gplus Follower Di Blog