Stylish Social media Icons With Search Box Widget For Blogger

Views:

Friends, This is a simple and effective widget for your blogger. This Social media sharing widget make with a simple and advanced search box. It make a good feeling to your blogger when peoples visit your blog. It has a simple mouse hover effect. It can add into your blog simply. Follow this post.

Go to your Blogger

Select Template option

Click on Edit HTML

Tick on Expand Widget option

Find (Ctrl+F) ]]></b:skin> tag

Copy below code and paste it above ]]></b:skin> tag

/* -------------MASTER HACKS SOCIAL SHARING WIDGET-------------------- */
#search{width:300px; border:1px solid #E0DFD9;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizIAo2pVbQL43EXkZDhZhj020N9yyQiegw5VWQCpcGYmOorUq1eDs_6yEBaw9FN3T3DaxLs9Oh0K-Dn2JC3V84Bvj3eKr5DAXuQE0yiBWsqm0k9h0vodaq1nwK0jw7SxWpT6USXSioqQk/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.

Save your Template.

Then go to Layout option

Click on Add a Gadget

Select HTML/JavaScript from the given list

Copy and Paste the following code in HTML/Javascript 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 == "") {this.value = "Search here...";}' onfocus='if (this.value == "Search here...") {this.value = ""}' type='text' value='Search here...'/>
        <input class='search-image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIuTCEeQ_LvrGXs6h2OA3TxSou-EY_7dAe99F_-wSxmdiHEQCyV0m-hWkevrSMA_aNfCzYqb46CH8THbZYQBB_eq-tRDw1OJyonW5eaqQLYYK-rrD_XmfdnWWn6nuI0sy2eU1vXkSscwk/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/AVvXsEixX8-vW0oXJMThQ6Qatdd9oQa5jN9CLlthGFlBPPcEpbZAcPOOmBRDrUFYdbJA9hZnSeoXCOPGLReKUYXm-IfXql_-YiFt1qelSjMLcsbFUPjG7Ui25-_Rk80Ups61sN1H_o23RjcT5j60/s1600/social-connect-rss.png" /><a href="http://feedburner.google.com/fb/a/mailverify?uri=YOUR-RSS-FEED-ID-HERE " 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/AVvXsEhjhF9WJtVMYeg9EgSd_2zZ93WYk7km-6YhD2i0kFfI5V7nQ5z03lckd6Gh-5Hb2La5HmovPQuPXVKHBg_7l1h93_JNULV1sMb0hO6d991fU6l_sr3l351AAzFB6eqDQMVcRjZR1aGW7MtW/s1600/social-connect-twitter.png' title='Follow Us on Twitter!'/></a><a href='http://twitter.com/YOUR-TWITTER-USERNAME-HERE '>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/AVvXsEi1iW11DP8f8ARNCJ6dtojRrVW6TF-JxhkuM-a-JYhyphenhyphenhKDM6Ioktb_QT30IlvG1Dl0e68MlaX7zqmhVJoajHmPVUg0julfzLgkQgc2-H_IPGaGSqkCN0BL7vc6uBg_VVIuK_q3SavK5tMYu/s1600/social-connect-facebook.png' title='Be Our Fan'/></a><a href=' YOUR-FACEBOOK-PAGE-LINK-HERE '>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/AVvXsEgU5VGX-UkOkNDEwKuX_PrFLwi_JAVfPrMnh1WHfdo_f6R12cpZKDu5bH1UIqmK9PovllyGSGvEmGaIH3oDIQSW9SxB-TachDtEyDYpqw79Tg44IBDLdgtTiBdoGs0-m0K5UBuuXLTGRVQ/s1600/twitter.png' width='32'/></a>
<a class='addthis_button_delicious'><img alt='Delicious' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5XuGLZnEjC5zuGSVe4T6MbgZyksFphwm15S2VPEqhyphenhyphen-MAZ4oOy435C9GQ7WaHlOM0dfBQwZgJXJg6OdVJDKdqGK5DEpmt5tUFnIa-pBiPsR8GtqjjWnl0T3aBriiCijpvjG_Kj4hsdb4/s1600/delicious.png' width='32'/></a>
<a class='addthis_button_facebook'><img alt='Facebook' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbjWoIEyqx7OMk_SkTa9vxX-bWboQBW9rLTMttcaVduZuy4a59DGwSXp4WCZndwNt-Dnpm0CnE_zol7cw86ddis0JbfW3m_GyeRXrRSdJWgqBBhXGsMWtjEyPqdeyGRiln60OVErDEYSw/s1600/facebook.png' width='32'/></a>
<a class='addthis_button_digg'><img alt='Digg' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-4BQNUUINpZRB3c6bZu1Joz_qbTEEB3y2kCquLiMVI0hq0KJislUk7aSsA55LjXfg7-KpIc4XIFyvPtDzAGww_Ok36SRGdJrHidwEnTDlBEt3Zhhv1c713p8KNs_Bae7TZJWO65YVDD0/s1600/digg.png' width='32'/></a>
<a class='addthis_button_stumbleupon'><img alt='Stumbleupon' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQd69IJdVvYRX7_4EGYddmGjFQdDmAtcEFfl1svNsalw0gKqL5rXDY-QhHFkP5g5cd5PSdRt4u0i2TW9OJMQn8XRi4zW1gxqrnenrcJenmvP8s3ZeXA-X7gpB_Wc1p38dyfKn0eh-j7NM/s1600/stumbleupon.png' width='32'/></a>
<a class='addthis_button_favorites'><img alt='Favorites' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY7aSeDuKE3GKJhizKZ-zP7bmanxGAjWfTwRsVxaMiRCpjbEZXPaPwlnNK2ezrj3oJ88vRR491jSIhL4rkeer9VsqLfr27VxK4MCfhUVuBVSe2S4aTXAoTc7IRCBnz1UtabeFUFYNuku0/s1600/favorites.png' width='32'/></a>
<a class='addthis_button_more'><img alt='More' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHKDSacN2wu2eeVtEXfkPYDiIqQW0kyC2L5OnQ6mRL7sjluKFjM-R62k730QtXh1oSQeBBoz_1mFerv9qgJqCFkan5Ww396HgGvNgR9-N5QeXB7lyRopZk4_-VEryJxNJMI7JJfE6Dtyw/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;'/>