Contact Us:

If You Have Any Problem, Wanna Help, Wanna Write Guest Post, Find Any Error Or Want To Give Us Feedback, Just Feel Free To Contact Us. We Will Reply You Soon.

Name: *


Email: *

Message: *


Skillblogger

Download our app on Google Play Store

Sunday, April 7, 2013

Add an Elegant Widget Bellow Posts To Get More Subscribers

Elegant-Subscribtion-Widget-Bellow-Posts-increase-Subscribers
Our lesson today is about an elegant widget, that increase the number of your subscribers on facebook, twitter, Google+, and RSS FEED, This Subscription widget help your readers to stay in touch with all what you providing to them, it so cute and attractive, it also contains subscription form with stylish social network buttons in addition to Facebook and Twitter Buttons as Like and Follow, you can watch a preview on the picture :-3
 How to install it on blogger

You can watch a quick demo right in the bottom of this post.

Now let's explain how to install it on your blog:
  • Blogger Dashboard  » Template.
  • Do not forget to make a backup for your template.
  • Press Edit HTML  and .
  • Now find the code bellow:
<data:post.body/>

After that copy the code bellow and past it just below/after  <data:post.body/>

<b:if cond='data:blog.pageType == "item"'>
<style type="text/css">
form.feedburner {
margin: 20px 0 0;
display: block;
clear: both;
}

.helperbloggerstyle {
background: url(http://2.bp.blogspot.com/-YHHzZ6_RLMU/T-1kl7RxNEI/AAAAAAAACD8/-0FyeWj00vo/s1600/helperblogger.com-email-icon.png) no-repeat scroll 4px center transparent;
padding: 7px 15px 7px 35px;
color: #666;
font-weight: bold;
text-decoration: none;
border: 1px solid #D3D3D3;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
}

.helperbloggersubmit {
color: #666;
font-weight: bold;
text-decoration: none;
padding: 6px 15px;
border: 1px solid #D3D3D3;
cursor: pointer;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-goog-ms-border-radius: 4px;
border-radius: 4px;
background: #fbfbfb;
background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;
#FBFBFB&#39;, endColorstr=&#39;#F4F4F4&#39;,GradientType=0 );
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}

#helperblogger-widget {
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
-goog-ms-border-radius: 10px 10px 10px 10px;
border-radius: 10px;
background: none repeat scroll 0 0 transparent;
border: 1px solid #D3D3D3;
padding: 8px;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
width: 480px;
-webkit-box-shadow: inset 0px 0px 8px rgba(50, 50, 50, 0.75);
-moz-box-shadow: inset 0px 0px 8px rgba(50, 50, 50, 0.75);
box-shadow: inset 0px 0px 8px rgba(50, 50, 50, 0.75);
-webkit-box-shadow: inset 0px 5px 0px 0px #D8D8D;
}

#helperblogger-widget:hover {
background: none repeat scroll 0 0 #FFF;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
}

#helperblogger-widget td {
padding: 3px 0;
}
</style>

<center><br/><div id='helperblogger-widget'>
<div id='emailwidget'>
<table style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;' width='100%'>
<tbody>
<tr style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'>
<td align='left' style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'>
<p style='color:#666; font-weight: bold; font-size: 18px; margin:0px 0px 5px 0px;font-family:georgia;font-style:italic; '>
Get free daily email updates!
</p>
<form action='http://feedburner.google.com/fb/a/mailverify' class='feedburner' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=ProBWidgets&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='ProBWidgets'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='helperbloggerstyle' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email…&quot;;}' onfocus='if (this.value == &quot;Enter your email…&quot;) {this.value = &quot;&quot;}' type='text' value='Enter your email…'/>
<input alt='' class='helperbloggersubmit' title='' type='submit' value='Submit'/>
</form>
</td>
<td style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'>
<p style='color:#666; font-weight: bold; font-size: 14px; margin:0px 0px 5px 0px;font-family: georgia; '>
Follow us!
</p>
<a href='http://feeds.feedburner.com/ProBWidgets' rel='nofollow' target='_blank' title='Suscribe to RSS Feed'><img src='http://1.bp.blogspot.com/-MCuPoLmu9vs/T-1koEDzO6I/AAAAAAAACEU/01CNMKp86_k/s1600/helperblogger.com-rss.png'/></a>
<a href='http://twitter.com/mywaytoblogging' rel='nofollow' target='_blank' title='Follow us on Twitter'><img src='http://2.bp.blogspot.com/-7LTPdi6MD_w/T-1ko16lqtI/AAAAAAAACEg/6ayFWM4zSlM/s1600/helperblogger.com-twitter.png'/></a>
<a href='http://www.facebook.com/pro.widgets' rel='nofollow' target='_blank' title='Follow us on Facebook'><img src='http://4.bp.blogspot.com/-M8jY5Qg_58M/T-1kmmQ2Q-I/AAAAAAAACEA/m7eJvpsH09c/s1600/helperblogger.com-fb.png'/></a>
<a href='https://plus.google.com/112474019739962841696/' rel='nofollow' target='_blank' title='Follow us on Google+'><img src='http://2.bp.blogspot.com/-CnhgXrrD_8A/T-1knYqgPSI/AAAAAAAACEI/8SL6MLH5sZw/s1600/helperblogger.com-gplus.png'/></a>
</td>
</tr>
</tbody>
</table>
<div align='right'>
<span style='font-style: italic; font-size: 8px; color: solid #ffffff;'><a href='http://myway2blogging.blogspot.com/2012/07/add-elegant-widget-bellow-posts-to-get.html' style='text-decoration: none;' target='_blank'><font color='#000' decoration='none'>[Get this widget]</font></a></span>
</div>
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fpro.widgets&amp;send=false&amp;layout=standard&amp;width=450&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font=verdana&amp;height=30" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:30px;" allowtransparency="true">
</iframe>
<a class='twitter-follow-button' href='http://twitter.com/mywaytoblogging' rel='nofollow'></a>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script>
</div>
</div>
</center>
</b:if>

Use ctrl + F to find the following words and modify it with your own :
  • Change all (3) prowidgets with your Feedburner Username.
  • Change all (2) pro.widgets with your Facebook Fan Page Username.
  • Change all (2) mywaytoblogging with your Twitter Followers Page Username.
  • Change 112474019739962841696 with your Google+ Profile ID.
In the latter, save the template and enter directly into one of your articles to inspect the widget at the bottom of the post, but if you encounter a problem in the installation then do not hesitate to ask your question in the comments and will be answered as soon as possible.
Like the Post? Share with your Friends:-

Team SB
Posted By: Team SB
Comment Using

Comment Policy : We’re enthusiastic to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

3 comments :

  1. hmm nice..
    TechBlogGuide.Blogspot.Com

    ReplyDelete
    Replies
    1. I like the subscription widget that you add on your blog Asad, could you explain how to add it?

      Delete
  2. Me presenta Errores, dice:

    No se pudo cargar la vista previa de la plantilla: Se ha producido un error al analizar el XML, línea 1606, columna 8: Attribute name "if" associated with an element type "B:" must be followed by the ' = ' character.


    Espero soluciones, Gracias...




    <style typ

    ReplyDelete

Download our app on Google Play Store

Contact Us

Name

Email *

Message *

 
Copyright © . Skill Blogger . All Rights Reserved.
Designed by :- Way2themes