Today is the common problem is “How To Display Gadgets Or Widgets Or HTML Codes That Are Added To Your Blogspot Template On Your Desire Page/Post In Your Blog With Little CSS Code?”, Ther just give you the codes and you did not want that on every page or post, So the time is over now you just get html code and display it there where you want to show it.
When you add the html for a gadget to your blog and want to show it only on your desired page, post or place, then just add a snippet of your desired from given below to your code above it and a closing tag below it. Remember for some gadgets and code that also have CSS, JavaScript And JQuery Codes. They generally direct you to add there Css code you added above ]]></b:skin> and there Script code above </head>. But why you have to do this as you have to allow your widget or code to displayed over your desired single page but there CSS-JavaScript on every page that will make your load time heavy and that will annoy your visitor? Then you also add your that code CSS-Script code also in it.
Table of Contents
What Are These Codes?
Blogger conditional tags usually have the <b:if cond=..> starting and an ending of </b:if>.These codes are actually the condition that we keep.We use blogger conditional tags to show certain things only in homepage.or some other things only in post pages.We can there by control where the widget or item should be visible.Lets go into further details Now you understand it, here we come directly to the code that are also known as “Blogger Conditional Tags”. Here we have most wanted code.
Blogger conditional tag is very important in blogger, because this fonction can make every blogger page different style, not only style CSS but you can put anything. In internet has already many tutorial about this, but it’s only a basic tutorial, this tutorial is not basic but advanced, not only page but it can be used for any condition. Ok now for the article….
Features:
1.) 15 Blogger Conditional Tags Collection.
2.) Quick To Load And Easy To Install.
3.) Work With Every Codes.
4.) Official Tags Codes.
5.) Only Be Used In Blogger Template.
How To Add In Blogspot?
1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Go To “Template“.
4.) Click “Edit HTML“.
5.) Now Click Within Code Box.
6.) Now Copy The Below Code And Paste It Between “<head> </head>” Or “<body> </body>“.
7.) Click “Save Template” And Done.
Code Will Be Only On Post Pages:-
The tag we add to the html so it only appears on post pages is this :
<b:if cond='data:blog.pageType == "item"'>
THE-HTML-CODE-GOES-HERE-BETWEEN-THE-TAGS
</b:if>
Code Will Be Only On Home Page Only:-
The code will be displayed only on your home page.
<b:if cond='data:blog.url == data:blog.homepageUrl'>
THE-HTML-CODE-GOES-HERE-BETWEEN-THE-TAGS
</b:if>
Code Will Be Only On Everything Except Post Pages:-
The code will be displayed only on (Home page, Labels pages, Archive pages etc).
<b:if cond='data:blog.pageType == "index"'>THE-HTML-CODE-GOES-HERE-BETWEEN-THE-TAGS</b:if>
Code Will Be Only On One Post Or On Page:-
The code will be displayed only on one post or page.
*) Change The Below Text With Your Desire URL.
<b:if cond='data:blog.url == "URL-Of-Post/Page"'>THE-HTML-CODE-GOES-HERE-BETWEEN-THE-TAGS</b:if>
Code Will Be Only On All Static Pages:-
The code will be displayed only on the static pages.
<b:if cond='data:blog.pageType == "static_page"'>THE-HTML-CODE-GOES-HERE-BETWEEN-THE-TAGS</b:if>
Code Will Be Only On Selected Author Posts:-
The code will be displayed only on Selected Author Posts.
*) Change The Below Text With Your Desired Author Name As In Blogger Profile.
<b:if cond='data:post.author == "Author-Name"'>THE-HTML-CODE-GOES-HERE-BETWEEN-THE-TAGS</b:if>
Code Will Be Only On 404 Error Page:-
The code will be displayed only on 404 Posts.
<b:if cond='data:blog.pageType == "error_page";'>
THE-HTML-CODE-GOES-HERE-BETWEEN-THE-TAGS
</b:if>
Code Will Be Only On Archive Page:-
The code will be displayed only on archive page like https://www.exeideas.com/2013_01_01_archive.html
<b:if cond='data:blog.pageType == "archive"'>
THE-HTML-CODE-GOES-HERE-BETWEEN-THE-TAGS
</b:if>
Code Will Be Only On Post And Static Page:-
The code will be displayed only on only on post and static page.
<b:if cond='data:blog.pageType == "data:post.url"'>
THE-HTML-CODE-GOES-HERE-BETWEEN-THE-TAGS
</b:if>
Code Will Be Only On First Post:-
The code will be displayed only on first post.
<b:if cond='data:blog.pageType == "data:post.isFirstPost"'>
THE-HTML-CODE-GOES-HERE-BETWEEN-THE-TAGS
</b:if>
Code Will Be Only On Label Page:-
The code will be displayed only on serach label page or label page like https://www.exeideas.com/search/label/anylabel.
<b:if cond='data:blog.pageType == "data:blog.searchLabel"'>
THE-HTML-CODE-GOES-HERE-BETWEEN-THE-TAGS
</b:if>
Code Will Be Only On Query Search Page:-
The code will be displayed only on query serach page like https://www.exeideas.com/search?q=anything
<b:if cond='data:blog.pageType == "data:blog.searchQuery"'>
THE-HTML-CODE-GOES-HERE-BETWEEN-THE-TAGS
</b:if>
Code Will Be Only On Selected Query Search Page:-
The code will be displayed only on selected query serach page like https://www.exeideas.com/search?q=css
*) Change The Below Text With Your Desired Query Keyword.
<b:if cond='data:blog.searchQuery == "The-Query-Keyword"'>
THE-HTML-CODE-GOES-HERE-BETWEEN-THE-TAGS
</b:if>
Code Will Be Only On Selected Label Page:-
The code will be displayed only on selected label page like https://www.exeideas.com/search/label/Blogspot
*) Change The Below Text With Your Desired Label Name.
<b:if cond='data:blog.searchLabel == "Name-Of-Label"'>
THE-HTML-CODE-GOES-HERE-BETWEEN-THE-TAGS
</b:if>
Code Will Be Only On Mobile Template:-
The code will be displayed only on Mobile template like https://www.exeideas.com?m=1
<b:if cond='data:blog.pageType == "data:blog.isMobile"'>
THE-HTML-CODE-GOES-HERE-BETWEEN-THE-TAGS
</b:if>
Reversing Any Condition:
A condition can be reversed simply by replacing the comparison operator from == (is equal to) to != (is not equal to), like so:
<b:if cond=”data:blog.pageType != “item””>
THE-HTML-CODE-GOES-HERE-BETWEEN-THE-TAGS
</b:if>
In the example above, the content will only appear on pages other than post pages (i.e. removed/hidden from post pages). This method is not applicable to Label Search and First Post conditionals.
Customization:
1.) Just Add Your HTML Code By Replacing “THE-HTML-CODE-GOES-HERE-BETWEEN-THE-TAGS” With Your Desired Code.
2.) Save And Done.
THE-HTML-CODE-GOES-HERE-BETWEEN-THE-TAGS
didnot work for adsense used widget .
Did i have to replace “index” with some other things?
You Have To Use This Code Is “Template HTML” Not In A HTML/JavaScript Gadget.
This is one such awesome & a must read post for all newbies.
Thanks Muhammad Hassan.
You Are Welcome Here And Thanks For Liking Our Post, Be With Us To Get More Something Like This…
Excellent information. Blogs have a lot of power and your suggestions are great tools for maximizing that power.
Thanks To Like This And Also Leaving Your Positive Views…
Another useful post,anyway I mailed you something,hope you got that,waiting for the reply 🙂
Thanks For Liking Our Stuff, The Article In Now Updated With Some New Codes And Your Reply Has Been Sent.
wao budy all in one, thats great work, #mybsoftwares.blogspot.com
Just Can Pay You Thanks For Visiting Us And Liking Our Content, Be With Us For More…
Great Post !!! From my point of view once your blog is large and has a steady following, the opportunities to make money are endless. The key is being passionate about your blog, consistently posting, and making your mark in the blogging world. It’s not easy, but if you enjoy it, then it’s not really work!
Thanks For Visiting Us And Leaving Your Views About Us, Yes You Are Right That It’s So Difficult To Get Visitors And Readers But When You Have It Then It’s More Difficult To Keep Them With You Through Your Content…
Thanks for sharing.. very useful post
You Are Welcome And Thanks For Visiting Us…
i want to show adsense ads below title and after post description on mobile and desktop both..
what code should i use? pls help bro
Go Here To Get How To Show Ads In Middle Of All Post In Blogspot Blog?
thanks of your quick reply but i want show ads below title and ad description in mobile too.. also i want to know how to show any html/javascript gadget in mobile too..
To Show Gadget On Mobile, Check How To Add/Remove Gadget/Widget To Your Mobile Blogspot Template?.
Explain The Rest…
this is not working?? Showing this error:
TEMPLATE ERROR: Invalid data reference post.author: No dictionary named: ‘post’ in: [‘blog’, ‘skin’, ‘view’]
Which one you are using and for what and where?
I was able to find good info from your blog posts.
Welcome here and thanks for reading our article and sharing your view.