Articles by "Blogger Tricks"
Showing posts with label Blogger Tricks. Show all posts

at 2
Just blogging things you need to know. Social media tips and tricks, blogging tips and tricks and search engines news.

HelpITx is live again after a long period. A couple of months ago, I accidentally deleted HelpITx blog from my blogger account and the most horrifying thing was the unavailability of any backup for my blog even I didn't have any backup for template and content too. The creepiest thing was that the blog was not deleted in a normal way that is it's deactivated for 90 days and then it's deleted permanently. In my case I accidentally deleted the blog permanently. It's very easy to restore a blogger blog in 90 days when it is deleted in the normal way because even after deletion from your side, it still remains on Google servers and you can easily recover it back clicking on a single button but what if you delete it permanently? You can't see your blog in blogger dashboard even in the deleted blogs list and it seems almost impossible to restore that blog. There isn't any visible option of restoring that permanently deleted blogger blog.

What you had done if you ever came across this situation? Well honestly speaking, at first second when I realized that my whole blog has been deleted by me permanently, I was shocked and lost hope to see it live again. This shocking situation survived no more than 5 minutes as I quickly get an idea to recover my permanently deleted blogger blog. At first it really seemed impossible to have my blog back to live but as a blogger I never learnt to loose hope so I struggled and finally restored the blog.


In this post I am gonna tell you how I made this apparently impossible task possible. There isn't any rocket science involved in it and it is a lot easier process than you think but it requires some patience and manual work so it could be a little time taking task to get your blogger blog back but I assure you that it is worth of doing it. Now we proceed towards the method.

Make Sure Your Blog Was Indexed?

Before trying to restore blogger blog from this method you must be confirmed that your blog was indexed in search engines before it got deleted. If it wasn't indexed in the search engines or neither you allowed search engines to crawl through your blog than it becomes impossible to recover it by using any method. Well if you're not already prepared for it then you must learn how to index your pages in search engines and also how to make use of Google Webmaster tools to make this process faster. If your homepage and articles were indexed in the search engines specially Google then you can proceed to restore the deleted site. I'd my articles indexed in the search engines and my blog was allowed to be crawled by bots so I could do it.

Tools Needed To Restore Permanently Deleted Blogger Blog?

The tools needed for the working of this process are.
  1.  Archive.org
  2. Google Web Cache
Before proceeding further, I should introduce you with these tools.

1. Archive.org:

Also called the Wayback Machine, is the online archive for all publicly accessible internet data including webpages, images and multimedia. Basically the wayback machine works as a search engine that crawls through the URLs and downloads all the data available on those URLs if they allow web spiders to crawl them that is later accessible in a timeline form. It means that a same page can be downloaded on multiple dates and is available to be viewed for every past date. It's a very useful feature that let you find that how a site looked like in the past. Well if your blog is indexed in Google, then there are stronger chances that it would be available on the Way Back Machine too.

2. Google Web Cache:

Google regularly downloads the indexed webpages in its cache that can be viewed later. Unlike wayback machine from archive.org, it only stores a single copy of latest downloaded page. It doesn't store periodic copies and we can't even know the date when Google downloaded that webpage. Webpages can also be found using this service if the website is off due to any reason. So it is another tool that's helpful in recovering your deleted webpages.

Now I proceed to steps of recovering my blog.

Steps Of Recovering Permanently Deleted Blogger Blog?

At first I went to archive.org and searched my domain on it. I was fortunate to see even the first glance of my blog in the wayback machine. I went through each link and created a list of all articles present in the archives.

It was an easy but not a simple task because I'd to go through multiple links and copy the link of each article.

Now you must want to know how I gathered all links to articles that were written in my blog.

First of all I went to homepage of my site using wayback machine and then opened each article. Each article contained links to other articles because I place links to other posts in my articles. The process was easy then, I copied links from there and pasted in a separate notepad file to access later. After collecting all links, the actual work began.

I created a new blog with the same title and domain as my previous one. You'd already know how to do it as you lost the blog because you'd done the above mentioned steps before.

