Blogger Professional social share Widget V1

Blogger official subscribe buttons are really not look better like WordPress sites. After i working some time i lastly got an some unique subscribe buttons for bloggers for using in a clean manner. Also the gadget is loading much more faster than other gadgets. We are added some popular subscribe buttons like YouTube, feedburner and twitter. This gadget is mostly counting your subscribers in a professional way. I have using simple codes to design the gadgets for giving better performance. Now read the full topic to using the gadget.

Blogger Professional social share Widget V1

First visit Blogger Dashboard > Design > Edit HTML

Now search the below code using Ctrl + F

]]></b:skin>

Now Paste the below code just above it.

<-- SocialBox Widget -->
#socialbox, div#socialbox ul, #socialbox ul li, #socialbox ul li p, #socialbox ul li p img, #socialbox ul li p span, #socialbox ul li p a{
    background: none;
    border: none;
    margin: 0;
    padding: 0;
}

#socialbox{
    color: #768a96;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
}

    #socialbox ul{
        background: url(http://4.bp.blogspot.com/-IXqjoljowzc/UBKpSEWv_6I/AAAAAAAACFc/n91k9iSmRPg/s320/mohn.png) repeat;
        border: 1px solid #d8dcdf !important;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        -webkit-box-shadow: 0px 2px 4px #dfe4e7;
        -moz-box-shadow: 0px 2px 4px #dfe4e7;
        box-shadow: 0px 2px 4px #dfe4e7;
        list-style: none;
        margin: 0 !important;
        padding: 0;
    }

        #socialbox ul li{
            background-image: none;
            border-bottom: 1px solid #d8dcdf;
            height: 59px;
            list-style: none;
        }

        #socialbox ul li:last-child{
            border-bottom: none;
        }

            #socialbox ul li p{
                padding: 19px 9px 0 9px;
            }

                #socialbox ul li p img{
                    border: none;
                    margin-right: 10px;
                    position: relative;
                    top: 3px;
                    vertical-align: baseline;
                }

                #socialbox ul li p span{
                    color: #425763;
                    font-weight: bold;
                }

                #socialbox ul li p a.socialbox-button{
                    background: url(http://4.bp.blogspot.com/-IXqjoljowzc/UBKpSEWv_6I/AAAAAAAACFc/n91k9iSmRPg/s320/mohn.png) no-repeat;
                    border: 1px solid #d8dcdf;
                    -webkit-border-radius: 3px;
                    -moz-border-radius: 3px;
                    border-radius: 3px;
                    color: #425763;
                    float: right;
                    font-size: 11px;
                    font-weight: bold;
                    line-height: 11px;
                    padding: 6px 10px;
                    position: relative;
                    text-decoration: none;
                    text-transform: uppercase;
                    top: -2px;
                }

                #socialbox ul li p a.socialbox-button:hover{
                    background: url(http://4.bp.blogspot.com/-IXqjoljowzc/UBKpSEWv_6I/AAAAAAAACFc/n91k9iSmRPg/s320/mohn.png) 0 -27px no-repeat;
                }

                #socialbox ul li p a.socialbox-button:active{
                    background: url(http://4.bp.blogspot.com/-IXqjoljowzc/UBKpSEWv_6I/AAAAAAAACFc/n91k9iSmRPg/s320/mohn.png) 0 -54px no-repeat;
                } <!-- SocialBox Widget -->

Now save your template.

Then visit Design > page element > Now click add an Gadget

Select the HTML/javascript gadget.

Paste the below code in the below box.

<div id="socialbox">

    <ul>

        <li>

            <p>
                <a href="http://feeds.feedburner.com/blogspot/egnVo" title="Subscribe to Feed" target="_blank"><img src="http://1.bp.blogspot.com/-BQaQ0GjENWQ/UBI3HPlwPDI/AAAAAAAACBY/i6-6hIS8qgQ/s320/feedburner_16.png" alt="Feedburner"></a><span>2,372</span> Subscribers                                    <a href="http://feeds.feedburner.com/blogspot/egnVo" class="socialbox-button" title="Subscribe to Feed" target="_blank">Subscribe</a>
                            </p>

        </li>

        <li>

            <p>
                <a href="http://twitter.com/Bloggingclub" title="Follow on Twitter" target="_blank"><img src="http://3.bp.blogspot.com/-w6hW1qtRhvE/UBI3HdTZMdI/AAAAAAAACBk/HVT1i3QJP_M/s320/twitter_16.png" alt="Twitter"></a><span>2,250</span> Followers                                    <a href="http://twitter.com/Bloggingclub" class="socialbox-button" title="Follow on Twitter" target="_blank">Follow</a>
                            </p>

        </li>

        <li>

            <p>
                <a href="http://www.youtube.com/user/mbc" title="Subscribe to Youtube Channel" target="_blank"><img src="http://3.bp.blogspot.com/-6xTKrCnZfaA/UBI3HpOAfgI/AAAAAAAACBw/WKQOOBjAsZU/s320/youtube_16.png" alt="YouTube"></a><span>50</span> Subscribers                                    <a href="http://www.youtube.com/user/mbc" class="socialbox-button" title="Subscribe to Youtube Channel" target="_blank">Subscribe</a>
                            </p>

        </li>

    </ul>

</div>

Now change the blue links with your links.
Now save your template.Bingo ! you are done.