Thursday, July 17, 2014

Blogger: Create Custom Error 404 ( Page Not Found )

To create custom 404 error page in Blogger is great if your readers land on a page that does not exist, it can happen for any reason may be you have changed the URL of your post or any backlink to that post will not work and will show 404 page not found error also many times users type in wrong URL in address bar which can also results to give this message and this is not good user experience for your visitors in fact it will definitely disappoint your readers and they will go back to some other blog to get the required information or click back button or worst close the window itself  What's the worst part here is you work so hard to get traffic to your blog and for this small mistake if you are losing your valuable readers then it big pity for you

By default blogger shows a boring and non attractive 404 error page also this is not optimal according to user experience nor it provides any other options for your users to read other important posts or pages
So in this post I am going to show you great trick on how to create custom page for 404 error page not found in blogger which will not only retain your valuable readers but also show them a cute pic to tense them down

Create Custom Error 404 Page Blogger
Create Custom Error 404 Page Not Found In Blogger


Here you will learn to give your readers a nice image and apologizing message, link to homepage and few best posts so that they can find relevant pages from your blog and continue reading more content this helps immensely in reducing bounce rate of your blogger blog also blogger team say's that 404 page not found error message is not good in terms of SEO So lets start the tutorial to create custom 404 error page not found for blogger blog

Create Custom 404 Error Page In Blogger


1) Go to your blogger dashboard 

Now here we will act smartly if you don't know how to do basic coding also then don't worry we will make it very easier for you guys

2) Click and create a New post and write a custom apologizing page not found message, add a nice pic, link to homepage,contact us page and few important post for your readers for giving them more navigation options, you can see below for example

Custom Error 404 Page Not Found Blogger
Custom Error 404 Page Not Found Blogger

3) Similarly you can do as well and once you as satisfied with the look and feel save the post but don't publish it and copy the entire code from html mode from your post editor

Custom 404 Page Not Found Blogger
Custom 404 Page Not Found Blogger

4) Now go to Settings<< Search preferences << Errors and redirections secton
Here you will see Custom page not found besides it click on Edit

5)  Paste the entire code and click on Save changes! JOB Done


So friends this was how to create custom 404 error page not found in blogger and now whenever your readers click on any broken link from your blog they will see this page which will tremendously help in give great user experience as well as they will also not move to some other blog, So if you don't have custom 404 error page for your blogger blog then I strongly recommend to do this, if you like this post please share and don't forget to subscribe to get more blogger tips and tricks! Keep Blogging
Read more ...

Wednesday, July 16, 2014

How To Enable or Disable Comments In Blogger

While genuine comments can really improve your user engagement at the same time spam comments can ruin your blog community and you must take serious actions to stop this also there are many times where you specifically want to enable or disable comments on certain posts or pages of your blogger blog for eg: static pages like contact us, about me or privacy policy pages where you don't want users to comment and on posts pages if you posts is very old and has huge no of comments then it's wise to hide or disable the comment box on your blogger blog

Comments are one of the most crucial elements for any blog, if you blog is receiving lots of comments then you can judge that people are really following and loving your content but due to increasing spam on internet we can see that many readers simply comment with their links inserted to get backlinks to their blog specially if you are using CommentLuv enabled blogs but this also implies to all bloggers who are using blogger platform

Enable or Disable Comments In Blogger
Enable or Disable Comments In Blogger

Also this become handy trick if  you want to install other commenting system like Disqus, Facebook, CommentLuv or Google plus comments then it's wise to remove the default blogger comment box

So in this post I am going to show how to enable or disable comments in your blogger blog, you can either disable the comment box completely from your blogger blog or simply from post pages so let start the tutorial


Read- How To Stop Spam Comments on Blogger

Enable or Disable Comments On All Pages In Blogger


Note- This trick will disable the comment box completely from your blogger blog and your readers can't comment on any of static pages as well as post pages also you can select other options on how you want your blogger comments box to show on your blog


1) Login to blogger dashboard and go to 'Settings'

2) Then click on 'Post and comments'

3) Now scroll down to Comments section there you will see 'Comment Location' and to next you can see drop down, just select 'Hide' from dropdown menu as shown in below screenshot

Enable Disable Comments Blogger
How To Enable or Disable Comments In Blogger


Also you can select the following options from dropdown menu for comment customization


