seo tips: May 2015

Sunday, May 31, 2015

How To Optimize Blogger Blog For Mobile Phones

how-to-optimize-blogger-blog-for-mobile-sites

Many blogging networks like wordpress, weebly, hostgator etc provides mobile sites to their users, similar to them blogger also provides this feature to its users. Blogger provides mobile site as well as templates for mobile sites which are well made for all mobile phone screens. Although blogger is good for blogging as it has desktop and mobile sites but like desktop template you have to optimize your blog for mobile phones. And for this you need to add some Gadgets, so that you could get benefit of your desktop as well as mobile site.

Initially all blogger mobile sites have simple or default templates which allow only specific gadgets such as:

Header(logo)
Footer(powered by blogger)
Page list
Blog(posts)
Adsense
Profile

So you can't get full benefit of your mobile site until you have optimized it. So in this post I will help you to optimize your blog for mobiles so that you could get benefit from your mobile visitors.

In this post you will learn following things:

How to optimize mobile template(basics).
How to hide all useless things in mobile site which shouldn't appear on mobile site.
How to show essential gadgets in mobile template(Related posts, Ads, Follow/Share buttons, Search box).

So lets begin, we will start from optimizing mobile template.

Optimizing Mobile Template In Blogger:

Blogger has many mobile templates e.g simple, dynamic, picture view, Awesome inc, Water mark tec.

And all the templates have different views, all blogger templates have an awesome look but they do not give you full benefit as they don't allow ads and other custom gadgets. So you can't add related posts widget(which is essential to increase page-views).

So you need to use custom template and optimize it. Follow below steps to switch on your custom mobile template.

Step 1: Go to template and click on the icon shown below mobile template.

Step 2: Choose the custom template and click on save.

Congratulations! you have successfully switched on custom template for your blogger mobile site.

Hiding Things In Blogger Mobile Site:

Every blog has something that should be only on desktop such as a gadget. But when a blogger mobile template is switched to custom every thing you have added in your blog template will start appearing in mobile view too. Here I have to mention that only those things appear in mobile sites also if you have added it in template, but if you have added something in layout as a new gadget, it won't appear in mobile site until you have enabled it. So here I am going to show you how to hide something in mobile view of blogger by using xml.

Step 1: Go to template and click on edit html.

Step 2: Click inside the code and search for something which you want to show only in desktop and hide it in mobile site.

Add something to your template for example a gadget or a comment or a picture.

Step 3: Now just before the code which you want to hide in mobile site paste the following piece of code:

<b:if cond='data:blog.isMobile == "false"'>

and after the code(which you want to hide in mobile site) type </b:if>

Explanation:

For example you have following code and you want to hide it in your mobile site:

<html>
<body>

<em>Emphasized text</em><br>
<strong>Strong text</strong><br>
<code>A piece of computer code</code><br>
<samp>Sample output from a computer program</samp><br>
<kbd>Keyboard input</kbd><br>
<var>Variable</var>

</body>
</html>

Then according to above method your code should look like below code:

<b:if cond='data:blog.isMobile == "false"'>

</html>

</b:if>

Gadgets For Blogger Mobile Site:

Blogger gadgets created by blogger or other websites aren't compatible with mobile sites so you have to use special gadgets for blogger mobile site you can find some mobile site gadgets here.

Showing Things Only In Blogger Mobile Site:

If your blog has something that you would like to show in mobile site only then its possible now, how? Just use the below piece of code above the content which you would like to show only in mobile site:

<b:if cond='data:blog.isMobile == "true"'>

and after it just add this piece of code:

</b:if>

For example I want to show this line in mobile site only "I am fahim, you can call me FK" then in my template it should be like this:

<b:if cond='data:blog.isMobile == "true"'>
I am fahim, you can call me FK
</b:if>

Now it will be shown only in mobile site. You can use this to show related posts widget in blogger mobile site.

Check out: More Mobile Blogging Tutorials To Improve You Mobile Site!

Hope you like this post. If you have any question please help me know by leaving a comment below.

Seach tags: Blogger mobile site,Blogger mobile site,Optimize Blogger Blog For Mobile Phones,Blogger mobile site gadgets,101helper

Saturday, May 30, 2015

Search Box For Blogger Mobile Site

Like other blogging networks blogger also has mobile view for mobile users. It loads very quickly as it is in kilo-bites so mobile users can also read blogs by wifi connections or by mobile data. Blogger provides mobile view and also templates for it, but you have to optimize it in your way to get benefit of it e.g enabling ads, enabling essential gadgets(follow button, search box, related posts etc). It will help you to get more traffic as after optimizing your blog for mobile phones, you will be able to get mobile views too instead of loosing it. The default gadgets aren't optimized for mobile view so you need to use optimized gadgets for mobile view, One of the most essential gadgets(search box) which is powered by blogger doesn't work in all mobiles, it works only in smartphones like Iphone, Android, Htc, Nokia lumia phone etc but the phones which don't have android or ios aren't optimized for the common search box so you have to optimize search box to make it work in all mobile phones whether it is smart or not. Although the default search box works in smartphones but if it is used to search something, it works very slowly and the pages take too much time to load because the page is first searched for desktop fist and then converted to mobile view. So in this post I will share a well optimized search box for blogger mobile view which will work in all mobile phones.

How to add search box in blogger mobile view:

Step 1: Go to blogger dashboard and navigate to layout:

Step 2: Click on Add a gadget > Html/javascript.

Step 3: Copy below code and paste it into Html//javascript window:

