Add Smooth and Animated "Scroll to Top" Button on Blogger in 1 Step

Providing easy access to visitors is essential steps to make them in contact with your Site as well as with content, In this post I am going to give your two easy and simple steps to let your visitors come back form bottom of page to Top in attractive manner. This thing done by just adding "Scroll To Top" button to your blog.
In this tutorial we talk about to types of Scripting for Blogger only. You might be hear about JQuery, it is special Scripting For Featured web applications designs. We will user this to all this feature. Let me tell you the processes.

By using Blogger CSS..

Live DAMO you can see on this page only:  At the Left Side of this page
>>>> Use the Following Code and put it Just Before the </body> Tag on your Blogger Templates.
<a title="Back to TOP" style="position: fixed; right: 15px; bottom: 15px; outline: medium none; border: 0px none;" href="#"><img border="0" alt="Back to TOP" src="http://i.imgur.com/Ffb7p.png"></a>

By using JQuery coding.

Live DAMO you can see on this page only:  At the Right Side of this page
>>>> Use the Following Code and put it Just Before the </body> Tag on your Blogger Templates.
<style type="text/css"> #w2b-StoTop {-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px; width:100px;background-color: #EEEEEE;background-color: rgba(238, 238, 238, 0.6);filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#99EEEEEE',EndColorStr='#99EEEEEE');text-align:center;padding:5px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#444;text-decoration:none;border:1px solid #C9C9C9;} </style> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <script type='text/javascript'> $(function() { $.fn.scrollToTop = function() { $(this).hide().removeAttr("href"); if ($(window).scrollTop() != "0") { $(this).fadeIn("slow") } var scrollDiv = $(this); $(window).scroll(function() { if ($(window).scrollTop() == "0") { $(scrollDiv).fadeOut("slow") } else { $(scrollDiv).fadeIn("slow") } }); $(this).click(function() { $("html, body").animate({ scrollTop: 0 }, "slow") }) } }); $(function() { $("#w2b-StoTop").scrollToTop(); }); </script> <a href='#' id='w2b-StoTop' style='display:none;'>Scroll to Top </a>
You can also Customize your CSS.
Enjoy it....
Good Luck.

Read More

Remove Blogger Navbar

 Remove Blogger Navbar

Blogger Navbar is the top toolbar provided by Blogger it Just give you some traffic through "Next Blog" and make your blog editing little bit easy. But in other hand it give ugly look to your blog and consume a most important  size of your log header that's for which we need to remove Blogger navbar. After removing this navbar you get some more space in your header and got a professional look to your site.