Embedded: This is the default setting that appears in all your post pages as well as static pages. This options sets comment box below the content.
Full page: This option will show a link 'post a comment' below each post and this will take your readers to a separate page to make their comments.
Popup window:  In this option user will see popup window with comment box where they can comment
Hide: Select this option to disable the default blogger comment box but it will show the existing comments which have already made

4) Now choose the option according to your need and click save settings on top

Enable or Disable Comments For Post Pages In Blogger


Now that in previous section you have completely disabled the default blogger comment box and that also hides the comments box from post pages as well but if you want your readers to post comments on your blog posts or specific post then you can do that easily


1) Click on Edit link below your posts in dashboard


2) Now in post editor under 'Post Settings' you will see section called 'Comments' below that you will see 'Options' click on that and you will see similar image as shown below

Enable Disable Blogger Comments
Enable Disable Blogger Comments 


3) Now here you can see various options for enabling or disabling comments on particular posts pages


Allow- This option will allow your readers to comments on your blog posts


Don't allow, show existing-  This option will disable comments box but it will show any existing comments previously made on your blogger blog


Don't allow, hide existing- This option will disable comments box also it will hide any existing comments previously made on your blogger blog


One you done selecting the option for your posts click on done and that' it


So friends this was how to enable or disable comments in blogger, if you like this post please share and do ask me any questions regarding this via comments also don't forget to subscribe to get more blogger tips and tricks in future! Keep Blogging
Read more ...

Tuesday, July 15, 2014

How To Remove Subscribe to Posts (Atom) In Blogger

If you are using blogger then you must have seen Subscribe to: Posts (Atom) on your homepage and Subscribe to: Posts Comments (Atom) on your post pages and other pages since there are many tutorials available on internet but they only tell you how to remove Subscribe to: Posts (Atom) form blogger homepage but they don't tell how to remove this link from individual posts pages so before removing this link from your blogger blog let me tell you that even though it doesn't take to much of space but it gives little unprofessional look to your blog so its better to remove it also it's very simple to remove it so without wasting much time lets take this link out from your blogger blog

Remove Subscribe To: Posts (Atom) In Blogger


Remove Subscribe to Posts (Atom) Blogger
Remove Subscribe to Posts (Atom) Blogger

1) First log in to your blogger dashboard

2) Go to template and Edit Html

Remove Subscribe to Posts (Atom) Blogger
Remove Subscribe to Posts (Atom) Blogger


3)  Press CTRL+F and find below code and delete it from your template


<b:include data='feedLinks' name='feedLinksBody'/>

4) Click Save Template and that's it you have successfully removed Subscribe to Posts (Atom) link from blogger now go and check all your posts pages and static pages

So friends this was how to remove subscribe to: posts (atom) in Blogger see how simple it was, if you like this trick please share with your friends and don't forget to subscribe to get more blogger tips and tricks! Keep Blogging
Read more ...

Monday, July 14, 2014

How to Add Facebook Comments Box In Blogger

As Facebook is one of the biggest social networking site on internet now and there are millions of users who are using Facebook to stay connected with their friends and family members, Recently one of my readers asked me how to add Facebook comment box in my blogger blog then this post is going to show very simple tutorial so that you can easily add Facebook comments to your blogger blog which will definitely yield in more comments since most of the users are usually logged in on their Facebook accounts both on their mobile phones or on their system so you can capitalize on this specially if your blog is not getting much comments

Also if someone comments on your blog then their comments will be posted on their wall so their friends can also see and chances are pretty much they will visit your blog or like that particular comments so it can go viral and you can receive good amount of traffic by using facebook comments on your blog So without wasting much time lets see how we can add facebook comments to our blogger blog

Read- How To Add Facebook Like Box To Blogger

Adding Facebook Comments Box In Blogger


Add Facebook Comments Box Blogger
How to Add Facebook Comments Box In Blogger

To install facebook comments on blogger you have to first create facebook application by which you will get App Id which is required later in the process So lets first create the application and get app id

1) Log in to your Facebook account 

2) Go to Facebook developers page and if you are not registered then register it and then you will be taken to facebook developers page so click on apps dropdown menu as shown in below image and select Create A New App 

Adding Facebook Comments Blogger


3) Give name to your app and select the category and click create app as show below

Add Facebook Comments Blogger

4) Now on next page you will get your App Id which you need later so copy it somewhere or in notepad



So now half part is done and now we will see how to add it to our blogger blog

Installing Facebook Comments In Blogger


1) Log in to Blogger dashboard and click on Templates then Edit Html

Note- Before making any changes to your blogger template make sure to backup your complete template to be on safer side



