Add Social Media Share Widget To Blogger - Mouse Hover Effect

Presenting yet another beautiful social media connect widget that lets your visitors to search your blog, subscribe to your RSS Feeds, follow you on twitter, follow you on Facebook and share your blog with over 351+ Social Media Networks! This widget is an extracted code from a wordpress template provided by Pbloggertemplates. I have further edited the widget to make it a perfect social share tool.

 

 

Adding The Social Connect Widget To BlogSpot

Go To Blogger > Design > Edit HTML

Backup your template

Search for ]]></b:skin>  and paste the following code just above it

/*  ------------starting of SOCIAL SHARE WIDGET-------------------- */
#search{width:350px; border:1px solid #E0DFD9;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMck5AqZjvgz-mogKKileti_vcE_oPahWVOZC1XIg6zzTn6Z7qyhAc9CvIZHGgr6uFlBDZNI89Kjb3KwQSIdgcriVN6aMCuKAzs4FztrXJR0XvvUbtIJ1qCi_3J28aavNBwqZ031J9wVA/s1600/search-bg.png) left top repeat-x;height:32px;padding:0;text-align:left;overflow:hidden}
#search #s{width:80%; background:none;color:#3F3F3F;border:0;padding:4px;margin:3px 0 0 12px;float:left}
#search .search-image{border:0;vertical-align:top;float:right;margin:8px 4px 0 2px}
#search-wrap{padding:15px 0}
.topsearch #search{margin-top:0;margin-bottom:10px}

