How to Add a Auto Scrolling Scroll bar in Blogger

In this article, we will show you how to add a auto scrolling scroll bar in blogger.

What is a Scroll bar?

A Scroll bar is a GUI (graphical control element) which controls elements like text, pictures, videos and anything else available on the webpage. In other simple words, it’s a long thing bar located at the right side of your screen by which an element can be scrolled with the help of a mouse.

How to add Auto Scrolling Scroll bar in Blogger?

 

1.      Log in to your blogger account

2.      Go to Template >> Edit HTML

3.      Search for the ending </html> tag

4.      After finding </html> just above it paste the following code:

<script>
    /*<![CDATA[*/
    var div = $('body');
    setInterval(function() {
            var pos = div.scrollTop();
            div.scrollTop(pos + 2);
        }, 10)
        /*]]>*/
</script>

<style>
    body {
        overflow-y: scroll;
    }
</style>

You can increase the scroll speed by reducing the value 10 in the above code.  Increase 10 to 100 or 1000 to make the scroll work slowly.

This technique can also be applied to a div, if you like to scroll only a certain element on your blog website. What you need to do is to replace the body to a div name from the above code. For example, <div id=”test”> the first line of the code would become  var div = $('#test'); and vice versa.

After copying the code, click on “Save Template” button located at the top of your screen.

We hope this article has helped  in learning how to add a auto scrolling scroll bar in blogger.

Read More

How to add Google Adsense Ads Inside Post in Blogger?

Adsense is considered as the best choice for monetizing or earning from ads by the expert bloggers. The main reason behind this especially the brand name of Google, and the content based Ads which will be always relevant to the post content. To increase the revenue share from the ads, many bloggers try to position the Ads in different places in there blogs. You might have seen in many blogs the ads have been placed inside the blog post which is easily visible to the viewers. The position just after the post title is considered as one of the best place where maximum CTR (Click Through Rate) is getting.

Today i will show you how to display the ads inside the blog post.

Create Google Ads

1. Go to your Google Adsense account.
2. Create a new ad unit.
3. It is better to choose a wide area ad sizes for better results, like 300*250 Medium Rectangle or 336*280 Large Rectangle.
4. Customize your ad colors and click on save and get code button.
5. In the code type, select Synchronous and copy the ad code.
6. Next parse this code using HTML Parse Tool to change special characters into their corresponding HTML entities. If you use that code directly, the ads won’t appear in the blog.
7. Copy the parsed code.

Adding Adsense Ads Below Post Titles in Blog

1. Go to Blogger Dashboard>> Template.
2. Note: Take Backup your blog template before doing any changes
3. Click Edit HTML button.
4. Press Ctrl+F and search for

<data:post.body/>

6. Now paste the below code just above it.  
   <b:if cond='data:blog.pageType == &quot;item&quot;'>

REPLACE WITH YOUR AD CODE HERE

</b:if>

7. Replace REPLACE WITH YOUR AD CODE HERE with your parsed ad code.
8. Next click on save template button.

NOTE: Based upon your template, there are chances that you find multiple instances of <data:post.body/>. So try with second one. If not working, try with all of them using trial and error method.  

Once you have done with these steps, visit your blog posts. Ad below post title will look similar to this:

 

 

The ad below post title will appear at the left side by default. If you want to display the ad at the right side or at center, then use the code below.

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div align=”center“> // type it manually. It may give an HTML error.

REPLACE WITH YOUR AD CODE HERE

</div>

</b:if>

If you want to wrap text around Google adsense ads like this,

then use the below code.

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div style=”float:left; margin:10px;”>

REPLACE WITH YOUR AD CODE HERE

</div>

</b:if>

Replace left with right, if you would like to display your ad on the right side and wrapped with text.

Note: All of the above codes are providedbetween conditional tags which will show ads only on post pages. It will neither show on homepage nor on labels page. If you want to show ads on all pages, then remove those conditional tags.

In the case if you are displaying ad on your homepage and label pages also, then take a look on your ad. It will be diplayed below all the posts titles. if you have set 6 posts to appear on your homepage, then it will appear only on first 3 posts titles. Last 3 will be shown as blank white space. I personaly recommend you to show ad below first post title only. Replace above conditional tags with below ones to display single ad on homepage and labels page 

<b:if cond='data:post.isFirstPost'>

REPLACE WITH YOUR AD CODE HERE

</b:if>

 

Read More