How To Show Ads Above Comments In Blogger Mobile Site

Placing ads in blogger mobile site is always difficult for every newbie because handling blogger template is not easy especially in case of mobile blogging it becomes more difficult so bloggers either avoid placing ads in blogger mobile site or add ads as a gadget or try to show infolinks ads in mobile site. Adding ads in gadget is not a problem but it may slow down your mobile site. But its important also to show ads on mobile site specially those bloggers which have majority of visitors on mobile site really need to show ads in mobile to get a maximum benefit from blog. So this tutorial is to show you how to place ads in blogger mobile site just above the comment box below every post. It will boost your blog revenue to a great extend. So lets start!

Steps To Follow To Show Ads In Blogger Mobile Site Above Comments:

Step 1: Go to blogger dashboard and navigate to template.

Step 2: Click on edit html and click inside the template code.

Step 3: Search for below piece of code by pressing CTRL+F on your keyboard.

<b:if cond='data:post.allowComments'><h4><data:post.commentLabelFull/>:</h4>

Step 4: Copy below code and paste it just above the above code.

<b:if cond='data:blog.isMobile == &quot;true&quot;'>
<b:if cond='data:blog.pageType == "item"'>
---YOUR AD CODE HERE---
</b:if>
</b:if>

Step 5: Replace "---YOUR AD CODE HERE---" with your ad code.

Step 6: Save your template and you are done.

Ad Not Displaying In Mobile?

Follow below steps if your ad is not showing in mobile:

Step 1: Go to template and click on setting icon below the mobile site preview.

Step 2: Enable custom template for your mobile site as shown in below image.

Step 3: Click on save and you are done.

Search Tags: how to show ads in blogger,show ads in blogger mobile,display adsense ads in blogger mobile,how to show adsense on blogspot mobile site,101helper make money blogging,ads below footer,above comments blogger mobile site.

How To Install Slide Out Ad Space To Boost Revenue In Blogger

Earning money from blogs or websites is getting popular day by day but only few bloggers are successful in earning an extra cash from blogging because getting clicks is not easy. Only those bloggers are successful in making money online who are familiar with javascript or css. Because with the help of css and javascript they make slideouts or make ads floating to get more clicks and earn money. But those who don't know javascript or css keep on waiting for clicks. So they don't get enough clicks and earn a single dollar in months. Thus ads optimization is very important to make ads clickable and beneficial otherwise blogging is just waste of time. So in this post I will show you how to add slideouts and place your ad in the slideout pannels. It will boost your blog revenue by 60%. So lets begin!

How To Add Slideout Ad Space In Blogger?

Follow below steps to add slide out ad pannel in your blog:

Step 1: Go to blogger and login to your account.

Step 2: Open you blog and go to template.

Step 3: Click on Edit html.

Step 4: Search for </head>.

Step 5: Copy one of the below code with respect to your requirement, if you want right slide out copy code of the right slide out and if you want left slide out copy the left slide out code. You can also add both slide outs.

Left Side Slide Out Ad Space:

