Social Media Subscribing Widget For Blogger with Hover Effect

Posted by محمد On Friday, August 3, 2012 0 comments
social media subscribing
Hi blogger’s In this post I will give you a tutorial about adding Social Media subscribing Widget With Search Bar and Cool Hover Effect to Blogger/Blogspot. Social sharing is a most important thing to all blogger. It increases traffic on your blog, Now lets see how to add  this Widget to your blog.

Follow These Steps to add Thsi Widget To Your Blogger/blogspot :
  • Go To Blogger > Design > Edit HTML
  • Backup your template
  • Search for ]]></b:skin>  and paste the following code just above it.
/*  -------------SOCIAL SHARE WIDGET-------------------- */
#search{width:350px; border:1px solid #E0DFD9;background:urlundefinedhttp://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: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}
>> To Change width of search box edit width:350px
>> To change width of search input area edit width:80%
  • Go to Blogger Dashboard > Layout
  • Add a Gadget
  • Select HTML/Javascript and copy and paste the code below :
<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/USERNAME'><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/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='http://1.bp.blogspot.com/-3tPdbv6JNYA/TZ52SSUbiVI/AAAAAAAAEII/tzPhCV1UIYU/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;'/>
 >> Change USERNAME with your Twitter username
>> Change USERNAME with your Facebook page username
  • Save Your Template and You Are Done !

0 comments:

Post a Comment

Facebook Page

Followers