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 .
No comments
Silahkan berikan opini atas artikel saya jika ada saran silahkan sampaikan melalui komentar