</form>

<style>

form#searchbox {

position: relative;

left: -40px;

right: 0px;

margin-left: 24%;

margin-right: 24%;

width: 85%;

}

button#u_0_1 {

position: relative;

width: 45px;

height: 25px;

color:white;

background:#4491f0;

border-color:#4491f0;

}

input#search-in {

height: 20px;

}

</style>

Step 4: Click on save and you are almost done but it will show up in desktop so you have to hide it from desktop and show it only in mobile view, follow next step to move ahead!

Related post: How to show a widget in mobile view only in blogger?

Step 5: Edit the mobile search box gadget which you added now and search for the widget id, see below image for instance.

Related post: How to find widget id of gadgets in blogger?

Step 6: Note the widget ID and go to template > Edit Html:

Step 7: Click on Jump to widget and click on the widget ID of search box gadget which you found in step 5.

how-to-find-a-widget-in-blogger-template

Step 8: After finding the widget type mobile='only' beside locked='false'.

Step 9: Click on save template and you are done.

If the search box still fails to appear in mobile view of your blog then go to template > Click on Customize mobile template icon > Switch default template to custom and click on save.

Open your blog by using this link http://myblog.blogspot.com/?m=1 to see your search box. This search box will work in all mobile phones and will work fast.

Hope you like this article and it was helpful to you, if you have any question please help me know by leaving a comment below.

Friday, May 29, 2015

How To Optimize Post Links In Blogger For Higher Search Results

How-To-Optimize-Post-Links-in-Blogger-seo

For higher search results seo optimization is very important and for that you have to keep all things in mind like description, title and links. As description and title optimization is discussed before so in this post we will talk about link optimization only. So in this post I will tell you how to optimize your blogger blog post links for higher results and also how does it help in search results.

How It Works?

It works in a very simple way for example if you search "101helper" on Google you will find following results:

In above search results "101helper" is shown in bold style(highlighted) which we searched on Google. You can see that "101helper" is highlighted two times one in description and other in link so in this way link optimization is good for seo.

How To Optimize Post Links In Blogger:

Follow below steps to optimize your blog post's links for seo. You have to follow it whenever you are going to publish a post:

Step 1: Go to blogger dashboard > Posts > New post.

Step 2: write title of your post and click on save:

Step 3: Click on Permalink on right side of the editor below Schedule:

Step 4: Switch to Custom Permalink from Automatic Permalink.

How-To-Optimize-Post-Links-in-Blogger-seo-blogspot

Step 5: Type keywords of your post which are searched on Google more frequently and click on Done.

Note: Use a hyphen(-) after each keyword you write. For example if your link is http://myblog.blogspot.com/2015/05/this-is-my-link and you want to optimize it by adding some keywords to it then you have to type a hyphen after each word e.g http://myblog.blogspot.com/2015/05/this-is-my-link-fully-optimized.

If you use dots(.) or blank space blogger won't accept it.

http://myblog.blogspot.com/2015/05/this-is-my-link-fully-optimized ✔

http://myblog.blogspot.com/2015/05/this is my link and its not optimized ✖

http://myblog.blogspot.com/2015/05/this.is.my.link.and.its.not.optimized ✖

Step 6: Publish your post and you are done.

Don't try to use underscores(_) in your links its not good for seo.

Hope you like this post and it was helpful to you. Follow and subscribe to get more seo tutorials in your inbox. Share this post with others and visit 101Helper again for new posts.

Wednesday, May 20, 2015

How To Show Ads Below/Above Post Footer And Header In Blogger

Making money through a blog is not easy if you don't know tricks to get more clicks on your ads. Its a common problem with everyone that they get enough views but ad click rate is very low, some reasons for this are low traffic, wrong position of ads or use of text ads only etc. Position of ads has major effect on clicks rate so to get more clicks on your ads you have to show your ads in such positions which are clear to users e.g below post header, in sidebar and above footer. Since blogger has no option to show ads below post titles and above footer so you have to do it manually. In this post I will show you how to show your ads below post titles and above footer.

How To Show Ads Below Post Titles In Blogger:

How To Show Ads Below Post Titles In Blogger

Follow below steps to show your ads below post titles:

Step 1: Go to Blogger Dashboard > Template > Search for <div class='post-header'> by using Ctrl+F.

Note: Search <div class='post-header'> two times.

Step 2: Copy below code and paste it below the above code which you have searched:

<b:if cond='data:blog.pageType == "item"'>Your ad code</b:if>

Note: Remember to add the code below the second one.

Step 3: Replace "Your ad code" with your ad code.

Step 4: Click on save template and you are done.

How To Show Ads Above Post Footer In Blogger:

Follow below steps to show your ads above post footer:

Step 1: Navigate to Blogger Dashboard > Template > Search <div class='post-footer'> by using Ctrl+F.

Note: Search <div class='post-footer'> two times.

Step 2: Copy below code and paste it above <div class='post-footer'>:

<b:if cond='data:blog.pageType == "item"'>Your ad code</b:if>

Note: Remember to add the code below the second one.

Step 3: Replace "Your ad code" with your ad code.

Step 4: Click on save template and you are done.

Hope you like this post and you founf it helpful. Follow and subscribe to get instant updates about blogger tricks. Share this post with others and spread my voice. Thank you for visiting 101Helper.

Search tags: Show ads below post titles in blogger, Show ads above post footer in blogger, 101Helper blogging tricks, Get clicks on ads, Increase Adsense earnings.