Blogger tips | Blogger Tricks | Blogger Templates | SEO | Adsense Tips

In this tutorial , im going to to explain How
to add Rss feed subscription box below your
ever post.Rss helps you to get more traffic
to your blog.Most of website owners use this
Every post updates sending to rss subscribers
email. This is easy to add, follow these steps.
Check my earlier Rss subscribe box here

Demo

1. Log in to blogger account and Click drop down.

2. Now select "Template" Like Below.

3. Now you can see Live on blog, Click EDIT HTML Button"

4. Now click Proceed button.

5. Put checked marked in Expand Widget Templates

6. Find this tag by using Ctrl+F </head>

7. Paste below code Before </head> tag

<style type='text/css'>
.sub-box{
width: 600px;
background: #fff;
padding: 2px 5px 7px 7px;
border: 2px solid #000;
border-radius: 15px;
}
.sub-box:hover{
border:2px solid #511111;
}
.followlinks h1{
font-family:Cabin Condensed;
font-weight: bold;
color: #000;
padding: 0px 0px 2px 40px;;
font-size:17px;
}
.followlinks ul{
font-family:Cabin Condensed;
font-weight: bold;}

.followlinks ul li{
float:left;
width:90px;
padding-left:40px;
margin:0 0 0 5px !important;
line-height:35px !important;}

.followlinks ul li a{
font-size:20px !important;
text-decoration:none;
font-weight:normal;}

