Social Share Buttons : Pack 1

Social Share Buttons : Pack 1
Hello,Today I am gonna share two beautiful CSS share buttons included in Pack 1.I will post new social packs later so stay connected.Each social pack contains 2 social widgets.As you know social shares and social signals are very important for SEO and also for driving traffic to your blog,you should include them at least below posts.You have two options while adding share buttons : You can use free services like Add this and SumoMe which are quite popular or you can use custom codes.The social share buttons are the best ways you can promote your posts on social media.If your post is interesting enough then you get referral traffic from high authority social media sites like facebook and twitter which in a way is good for SEO. The steps for the installation of social share buttons are given at the end of the post.

How Social share custom codes are better ?


  1. When you use Sumo me or Add this you are adding some Javascript in your template.That means it will affect your page load speed.
  2. But when you use custom social share codes you are including comparatively fewer javascript so the effect on page load speed is negligible.
You should know that page load speed also affects SEO.You can check the affect of different scripts and codes on your page loading by using pingdom.com .The faster your pages load,the better your SEO.So try to avoid using heavy javascript codes and look for lighter alternatives.

Social Share Button Style #1


The Demo of style 1 is the first image in the post title image.

CSS :



<style>
/*Social Sharing Widget by  http://blograbbit.blogspot.com*/
.blograbbitshare li {
float: left;
margin-right: 1.2%;
list-style-type: none;
}
.blograbbitshare li .fa:before {
margin-right: 5px;
}
.blograbbitshare li{width:17.6%;border:1px solid #EEE;padding:0}
.blograbbitshare li a{padding:10px 0;background-color:#aaa;color:#FFF;display:block;border-radius:2px;}
.blograbbitshare{overflow: hidden;
text-align: center;
margin: 20px 0;
padding-bottom: 15px;
}
.blograbbitshare li a:hover{opacity:1}
.blograbbitshare li .twitter{background-color:#55acee}
.blograbbitshare li .facebook{background-color:#3b5998}
.blograbbitshare li .gplus{background-color:#dd4b39}
.blograbbitshare li .pinterest{background-color:#cc2127}
.blograbbitshare li .linkedin{background-color:#0976b4}
</style>

HTML :



<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='blograbbitshare'>
<ul>
<li><a class='twitter' data-via='BloggingRabbit' expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot;-&quot; + data:post.url' rel='nofollow' target='_blank' title='Twitter Tweet'><i class='fa fa-twitter'/>Tweet</a></li>
<li><a class='facebook' expr:href='&quot;http://www.facebook.com/share.php?v=4&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' onclick='window.open(this.href,&apos;sharer&apos;, &apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' target='_blank' title='Facebook Share'><i class='fa fa-facebook'/>Share</a></li>
<li><a class='gplus' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Google Plus Share'><i class='fa fa-google-plus'/>Share</a></li>
<li><a class='linkedin' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&quot; + data:post.snippets' target='_blank'><i class='fa fa-linkedin'/>Share</a></li>
<li><a class='pinterest' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;description= + data:post.title&quot;' target='_blank'><i class='fa fa-pinterest'/>Share</a></li>
</ul>
</div>
</b:if>

Social Share Button Style #2


The demo of style 2 is the second image you observe in the post title image.

CSS :


<style>
/* CSS Share Button by blograbbit.blogspot.com*/
.brshare{overflow:hidden;text-align:center;margin-bottom:20px;margin-top:20px;padding:10px 0;}
.brshare li{float:left;margin:0 1%;width:18%;padding:0;list-style:none;position:relative;box-shadow:0 0 0 -1px #e3e3e3;}
.brshare li:hover{box-shadow:4px 4px 0 -1px #e3e3e3;}
.brshare li a{padding:5px 0 6px 35px;color:#fff;display:block;border-radius:2px;}
.brshare li a:hover{background:#555555;color:#fff;}
.brshare li .twitter{background-color:#85c5f5;}
.brshare li .facebook{background-color:#6381c0;}
.brshare li .gplus{background-color:#ed6d5d;}
.brshare li .pinterest{background-color:#e44d52;}
.brshare li .linkedin{background-color:#2c9ad8;}
.brshare li .twitter:hover,.brshare li .facebook:hover,.brshare li .gplus:hover,
.brshare li .pinterest:hover,.brshare li .linkedin:hover{color:#fff;}
.brshare li:last-child{margin-right:0}
.brshare li .fa:before{position:abrolute;top:0;left:0;display:inline-block;padding:4px 15px;font-family:fontawesome;text-align:center;background:#444444;color:#FFFFFF;line-height:20px;}
.brshare li .fa {display:initial;}
</style>

HTML :


<b:if cond='data:blog.pageType == &quot;item&quot;'>
        <div class='brshare'>
                <ul>
<li><a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' target='_blank' title='Facebook Share'><i class='fa fa-facebook'/>Share</a></li>

                <li><a class='gplus' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' rel='nofollow' target='_blank' title='Google Plus Share'><i class='fa fa-google-plus'/>Share</a></li>

                <li><a class='twitter' data-via='BloggingRabbit' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Twitter Tweet'><i class='fa fa-twitter'/>Tweet</a></li>

                <li><a class='linkedin' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' target='_blank'><i class='fa fa-linkedin'/>Share</a></li>

                <li><a class='pinterest' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;amp;description= + data:post.title&quot;' target='_blank'><i class='fa fa-pinterest'/>Share</a></li>

                </ul>
         </div>
<div style='clear:both'/>
</b:if>

Installation :


  1. Copy and Paste the CSS above </head> tag (Use CTRL+F  to find it )
  2. Find  </data:post.body> in your template.You will find it three times.Paste it just after the second one.
  3. Replace blue-coloured BloggingRabbit with your twitter username.

Last Words :

I hope you like this Social share pack.If you like it please share this post with others on social media.If you faced any problem feel free to comment.Thanks
Reactions:
 , ,

Author:

Osama loves to read,write and share knowledge.He is an avid blogger,who likes to write on almost every kind of topic.He currently manages three blogs : Entry test practice ,Blog Rabbit ,News Burner

Stay connected, You'll not be disappointed!

0 comments:

Leave a Comment

1-No spamming (links etc unless necessary)
2-Ask what's related to the post