After setting up new blog, the next part was to import content and that was not possible automatically. So what I did?

I opened the list of all links to my blog's articles and opened Way Back Machine. Entered the link to article in wayback machine and that opened all archives present of that article. I simply selected the latest archive and opened it. Then the process was simple, just copied the whole article including images. I think there is nothing special in it to guide you. Then I go to my blogger dashboard, created a new post and pasted the whole content into my blogger post editor. Edited the post, specially links in the post. You must edit all links that are present in your article before finally posting the article because articles copied from archive.org contains all links archived so it's better before final posting, review all the links in the article.

Then after setting up a post I simply published the article and that's it. I did it with all links I collected. For the articles that were not available in way back machine. I used Google Cache to restore my posts. For this I went to cachedview.com and pasted the link so that I can find cached image of that article. After finding the article, I repeated the above process and got my blog back.

Hope that this tutorial helps you in getting your permanently deleted blogger back in future. Stay tuned with us for more new tutorials and posts.

Image Credits: Shutterstock
Continue reading


at 2
Just blogging things you need to know. Social media tips and tricks, blogging tips and tricks and search engines news.

Comments play a very important role in search engine optimization of your blog because they represent users' interaction to the site and give an idea about the popularity of your website. An adequate commenting system is necessary for a struggling website. There are many commenting systems available on the internet to embed in your site among which we have already learned to install in your blog.
In this article, I am going to share a method to add multiple comments system in blogger that works at the same time along with blogger default commenting system as you can see in my blog.

Before implementing this system to blogger, you must know its pros and cons. The major benefit of using all these comments system is that interaction is increased on your blog because it allows users to comments with multiple social plugins. With this you enjoy advantages of all major comment systems.
Continue reading


at 2
Just blogging things you need to know. Social media tips and tricks, blogging tips and tricks and search engines news.

Facebook is most popular social media site according to Alexa rankings and it stands on second rank among most visited sites around the globe. Integrating different social plugins to your blog and website increases success rate of your online business. We have already discussed integrating Facebook in a website. Now we will be moving forward to explain the method of adding Facebook comments to blogger. In our previous few updates, we also learned to install Disqus and Google Plus commenting systems to blogger. Facebook comments system is another popular social plugin to integrate in website.
Continue reading


at 3
Just blogging things you need to know. Social media tips and tricks, blogging tips and tricks and search engines news.

A blogger loves to see comments on his blog because it shows the interest of readers in his writing and he get an idea what his readers think about his blog. A good commenting system helps a user to interact with other readers or Admin of the blog hence making it easier to go for the solutions of problems and sharing their ideas. Since default commenting systems in most popular blogging platforms are awesome but they might lack some features thus webmasters go forward to use third party commenting systems. In our previous tutorials, we explained how to install Disqus comments system in bloggerand importing blogger comments to Disqus. Now we are going to introduce you with another popular commenting system which is provided by Google. It is GooglePlus comments system which is being used by many bloggers in their blogs.

Like disqus, Google Plus comments system has also a lot of advantages which make it precisely perfect commenting system. While working on blogger, it is a quick task to enable Google plus comments in the blog. Before proceeding to add Google Plus comments in the blogger running blog, I want to share pros and cons of this commenting system so before integrating the system, you might have an idea what you are actually going to perform.

Advantages Of Google Plus Commenting System:

Here go the pros of this system.

1. Elegant And Responsive Design:

Google Plus comments widget has an elegant design which gives a professional look to the blog. It looks simple and clean but doesn't like trending style. It's design is responsive on the other hand which works equally well on all devices.

2. Threaded Comments System:

It is a threaded comments system in which continuing a discussion on single comment is possible. It is a great feature which boosts discussions around the readers.

3. Notifications:

Unlike blogger default commenting system, commenters on Google plus widget are notified for the responses on their comments. Actually this system works with Google plus social network so it sends notification each and every time for the responses the user has enabled notifications and usually they are enabled for replies on comments. It might increase the traffic from returning users on your blog along with social interaction.

4. Public And Private Comments:

A reader can make private or publicly seen comments on this widget so comments are only visible to those whom the reader allows to see. This feature lacks in other commenting systems so Google plus can be given priority over them depending on the requirement of blog readers and admin.

5. Permalink Of Comments:

The permalink of comments made on Google plus are easy to get from the comments menu. This permalink can be used to access the comment directly of profile of the commenter.

6. Increase Traffic:

Whenever someone shares your post on his Google Plus profile, it also adds a comment. Well most of the users also share the comments on their profile which might help to increase your blog traffic. There is a possibility that readership of your blog's commenter is strong enough to send a good number of visitors to your blog which is helpful only.

7. Comments Editing:

You as an Admin, cannot edit comments of other users but they are allowed to edit their own comments. Default commenting system lacks this feature so it has another advantage over that.

8. Synced With Blogger Comments:

Comments made on blogger default comments widget are not lost and they are also displayed in this system without any changing to template or import.

Disadvantages Of Google Plus Commenting System:

There aren't only advantages but also some disadvantages due to which users give default or third party comments system on Google plus. Here we will also discuss them so you there will be a clear picture in front of you. Here go the cons of this system.

1. Only Google Account To Comment:

One of the disadvantage which destructs all the charm of this system is that making comments is only possible with Google account. A reader cannot comment until he has an account on Google and if not, he is obliged to make one. We have found social media integration to comments in nearly all popular commenting systems except for this one hence it is not as popular as others.

2. Lacks Option For Comment Moderation:

There is nothing to moderate comments before publishing so spammers are allowed to make irrelevant comments too. The only thing which you can do is to Mute them which stops their comments from appearing but there isn't pre-publishing moderation thus bringing both admin and reader at the same stage.

3. Comments Are Lost With Change In URL:

Comments on this system are associated with URL of the post thus you loose all your comments made on Google plus if you change the link of your page/post. So if you want to change domain or post permalink, then think twice and its better to Enable Google plus commenting system at the stage where you are 100% sure that you won't change URL in future. If you are going towards a custom domain, then first set custom domain on your blog and after it Add Google plus comments in your blog.

There is a possibility that these disadvantages stop you from installing this system in your blog so act wisely after thinking.

Now I will explain the method of enabling this system in blogger which is just 2 steps method.

Enable Google Plus Comments System In Blogger:

This system works only if your blog is associated with your Google plus profile instead of limited blogger profile. Now we have found that all blogger enabled blogs are associated with Google plus by default so no need to perform any extra action. Just follow the below steps.

1. Log in to your blogger account. Go to your blogger dashboard > Google +.

Google Plus Comments

2. In Google plus section of the blog, mark the "Use Google+ comments on this blog." field. Comments widget will be updated automatically.

If you are using custom blogger template, then this system might not display on your blog if the designer has not made those changes in template necessary to display comments. If you are having a problem that comments widget is not displaying, then follow the below steps to solve this.

1. Go to blogger dashboard > Template > Edit HTML.

Blogger Template Editor

2. Click anywhere inside the template editor and press CTRL+F. Type the following code in search box and hit enter.
<div class='post-footer'>
3. Just below this, paste the following line of code.
<div class='cmt_iframe_holder' data-viewtype='FILTERED_POSTMOD' expr:href='data:blog.canonicalUrl'/>
Note that there may be more than 1 occurrences of <div class='post-footer'> in your template so add above piece of code after each and every occurrence.

4. Click on save template.

You're done.
If you are still facing any problem, then feel free to ask us in comments.
Continue reading


at 0
Just blogging things you need to know. Social media tips and tricks, blogging tips and tricks and search engines news.

There are various comment systems available on the internet for websites. These systems let readers interact with each other by sharing their ideas, problems and find their solutions. Most common blogging platforms like blogger and Wordpress have their default comment systems which also look great but some bloggers like to use third party comment systems having some more features. Disqus comment system is most popular third party commenting system in this class. We have seen that most of the popular news websites and blogs use Disqus commenting system as their preferred one. It is simple to intall with many advanced features which default commenting systems lack so there is nothing to wonder if you find Disqus comment systems in many websites. Before proceeding towards the method of installing Disqus in blogger, we will discuss advantages of this system which will help you in taking right decision for your blog.
Continue reading