2) Now press CTRL+F and search for <html and replace it with below code
<html xmlns:fb='http://www.facebook.com/2008/fbml'



3) Now search for </body> and paste below code just before it.

<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {    FB.init({      appId  : &#39;YOURAPPID&#39;,    
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session    
xfbml  : true  // parse XFBML    });  };  
(function() {    var e = document.createElement(&#39;script&#39;);    
e.src = document.location.protocol +   &#39;//connect.facebook.net/en_US/all.js&#39;;  
e.async = true;    
document.getElementById(&#39;fb-root&#39;).appendChild(e);    }());
</script>


Replace YOURAPPID with previous copied app id

4) Now Search </head> and paste below code just above it

<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='Nice Blogging Tips' property='og:site_name'/>
<meta content='YOURAPPID' property='fb:app_id'/>
<meta content='http://www.facebook.com/nicebloggingtips' property='fb:admins'/>
<meta content='article' property='og:type'/>

Replace YOURAPPID with previous copied app id

nicebloggingtips with your facebook page name

Nice Blogging Tips with your Blog Name

Facebook Comment Box


1)  Search For <b:includable id='comment-form' var='post'> or search for <div class='post-footer'> and paste the below code just above it


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='padding:0px 0px 0px 0px; margin:0px 0px 0px 0px;'><script
src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div>
<fb:comments colorscheme='light' expr:href='data:post.url'
expr:title='data:post.title' expr:xid='data:post.id'
width='530'/></div>
<div style='color:#fff;
background-color:#3B5998;border: solid 1px #ddd; font-size:10px;
padding:3px; width:520px;'>Facebook Blogger Plugin by <b><a
alt='blogger templates' href='http://www.safetricks.com'
style='text-decoration:underline; color:#fff;' target='_blank'
title='blogger templates'>Safe
Tricks</a></b></div></div>
</b:if> 


2) Now you can change the width value according to your need and just click save and you are done now go and check your blog to see facebook comments on your blogger blog


Optional: Hide Default Blogger comments


1) Go to settings and then Post and Comments

2) Change Comment location To Hide and click on Save that's it

Now you will only have facebook comment box on your blog and default blogger comment box will be hidden




So friends this is how to add facebook comments box in blogger blog if you like this post please share also if you have any questions do ask in comments section and don't forget to subscribe below to get more blogger tips and tricks and keep coming back for more blogging tips
Read more ...

Thursday, July 10, 2014

How To Add Facebook Like Box To Blogger

Facebook Like Box is similar to Like Button which is specifically designed for pages  As you know that Facebook is one the best social networking site in world currently and it's very important for bloggers and webmasters to capitalize on this to give more exposure for their brands, blogs or websites So if you are using blogger then you must add Facebook like box to your blogger blog to get more likes on your Facebook pages so that you can get your blog to wider audience reach as well as you can drive lots of traffic to your blogger blog and it's the trick you cannot miss

Literally every brand no matter how big or small it is they are on Facebook and are trying to get more fan following for their brand even they are spending huge amount of money on Facebook advertising by this you can estimate how important it is for your blog to have huge number of Facebook page likes

Add Facebook Like Box Blogger
How To Add Facebook Like Box Blogger


So in this post I am going to show how to add Facebook like box to blogger blog but before adding let me tell you what are the benefits of Facebook page like box


Facebook Like Box Widget Benefits


1) Your Blogger Blog will get more exposure and traffic

2) Your visitors can like your Facebook fan page directly from your blog they don't have to leave your blog for liking your page

3) If you readers like your page then whenever you do post on your page your visitors can see those updates on their Facebook

4) You don't have to be a programmer to add like box widget to your blogger blog its very simple

5) Your Readers can see your recent activities on your page

6)  It shows the no of likes and how many people liked your page directly on your blog

7) If your Facebook page has lots of likes and followers then you can show yourself as an authority in your niche which put great impact on your blog visitors and they will follow you so more followers and likes

So there are many benefits of putting Facebook page like box on your blog so lets see how you can do this

Add Facebook Like Box To Blogger

Note-For adding Facebook like box you must have Facebook page for your blog only then you can add this like box widget 

1) First and foremost go to your Facebook page and copy the URL from the address bar it will be like

http://www.facebook.com/nicebloggingtips

Replace nicebloggingtips with your page name 

2) Now go to developers page of facebook like box 

3) And paste your URL in Facebook Page  URL and you will automatically see your widget will show below 

