Tuesday, July 30, 2013
Labels:
Blogging
,
CSS
Social Sharing Buttons for Blogs and Websites designed using CSS/HTML
Hello Friends, in earlier post we had provided Animated Social Sharing Widget for Blog or website. Now in this post I have provided 2 the Best Social Sharing Widgets Designs.this designs are developed using CSS and HTML. I have also provided the code for this widgets.
One of the best ways to get audience to your website is through the use of social sharing gadgets. There are many social sharing options exist. Some offer fewer sharing options, some only work on specific platform, and some require third party configuration.
Here is the Image of how it looks like.
Here is a list of 7 social sharing buttons from popular social networks. It is very simple and attractive design. it will decorate your footer as well as helps you to get more traffic.
Here is the Image How it Looks Like.
One of the best ways to get audience to your website is through the use of social sharing gadgets. There are many social sharing options exist. Some offer fewer sharing options, some only work on specific platform, and some require third party configuration.
1. Social Share Buttons With Plugin Codes.
First Widget have 4 Buttons of most popular Social sharing networks like Facebook, Tweeter, Google + and LinkedIn with plugin codes. It has shatter effect behind shatter it will display your popularity on that network.Here is the Image of how it looks like.
Code in CSS/HTML:-
<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400);
@import "//netdna.bootstrapcdn.com/font-awesome/3.0/css/font-awesome.css";
html, body {
min-height: 100%;
}
body {
background-image: linear-gradient(45deg, rgba(194, 233, 221, 0.5) 1%, rgba(104, 119, 132, 0.5) 100%), linear-gradient(-45deg, #494d71 0%, rgba(217, 230, 185, 0.5) 80%);
margin: 0;
}
#buttons {
border-radius: 5px;
padding: 14px 7px;
background: white;
width: 660px;
overflow: hidden;
margin: 150px auto 0;
box-shadow: 0 2px 3px rgba(71, 71, 71, 0.31);
}
.button {
background: #DCE0E0;
position: relative;
display: block;
float: left;
height: 40px;
margin: 0 7px;
overflow: hidden;
width: 150px;
border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.icon {
display: block;
float: left;
position: relative;
z-index: 3;
height: 100%;
vertical-align: top;
width: 38px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 3px;
-webkit-border-radius: 3px 0px 0px 3px;
border-radius: 3px 0px 0px 3px;
text-align: center;
}
.icon i {
color: #fff;
line-height: 42px;
}
.slide {
z-index: 2;
display: block;
margin: 0;
height: 100%;
left: 38px;
position: absolute;
width: 112px;
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 3px;
-moz-border-radius-bottomright: 3px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-radius: 0px 3px 3px 0px;
border-radius: 0px 3px 3px 0px;
}
.slide p {
font-family: Open Sans;
font-weight: 400;
border-left: 1px solid #fff;
border-left: 1px solid rgba(255,255,255,0.35);
color: #fff;
font-size: 16px;
left: 0;
margin: 0;
position: absolute;
text-align: center;
top: 10px;
width: 100%;
}
.button .slide {
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.facebook iframe {
display: block;
position: absolute;
right: 16px;
top: 10px;
z-index: 1;
}
.twitter iframe {
width: 90px !important;
right: 5px;
top: 10px;
z-index: 1;
display: block;
position: absolute;
}
.google #___plusone_0 {
width: 70px !important;
top: 10px;
right: 15px;
position: absolute;
display: block;
z-index: 1;
}
.linkedin .IN-widget {
top: 10px;
right: 22px;
position: absolute;
display: block;
z-index: 1;
}
.facebook:hover .slide {
left: 150px;
}
.twitter:hover .slide {
top: -40px;
}
.google:hover .slide {
bottom: -40px;
}
.linkedin:hover .slide {
left: -150px;
}
.facebook .icon, .facebook .slide {
background: #305c99;
}
.twitter .icon, .twitter .slide {
background: #00cdff;
}
.google .icon, .google .slide {
background: #d24228;
}
.linkedin .icon, .linkedin .slide {
background: #007bb6;
}
</style>
<div style="width: 50%">
<div id="buttons">
<div class="facebook button">
<i class="icon">
<i class="icon-facebook"></i>
</i>
<div class="slide">
<p>
facebook
</p>
</div>
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Freference%2Fplugins%2Flike&send=false&layout=button_count&width=80&show_faces=false&font&colorscheme=light&action=like&height=20&appId=568581339861351" scrolling="no" frameborder="0" style="border: none; overflow: hidden; width: 80px; height: 20px;" allowtransparency="true"></iframe>
</div>
<div class="twitter button">
<i class="icon">
<i class="icon-twitter"></i>
</i>
<div class="slide">
<p>
twitter
</p>
</div>
<a href="https://twitter.com/share" class="twitter-share-button" data-via="mariuCSS">Tweet
</a>
<script>
!function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https';
if (!d.getElementById(id)) {
js = d.createElement(s);
js.id = id;
js.src = p + '://platform.twitter.com/widgets.js'; fjs.parentNode.insertBefore(js, fjs);
}
}(document, 'script', 'twitter-wjs');
</script>
</div>
<div class="google button">
<i class="icon">
<i class="icon-google-plus"></i>
</i>
<div class="slide">
<p>
google+
</p>
</div>
<!-- Place this tag where you want the +1 button to render. -->
<div class="g-plusone" data-size="medium">
</div>
<!-- Place this tag after the last +1 button tag. -->
<script type="text/javascript">
(function () {
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
}
)();
</script>
</div>
<div class="linkedin button">
<i class="icon">
<i class="icon-linkedin"></i>
</i>
<div class="slide">
<p>
linkedin
</p>
</div>
<script type="IN/Share" data-counter="right">
</script>
<script src="//platform.linkedin.com/in.js" type="text/javascript">
lang: en_US
</script>
</div>
</div>
</div>
2. 7 Social Share Buttons in Footer.
Here is a list of 7 social sharing buttons from popular social networks. It is very simple and attractive design. it will decorate your footer as well as helps you to get more traffic.
Here is the Image How it Looks Like.
Code in CSS/HTML:-
<style type="text/css">
@import url('http://fonts.googleapis.com/css?family=Lato:300');
@import url('http://weloveiconfonts.com/api/?family=entypo');
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
body {
background: #ddd;
}
.content {
padding: 30px;
font: 300 40px Lato, sans-serif;
text-align: center;
color: #999;
background: #eee;
}
.footer {
padding: 20px 0;
text-align: center;
}
.social {
display: inline-block;
width: 70px;
height: 70px;
margin: 0 10px;
line-height: 70px;
font-family: Entypo;
font-size: 35px;
text-align: center;
color: #bbb;
border-radius: 50%;
background: #eee;
overflow: hidden;
transition: color .3s;
}
.social:hover {
color: #59d;
cursor: pointer;
}
.social {
box-shadow: rgb(210, 210, 210) 1px 1px, rgb(210, 210, 210) 2px 2px, rgb(211, 211, 211) 3px 3px, rgb(211, 211, 211) 4px 4px, rgb(211, 211, 211) 5px 5px, rgb(212, 212, 212) 6px 6px, rgb(212, 212, 212) 7px 7px, rgb(212, 212, 212) 8px 8px, rgb(213, 213, 213) 9px 9px, rgb(213, 213, 213) 10px 10px, rgb(214, 214, 214) 11px 11px, rgb(214, 214, 214) 12px 12px, rgb(214, 214, 214) 13px 13px, rgb(215, 215, 215) 14px 14px, rgb(215, 215, 215) 15px 15px, rgb(215, 215, 215) 16px 16px, rgb(216, 216, 216) 17px 17px, rgb(216, 216, 216) 18px 18px, rgb(216, 216, 216) 19px 19px, rgb(217, 217, 217) 20px 20px, rgb(217, 217, 217) 21px 21px, rgb(218, 218, 218) 22px 22px, rgb(218, 218, 218) 23px 23px, rgb(218, 218, 218) 24px 24px, rgb(219, 219, 219) 25px 25px, rgb(219, 219, 219) 26px 26px, rgb(219, 219, 219) 27px 27px, rgb(220, 220, 220) 28px 28px, rgb(220, 220, 220) 29px 29px, rgb(221, 221, 221) 30px 30px;
text-shadow: rgb(226, 226, 226) 1px 1px, rgb(227, 227, 227) 2px 2px, rgb(227, 227, 227) 3px 3px, rgb(228, 228, 228) 4px 4px, rgb(229, 229, 229) 5px 5px, rgb(229, 229, 229) 6px 6px, rgb(230, 230, 230) 7px 7px, rgb(230, 230, 230) 8px 8px, rgb(231, 231, 231) 9px 9px, rgb(232, 232, 232) 10px 10px, rgb(232, 232, 232) 11px 11px, rgb(233, 233, 233) 12px 12px, rgb(233, 233, 233) 13px 13px, rgb(234, 234, 234) 14px 14px, rgb(235, 235, 235) 15px 15px, rgb(235, 235, 235) 16px 16px, rgb(236, 236, 236) 17px 17px, rgb(236, 236, 236) 18px 18px, rgb(237, 237, 237) 19px 19px, rgb(238, 238, 238) 20px 20px;
}
</style>
<div class="content">Social Footer by MAD Logics</div>
<div class="footer">
<div class="social"></div>
<div class="social"></div>
<div class="social"></div>
<div class="social"></div>
<div class="social"></div>
<div class="social"></div>
<div class="social"></div>
</div>
Subscribe to:
Post Comments
(
Atom
)
No comments :
Post a Comment