at 0
Just blogging things you need to know. Social media tips and tricks, blogging tips and tricks and search engines news.

In our previous tutorial we have learned how to install disqus comments in blogger. In this tutorial, we discussed that Disqus also allows us to import comments from our default commenting system which is a very useful feature. It is because sometimes there are lot comments on your blog but introducing a new commenting system removes all those which is bad for site's SEO. To prevent them from disappearing completely, its a good option to import them into Disqus which offers more useful features. So in this post, we will be discussing how to import blogger comments to Disqus comments system.

How To Import Blogger Comments To Disqus:

Follow below steps to complete the import process.

1. Log in to your disqus account.
Continue reading


at 0
Just blogging things you need to know. Social media tips and tricks, blogging tips and tricks and search engines news.

Blogger post editor comes with a number of features which help bloggers to give their posts a stylish and professional look. But when it comes to compare something or creating a table in the post, we don't find any option in post editor to insert a table. We may create an HTML table but it has some limitations and its not easy to give it a stylish look. Another option is to create tables on MS word and copy their code in our blog posts but that inserts an extra chunk of codes in our post thus slowing our page. In order to avoid these difficulties we will create a CSS table to add in blogger posts. The table which we are going to share also gives hovering effect and easily loads in posts without slowing your page. Below is the demo of this table.
Continue reading


at 5
Just blogging things you need to know. Social media tips and tricks, blogging tips and tricks and search engines news.

As the technology is getting a boost, use of mobile devices including cell phones, smartphones and tablets to access internet is increasing which has changed the scope of SEO. Having a single website design for all type of devices is becoming an older story now and everyone is going towards making his site responsive which works efficiently on different type of devices. It is getting trendy to have separate designs of a website for each type of device according to its dimensions so the site layout is adjusted as the width of the device changes. For example a user experiences a different layout of a website on a smartphone than that of a desktop.

While using big sites like Facebook, Google, Twitter etc you see a variety of layout designs when switching from device to device. On mobile phones you notice a different layout than smartphone or tablet and the layout on tablets differs from what you experience on desktop. The most important thing which you will note in all these layouts is that they are adjusted according to screen size hence sidebar scrolling no more remains a problem using this type of design. This is not only beneficial for user but also for site's search engine optimization as Google loves to see sites which have separate layout design for mobile devices.

Mobile Version Or Responsive Design:

There are two major ways of making separate layouts of website design which include mobile version or a responsive design. Mobile version of a website needs to make a totally different version of site hosted on different subdomain where a mobile device redirects the user. A responsive design refers to design a site's template in such a way that its layout is adjusted automatically according to screen width of device to be used for accessing the site. There is no need to host the mobile site on separate sub-domain and creating a totally new design because responsive design can be adjusted using simple CSS rules which is a lot easier process.

If you are running a blog or a small site then its better idea to make a responsive design rather than creating a mobile version because all you have to do is to set specific CSS rules for the adjustment of layout on the same template for responsive designs. It reduces worries about making a totally new website for mobile devices so it is more effective way to give your mobile users a good experience.

Why To Use Responsive Template Design In Bogger:

While working on blogger, the most recommended practice is to make your blogger template responsive instead of using mobile version. Blogger uses a default simple mobile template which automatically starts working on mobile devices unless you specify in settings to use the custom template. The default mobile template for blogger is itself very faster and efficient but the problem is that it only supports default elements and we cannot introduce new elements and functions hence it stops display of those widgets which are already included in your template design. Its not only about these limits but the problem remains with Ads too. This template doesn't show ads also which decreases revenue generated from site traffic thus using a responsive design is a good idea.

Using a responsive template lets you configure your blog's design compatible for mobile devices. It gives freedom of showing your desired widgets, adjusting layout of your own choice along with displaying of Ads. In this way making a responsive design is best option to be used on blogger.