4) Now you can adjust the width and height of like box also you can show faces of your fans, Show header, Set border and color scheme for you like box so go ahead and play around according to your look and feel

Add Facebook Like Box Blogger
Add Facebook Like Box Blogger


5) Next Click on Get Code button below

6) Now Plugin code pop up will open and select IFrame and copy the code as shown below

Add Facebook Like Box Code Blogger
Facebook Like Box Code For Blogger

Adding Facebook Page Like Box To Blogger


1) Go to Blogger Dashboard and click on Layout and click on Add a Gadget

Add Facebook Page Like Box Blogger
Add Facebook Page Like Box Blogger


2) Select Html/Javascript and paste the above copied code in the Content section and Click Save and don't forget to save arrangements and now visit your blogger blog to see you new Facebook page like box 

Add Facebook Page Like Box Blogger
Add Facebook Page Like Box Blogger


So friends this is how to add facebook like box to blogger, if you face any problems do let me know by asking me in comment section and also don't forget to subscribe below to get more such blogger tips and tricks! Keep Blogging
Read more ...

Wednesday, July 9, 2014

Blogger Custom Redirects - Redirect Old URL To New URL In Blogger

Blogger custom redirects is great way to protect your blog readers from seeing 404 page not found errors, There are many times when your change the URL of a particular posts or pages then at this point you cannot just let the old URL to stay intact instead use blogger custom redirects to redirect old blogger URL to new URL. Also if you do this you will not loose any link juice of your older post also if you blog post is quite old it must be having some rankings in search engines so if you are going to change the URL completely it better to redirect it to new URL using custom redirects

I have seen many beginner bloggers that they simply delete the old blog post and create a new blog post with new URL this is very big mistake they are doing it not ideal especially if your blog post is having good rankings in search engines, the new blog post will not be credited with the previous rankings of old post and you have to start from beginning


Blogger Custom Redirects
Redirect Old URL To New URL In Blogger

Blogger custom redirects can be done in two ways 301 redirects and 302 redirects as of now 301 redirects means permanent redirects and 302 means temporary redirects. I will not go into the detail of these custom redirects now but I will do a separate post for it, Also there are many instances where you are not satisfied with the blog URL or after some time you realize that you must change the URL it many be for any reason but you have to use blogger custom redirects so you keep your rankings in search engines and steady flow of traffic and link juice to new blogger URL. So without wasting any time lets start this tutorial on how to redirect old blog post URL to new URL in blogger

Redirect Old URL To New URL Using Blogger Custom Redirects



1) Login to your Blogger Dashboard then click settings

2) Now go to 'Search Preferences' and come to 'Errors and redirections' section

3) Under 'Errors and redirections' there you will see Custom Redirects click on Edit next to it

Redirect Old URL To New URL In Blogger
Custom Redirects In Blogger


4) Here you are going to set custom redirects for your blogger blog by putting the old URL in From input box and new URL in To input box

Note- Don't put the complete URL only put relative URL means exclude the domain name for example
if I want to change the URL- http://www.nicebloggingtips.com/2014/07/contact.html to new URL http://www.nicebloggingtips.com/2014/07/newcontact.html then simply put /2014/07/contact.html in From box followed by /2014/07/newcontact.html in To box 

Custom Redirects Blogger
Custom Redirects Blogger-Old Blogger URL to new URL


You will also see a check box below it which is used for permanent redirection use it wisely according to your need as explained earlier

5) Now Hit Save and Save changes

That's it friends you have successfully redirected old blogger URL to new URL using custom blogger redirects method,if you face any issue please let me know or if you have any doubt regarding this then feel free to ask me via comments also not the least do subscribe for getting more such interesting blogger tips and tricks! Keep Blogging  
Read more ...

Tuesday, July 8, 2014

How To Remove Blogger Navbar

Blogger Navbar is by default shown on every blogger blog but there are large number of bloggers who don't like this navigation bar at the top of their blog header also some says that it doesn't look professional especially if you want to customize your default blogger template to give more fancy and give neat look so many bloggers don't know how to remove navigation bar from blogger blog so this post is going to show you how to get rid of blogger navbar so your visitors might have good experience and will make your template look more like premium themes but before showing you how you can remove or hide this navbar let me give some brief advantages why blogger implemented this navbar and why they are using it on blogspot blogs


Advantages of Navbar in Blogger

Remove Blogger Navbar
Blogger Navbar


