17 February 2013

Add Beautiful Social Buttons


515 loyal readers
RSS feed | E-mail

Add Beautiful Social Sharing Widget Just Below Of Blogger Posts



Windows Reloded, Download Latest Softwares
Add caption

Social bookmarking gadgets are the easiest ways to boost traffic on your blog and earn more money.Till today we have shared many kind social sharing and bookmarking widgets but this one is little different from all of them because each button has a different background.This button contains a twitter tweet button,facebook like button and google +1 button also the installation of the widget is one step installation you just have to add some piece of code in your template.If you want to see the demo of widget then scroll down,you will find the demo at the bottom of the post,also don't forgot to use them :) Now without waiting anymore let's see how to add it to blogger blog.

How To Add This Widget To Blogger?


  1. Go to Blogger Dashboard > Template
  2. Take a backup of your template
  3. Click on Edit HTML
  4. Hit Proceed button
  5. Check Expand Widget Template checkbox.
  6. Find below code in your template,

Windows Reloded, Download Latest Softwares
1
<div class='post-footer-line post-footer-line-1'/>

Windows Reloded, Download Latest Softwares
add below piece of code just above it,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<b:if cond='data:blog.pageType == "item"'>
<style>
.promote_post_bg {
    height103px;
    backgroundurl(https://lh3.googleusercontent.com/-AK_TNwyWxJw/T8XDa2Q6TpI/AAAAAAAAB04/UCczorSYj0s/s1600/helperblogger.com-sharing-widget.png) 0 -7px no-repeat;
    width500px;
    margin-left65px;
}
.promote_twitter {
    width130px;
    height38px;
    floatleft;
    margin0 39px 0 0;
    padding65px 0 0 13px;
    text-aligncenter;
}
.promote_facebook {
    width115px;
    height40px;
    floatleft;
    margin0 39px 0 0;
    padding63px 0 0 28px;
    text-aligncenter;
}
.promote_google {
    width65px;
    height40px;
    floatleft;
    margin0 39px 0 0;
    padding65px 0 0 28px;
    text-aligncenter;
}
</style>
    <div class='promote_post_bg'>
        <div class='promote_twitter'>
            <a class='twitter-share-button' data-via='helperblogger' href='https://twitter.com/share'>Tweet</a>
            <script>
                !
                function (d, s, id) {
                    var js, fjs = d.getElementsByTagName(s)[0];
                    if (!d.getElementById(id)) {
                        js = d.createElement(s);
                        js.id = id;
                        js.src = "//platform.twitter.com/widgets.js";
                        fjs.parentNode.insertBefore(js, fjs);
                    }
                }(document, "script""twitter-wjs");
            </script>
        </div>
        <div class='promote_facebook'>
       <fb:like expr:href="data:post.canonicalUrl" layout='button_count' send='false'
                show_faces='false' font="verdana" action="like" colorscheme="light"></fb:like>
            <div>
                <b:if cond='data:post.isFirstPost'>
                    <script>
                        (function (d) {
                            var js, id = 'facebook-jssdk';
                            if (d.getElementById(id)) {
                                return;
                            }
                            js = d.createElement('script');
                            js.id = id;
                            js.async = true;
                            js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
                            d.getElementsByTagName('head')[0].appendChild(js);
                        }(document));
                    </script>
                </b:if>
                            </div>
        </div>
        <div class='promote_google'>
            <g:plusone annotation="none" size='medium'></g:plusone>
            <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>
</b:if>

Windows Reloded, Download Latest Softwares

Now save your template and you are done.

I hope all of you will surely like this widget.Enjoy Buddies :) hAvE a NiCe DaY....
Related Posts Plugin for WordPress, Blogger...

0 comments:

Blogger Template by Clairvo