Adding social sharing icon in blog is the great way to increase organic traffic of your blog.If you want your blog reader to share your blog post to others via different social networks then you are at right place.Today i will show you how to add this animated social sharing icon in your blog which has nice animated effect on hover over of mouse.
Click to see the live demo..
Follow these steps to add this cool social sharing animated icon widget.
Step 1: Login to your blogger dashboard.
Step 2: Click on template>customize>Layout
Step 3:Click on add widget where you want to add this widget select HTML/Javascript widget
Step 4: Paste the following code
1: <style>
2: /*--------Social Sharing Widget ------*/
3: .socialsharing a {
4: display:block;
5: height:50px;width:50px;padding:0 4px;float:left;
6: background:transparent url(http://4.bp.blogspot.com/-UTkPtPsw9bY/UKRoAPEVZ9I/AAAAAAAAFnM/qDPvUxpNfqM/s1600/Sharing+buttons.png) no-repeat;
7: -webkit-transition: ease-in 0.2s all;
8: -moz-transition: ease-in 0.2s all;
9: -o-transition: ease-in 0.2s all;
10: -ms-transition: ease-in 0.2s all;
11: transition: ease-in 0.2s all;
12: cursor:pointer;
13: }
14: .socialsharing a.googleplus {
15: background-position: 0px -58px;
16: }
17: .socialsharing a.googleplus:hover {
18: background-position: 0px 0px;
19: }
20: .socialsharing a.twitter {
21: background-position: 0px -290px;
22: }
23: .socialsharing a.twitter:hover {
24: background-position: 0px -232px;
25: }
26: .socialsharing a.facebook {
27: background-position: 0px -406px;
28: }
29: .socialsharing a.facebook:hover {
30: background-position: 0px -348px;
31: }
32: .socialsharing a.rss {
33: background-position: 0px -174px;
34: }
35: .socialsharing a.rss:hover {
36: background-position: 0px -116px;
37: }
38: </style>
39: <br />
40: <div class="socialsharing">
41: <a class="rss" href="http://feeds.feedburner.com/techhowtips" rel="external nofollow" target="_blank"></a>
42: <a class="googleplus" href="https://plus.google.com/104564054490090339631" rel="external nofollow" target="_blank"></a>
43: <a class="facebook" href="http://www.facebook.com/techhowtips" rel="external nofollow" target="_blank"></a>
44: <a class="twitter" href="http://www.twitter.com/amaz4u" rel="external nofollow" target="_blank"></a>
45: </div>
Now customize the bold section in the code with your social networks profile id and you are done.
do let me know if this works for you.
5 comments:
good site
i found this very informative
Data comes in many formats. However, in order to make optimal use of data, it should be available on a common platform.
For more information.....
Recruitment Software
thanks
your welcome
Post a Comment