1) You can directly go back to blogger.com by clicking the 'B' icon on left hand side
2) Search bar to search blog posts from that blog
3) Your visitors can give +one your postwith single click with will improve your rankings
4) Readers can share blog post by clicking on More dropdown
5) They can randomly check other blogs hosted on blogger
6) You can create new blog post by clicking New post and play with your blogger design and even sign out directly


Disadvantages of Navbar in Blogger


1) It give less professional look to your blogger blog
2) You visitors can go to other blogs by clicking on Next Blogs which is the biggest disadvantages of blogger navigation bar, You don't want your readers to go away from your blog

So its better to get rid of this blogger navbar since it can take away your precious blog readers to different blogs Thus without wasting anytime let remove this from your blogger blog

How To Remove Navigation Bar In Blogger


If you want to remove blogger navigation bar you can do it in 2 ways one through your blogger layout section and another by adding CSS to your template So lets see one by one and its very simple


Remove Navigation bar through Layout Widget


1) Log in to your blogger dashboard and click on Layout

2) Now look for Navbar gadget and click on Edit link as shown below

How To Remove Blogger Navbar
How To Remove Blogger Navbar


3) A popup will open and check the radio button next to Off as shown in below and this will disable or hide the navigation bar from your blogger blog and click Save

Remove Blogger Navigation Bar
Remove Blogger Navigation Bar


Remove Navigation bar through Template



1) Go to your Dashboard > Template and click on Edit HTML button. Add following code above the ]]>
 tag of your template and hit save

How To Hide Blogger Navbar


#navbar-iframe {
height: 0px;
visibility: hidden;
display: none;

}

So friends this was how to remove blogger navbar I hope you can now get rid of this navigation bar from your blogger blog very easily to make your blog look more professional and it will also put good impression on your readers, if you like this post please share and don't forget so subscribe below to get such more blogger tips and tricks! Keep Blogging
Read more ...

How To Show Google Translate Widget In Blogger

Google Translate widget is one of the best way to increase your blog readers and explore your blog to wider audience around the world since there are many languages spoken and there are many country So it would be wise to provide some sort of language translation options for your readers which will drastically improve your traffic and pageviews. Moreover there are many instances where your visitor might like to read the article in other language in which he is comfortable with so here the importance of Google translate widget bar comes since your reader can simply select the language from the drop down menu or alternatively select the country which is shown as country flags and they can read in their language this will definitely improve the reach of your audience.

So in today's post I am going to share how you can translate your webpage to all the available languages spoken in different countries all around the world so your users can understand your articles properly and for this I am going to use very famous Google translate widget bar with flags as it's very simple to embed it on your blogger blog So without wasting much time lets see how to add this google translation widget to your blogger blog


Google Translate Widget Blogger
Show Google Translate Bar Widget Blogger

So here I am going to show 2 ways by which you can show this Google translate widgets to your blogger blog one without flags which will only show different languages to select from and other which displays flags of different countries where users can select the country to which they belong So lets see one by one

Google Translate Widget For Blogger- Without Flags

1) First login to your blogger dashboard << layout

2) Next click on 'Add a Gadget'  in sidebar because sidebar is best place to show this google translate widget to your readers then a new popup window will open


3)  Scroll down and select Translate by clicking the + sign

Google Translate Blogger
Google Translate Blogger



4) Next here you can configure your translate widget here you have 3 different styles to select from Vertical, Horizontal and Dropdown only then Click on Save.

Google Translate Widget Blogger
Google Translate Widget Blogger


5) Now go and check your blog your Google translate widget will show you can test by selecting the languages from dropdown box and your webpage will translate to the selected language

Google Translate Widget With Flags For Blogger

1) Now till step 2 do exactly the same and instead of selecting Translate widget select Html/Javascript gadget by clicking the + sign

2) Now give your widget the title and paste the below mentioned code in content area

<!--Google Translate Widget Starts-->

