WIDGET SOCIAL SHARE FLAT UI COLOR

Widget Social Share Flat UI Color mempunyai peranan cukup penting dalam perkembangan Blog. Tombol sosial media terdapat berbagai macam bentuk dan keunikan, bertujan untuk membuat tampilan menjadi lebih menarik. Bentiuk lain dalam tombol sosial media seperti Widget share valid html 5 dan Widget Sharing Is Sexy. Widget Social Share Flat UI Color berikut ini memiliki efek :hover cukup menarik, asal widget ini saya dapat dari Bengkel Blogger milik Mbah Dinan

Gak usah lama - lama basa basinya vroh 

Demo

Tambahkan CSS di atas </head>

<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:&quot;&quot;;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>

Selanjutnya tambahkan HTML di bawah ini ke dalam area <div class='post-footer'/>
Tidak semua template Blogger memiliki <div class='post-footer'/> jadi dimana harus memasangnya, tidak usah panik dan galau tinggal anda cari kode <data:post.body/> kemudian sisipkan di bawahnya.

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

Okelah kalau begitu, semoga artikel ini menarik dan dapat di pahami dan mempercantik blog anda  dengan memasang Widget Social Share Flat UI Color ini.

SHARE

Milan Tomic

Hi. I’m Designer of Blog Magic. I’m CEO/Founder of ThemeXpose. I’m Creative Art Director, Web Designer, UI/UX Designer, Interaction Designer, Industrial Designer, Web Developer, Business Enthusiast, StartUp Enthusiast, Speaker, Writer and Photographer. Inspired to make things looks better.

• 
• 
• 
• 
•