<div id="slideleft"><button id='closeleft'>Close</button><p>YOUR AD CODE HERE</p></div>
<script>
setTimeout(function() {

    document.getElementById(&#39;slideleft&#39;).className=&quot;active&quot;;

}, 5000);

document.getElementById(&#39;closeleft&#39;).onclick=function () {
    document.getElementById(&#39;slideleft&#39;).className=&quot;&quot;;
}
</script>
<script src="https://rawgit.com/101Helper/mobile/master/installize.js"></script>
<style>
#slideleft button { float: right; z-index: 9; position: relative; background: #bbb; color: #fff; border: none; width: 60px; height: 25px; cursor: pointer; }
#slideleft p { position: relative; top: -20px; left: 2px; }
#slideleft {text-align:center;width: 161px; box-shadow: 0 0 6px #444; height: 605px; top: 10px; background: #eee; position: fixed; left: -340px; -webkit-transition: all 0.8s ease-in-out; -moz-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; z-index:99; }
#slideleft.active {left: 0;}
</style>

Right Side Slide Out Ad Space:

<div id="slideright"><button id='closeright'>Close</button><p>YOUR AD CODE HERE</p></div>
<script>
setTimeout(function() {

    document.getElementById(&#39;slideright&#39;).className=&quot;active&quot;;

}, 5000);

document.getElementById(&#39;closeright&#39;).onclick=function () {
    document.getElementById(&#39;slideright&#39;).className=&quot;&quot;;
}
</script>
<script src="https://rawgit.com/101Helper/mobile/master/installize.js"></script>
<style>
#slideright button { float: left; z-index: 9; position: relative; background: #bbb; color: #fff; border: none; width: 60px; height: 25px; cursor: pointer; }
#slideright p { position: relative; top: -23px; left: 2px; }
#slideright {text-align:center;width: 161px; box-shadow: 0 0 6px #444; height: 610px; top: 10px; background: #eee; position: fixed; right: -340px; -webkit-transition: all 0.8s ease-in-out; -moz-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; z-index:99; }
#slideright.active {right: 0;}
</style>

Step 6: Replace "YOUR CODE HERE" with your ad code

Step 7: Paste the copied code(s) below </head>.

Step 8: Now copy below piece of code and paste it above </head>.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'/>

Step 9: Press save template button on the top and you are done successfully!

I hope you like this post and it was helpful to you, if not leave a comment below so that I can improve my blog. Follow and subscribe for more blogging tutorials. Thanks for visiting 101Helper.

Search Tags: Speed up blogger blog ad revenue,Slide out ads, optimize ads for high revenue,boost blog revenue,get more clicks on ads to boost ad revenue,earn money fast blogger,101helper slide out ads,slide out ad pannel javascript,css codes.

5 Sites To Submit Your Posts To Boost Traffic Instantly

New bloggers often search "how to boost or increase traffic instantly" and don't find any answer or usually get answers that are not satisfactory. So they head towards fake traffic or seo. Fake traffic is obviously useless because you don't either get money and that traffic is limited because same visitors visit your site again and again for points(traffic exchange) and there is no ad network that pay you for ordinary traffic. So fake traffic is not beneficial that's why bloggers optimizes their blogs for search engines to get traffic that is organic and unique, but the fact is that once your blog is optimized for search engines you will not get traffic in one day but you have to wait for months or for year. Actually it depends on your blog's topic e.g if you have a blog about making money you will get more traffic in less time because every 2nd person is surfing on internet to earn money.

So this post is about how can you increase your blog traffic instantly. It could be better called free promotion which is good because it will increase your blog reach as unique people will visit and know about your blog. So if they are interested in your content they will remember your blog or they may bookmark it to visit it again. It will help you in another way too that is backlinking and you can also get more subscribers on your fan pages.

So in this post I will tell you about five sites which could be useful for new blogs promotion and after submitting your blog to these sites you will see an instant boost in your traffic. If you don't get traffic in one day keep calm and work a little more because "Rome was not built in a day".

(1). Google Communities:

Google communities are like groups of people following a specific topic like blogging, make money online, how to's, download games etc. It is one of the sites that can be helpful to boost your newly created blog's traffic. It is also a good place to make more fans and promote your site. All you need is to find a community that is related to your blog topic and share your posts there. Make conversations with fellows too because it will grow your blog audience. Get started here

(2). Reddit:

Reddit is called the front page of internet. It is an online community site which has millions of users. It has groups called sub-reddits with certain topics e.g Reddit jokes, Ask reddit, Make money, Music, Gamming etc. It is a good way to promote your gamming blog, jokes blog, make money tutorial blogs etc. Moreover you can create your own sub-reddit but for that you need karma(up votes on your answers). Reddit could be useful for Alexa rank also. Get started here

(3). Facebook Groups:

Facebook has billions of users and this large audience can boost a site's traffic very easily and quickly. Although only Facebook shares can get you alot of visitors but if you have a fan page with a large audience you can get more traffic from it. But as its not easy to get original likes on pages so I suggest you to join Facebook groups. Facebook groups can easily increase your traffic but you have to make interaction with the group fellows e.g make conversation with them visit and like their pages. It could help you alot to boost traffic instantly. It is very important to join only these groups which are alive, by alive I mean join the groups which have thousands of  members and are active. You can also create your own Facebook group where you can invite active members to join it.

(4). Forums:

Forums are best sources of high traffic. You can generate thousands of visitors from forums if you work smartly in forums i.e if you share something that is interesting for visitors or you join a forum that is compatible with your blog topic.  It is also a best way to promote your new blog and make more fans. Forums lets you to build quality backlinks and popularize your brand. You can find a number of forums online. So find a forum are join it to get started!

(5). Viral Content Buzz:

Viral content buzz lets you to increase your traffic by 200% by putting your content  in front of eager social media influencers. It is 100% free to use. Viral content buzz lets you to promote your blog posts as well as you can promote your blog though social media because with viral content buzz you have opportunity of free promotion on Twitter, Facebook, Pinterest and Stumbleupon. Get started here.

I hope you found this post helpful. If yes please share it with others and help me know by leaving a comment below. If you have any suggestion contact me. Thanks for visiting 101Helper.

Search tags: How to boost site traffic,increase blogger blog traffic instantly,promote new blog,quality backlinks websites,101helper blogger tips,5 ways to increase traffic instantly,web traffic boost effective tips blogger.

How To Add "Embed Post Button" In Blogger

What Is Embed Post Button?

Embed post button is a button which embeds a post in the form of a link by making a link with certain text or certain link or it could be better called a piece of code which displays link of a post that takes you to a post. It is a kind of sharing button but it helps you to get more backlinks.

How Do "Embed Post Button" Works?

Embed post button is created with Javascript. When it is clicked a pop-up window is opened which contains a code that is to be copied to clipboard. It grabs a pic of the article too which is shown where it is embed.

Embed post button is powered by Embedly and works in wordpress, blogger, tumblr or any other site. It is free and easy to be installed. No registration is needed to use Embedly button except if you want analytics of your data(how many of your posts are embedded so far).

Also Read: How To Get Quality Backlinks For Blogger Seo

Features And Screenshot:

• It is free of cost.
• No need of registration unless you want analytics of your data.
• Easy and quick installation.
• It doesn't affect site loading speed.
• No render blocking scripts.

See A Live Demo!

How To Install "Embed Post Button" In Blogger?

Embed post button can be installed in a minute, you don't need any signups or logins just put the codes by following below steps and you are done!

Step 1: Go to blogger dashboard and open layout.

Step 2: Click on add a gadget and select Html/Javascript option.

Step 3: Copy below code:

<a class="embedly-button" href="http://embed.ly/code" data-theme="light-round">Embed</a>
<script>!function(a){var b="embedly-platform",c="script";if(!a.getElementById(b)){var d=a.createElement(c);d.id=b,d.src=("https:"===document.location.protocol?"https":"http")+"://cdn.embedly.com/widgets/platform.js";var e=document.getElementsByTagName(c)[0];e.parentNode.insertBefore(d,e)}}(document);</script>

Step 4: Paste it into the Html/Javascript window.

Step 5: Click on save button and you are done!

You might want to show embed button only in your posts. So for that read How To Show Or Hide Widgets On Specific Pages In Blogger

How To Add Embed Post Button Below Post Title Or Above Post Footer?

Adding Embed Post Button Below Post Title:

Step 1: Go to blogger dashboard > Template and Edit Html.

Step 2: Search for below piece of code:

<div class='post-header'>

You will find two pieces of codes like this, stop at the second one.

Step 3: Code below code and paste it below the above code.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<a class="embedly-button" href="http://embed.ly/code" data-theme="light-round">Embed</a>
<script>!function(a){var b="embedly-platform",c="script";if(!a.getElementById(b)){var d=a.createElement(c);d.id=b,d.src=("https:"===document.location.protocol?"https":"http")+"://cdn.embedly.com/widgets/platform.js";var e=document.getElementsByTagName(c)[0];e.parentNode.insertBefore(d,e)}}(document);</script>
</b:if>

Step 4: Save template and you are done!

Adding Embed Post Button Above Post Footer:

Step 1: Go to blogger dashboard > Template and Edit Html.

Step 2: Search for below piece of code:

<div class='post-footer'>

Step 3: Paste the below code above the above one.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<a class="embedly-button" href="http://embed.ly/code" data-theme="light-round">Embed</a>
<script>!function(a){var b="embedly-platform",c="script";if(!a.getElementById(b)){var d=a.createElement(c);d.id=b,d.src=("https:"===document.location.protocol?"https":"http")+"://cdn.embedly.com/widgets/platform.js";var e=document.getElementsByTagName(c)[0];e.parentNode.insertBefore(d,e)}}(document);</script>
</b:if>

Step 4: Save template and you are done!

You can generate your own style Embed post Button at Embedly!

I hope you found this post helpful, if yes share it with others and if no then read other posts :p Follow and subscribe for latest blogger tutorials in your inbox. Thanks for visiting 101Helper, keep visiting us!

Search Tags: Embed post button,embed blogger posts button,generate quality backlinks for blogger,text area with window link javascript,text area with post link,post embed button for blogger,boost site traffic, 101helper, 101 helper.