Now we will learn how to make a responsive blogger template.

How To Make A Blogger Template Responsive:

A blogger template is made responsive by using special CSS rule which is called @media query. It works like conditional tags in blogger and If Else statements in Javascript.

We advise you to read our introduction to most important web-design languages which would help you understand this tutorial in a better way.

The value which we will use in this @media query is "screen" which will determine and adjust the design layout according to screen widths on different type of devices.
Lets understand it. As I said above we use this query like conditional tags and adjust the design layout according to screen width using @media query. It means we will set a screen width value in our @media query and then use our desired CSS syntaxes to adjust width, positioning, size and other values of our HTML elements.

Now we proceed to learn their usage for making a responsive blogger template.

Before using CSS @media query in our blog, we have to insert a following meta tag in the head section of our blogger template.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>

To add it in your template go to blogger dashboard> Template > Edit HTML. Click anywhere inside the template HTML editor and press CTRL+F. Now search for <head> tag and just below it paste the above tag. It makes @media query functional to adjust the layout as the screen width changes. To add them in your template, search for ]]></b:skin>tag in template and paste following example codes just above this tag.
@media screen and (max-width : 1280px) {
/* For Screen Width Less than Or Equal To 1280 ---*/
/* CSS CODE HERE FOR DESKTOP DESIGN ---*/
}

@media screen and (max-width : 1024px) {
/* For Screen Width Less than Or Equal To 1024 ---*/
/* CSS CODE HERE FOR TABLETS DESIGN ---*/
}

@media screen and (max-width : 768px) {
/* For Screen Width Less than Or Equal To 768 ---*/
/* CSS CODE HERE FOR SMALL TABLETS DESIGN ---*/
}

@media screen and (max-width : 640px) {
/* For Screen Width Less than Or Equal To 640 ---*/
/* CSS CODE HERE FOR IPHONE ---*/
}

@media screen and (max-width : 480px) {
/* For Screen Width Less than Or Equal To 480 ---*/
/* CSS CODE HERE FOR SMARTPHONES ---*/
}

