Add Stylish Social Sharing Widget With Search Bar And Hover Effect For Blogger

As we all know that social network play an important role in increasing blog traffic and ranking in search engine, and that's is the reason why you need to provide your readers with social sharing widget, if you really want to move your blog to the next level. This widget comprises of a search bar, RSS Feeds subscription link, follow on twitter link, follow on facebook link, sharing tools, and special hover effect, as you can see the effect on twitter link. I have made this widget so easy for you to implement it on your blog.

How To Add This Widget To Blogger 

STEP 1

• Login to blogger dashboard
• Click on "Design" > "Edit HTML" > Back up your template
• Mark/Tick "Expand Widget Templates"
• Use ctrl F to find ]]></b:skin> and paste the code below just above it.

/*  -------------REALCOMBIZ SOCIAL SHARING WIDGET-------------------- */
#search{width:300px; border:1px solid #E0DFD9;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBvAkeoPQwkFPYoTnLYUdkPGtNVINq7kdj2S7eRp17wZyy9qy6a-I7_KKwYnK2142S4we6H919v4uOkjQe9Kq2Sg6WDzg4oQnSYG1iXuyZ-0GqLQnDHmLbJP92KAsNP0-3pN0wtlvmMMY/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}

• Edit width:300px, to change the width of your search box
• Edit width:80%, to change the search input area.
• Click "SAVE TEMPLATE"

STEP 2

• Go to "Page Elements" > "Add a Gadget"
• Choose "HTML/JavaScript" from the list of the gadget that appear.
• Copy and paste the code below in the box.

<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/AVvXsEhHlINpSnJJ2i2_h4HXWKtAGGwGtsrPavWOYjizqPrhvXNUosHPOSLJiTMyr51X5TX8_9zZV_TI-kDPHRtF9keIXHwZnsE6YE1H858ur5daoenPYMSaUFjJo1uYS1dAG2Jz2eSiZsIUd5E/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;">
<img alt="rss feed" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHGSeF7eXuMi1BqpFLQ0aL_tXnLTR6jawzv0x8SRNDREsyb0dLb58kx_LZJ-77aSVVVVZwHJkaPOU4MxtIDp7c_J55NWtbPkhnbRn9St-eaC9HH_yr_SXhyphenhyphen8IgGtkRkwSVqDINoK7TibW6/s1600/social-connect-rss.png" /><a href="http://feedburner.google.com/fb/a/mailverify?uri=Realcombiz" target="_blank">Subscribe to our RSS Feeds!</a>
</div>

<div class='social-connect-widget' style='margin-bottom:10px;'>
<a href='http://twitter.com/realcombiz'><img alt='Follow Us on Twitter!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb308Rn7trNJAzTf0073cEDq9m3YZAg_Ioyihw-L2fiEHAFyTnMtfDeMDR2KdUSRH9eW1TxzQGH6aR1blKYSi7HGdZS3aTAubCOp4s8nlSt_1iLvvTqIdV7l9MebRy835UmCDnU08dqiSi/s1600/social-connect-twitter.png' title='Follow Us on Twitter!'/></a><a href='http://twitter.com/realcombiz'>Follow Us on Twitter!</a>
</div>

<div class='social-connect-widget' style='margin-bottom:10px;'>
<a href='http://facebook.com/realcombiz'><img alt='Be Our Fan!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYYwfnopZpGKesSTUQN-RTw2W28c9MUAOStosxLHbV-cXJiDTgXQHKgPcc-n6LAjxbCRfLH3GYCLeWzg6xmVOBydDVSTQHR1B9vyU4LOtR2P_uuP2_407gVda0s4cvU66NWYQXhVD_Uas8/s1600/social-connect-facebook.png' title='Be Our Fan'/></a><a href='http://facebook.com/realcombiz'>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/AVvXsEiN9gZaxpAwz_a-IXn0iycchPHri4-IZJ1MSaYyKJ80JVm4rrbi3pMMeU31oAxqH-4FrXVUdQAPKppXUg0-HP17wZG_vC5TZpNUQCbM4XLsJKaHrnGtwCxpgd_9VRkKvG5Jd632Uzz8ahs/s1600/twitter.png' width='32'/></a>
<a class='addthis_button_delicious'><img alt='Delicious' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAqyXNDQpCX-piDHhd804IGx71aqimn7Qy27GV09X6JAYEnNtFDt2p3D0EPS9-0CRWNZi98nNvdftyIr5N3QIBDrXdWmwn1JpNGrdMqoRusUIWzxzfcdZVs88a3dopab67v55PO4VrYwE/s1600/delicious.png' width='32'/></a>
<a class='addthis_button_facebook'><img alt='Facebook' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjITO16wnJOD1LnAy4JAtlBsH1yb02eAORaImppXQYLSBBsz0je8kAvBswfA2SY_khtDbbMoP_pG0gq0rAcJ8BeXONGoMHYaYtHb-MUgkTmdL55kxsUxSuxzcCPiUKEnUnleGVq-r07WtA/s1600/facebook.png' width='32'/></a>
<a class='addthis_button_digg'><img alt='Digg' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifZ6K5UFDGKiQt-6sSBtaLj5-XoIKHIufR0ACeAMN_jngOJkgIz2BLGOjnAvVe2MnL78k8kK15idCrGbd8hcQjoG7teh-QlgPXoqg22WnK9Y9U6iO97mbD7CIRfgUaFRJsTJkxmJrM6lk/s1600/digg.png' width='32'/></a>
<a class='addthis_button_stumbleupon'><img alt='Stumbleupon' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPAO8lDE_FpGsgIFHqW_5WpZkQVT6ZTINVrV-qLlIIShtU1_vLoJVmbjXsPvz4xMVBxT51LiY26un2jbz2oHKyf1Yqb0ZnwhmjdSygDGg818qS5_kapS8Ad5WE411wKZROsb1doCI_deQ/s1600/stumbleupon.png' width='32'/></a>
<a class='addthis_button_favorites'><img alt='Favorites' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT7L9VdHSqXO2XNmleznNyRhCYqpeQml-NKTtf3B6gf9Q8uKbMPe69qmBXPeaAwmS3Bq4gwy5HMj_FHZEf8mmOilb5okcqgLut-Nn88353xcE-uTYOFiWitRhvlURknOD4nJd3vVij5Vk/s1600/favorites.png' width='32'/></a>
<a class='addthis_button_more'><img alt='More' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMgIFam-vntQlhivbZHBaI8Onao2kp2QNLrDx3YYFWwFY8vg5YMMY7Gnl31dMZKXQ6jkJtcXGhh_H04EZ6vmem6fbdoJJXakQ9NXXSFp1ODPNOq3wN9hyphenhyphenofbDU8-Cw4wbMG4-fgobIU10/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;'/>

• Replace http://feedburner.google.com/fb/a/mailverify?uri=Realcombiz with your RSS Feeds url.
• Replace http://twitter.com/realcombiz with your twitter profile url
• Replace http://facebook.com/realcombiz with your facebook profile url
• Click "Save" and you are done.

If you have anything to say or ask, feel free to use the comment box, because we love reading comments, and don't forget to share this and subscribe to this blog.

Go Social:

Subscribe For Free Updates!

*Please confirm the email sent to your inbox after clicking "Sign Up!".

Follow @realcombiz