Earlier when I started to blog, I was not aware about the different platforms on which we can establish blog, I just came across the Blogger platform and as I was short on money I thought this free option was great. We can easily add a nice template, add gadgets, widgets and pretty much every sort of HTML and CSS based customizations could be done on blogger platform. But after a while of blogging and getting deep into it, I came across another big thing that really matters “SEO”
Yes I am not kidding content could be the KING, you blog, you add vital information and your content is really useful but without proper On Page and off Page SEO, its pretty difficult to rank good.
But that really did not matter to me, because I was only blogging for fun, I loved to share good content that was helpful to me and thought it could be useful to others. So with that thing in my mind I was just posting many articles on daily basis and my blog was even ranking good day by day, but now I know its importance and I am always working on to make it rank good daily.
Well the one factor that really improves your SEO is SPEED. If your blog loads up fast on mobile devices then its great for your overall blog’s SEO. And for speed its really important to know what all widgets and scripts you are going to load on your blog.
And now loading those widgets, gadgets and scripts is different on desktop version of your site but on mobile its different. Nowadays mobiles are equipped with good technology that makes the webpages load faster but still majority of them are lacking the speed so we have focus on all the gadgets not only some.
So for that Blogger Conditional Tags are important. You can easily remove all the scripts and widgets from mobile version and hence you increase your mobile version speed which is really important.
Few Useful & Helpful Blogger b:if Conditional Tags
So lets just jump in and see all the helpful blogger conditional tags that are pretty useful in customizing your blog to next level.
1. Displaying Content only on Post Pages
If you want to display the scripts or any sort of content on only posts pages then below conditional tag should enclose your content.
<b:if cond='data:blog.pageType == "item"'>
YOUR CONTENT GOES HERE …….
</b:if>
After adding the bold code above and below your content like I have shown above, you can save your template and you can see your content will not appear on homepage or other places except the post page.
2. Displaying Content only on Index Pages
Your Index pages are all the pages except post and static pages like the page you create, it includes the homepage and the next pages on which posts are there.
<b:if cond='data:blog.pageType == "index"'>
YOUR CONTENT GOES HERE …….
</b:if>
Now once again save your template and see the difference.
3. Displaying Content only on Static Pages
Static Pages on blogger are all the pages that you create for specific use, like About Us page, Advertise Page, you can see our static page with http://www.hackinguniversity.in/p/editor.html here you can easily edit your CSS, HTML and JavaScript gadgets.
<b:if cond='data:blog.pageType == "static_page"'>
YOUR CONTENT GOES HERE …….
</b:if>
Now all the contents that you can enclosed inside this tag will only appear on your static page and no other pages except that.
4. Displaying Content only on Archive Pages
Archive Pages show all the posts written in particular period like if I would like to see all the posts written in November 2014 then you need to go to this URL: http://www.hackinguniversity.in/2014/11 now you can replace the domain with your own blog domain and 2014 with the year and 11 with the month of that year to see all the posts written in that specific month and year.
<b:if cond='data:blog.pageType == "archive"'>
YOUR CONTENT GOES HERE …….
</b:if>
So use the above code and all the content or widget will only appear on the Archive Pages.
5. Displaying Content only on Homepage URL
This is really awesome, this could really help you in designing your blog to a next level, in case you want some sort of Newsletter banner or widget to popup but only on homepage then this could be used.
<b:if cond='data:blog.url == data:blog.homepageUrl'>
YOUR CONTENT GOES HERE …….
</b:if>
6. Displaying Content only on Specific URL
Another awesome blogger conditional tag, in any case you would like to display your content or scripts on specific URL’s then this code is useful.
<b:if cond='data:blog.url == "URL-Goes-Here"'>
YOUR CONTENT GOES HERE …….
</b:if>
You can replace the Red Code with your specific URL from your blog, either post, page or anything and all the content and codes will appear only on that specific URL.
7. Displaying Content only on Error Page
Now as you all know 404 pages exist and you might be having many, now you can design your 404 pages like you want with CSS and this code is pretty useful, you can even redirect your 404 pages automatically to your Homepage URL using a simple script you can check demo of my blog: http://www.hackinguniversity.in/404
<b:if cond='data:blog.pageType == "error_page"'>
YOUR CONTENT GOES HERE …….
</b:if>
Now all the content you enclose in this tag would only appear on your error page.
The list has not ended right over here, there are many other b:if conditional tags that you can use, but you won’t require those, these are the major ones and they work great.
Errors Appearing with the Double Quotes while Saving
Well in case you face some errors while saving your codes, make sure to convert your double quote in the codes given above with the compatible one, you can also use our Codes Converter that makes codes compatible to be used in XHTML Templates or the simple way is to just change " with " so your code will look something like below.
<b:if cond='data:blog.pageType == "item"'>
YOUR CONTENT GOES HERE …….
</b:if>
Above code will become:
<b:if cond='data:blog.pageType == "item"'>
YOUR CONTENT GOES HERE …….
</b:if>
So its pretty easy and neat, yeah!
Using <b:else /> Blogger Conditional Tags
Now lets talk a little about the <b:else /> conditional tags in blogger, well these are nothing but another useful way to stack to contents easily. Lets take an example the one way to change the background of Homepage and Post page would be to use CSS in a different way, but with Blogger <b:else /> conditional tags, its dam! easy to be implemented.
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>
body{background:red}
</style>
<b:else />
<style>
body{background:blue}
</style>
</b:if>
So as you can see above, we have implemented two styles, so if the homepage URL is loaded then the background color would be RED and if its not the homepage URL then the color would be BLUE.
So its that easy, now you understand the blogger conditional tags, wait fro my next article in which I will be showing you how you can implement these tags in your blogger blogs easily and how I have done that to increase my blog speed and load my mobile version in the speediest way.
(COMMENTS WILL LOAD AUTOMATICALLY)