Add Social Media Share with Mouse Hover Effect for Blogger
From this widget you can share your blog with Social Media Networks! and this widget is an extracted code from a wordpress template.Follow these steps:-
- Go To Blogger > Design > Edit HTML
- Before edit HTML backup your template
- Search for ]]></b:skin> and paste the following code just above it,
......................................................................................................................................................................
#search{width:350px; border:1px solid #E0DFD9;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDf9M9_juImn_heDoK5G4CVi27QyJtFj67rqO2LYrbymIEv_iUUA4fJXUSK83i7v_njvsgsLFH3k3HCwJZcpGvNMpsOt5iylHGX1zBnWiRTFPS_nHWyI1lfUnYVjEtnXBuoNXXBZjHDDA/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}
......................................................................................................................................................................
......................................................................................................................................................................
- For Change width of search box edit width:350px
- For change width of search input area edit width:80%
Then Search for,
<div id='sidebar-wrapper'>
- Now Paste the following code just below it,
......................................................................................................................................................................
<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/AVvXsEj861L03aajSXHnWTEWQfc_2uVlwOlgJd9yS1N3zcyipikH-LPkF4oEG3subF8UjFb_v2vIpGorhlqmaJC9Z2iwD3WapL-YK53k2f6JXlPX212uVeBl-oE35FLrkZR89Nak_twO4WR74bo/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 + "feeds/posts/default"'><img alt='RSS Feed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTZQNUsuJtSPw4HxniBBwcQjXSclA6G8i1sVVMQ2m9dcRvd4AHPcnMMdlEeCaxX8wPY8enjCvFT3peJ7xXQiJi54F6YQddM8GQBTLr8RTcp-F-r9A6Jj-rnJdzKdHNbWJjpkjOCCXYTdYt/s1600/social-connect-rss.png' title='RSS Feed'/></a><a expr:href='data:blog.homepageUrl + "feeds/posts/default"'>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/AVvXsEiphSjjSsUhf8mxL1dFMH5M8q0F55N4TE-Lpwc2gNHatZ7OARXNhXSTCBoSqBdGlxpvVUfCcIQVKplzH9U1PhXq_oOBi5xGS0jOtZIgDYDWXCNsqgIPqJ4fjrtg-fisBxbY3GNh_fynAPa4/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/AVvXsEis3oxuZ-z6ocoFN-GS05tDt5p5uXtdfPuy-7Ov7Dfn8GPea7oNGnjTnY-tuR5s62oOESBy7rNLzADjXUeNLSI2Ctu8YvXomnWdK5bdPukDD0PPATQ-tOreauQ8unKJS_PIbj_1okiXgoJQ/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/AVvXsEgBBIy2tu6fxR9PrbxL727tDuBL16aptqo_0GF8FkI74LK3NfJuwZrZAKIVrTqsCNuRigWkjRQ7Fniu8q7xQmX2XXjn7FabhLmjcbgMGbMCt_Mgrge7zfhn-jvxb7-5ygjCy7JOCIiR8g0/s1600/twitter.png' width='32'/></a>
<a class='addthis_button_delicious'><img alt='Delicious' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI5rWdtMRChI5pt8eVUpQIovuQuR9usZiOxJy_oVXuQkhya1jmhivfF4_sX8n1d-9mZfCHAblSDQwFQpg93z7YxdXZ28HEOI-2hiAsrDEV_Rv7jZIWDaYc6M5St7dcHDZ7rIx1EdO5mKs/s1600/delicious.png' width='32'/></a>
<a class='addthis_button_facebook'><img alt='Facebook' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggbTNq4scfJmN47cbWl7oAn8r6G_wZ5PscHoQeFZAbBBKlEaNXvKEPp0zh_p5FtJFtIjIYJMVgHInm8f7POy5Uh1-TIOuul4crfnKxpvbQ2DVW6bsNrTGzJbS7xgzO8DvchJOgmBD7IZQ/s1600/facebook.png' width='32'/></a>
<a class='addthis_button_digg'><img alt='Digg' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGC6e5zuhLeOeP1L2uPYWhC9-3vrmuCpxoEncyWRS-LrZgUsRy4lyfXPBdeSeBk8teebgq8s2JMdrUXBou_y3FZL6oUE99Sj2-wmj0oaTo2Xq_f6gfPieK2TEs2_GnH30S6NlDCduH0ag/s1600/digg.png' width='32'/></a>
<a class='addthis_button_stumbleupon'><img alt='Stumbleupon' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcOreuENHxyVANWRbUHNstSI9LsasId7OWmYHCzRDGaa2RAaNT1Dr_42gIraZgMvUaSFX2IdwcMSsOQEAU0ar3WzBln4C9KrhpFbhD8rp2TimgKnpwGFQGIhISceYHHn1ikhWryiucZ4E/s1600/stumbleupon.png' width='32'/></a>
<a class='addthis_button_favorites'><img alt='Favorites' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTfGhb_pbUhz61kpyJqMvmdG8lwl117wHL5gIyMIRfigQtWePVanL_GL0EHi8mrBe3ZIa9VPw3OPvLQnKFwcNdfio_rcZCAJj-mr-2zdqh9lrP8CvBfD15hPvPoPq18NPDzIbzixhK9CI/s1600/favorites.png' width='32'/></a>
<a class='addthis_button_more'><img alt='More' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgI9OMlO25VPAcasLaJ57DTl9zjr3CnOOCLhVGwDnDHkitu4bJfKD_naeHlPG1GnJuTAp-sXlURsNOn5v4e3JBzmDNYz3xLNMYo_PnNpKVScpUHZVRcFx6thdovZUGOYERdmYRbFL-tqZg/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;'/>
......................................................................................................................................................................
......................................................................................................................................................................
- Go To Blogger > Design > Edit HTML
- Before edit HTML backup your template.
- Search for ]]></b:skin> and paste the following code just above it,
......................................................................................................................................................................
#search{width:350px; border:1px solid #E0DFD9;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDf9M9_juImn_heDoK5G4CVi27QyJtFj67rqO2LYrbymIEv_iUUA4fJXUSK83i7v_njvsgsLFH3k3HCwJZcpGvNMpsOt5iylHGX1zBnWiRTFPS_nHWyI1lfUnYVjEtnXBuoNXXBZjHDDA/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}
......................................................................................................................................................................
......................................................................................................................................................................
- Replace http://twitter.com/USERNAME with your twitter profile link
- Replace http://facebook.com/USERNAME with your Facebook Profile link
Don't Forget to Drop your comment!!!!!
Previous Entries
0 comments for this post
Leave a reply