Add A Social Subscription Box With Search Bar For Blogger

Posted by محمد On Thursday, August 2, 2012 0 comments
social-subscribe-widget-with-search-bar-for-blogger
many blogger adds their social networking profile links in their blogs Because The Social networks plays an important role in increasing traffic on there blogs, Today i will Show you How to add A social subscription box with Search bar to your  blogger very easily just using CSS and HTML codes.It contains your Feedburner Link,Twitter Profile Link,Facebook Page Link,Google + and search bar. Installation of this widget extremely easy you just have to copy and paste the codes.


follow simple steps below :
  • Go to Blogger Dashboard > Design > Edit HTML.
  • Backup/Download your template.
  • check expand widget templates.
  • Now search for ]]></b:skin>
  • Add below code just above ]]></b:skin>
/*  ---------Social Media Widget----------- */
#search {
border: 1px solid
#DDD;
background:
white url(http://2.bp.blogspot.com/-j79bNDSjK9g/UBs2KaewYbI/AAAAAAAAAmg/XXl-XMvRDkw/s1600/search.png) 99% 50% no-repeat;
text-align: left;
padding: 6px 24px 6px 6px;
height:15px;
mouse:pointer:
}
#search #s {
background: none;
color:
#666;
border: 0;
width: 100%;
padding: 0;
margin: 0;
outline: none;
}
.social-connect-widget
{background:#F5F4EF;
border:1px solid #E7E6DE;
padding:10px;
border-radius:5px;
-moz-border-radius:5px;
}
.social-connect-widget:hover{
border:1px solid #CBCBC2;
background:#FFF
}
.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;
height:32px;
width:32;
}
  • Now go to Page layout
  • Add a Gadget > HTML/JavaScript.
  • Paste below code.
<div id="search" title="Type and hit enter">
<form action="/search" id="searchform" method="get">
<input id="s" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Search&quot;;}" onfocus="if (this.value == &quot;Search&quot;) {this.value = &quot;&quot;;}" type="text" value="Search" />
</form>
</div>
<br/>
<br/><div class="social-connect-widget" style="margin-top:0px;margin-bottom:10px;">
<img alt="rss feed" src="http://4.bp.blogspot.com/-in3bIjcf624/UBs3e1lQppI/AAAAAAAAAnA/uaBRscvBrb4/s1600/rss-black.png" /><a href="http://feeds.feedburner.com/username" target="_blank">Subscribe to our RSS Feeds!</a>
</div>
<div class="social-connect-widget" style="margin-bottom:10px;">
<img alt="follow us on twitter!" src="http://4.bp.blogspot.com/-NDX0TbMwd7g/UBs3VpvI88I/AAAAAAAAAmo/MbCJDWM6yl0/s1600/twitter-black.png" title="follow us on twitter!" /><a href="http://twitter.com/username" target="_blank">Follow Me on Twitter!</a>
</div>
<div class="social-connect-widget" style="margin-bottom:10px;">
<img alt="be our fan!" src="http://2.bp.blogspot.com/-3ZYW6B4vUAE/UBs3ZADVV_I/AAAAAAAAAmw/Yzt_eCLDgxM/s1600/facebook.png title=&#39;Be Our Fan" /><a href="http://www.facebook.com/username" target="_blank">Follow Me on Facebook!</a>
</div>
<div class="social-connect-widget" style="margin-top:0px;margin-bottom:10px;">
<img alt="google plus" src="http://1.bp.blogspot.com/-Nr-fagC45_c/UBs3eCbe5II/AAAAAAAAAm4/WDFqxE_DsoE/s1600/g-plus-logo.png" /><a href="https://plus.google.com/username" target="_blank">Add Me on Google+!</a>
</div>
Change this :
  1. useraname : your feedburner id
  2. username : your twitter username
  3. username : your facebook fan page id
  4. username : your google plus id
  • Click Save and You Are Done :)

0 comments:

Post a Comment

Facebook Page

Followers