@media screen and (max-width : 320px) {
/* For Screen Width Less than Or Equal To 320 ---*/
/* CSS CODE HERE FOR SMALL MOBILES ---*/
}
Replace the example text inside /* with the CSS rules you want to use for the above above device types according to their screen widths.
In the above queries, max-width is used to specify the screen width up to which the CSS codes will work. In the above example we have set max-widths for nearly all type of devices. By using separate coding for each class of devices, we make sure that they don't interfere each other and responsive design works properly on each device.
For example CSS coding for max-width 480px in above quries will work upto 480px but will not work below 321px because we have placed separate CSS for device sizes up to 320px.

Things To Remember:

Following points should be remembered while making responsive design.
  • Use em instead of pixels (px) to define font-sizes, padding, margin values for example 1.8em instead of using 1.8px.
  • Use percentage instead of numeric values to define width of columns. For example use 100% instead of 340px or adjust the % size according to requirement.
  • Make sure to use max-width and min-width properties for special elements.

Live Test Your Responsive Style:

To test live responsive style of your website, visit Responsive Test.

Hope it helps in creating an awesome design for your blog. If you still need help feel free to ask in comments.
Continue reading


at 0
Just blogging things you need to know. Social media tips and tricks, blogging tips and tricks and search engines news.

A 404 Error page results when a user asks for a page in your site which isn't available or never existed. 404 error is HTTP Page not found status and technically speaking, it happens when the client is able to access servers but servers couldn't find the requested material. For example you type an invalid address with any active domain, so the domain will be accessible but servers will fail to produce any data for that address so you will get a 404 Not found error.
Continue reading


at 0
Just blogging things you need to know. Social media tips and tricks, blogging tips and tricks and search engines news.

Whenever you click a label button in a blog which runs on blogger platform, it opens the page with specified URL for that label and you see a default message which says "Showing posts with Label 'Your Label'. Show All Posts". We don't find any method on blogger dashboard to customize or remove this message so in order to perform these functions we will have to make some manipulations in our blogger template. The reason to remove this default message is just that some people consider it an obstacle to give professional look to the blog or they don't like the default message. Our blog itself isn't showing this message for label pages. Before proceeding further I should inform you that you might find different tutorials on removing this message but they don't explain all the effects of applying those methods so this disturb one thing in order to improve another.
Continue reading


at 0
Just blogging things you need to know. Social media tips and tricks, blogging tips and tricks and search engines news.

Conditional tags are special tags used in blogger templates which target different HTML, CSS and Javascript elements to specific type of pages or URL. A blogger template contains variety of elements which are not necessary for each and every page type. Some elements should be used in post pages but their presence in home page will make template awkward. Similarly you are not supposed to show Adsense ads on static pages in your blog because they are not actual content pages so you could get penalty from Adsense for doing so. A conditional tag is a tool which helps you in adjusting target of a specific element.

If you have ever seen HelpITx's 404 page, you might have noted that some elements which are displayed in other pages do not appear in these pages for example Right Side bar, Mini Header, Comments, Header etc. These elements have been stopped to appear by using conditional tags. In English language, a conditional sentence is composed of two clauses, If clause and then clause where "if" shows the condition while "then" shows the consequence of the condition. Just like this, the conditional tags in blogger also consist of an If statement and instructions to be implemented for that condition.

How Conditional Tags Work In Blogger:

Below is a typical example of conditional tag syntax.
<b:if cond='your condition'>
CSS, HTML or Javascript Coding
</b:if>
If you have little knowledge of HTML, then you might have noted that it is basically a <b:if> tag which is extended by a "cond" attribute. It is conditional attribute where we enter our condition which is then followed by content and end with closing </b:if> tag. The HTML, CSS rules and Javascript which we enter in this cond attribute will be applied to our conditions.
Lets see an example of removing "Showing Posts With Label XYZ. Show All Posts" status message from our label search page. This message appears on the label page of blogger blogs. To remove this, we use following condition.
<b:if cond='data:blog.searchLabel'>
<style>
.status-msg-wrap {display: none;}
</style>
 </b:if>
In this example, "cond" attribute shows that targeted page type is label page and the CSS rule has been used to hide Status message from appearing in this type of page thus it has removed the "Showing posts with label" message in label pages.

List Of Blogger Conditional Tags:

The above example shows only a single conditional tag. The actual list is longer than one so I am going to explain most commonly used conditional tags which target and specify different types of pages which include static pages, posts pages, homepage, label pages etc.

1. Conditional Tag For Homepage:

This tag is used to specify Home Page only. The "Home Page Coding" will load in home page of your blog.
<b:if cond='data:blog.url == data:blog.homepageUrl'>
Home Page Coding
</b:if>

2. Conditional Tag For Post And Static Pages:

This tag is used when you want to execute elements in both post and static pages collectively.
<b:if cond='data:blog.url == data:post.url'>
Post And Static Page Coding
</b:if>

3. Conditional Tag For Post Page Only:

Unlike the above tag, this tag targets blog page only. Not both post and static pages.
<b:if cond='data:blog.pageType == "item"'>
Blog Post Page Coding
</b:if>

4. Conditional Tag For Static Page Only:

It targets only static pages of your blog. Static pages may include About, Privacy, Terms Of Service, Disclaimer or Contact pages.
<b:if cond='data:blog.pageType == "static_page"'>
Static Page Coding
</b:if>

5. Conditional Tag For Label/Category Page:

It targets label pages only. Label pages are special pages of blog having a specific URL for collection of posts with same label/category.
<b:if cond='data:blog.searchLabel'>
Label Page Coding
</b:if>

6. Conditional Tag For Index Pages:

The pages which display multiple blog posts as a summary are called index pages. They include Homepage, Label pages, search pages and archive pages. The following tag targets this type of pages.
<b:if cond='data:blog.pageType == "index"'>
Coding for index pages
</b:if>

7. Conditional Tag For Archive Pages:

Blogger provides a default Archived posts widget which display posts in monthly or annual sequence. The pages which contain the archive posts in monthly or yearly sequence are archive pages. Tag below specifies those pages.
<b:if cond='data:blog.pageType == "archive"'>
Archive Page Coding
</b:if>

8. Conditional Tag For Error Page:

An error page is that page which is not available on the blog. It results when someone click a broken link or link to a deleted page. Technically it is called 404 Error Page according to HTML error codes. Below tag specifies only 404 Error page of the blog.
<b:if cond='data:blog.pageType == "error_page"'>
404 Error Page Coding
</b:if>

9. Conditional Tag For Specific URL:

This tag is used when you want to specify a specif page or URL in your blog.
<b:if cond='data:blog.url == "your_URL_here"'>
Specific Page Coding
</b:if>
Replace "your_URL_here" with URL of the page you want to apply something.

10. Conditional Tag For Search Pages:

Search pages appear after submission of a search query in blog's search. It means that a search page is that which is executed when a user search something in a blog. Below tag specifies search query pages.
<b:if cond='data:blog.searchQuery'>
Search page Coding
</b:if>

Reverse Condition In Conditional Tag:

Condition on a specific tag can be reversed by replacing "==" signs with "!=" sign. For example in conditional tag for post page, we can reverse the situation in following way.
<b:if cond='data:blog.pageType != "item"'>
Blog Post Page Reverse Coding
</b:if>
It means that the coding written inside this tag will applicable to all pages other than post pages.

Apply Multiple Conditions:

Multiple conditions can also be applied using an additional <b:else/> tag. It is applied in a way that when one condition is false, the other condition comes in work. Lets see an example.
<b:if cond='data:blog.url == data:blog.homepageUrl'>
If condition is true.
<b:else/>
If condition is false.
</b:if>
In the above statement, we have used <b:else/> tag which is differentiating between two different coding. One coding when the condition is true and other when it is false. The tag which we have used is for homepage only so condition true means when the page type is homepage, content for the true condition will load. Condition false means the page isn't homepage so the second coding written after <b:else/> will load.

Placement Of Conditional Tags:

Conditional tags can be placed everywhere in blogger template except for some exceptions that include inside widget or inside widget section. They cannot be placed inside it but can be used outside to display a specific widget on a specific page type.

Hope it helps you to understand conditional tags completely. If still you are having any problem in using conditional tags, you can ask me.
Continue reading


at 4
Just blogging things you need to know. Social media tips and tricks, blogging tips and tricks and search engines news.

Heading tags play very important role in search engine optimization of a blog. Heading tags in HTML are generally used to organize and categorize the content. They are also the way of telling search engines the importance of the content. There are 6 types of headings  according to HTML which ranges from H1 to H6. The number shows the priority for headings. The H1 heading is given more priority than rest of the headings by search engines. Similarly H2 heading has lesser importance than H1 and the same followed by H3, H4, H5 and H6. In this post I will explain the method of optimizing heading tags in blogger with respect to SEO but first we will look how they work in blogger.

Talking w.r.t SEO, we should optimize headings in a way that most important heading of the page is assigned H1 tag while the lesser important gets H2 and least important gets H4 or greater. On blog's homepage, blog title is the most important heading while on post pages, title of the post is most important heading which must be read by search engines.

By default, blogger uses following order of headings.
  • H1 tag for blog title
  • H3 tags for post titles
  • H2 tags for widgets headings
For better SEO optimization, we must change this according to following sequence.

On Blog Homepage:

  • H1 tag for blog title
  • H2 tags for post titles
  • H4 tags for widget headings

On Post Page:

  • H2 tag for blog title
  • H1 tag for post title
  • H4 tags for widget headings

Why We Have To Use This Sequence?

We are using this sequence due to some reasons. First of all, we know that Blog title is the most important tag on homepage so we assign it H1 heading on homepage but blog title has secondary importance on post pages because title of the post is what which must be indexed first so we are assigning H1 to post titles. Side widgets' headings are not of any importance so giving them H4 tags isn't going to harm SEO.

One may ask why we are assigning separate tags to titles. Can't we place all post titles and blog title under H1 on all type of pages?

The answer is "NO". It is because H1 is the most important heading tag which helps in boosting search engine rankings but it is a worse practice to place more than 1 H1 tag on a single webpage. Search engines specially Google detects it as webspam thus result in decreased rankings.

Lets proceed towards the method.

For this we should access blogger HTML editor first. Login to blogger, go to Template>Edit HTML.

Blogger Template Editor

Change Blog Title To H2 On Post Pages:

Click anywhere inside the template editor and press CTRL+F. Now search for following piece of code inside the template.
<h1 class='title'>
(If you don't find this code, just search for H1 and see if it represents your blog title).

SEO optimization of heading tags in blogger

Replace this tag with following code.
<b:if cond='data:blog.pageType != "index"'>
<b:if cond='data:blog.pageType == "archive"'>
&lt;h1 class='title'&gt;
<b:else/>
&lt;h2 class='title'&gt;
</b:if>
<b:else/>
&lt;h1 class='title'&gt;
</b:if>
Now watch for closing </h1> tag and replace it with following code.
<b:if cond='data:blog.pageType != "index"'>
<b:if cond='data:blog.pageType == "archive"'>
&lt;/h1&gt;
<b:else/>
&lt;/h2&gt;
</b:if>
<b:else/>
&lt;/h1&gt;
</b:if> 
Repeat this step wherever you find h1 title tag. Usually it is found only one time in a template.

Change Post Title To H1 On Post Pages:

Now comes most important part of this tutorial. Default blogger templates use H3 for post titles but some custom template use H2 type post titles as well. We will change either type of heading to H1 on post pages.
For this search for following piece of code in template editor.
<h3 class='post-title entry-title' itemprop='name'>
Note that if you are using custom template, you might have to replace h3 with h2 for searching this tag.

SEO optimization of heading tags in blogger

Now after finding this tag, replace it with following code.
<b:if cond='data:blog.pageType != "index"'>
<b:if cond='data:blog.pageType == "archive"'>
&lt;h2 class='post-title entry-title' itemprop='name'&gt;
<b:else/>
&lt;h1 class='post-title entry-title' itemprop='name'&gt;
</b:if>
<b:else/>
&lt;h2 class='post-title entry-title' itemprop='name'&gt;
</b:if>
Replace the closing h3 or h2 tag with following code.
<b:if cond='data:blog.pageType != "index"'>
<b:if cond='data:blog.pageType == "archive"'>
&lt;/h2&gt;
<b:else/>
&lt;/h1&gt;
</b:if>
<b:else/>
&lt;/h2&gt;
</b:if>
Here optimization of heading tags for blog title and post pages complete. Now we will move towards final step which is changing the heading tags for widgets from h2 to h4.

Change Widget Headings To H4:

Find all occurrences for the following piece of code.
<h2><data:title/></h2>
Replace h2 with h4 in all occurrences. Some times you will see different type of code for widget headings but <data:title/> will be same in all so just replace h2 with h4 in them too. Its up to you.

The work is finished here. You might see some changes in structure of your headings after changing this sequence. If it happens, make some changes in your blog's CSS styles for those headings.
Continue reading


at 0
Just blogging things you need to know. Social media tips and tricks, blogging tips and tricks and search engines news.

Labels are used to classify your work on blogger which makes your blog easier to navigate. Labels work as tools to categorize different types of posts on blogger so a user reaches to his desired posts by clicking a single category. Using blog archive for navigating a post is too complicated process in blogger so Labels provide an easier access to posts in a specific category.

When creating a post on blogger, you always see Labels option under post settings menu on the right hand side of the screen. The keywords which categorize the posts are written here called labels. You have to write those Labels for your post by clicking on which you want your readers to reach a specific category of posts. For example, I am writing this post for blogging purpose so I will write a main label "blogging" for it on my blog. Whenever you will click the blogging label on my blog, you will be redirected to the posts list containing this post and other blogging related posts where I have written the label "Blogging".
Continue reading


Subscribe to: Posts (Atom)