Follow this Steps:
Step1: Login to your Blogger Account.
Step2:Goto to Design.
Step3:Now goto edit HTML.
Step4:Press Ctrl+F and find Blue Codes look at pics.
Step5:Insert red Code look at pic.
#navbar-iframe{
display:none !important;
}
Step6:See previews.
Step7:Save template.
Enjoy the Professional Blog............
(Don't Forget to Comment and Line).

Read More

Get Related Post Gadget for Bolgger post

It is very important to make our visitor stay for long time into our site, to do so we have to make some possibility for visitor to get some more information from our site. Now the once of the best trick to do so, we must insert "Related Post" results in front of the visitor. As we know that as the page views increase it will increase our page rank.

Now there are some easy and simple steps to add "Related Post" just below the every post. It is the automated it finds result from your site itself related to visitor choice.

Steps are Following:

=>     Navigate to "Layout>>Edit HTML" from your dashboard. 

 

=>   Make a back up of your template before you do any changes in the template.

=>  Now, expand your template, that is, make sure that you have a tick mark in that "Expand Widget      Template".

=>   Now, do a search using "CTRL+F" for the following line:

 <data:post.body/> 

=>  Insert the following piece of code just after the above line.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='similiar'>
<div class='widget-content'>
<h3>People who read this post also read :</h3>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;data2007&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
</div>
</b:if>  

=>>  Now, Save your template. Preview each of your posts separately. 

Enjoy.... Don't Forget to Comment...

Read More

Insert Adsense Ads inside the Body of post to incease CTR

According to Adsense Expert's Placing Ads inside the body of post definitely increase CRT, CTR means"(the number of times your ad clicked) divided by (number of times it is shown), which also help to increase your ads per-click-cost. Just follow these simple steps:
Step1.Go to Template -> Page Elements and you see in your layout the heading “Blog Posts”. Click the “Edit”





POP up came out......
Step2. Check the box next to 'Show ads between Posts'

next,configure the ads,choose the format,colours,etc and SAVE THE CHANGES.
Save and close it............
Step3.   Sign in to your blogger dashboard>layout>Edit html
                                                     Check the box next to 'Expand Widget Templates'


Step4. Find  this code:

<b:if cond='data:post.includeAd'> <data:adEnd/> <data:adCode/> <data:adStart/> </b:if>

Step5.  Replace that code in the template with the below code
<b:if cond='data:blog.pageType != "item"'> <b:if cond='data:post.includeAd'> <data:adEnd/> <data:adCode/> <data:adStart/> </b:if> </b:if>

Step6.Again, find out data-post body tag
and paste the below code just above that code{this will show ads above the post body}.If you want ads to show below the post,paste the code below that tag.

Here is the code to paste:-
<b:if cond='data:blog.pageType == "item"'> <b:if cond='data:post.includeAd'> <data:adEnd/> <data:adCode/>

Good luck .....
Don't Forget to Comment..............>>>>>>>> 

Read More

Make your Blogger Revenue Sharing for a Big Business

Hey Dude !!!        it's a mind blowing concept I ever hear on any free blogging sites. Now Fiends it's time to spend your work, your business by making your work less for your. As your hear/seen lot's of site who sharing their revenues with their users, Now here your are going to user your blog to do same work for you.
On your blogger you can add multiple Authors and make them to earn from your blog. This feature make your blog more famous and it also make your blog to upgrade in GOOGLE RANKING. As long as your blog become great ranking it will also increase Pay Per Click Revenue.



Now you can make more money.   So follow these steps:

Step 1. Login to your blogger account, go to Design and then click at Edit.

Step 2. HTML At the Edit Template page check the Expand Widget Templates option.

Step 3. Now you have to be careful here. First find <data:post.body/> (press CTRL+F and paste the code in the box in order to find it quickly). Now we have to continue with the most important part, adding the code in order to install the Adsense revenue sharing feature in your blogger blog. To do that, copy the code below and paste it just above the <data:post.body/> code.

<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.author == "Author1"'> 
PASTE THE ADSENSE CODE FOR AUTHOR 1   </b:if>  
<b:if cond='data:post.author == "Author2"'> 
PASTE THE ADSENSE CODE FOR AUTHOR 2   </b:if>  
<b:if cond='data:post.author == "Author3"'>
PASTE THE ADSENSE CODE FOR AUTHOR 3   </b:if>   </b:if>

Here you have to be careful. You need to replace Author1, Author2, Author3 with the real name of the authors which you want to include them in your Adsense revenue sharing program in your blogger blog (for example, if you want to add me, type my username Reegon, LOL) and paste their adsense code instead of the  ”PASTE THE ADSENSE CODE FOR AUTHOR”.

Step 4. After finishing, just click on Save Template. As you can notice, the code above is only for 3 authors. To add a new author, just copy the following part from your the code and paste it again.

<b:if cond='data:post.author == "Your New Author"'> 
PASTE THE ADSENSE CODE FOR YOUR NEW AUTHOR   </b:if>

NOTE: When you paste the adsense code, it  may not work if you don’t encode it.  paste the code there and click on Encode. After encoding, just copy and paste it as it is described above.




That’s all, if you have any problem while installing, feel free to ask by adding a comment from the form below. Happy blogging!

Read More

Amazing Hidden Feature of Google

It is very big celebration time for the bloggers, Google provides a fantastic feature to manage blog by the just doc materials. Since blogger is one of the product of Google network, it also allow to integrate it's product. Here you can post an article or any material from direct your DOC file. Just follow these simple steps:

Step1. You must have a Google Account.


Step2. Create a Blog.
Step3. Sign in to Google Docs.

Step4. Upload your DOC file.
Step5 Edit it online (if require)
Step6 Goto Share Button Right site of page.
Step7 Goto Publish as Webpage.
Step8 Follow it Give your Google Username and password.
Step9 Post it to blog.

Note: You can also stop to to publish on your blog.
 

Read More