<style>
ul#translate-flag {padding:0;margin:0;}
#translate-flag li {list-style: none;float:left;_display:inline;padding:0;margin:1px;width:16px;height:11px;background-image:url(https://lh4.googleusercontent.com/-w4sW4pBjcR4/UT8xUL38fMI/AAAAAAAAE_8/qwdfGhmNxqA/s264/flags-sprite.png);background-repeat:no-repeat;}
#translate-flag li a{display:block;width:16px;height:11px;cursor: pointer;}
</style>
<ul id="translate-flag">
<li id="malay" style="background-position:0px 0px;"><a onclick="href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=en|ms&amp;hl=ms'" title="Translate to Malay"></a></li>
<li id="arabic" style="background-position:0px -11px;"><a onclick="href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=en|ar&amp;hl=ar'" title="Translate to Arabic" ></a></li>
<li id="chinese" style="background-position:0px -22px;"><a onclick="href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=en|zh-CN&amp;hl=zh-CN'" title="Translate to Chinese"></a></li>
<li id="estonia" style="background-position:0px -33px;"><a onclick="href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=en|et&amp;hl=et'" title="Translate to Estonian"></a></li>
<li id="finnish" style="background-position:0px -44px;"><a onclick="href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=en|fi&amp;hl=fi'" title="Translate to Finnish"></a></li>
<li id="french" style="background-position:0px -55px;"><a onclick="href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=en|fr&amp;hl=fr'" title="Translate to French"></a></li>
<li id="german" style="background-position:0px -66px;"><a onclick="href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=en|de&amp;hl=de'" title="Translate to German"></a></li>
<li id="greek" style="background-position:0px -77px;"><a onclick="href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=en|el&amp;hl=el'" title="Translate to Greek" id="greek" ></a></li>
<li id="hindi" style="background-position:0px -88px;"><a onclick="href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=en|hi&amp;hl=hi'" title="Translate to Hindi"></a></li>
<li id="indonesian" style="background-position:0px -99px;"><a onclick="href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=en|id&amp;hl=id'" title="Translate to Indonesian" ></a></li>
<li id="italian" style="background-position:0px -110px;"><a onclick="href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=en|it&amp;hl=it'" title="Translate to Italian"></a></li>
<li id="japanese" style="background-position:0px -121px;"><a onclick="href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=en|ja&amp;hl=ja'" title="Translate to Japanese"></a></li>
<li id="persian" style="background-position:0px -132px;"><a onclick="href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=en|fa&amp;hl=fa'" title="Translate to Persian"></a></li>
<li id="norwegian" style="background-position:0px -143px;"><a onclick="href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=en|no&amp;hl=no'" title="Translate to Norwegian"></a></li>
<li id="portuguese" style="background-position:0px -154px;"><a onclick="href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=en|pt&amp;hl=pt'" title="Translate to Portuguese" ></a></li>
<li id="romanian" style="background-position:0px -165px;"><a onclick="href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=en|ro&amp;hl=ro'" title="Translate to Romanian"></a></li>
<li id="russian" style="background-position:0px -176px;"><a onclick="href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=en|ru&amp;hl=ru'" title="Translate to Russian" ></a></li>
<li id="slovak" style="background-position:0px -187px;"><a onclick="href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=en|sk&amp;hl=sk'" title="Translate to Slovak"></a></li>
<li id="spanish" style="background-position:0px -198px;"><a onclick="href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=en|es&amp;hl=es'" title="Translate to Spanish"></a></li>
<li id="swedish" style="background-position:0px -209px;"><a onclick="href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=en|sv&amp;hl=sv'" title="Translate to Swedish"></a></li>
<li id="thai" style="background-position:0px -231px;"><a onclick="href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=en|th&amp;hl=th'" title="Translate to Thai"></a></li>
<li id="turkish" style="background-position:0px -242px;"><a onclick="href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=en|tr&amp;hl=tr'" title="Translate to Turkish" ></a></li>
<li id="vietnamese" style="background-position:0px -253px;"><a onclick="href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=en|vi&amp;hl=vi'" title="Translate to Vietnamese" ></a></li>
<!-- <li id="dutch" style="background:url(https://lh5.googleusercontent.com/-ZCYKJNwpNiA/UT8w1_tGFOI/AAAAAAAAE_0/yKb-UxtVy_E/s16/nl.png) no-repeat;"><a onclick="href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=en|nl&amp;hl=nl'" title="Translate to Dutch" ></a></li> -->
</ul>
<div style='clear: both;'></div>


<!--Google Translate Widget Ends-->

3) That's it now hit Save and you are done and this widget will show different country flags from which your readers can select the country he belongs to and you webpage will reflect on that country language   So Friends this was how to show Google translate bar widget in blogger blog by adding this translate widget bar to your blog will surely give you few extra pageviews from different countries as there are many different languages spoken throughout the world So I may recommend that if you are using blogger blog then definitely you can't miss out this options for increasing your blog exposure, If you like this post please share and don't for get to subscribe to get more blogger tips and tricks! Keep Blogging
Read more ...

