Social Share/Subscribe Widget With Search Box For Blogger

Thursday 14 June 2012

I am hardly writing this week due to my exams, but I still want to share some blogger widgets with you.Now I am sharing this simple and professional subscribe widget with RSS, Facebook Page, Twitter button and a Cute Search Box. Oh ! I forgot, this widget also include a Google Plus One Button to increase your +1's.







Adding Subscribe Widget To Blogger


1. Go to Blogger > Template > Edit HTML.
2. Check the box of expand widget template.
3. Now search for ]]</b:skin>, and just before this, paste the following code:

/*  -------------ibloggrmaster.ORG Social Share Widget-------------------- */
#search{width:300px; margin-left: 10px; border:1px solid #E0DFD9;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihhyMXKYKPbMn28RdUym3thV3G02RLdtU-1IK9w22I47Ld5cVXwqepdUDwGOK3LOfGBAF3jh9HMAtBl2TSkEIROHaMvFo6DG0LnSIzDSWvbRQ1-wPPFhhWNCa_1IBZLxXZF00yZouJKvc/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-top:1px solid #E7E6DE;border-bottom:1px solid #E7E6DE;padding:10px}
.social-connect-widget:hover{border-top:1px solid #CBCBC2;border-bottom: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}

4. Now go to Blogger > Layout.
5. Click Add a Gadget and select HTML / Javascript.
6. Paste the following code in 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/AVvXsEjzfQiC-mI1W9Z3VreMdBQhxy2WYoSG0R0wGWJBoNvhE7jP5Q6qEfFZ4aUJgxPBXW5FP76uODQuU3skU2yPZTkT4EWWZLdlf8sV79hk7vvUXzJyXXiwt_lfUf8QVsBDgICur1LVed4En4U/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 href='http://feeds.feedburner.com/ibloggrmaster'><img alt='RSS Feed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW3G1kAFrN5cT7yWSD_qjaPXZtp-eZUH5ho0RV7uBiarbbeTFTrDRoamzqtJiAPacX9oOb2E9JYlXe7ItsqwFonweFuA9XQpFKE-mqr8BCJCbfrir2Pzl4L_2Vk98eyO1jgiBMmi-q0DUC/s1600/social-connect-rss.png' title='RSS Feed'/></a> <a href='http://twitter.com/cutezwinnie'><img alt='Follow Us on Twitter!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjShsUk30XpFCJ6mFi3OMBK4aELY256xDG_RET4x3zCCTYg640P3Ry1YUvET80LMzbwz4tiioZJakOfs0iM8L1Q71jRhDcmsCgHDPkW3zjCduRUyRiqyiKOM0i4Jd2ZK2_NHWf33cM1yZw8/s1600/social-connect-twitter.png' title='Follow Us on Twitter!'/></a> <a href='http://facebook.com/ibloggrmaster'><img alt='Be Our Fan!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP58NrXx0SajYxlnZYth0glAbhjhWroxXxMw_Xzj-WIke7_WSJ1bdnnXOcsU3_4NZuhqkoAr9eGx6D6tBJvU2O5edhPPBP8R2vww6v4EhwS5N2iikfaKqffexVZTKB9rQZczlo07WBLmGv/s1600/social-connect-facebook.png' title='Be Our Fan'/></a> <g:plusone/></div> 


7. Replace the Red code with your feedburner ID, Blue Code with your facebook fan page url and green code with your twitter username.

  • To increase or decrease the width of search box, just increase or decrease the value of Yellow Code in step 3.

8. Save the widget and the job is completed.

Your Feedback!

I am hardly waiting for your feedback about this awesome widget. I also want some reviews about out next widget.


No comments:

Post a Comment

Please Do not Spam.Your Comment is Value Able for our Team.

Regards,

iBloggr Master Modrator