.social-connect-widget{background:#FFF;border:1px solid #E7E6DE;padding:10px}
.social-connect-widget:hover{border:1px solid #CBCBC2;background:#F5F4EF}
.social-connect-widget a{text-decoration:none;font-weight:bold;font-family:Arial,Helvetica,Sans-serif;color:#4B4D4E}
.social-connect-widget a:hover{text-decoration:underline;color:#F77C04}
.social-connect-widget img{vertical-align:middle;margin-right:5px}
/*  ------------ending of SOCIAL SHARE WIDGET-------------------- */

To Change width of search box edit width:350px

• To change width of search input area edit width:80%

Then Search for,

<div id='sidebar-wrapper'>

5.   Now Paste the following code just below it,

<div class='topsearch'>
<div class='clerfix' id='search'>
    <form action='/search' id='searchform' method='get'>
        <input id='s' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search here...&quot;;}' onfocus='if (this.value == &quot;Search here...&quot;) {this.value = &quot;&quot;}' type='text' value='Search here...'/>
        <input class='search-image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWs4Y_hb4-XP5Kr_5RVWecGKgt0Ynv3j9DqmMzkcxny-ab5okhdRH6dOmPrawFNgUPIwepsMjk5JZbaddJAG-6FePsXL0v9Clb_v3izAim-PGof0XRVIfLHpqiE1aWxyRG2JzUxw3xTRc/s1600/search.png' title='Search' type='image'/>
    </form>
</div>
</div>
<div style='clear:both;'/>

<div class='social-connect-widget' style='margin-top:0px;margin-bottom:10px;'>
<a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'><img alt='RSS Feed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4FpZCo7xmjmvRMvFFJGu2WK-ZOZ7Dr7csRHPLZd8whpmyIuXDs6FpJ8odzvsZhWW8Mc2RKgetWWnkbhDPsHjxDrJWihNi_KeSOGzAAdgbIFv_N72oRhhgN1ISd-zo5-3SI3aXT3hlG_6z/s1600/social-connect-rss.png' title='RSS Feed'/></a><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'>Subscribe to our RSS Feeds!</a>
</div>
<div class='social-connect-widget' style='margin-bottom:10px;'>
<a href='http://twitter.com/USERNAME'><img alt='Follow Us on Twitter!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinzZajokaLGaUCOVAr4Izla-dqHO3ZGTUQxPLGvwP93XQzlasmRkZUL0FlXOYZLkVY9YmVuROy5qkB90eR-KjeQuappsBP1-iKtlhK0Lqf-uubUxvkORpXLP9ROxuiFjWrWMaCntZJuroq/s1600/social-connect-twitter.png' title='Follow Us on Twitter!'/></a><a href='http://twitter.com/USERNAME'>Follow Us on Twitter!</a>
</div>

<div class='social-connect-widget' style='margin-bottom:10px;'>
<a href='http://facebook.com/USERNAME'><img alt='Be Our Fan!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmBR4PNHcTIE_dyCme_go4ib8MjfxBJfR499723WIGMAlJyR0QJj5IB-6qi6eQrSdXL7nl64nOE9r2_rwldUE92zvEroo8zSqsKser2YJUgJdkJ9ORMDDlIB4-SaMYOGFkhqM7oj_PRo60/s1600/social-connect-facebook.png' title='Be Our Fan'/></a><a href='http://facebook.com/USERNAME'>Follow us on Facebook!</a>
</div>

<div style='clear:both;'/>

<div class='addthis_toolbox'>  
<div class='custom_images'>
<a class='addthis_button_twitter'><img alt='Twitter' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeg9Eq_b0f7DcspOz30OkMX9zVChh6fnx9vywoti07kBMdjJASmBtoXxV3HV8E6kC5kpC6ZJnMtXu2xOMps3gEzMmQTemHNXAnwq_1-KifSf6STYT8ZRhxPhsN1Qs4ZRslGoedVzO2qSQ/s1600/twitter.png' width='32'/></a>
<a class='addthis_button_delicious'><img alt='Delicious' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkaYJ5zgo8h5LrhwOW-bMxKDknH8tilKqmclfpAS59qBQwXH7BgNBbLJLlEADt7vS8ovmhG803ClmDNnM-sQ0bhjeKcEmbzYAUGWO89HQRsdbYfY8Yidomax3VnNtjro0EV7uEHcsYSP0/s1600/delicious.png' width='32'/></a>
<a class='addthis_button_facebook'><img alt='Facebook' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr1xVnX1mm_XXdQTY92wwrfACBMCL9kj8USBT2gZMEPKvZjXytDDqGnljYRyk2xFwLerqFhav_DnfRUBEVlclXbO6lvm_qAX3eeqGNJ_K3t1HLN7o8lmrsVsWc66PUO6zWGevA8oPznWg/s1600/facebook.png' width='32'/></a>
<a class='addthis_button_digg'><img alt='Digg' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuugy-6_bWK1OCCltGMBNt_0S1nlH0iQtEkCVBb3MlZjPJvFGydH3S6tvayE-gCHrXEMVH8E9DrkcdFSfSaoaRMnDP-CzFLe2qHxlDScZ71dTuRsRDK-m40OsqQ8hs2Wk3QCxLfFum3_c/s1600/digg.png' width='32'/></a>
<a class='addthis_button_stumbleupon'><img alt='Stumbleupon' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFcmhTQYpgTmByARn2mQEDSnDO6xOit-lLpCy_DJ6DvAGjU3yrCynu5D2b9fHu02iyXDO79qLJxeaNJqJKkJtHnwhwzHfl4tHkfUWj2BdfEo6zydo-d_zwT1-OgiCaEXMKX7aiwU_bNp0/s1600/stumbleupon.png' width='32'/></a>
<a class='addthis_button_favorites'><img alt='Favorites' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim0G93p4eY267VblBLA8TqpgRW1jlqKfdDOVpwoFRMHevPx0g48bTybxwN2dn4xSpzVAwgvgiFK3HN9BjukK_AOQlBEJ9h4wZ1qx2hQg_nVGZzRogzM2eAriOPwa6tW02JmgBIeYhvB_w/s1600/favorites.png' width='32'/></a>
<a class='addthis_button_more'><img alt='More' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSWb7YQREGXcHvZx5ntox6j3XRAH-Q3-yUZn_e447E80USl-uRretxk9Cynyguov_9u8ifzGNSBYq7vnEeuYMeqxTnFnBBR_0sJkCLK_0Or6AN0CN_uGTJtI6AdIgcRION2jDUHgNwM7Q/s1600/more.png' width='32'/></a>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
</div>
<div style='clear:both;'/>

 

Make these changes:

• Replace http://twitter.com/USERNAME with your twitter profile link
• Replace http://facebook.com/USERNAME with your Facebook Profile link

      6.   Save your template and Bingo you are done! :>

Link Partners

The Hackers Army

Hack For Security

Welcome At the real blogger tricks

Hello my royal readers I have created two blogs on hacking Hack for security and The hackers Army and hope both Blogs helps you a lot.

Today I am going to create a new blog named “The Real Blogger Tricks”. I will post all the things about blogger like SEO,Blogger widget, blogger templates and many more things about blogging.

Hope This blog will help you to improve your blog.

Happy blogging..