Monday, July 7, 2014

How To Create Html Sitemap Page In Blogger

You must have created XML sitemaps for your blogger blog but let me explain you the difference between Html sitemaps and Xml sitemaps, Html sitemaps is used by your readers to see all your blog posts in one place whereas Xml sitemaps are for search engines and users cannot understand it properly and they are not clickable text So if you are using blogger then you must create Html sitemaps page in your blogger blog for giving your user a place to find all your blog posts

Html Sitemap is one of the most important page every blogger must have because it help crawlers to properly index your blog content and all it pages also it help search engine to find all the blog post from your blog which will drastically improve your indexing rate and you blog post will be crawled properly, Many times it happen that you do on page SEO by interlinking your blog posts but for some reason you changed some url's of your blog post which search crawlers will never be able to crawl from that link and it' also helps to showcase all your blog posts either for a particular label or from your complete blog to your readers so they don't have to dig deep in your archieves

Create Html Sitemap Page In Blogger
How To Create Html Sitemap Page In Blogger


Another great advantage of creating Html sitemaps page for blogger blog is that it can help you to improve your pagerank and also it will increase your pageviews and bounce rates which is great for your blog SEO Thus without wasting much of your precious time lets jump straight to create Html sitemap for your blogger blog

You can create Blogger Html sitemaps in two ways like if you want to show all posts for a particular label else to show all your posts which will include all the posts from every label So lets see one by one

Create Html Sitemap Page For All Labels In Blogger


1) First login to your blogger dashboard 

2) Click on Pages then New page

Create Html Sitemap For Blogger

3) Now go to HTML Mode and paste the below code

<script type=”text/javascript”>
var numposts = 100;
var standardstyling = true;
function showrecentposts(json) {
 for (var i = 0; i < numposts; i++) {
   var entry = json.feed.entry[i];
   var posttitle = entry.title.$t;
   var posturl;
   if (i == json.feed.entry.length) break;
   for (var k = 0; k < entry.link.length; k++) {
     if (entry.link[k].rel == ‘alternate’) {
       posturl = entry.link[k].href;
       break;
     }}
   posttitle = posttitle.link(posturl);
   if (standardstyling) document.write(‘<li>’);
   document.write(posttitle);}
   if (standardstyling) document.write(‘</li>’);
}
</script>
<ul>
<script src=”http://www.nicebloggingtips.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts&amp;max-results=999″></script>
</ul>

4) Now change www.nicebloggingtips.com with your blog url and click on Save and Publish that's it you have successfully created blogger html sitemap for all labels

Create Html Sitemap Page For Particular Labels In Blogger


In the above page it is going to show posts from your blog which will include all posts from all labels but if you want to show only posts from particular label then insted of the previous code paste the below mentioned code which will show only posts from particular labels from your blogger blog

<script type=”text/javascript”>
var numposts = 100;
var standardstyling = true;
function showrecentposts(json) {
 for (var i = 0; i < numposts; i++) {
   var entry = json.feed.entry[i];
   var posttitle = entry.title.$t;
   var posturl;
   if (i == json.feed.entry.length) break;
   for (var k = 0; k < entry.link.length; k++) {
     if (entry.link[k].rel == ‘alternate’) {
       posturl = entry.link[k].href;
       break;
     }}
   posttitle = posttitle.link(posturl);
   if (standardstyling) document.write(‘<li>’);
   document.write(posttitle);}
   if (standardstyling) document.write(‘</li>’);
}
</script>
<ul>
<script src=”http://www.nicebloggingtips.com/feeds/posts/default/-/Label%20Name?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts&amp;max-results=999″></script>
</ul>

Again change www.nicebloggingtips.com with your blog url and Label%20Name with your label name for which you want to show blog posts for

One important note here is that labels are case sensitive which means if you will post blogging tips instead of BloggingTips then it will not works so put exactly the same as you named your labels and also if your label contains more than 1 word then do put %20 between each word for example if your label name is traffic tips then put traffic%20tips then and then only it will work

After this click on publish and you have successfully created blogger html sitemap for particular labels from your blog

So friends this is how to create Html sitemap page in blogger and if you have any doubt please ask me in comment section and don't forget so subscribe below for getting more blogger tips and tricks which will help your blogger blog to stand out from the crowd and Keep Blogging!
Read more ...

Saturday, July 5, 2014

Optimize H1,H2 and H3 Heading Tags In Blogger

