Add Social Media Share with Mouse Hover Effect for Blogger

By Gamesnet Sunday, September 9, 2012 0 comments
                             
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, 
......................................................................................................................................................................
......................................................................................................................................................................
    /*  -------------SBT SOCIAL SHARE WIDGET-------------------- */
    #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='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/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 + &quot;feeds/posts/default&quot;'><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 + &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/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, 
      ......................................................................................................................................................................
      ......................................................................................................................................................................
        /*  -------------SBT SOCIAL SHARE WIDGET-------------------- */
        #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
              6.   Save your template and you are done!

        Don't Forget to Drop your comment!!!!!
        Sharing is sexy

        Related posts

        0 comments for this post

        Leave a reply