Social Share Widget
How To Add Beautiful Social Share Widget With Mouse Hover Efeect In Blog.MTF presenting you an beautiful socail with Rss subscription widget for your Blog visitors. In this widget i have carefully design you will get social network connect and RSS subscription with an beautiful search Box.
 I thinks so if visitors are come your blog they can subscribe very easily. The widget main best feature is added add this button this button will help you to your visiros to share 400+ Social Media Networks!. Our team members very clearly design the widget. I have already tested the widget if you are interested to see this then test in your Blog.

  1. First login to your blogger dashboard.
  2. Go to Blogger design-Edit HTML
  3. Download or backup your template.
  4. Search for this by using (Ctrl + F)


]]></b:skin>

paste the following code just above it.


/*  -------------MTF SOCIAL SHARE WIDGET-------------------- */
#search{width:400px; border:1px solid #E0DFD9;background:url(http://2.bp.blogspot.com/-L-6BIGrXfyA/TeDn95a4GxI/AAAAAAAAHLg/z1th8GgWvko/s1600/search-bg.png) left top repeat-x;height:32px;padding:0;text-align:left;overflow:hidden}
#search #s{width:90%; 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}

If you are interested to changing the width of the widget then edit: width:400px
If you are interested to changing the search input area then edit: width:90%

Then search;


<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='http://4.bp.blogspot.com/-4xLRhLRVVkI/TeDn9fTgT3I/AAAAAAAAHLY/5DuGTiOVtj8/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='http://3.bp.blogspot.com/-0kKKFqj_U2U/TZ52Sq7wwfI/AAAAAAAAEIQ/mrmCuT1KzjI/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/mytopfreeware'><img alt='Follow Us on Twitter!' src='http://4.bp.blogspot.com/-vhFL0XMMYLg/TZ52S1xMdpI/AAAAAAAAEIY/uzxm685MciA/s1600/social-connect-twitter.png' title='Follow Us on Twitter!'/></a><a href='http://twitter.com/mytopfreeware'>Follow Us on Twitter!</a>
</div>

<div class='social-connect-widget' style='margin-bottom:10px;'>
<a href='http://facebook.com/mytopfreeware'><img alt='Be Our Fan!' src='http://1.bp.blogspot.com/-3tPdbv6JNYA/TZ52SSUbiVI/AAAAAAAAEII/tzPhCV1UIYU/s1600/social-connect-facebook.png' title='Be Our Fan'/></a><a href='http://facebook.com/mytopfreeware'>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='http://4.bp.blogspot.com/--haasmhP25E/TX0BIdW3PYI/AAAAAAAABec/ll0OKqU0z4M/s1600/twitter.png' width='32'/></a>
<a class='addthis_button_delicious'><img alt='Delicious' height='32' src='http://4.bp.blogspot.com/-yL-sR48gGug/TX0A8-6p88I/AAAAAAAABds/_CXWKvVi8LU/s1600/delicious.png' width='32'/></a>
<a class='addthis_button_facebook'><img alt='Facebook' height='32' src='http://4.bp.blogspot.com/-R8SGNJPGg68/TX0A9QHboaI/AAAAAAAABd8/OkHcJttzFr0/s1600/facebook.png' width='32'/></a>
<a class='addthis_button_digg'><img alt='Digg' height='32' src='http://4.bp.blogspot.com/-X9vrqy4kNI4/TX0A9PtQIcI/AAAAAAAABd0/WahU3JI8r3o/s1600/digg.png' width='32'/></a>
<a class='addthis_button_stumbleupon'><img alt='Stumbleupon' height='32' src='http://2.bp.blogspot.com/-iLJQkdXwnpo/TX0BIZ59J_I/AAAAAAAABeU/t367mp0EWJM/s1600/stumbleupon.png' width='32'/></a>
<a class='addthis_button_favorites'><img alt='Favorites' height='32' src='http://1.bp.blogspot.com/-oam0L5GcIQo/TX0A9lXvQwI/AAAAAAAABeE/EPfnCictAv0/s1600/favorites.png' width='32'/></a>
<a class='addthis_button_more'><img alt='More' height='32' src='http://1.bp.blogspot.com/-duuV-meHLMg/TX0BILhZk3I/AAAAAAAABeM/ymXO0WYc80g/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://twitter.com/mytopfreeware with your twitter profile link.
Replace http://facebook.com/mytopfreeware with your Facebook Profile link.

Save your template.

Visit your blog and enjoy with new widget.

0 comments:

Post a Comment