Optimizing hearder tags in blogger is most important part in your SEO which highly determines your search engine rankings, You must be knowing that H1 tags is most crucial tag which is has most weightage as compared to H2 and H3 tags and so on upto H6 but if you are using blogger then default blogger setup is not optimized well for these heading tags and you must optimize it to get good rankings for your blog posts as it will hardly take few minutes to properly SEO Optimize your heading tags in blogger So before we get into this tutorial lets see first what default blogger heading tags setups is and what you need to change for making your blogger blog more SEO friendly

Heading Tags H1, H2 & H3 Optimization in Blogger

By default blogger set your blog title with H1, post title as H3 and sidebar titles as H2 as you must be knowing that sidebar are not as much important as compared to post titles in search engine and for SEO purpose So we have to fix this issue

Recommended Read- How To Show Post Title Before Blog Title In Blogger
 Optimize H1, H2 & H3 heading tags in Blogger
 Optimize H1, H2 & H3 heading tags in Blogger

Also for your blog homepage blogger assigns headings tags as follows


<h1>Your Blog Title</h1>
<h3>First post's title</h3>
<h3>Second post's title</h3>
<h2>Sidebar Gadget title</h2>

As you can see above the sidebar is given the heading tag H2 which is not important as compared to your post titles so we will change this to

<h1>Blog Title</h1>
<h2>first post's title</h2>
<h2>second post's title</h2>
<h4>Sidebar Gadget title</h4>

For Post pages blogger assignes heading tags as follows


h1>Blog Title</h1>
<h3>The post title</h3>
<h2>Sidebar Gadget title</h2>

Since you know when you do a blog post you want your blog post to rank higher in search results so we need to change the default heading distribution as below

<h2>Blog Title</h2>
<h1>The post title</h1>
<h4>Sidebar Gadget title</h4>

So now that you got the idea what we have to change to make our blogger heading tags more SEO friendly so lets start the tutorial

Optimizing Heading tags in Blogger

Note-Before making any changes to your blogger template please backup your complete template if in case anything goes wrong and it for your safety so that you can restore it


Must Read- How To Backup / Restore Blogger Template Tutorial


1) Login to Blogger Dashboard and click on templates and then edit Html

Heading Tags Optimization in Blogger
Heading Tags Optimization in Blogger
2) Now for post pages and static pages we will change the blog homepage title to h2 since its given H1 while for post pages your blog post titles is much important and it determines your blog post ranking in search engines so

Now press CTRL+F and find  id='header-inner' in your code see below image for reference and exactly change in this section only


Blogger heading tags optimization
Blogger heading tags optimization

3) Next we will change post titles to H1 from H3 on post and static pages so again press CTRL+F and find
 <h3 class='post-title entry-title' itemprop='name'> in your code and change H3 to H1

heading tags optimization Blogger
Heading tags optimization Blogger


Setting Heading Tags for Sidebars

1) Now search for ='sidebar' in your code where you will find all widgets code used in your blogger blog and next to them you will see arrow mark click to expand and within you can see the heading tags for your widgets so change the heading tags from H2 to H4 for all your widgets

Optimize Sidebar Heading Tags Blogger
Optimize Sidebar Heading Tags Blogger

Do the same for all the widgets you have added to your blog and change widgets tags from H2 to H4 for all 

Setting Heading Tags for Footer

Similar you have to do with your footer widgets so search for ='footer' and again within change the heading tags from H2 to H4 for all the widgets and gadgets in footer of your blogger blog

Optimize Footer Heading Tags Blogger
Optimize Footer Heading Tags Blogger

Again do same for all the widgets in footer section of your blogger blog to optimize your heading tags

4) Now Finally save your template and you are done

So friends this is how you can optimize your heading tags H1,H2 and H3 in blogger so now you blogger heading tags are full SEO optimized so by doing this change you will get your blog posts get ranked higher in search engine to get more traffic So if you like this post please share with your friends and if you face any issue please don't hesitate to ask me in comment section and most important don't forget to subscribe to get such more blogger tips and tricks! Keep Blogging
Read more ...
Article By Rohit Singh Hi Friends I am the owner of NiceBloggingTips and your blogging buddy to help you all and share some useful articles and tips related to make a blog successful If you like This post, you can follow NiceBloggingTips on Twitter. Subscribe to NiceBloggingTips feed via RSS or EMAIL to receive instant Free updates. You can connect with me at Facebook,Google+,Linkedin,Pinterest

SEARCH