.followlinks ul li.otrss{
background:url(http://3.bp.blogspot.com/-CMD8tTcyanA/UGEoXF32zpI/AAAAAAAAEQM/E1OgMW6SZvc/s1600/bloggertrix-rss-icon.png) no-repeat scroll left center transparent;
}
.followlinks ul li.otgoogleplus{
background:url(http://2.bp.blogspot.com/-lhm8DqIzDpI/UGEoWe4xv9I/AAAAAAAAEQA/a850kufuzxw/s1600/bloggertrix-google-icon.png) no-repeat scroll left center transparent;
}
.followlinks ul li.ottwitter{
background:url(http://1.bp.blogspot.com/-cDAZzZi29P0/UGEoYMJQYrI/AAAAAAAAEQQ/otQiWtPk-mc/s1600/bloggertrix-twitter-icon.png) no-repeat scroll left center transparent;
}
.followlinks ul li.otfacebook{
background:url(http://1.bp.blogspot.com/-8FUcdaI0SwQ/UGEoVTiWRWI/AAAAAAAAEP8/NN3_sprT6Xo/s1600/bloggertrix-facebook-icon.png) no-repeat scroll left center transparent;
}
form.emailform{
margin:5px 0 0;
display:block;
clear:both;
}
.emailtext{
background:url(http://4.bp.blogspot.com/-DMrSxx8BJqo/TteQx1ijO2I/AAAAAAAABF0/Qd1ROb_8oeA/s1600/ot-mail.png) no-repeat scroll 4px center transparent;
padding:7px 15px 7px 35px;
color:#444;
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;
width: 550px;
}
.emailtext:focus{
outline: none;
}
.sub-button{
color:#444;
font-weight:bold;
text-decoration:none;
padding:6px 10px;
border:1px solid #D3D3D3;
cursor: pointer;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-goog-ms-border-radius: 5px;
border-radius: 5px;
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%);
}
.sub-button:hover{
background: -moz-linear-gradient(top, #e7e7e7 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e7e7e7), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top, #e7e7e7 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #e7e7e7 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #e7e7e7 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#e7e7e7&#39;, endColorstr=&#39;#F4F4F4&#39;,GradientType=0 );
    background: linear-gradient(top, #e7e7e7 0%,#f4f4f4 100%);

}</style>
<script type='text/javascript'>
  WebFontConfig = {
    google: { families: [ &#39;Cabin+Condensed::latin&#39; ] }
  };
  (function() {
    var wf = document.createElement(&#39;script&#39;);
    wf.src = (&#39;https:&#39; == document.location.protocol ? &#39;https&#39; : &#39;http&#39;) +
      &#39;://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js&#39;;
    wf.type = &#39;text/javascript&#39;;
    wf.async = &#39;true&#39;;
    var s = document.getElementsByTagName(&#39;script&#39;)[0];
    s.parentNode.insertBefore(wf, s);
  })(); </script>

8. again Find this tag by using Ctrl+F <data:post.body/>

9. Paste below code after <data:post.body/> tag

<div class='sub-box'>
<div class='followlinks'>
<h1>Get Free Email Updates and Like us on your Social networking site</h1>
<ul>
<li class='otrss'><a href='http://feeds.feedburner.com/Bloggertrix' target='_blank'>RSS</a></li>
<li class='otgoogleplus'><a href='http://plus.google.com/107955298793879607964' target='_blank'>Google+</a></li>
<li class='ottwitter'><a href='http://twitter.com/bloggertrix' target='_blank'>Twitter</a></li>
<li class='otfacebook'><a href='https://www.facebook.com/bloggertrix' target='_blank'>Facebook</a></li>
</ul>
</div>
<br/>
<div style='text-align: left; display: inline-block;'>
<form action='http://feedburner.google.com/fb/a/mailverify' class='emailform' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=Everfreetech&apos;,
 &apos;popupwindow&apos;, 
&apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>

<input name='uri' type='hidden' value='blogggertrix'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='emailtext' 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='sub-button' title='' type='submit' value='SignUp'/>
</form></div></div>

Replace selected names with your uersnames

10. Now save your template.

You are done...

Social bookmarking is really important in
blogger.Between social site,Facebook, Google+
and twitter are more popular.because we are
creating fan page and follower for our blog.
Actually, its the one of way to get traffic.
Today im going to explain,how to add scrolling
recommendation box for your blog.check
demo link below. you will get it when
scrolling to bottom.

Demo

1. Log in to blogger account and Click drop down.

2. Now select "Template" Like Below.

3. Now you can see Live on blog, Click EDIT HTML Button"

4. Now click Proceed button.

5.Find this code by using Ctrl+F ]]></b:skin>

6. Paste below code Before ]]></b:skin> code

#socialslide{background:#f3f3f3;border-radius:9px;
-moz-border-radius:9px;-webkit-border-radius:9px;-moz-box-shadow:inset 0 0 3px #333;
-webkit-box-shadow:inset 0 0 3px #333;box-shadow:inner 0 0 3px #333;
padding:12px 14px 12px 14px;width:300px;position:fixed;bottom:13px;
right:2px;display:none;z-index:3;height:65px;}

7. Go to blogger and click drop-down like 1st step and select Layout

8. Click Add Gadget and select 'HTML/Javascript"

9. Paste below code.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script type="text/javascript">$(window).scroll(function(){if($(document).scrollTop()>=$(document).height()/4)$("#socialslide").show("slow");else $("#socialslide").hide("slow");});function closesocialslide(){$('#msocialslide').remove();$.ajax({type:"POST",url:"/facebookpage.php"});}</script>
<div style="display: none;" id="socialslide">
<a style="position:absolute;top:14px;right:10px;color:#555;font-size:10px;font-weight:bold;" href="javascript:void(0);" onclick="return closesocialslide();">(X)</a>
<span style="font-family: Tekton Pro; font-size: 20px; margin: 10px 0; text-shadow: 1px 1px 0 #FFFFFF;">Don't forget to join our community!</span><br />
<div style="float:left; margin:15px;"><g:plusone annotation="none"></g:plusone></div>

<div style="float:left; margin:15px;"><iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fbloggertrix&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowtransparency="true"></iframe></div>

<div style="float:left; margin:15px;"><a href="https://twitter.com/bloggertrix" class="twitter-follow-button" data-show-count="false" data-size="large" data-show-screen-name="false">Follow @hannygames</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></div>
</div>

<div class='clear'></div>

10. Now save your template. You are done.

How it works?

Add Facebook LikeBox inside Jquery Popup in Blogger

Want the widget to appear Repeatedly

Freind Sites

Recent Posts

Labels

All Labels

Blog Statistic

► All veiw page

Popular Posts