Main » 2012 » July » 30 » WordPress Design blogger social share Widget V2
11:31 AM
WordPress Design blogger social share Widget V2
social share Widget V2
Blogger professional widget is the best for getting much more subscribers for your blog and also getting much more traffic in your blog. In our previous post we are share an subscribe widget with extra subscribe and follow button but we in this gadget we are removed the extra buttons. Also in blogger for getting huge amount of traffic you need to add some professional design widgets for your blog. In this widget i have added some other sharing buttons and also you can add more social buttons in this widget but need to use the widget first. Now read the full topic to get the widget.


Try: Demo

WordPress Design blogger social share Widget V2



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, #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://2.bp.blogspot.com/-7EWetyyZxfM/UBKl601O4jI/AAAAAAAACEY/u8PmF-xubfM/s320/john.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://2.bp.blogspot.com/-7EWetyyZxfM/UBKl601O4jI/AAAAAAAACEY/u8PmF-xubfM/s320/john.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://2.bp.blogspot.com/-7EWetyyZxfM/UBKl601O4jI/AAAAAAAACEY/u8PmF-xubfM/s320/john.png) 0 -27px no-repeat;
                }
               
                #socialbox ul li p a.socialbox-button:active{
                    background: url(http://2.bp.blogspot.com/-7EWetyyZxfM/UBKl601O4jI/AAAAAAAACEY/u8PmF-xubfM/s320/john.png) 0 -54px no-repeat;
                }


Then select Design > Page element

Then paste the below code in a HTML gadget.

<div id="socialbox">
   
    <ul>
       
                   
        <li>
           
            <p>
                <a href="http://www.facebook.com/mybloggerclub" title="Like on Facebook" target="_blank"><img src="http://3.bp.blogspot.com/-6LzmGolIt-E/UBJAsxjTYGI/AAAAAAAACDA/zxNNt_gXZus/s320/facebook_16.png" alt="Facebook"></a><span>40,811</span> Fans                            </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>53,878</span> Followers                            </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>12,659</span> Subscribers                            </p>
           
        </li>
           
                   
        <li>
           
            <p>
                <a href="http://dribbble.com/mbc" title="Follow on Dribbble" target="_blank"><img src="http://1.bp.blogspot.com/-R_Ap3abAHBs/UBJAtILEKcI/AAAAAAAACDM/mrnKJ50YqHk/s320/dribbble_16.png" alt="Dribbble"></a><span>1,579</span> Followers                            </p>
           
        </li>
           
                   
        <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>104,027</span> Subscribers                            </p>
           
        </li>
           
               
    </ul>
   
</div>

Also change the blue text with your links.

Save your template.

Now visit your blog and enjoy with new look.
Views: 574 | Added by: Roshan | Rating: 5.0/1
Total comments: 1
1 Roshan  
0
biggrin NICE

Name *:
Email *:
Code *: