Sayem Tutorial

    Social Items

Top 7 Blogger Page Types Conditional Tags
So many people ask me how I can create my own blogger template? This why I decided to write all articles about this topic. So before creating your own blogger template, you must need to know HTML, JAVASCRIPT, and CSS. if you know HTML, CSS, JavaScript then you need to know blogger conditional tag. If want to create a blogger theme it's just for you. If you want to use your blogger theme dynamically then your blogger conditional tags help you.
There is same conditional tags marked example
Now all of them are called conditional tag for an example: <data:blog.title/> this tag is use you dynamically get your blog name. If you add this tag anywhere of your theme HTML edit then you see your blog name on the site. If you still don't know anything then there is one more example for you:
On the theme html edit
On the theme HTML edit


On the theme
On the theme
Now I hope you understand the use of the blogger conditional tag. Now if you want to add any widget on the homepage but you hide this widget for post and page then you need to use the blogger page type conditional tag.

So let's talk about the top 7 blogger page types conditional tags

Archive Page

<b:if cond='data:blog.pageType == &quot;archive&quot;'>
Your Element Here
</b:if>
This conditional tag helps you to add any kind widget or element only for the archive page. By using this conditional tag you can customize the archive page.

Index Page

For the home & search page

<b:if cond='data:blog.pageType == &quot;index&quot;'>
Your Element Here
</b:if>
This conditional tag helps you to customize and add any widget only for the home and search page.

Only for the home page

<b:if cond='data:view.isHomepage'>
Your Element Here
</b:if>
If you want to add any widget only for the homepage then this conditional tag helps you do this.

Label Page

For all label

<b:if cond='data:blog.searchLabel'>
Your Element Here
</b:if>
This conditional tag helps you to add any kind of element for the search label page. Just add any widget you want.

For specific label

<b:if cond='data:blog.searchLabel== &quot;LABEL-NAME&quot;'>
Your Element Here
</b:if>
This conditional tag is used for specifying the label page. If you want to add any widget for any specific label then simply you can use this label just add you are specific label name on the LABEL-NAME.

Item Page

For all post

<b:if cond='data:blog.pageType == &quot;item&quot;'>
Your Element Here
</b:if>
If you want to add and customize the item option like read more button then you can use this conditional tag.

For fast post

<b:if cond='data:post.isFirstPost'>
Your Element Here
</b:if>
If you want to customize the fast article then you can use this conditional tag.

Static Page

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
Your Element Here
</b:if>
If you want to and any widget element on the page then you can use this conditional tag.

Error Page

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
Your Element Here
</b:if>
This conditional tag used to add any widget on the 404 error page. You can create 404 error page with this conditional tag.

Search Page

For all search result

<b:if cond='data:blog.searchQuery'>
Your Element Here
</b:if>
This conditional tag used to add any kind of widget on the search result page.

For specific search query

<b:if cond='data:blog.searchQuery == &quot;SEARCH-QUERY&quot;'>
Your Element Here
</b:if>
This conditional tag used to add any widget for specific search terms. Just add the specific search terms on the SEARCH_QUARY.

Conclusion

There is the end of this article. If you face any problem with the blogger conditional tag then simply comment down below I will try my best to help you. Thanks for with us.

Top 7 Blogger Page Types Conditional Tags

How to create stylish sitemap page on Blogger
The sitemap is one of the most needed widgets for all blogs. If you have a blog then you must create a sitemap page because if you want to show your blog archive to anyone then you need to add this widget. If you use WordPress for your blog then you get so many plugs in to create a stylish sitemap page but on the blogger, there is only one way to create a sitemap page and it's using custom code. So in this article, I will talk about how you can create a stylish sitemap page on your Blogger blog.
PREVIEW

Why sitemap is must

A sitemap page is a must for all blogs because google always asks for the sitemap. If you want to show you all the blog article list in one page then sitemap is the best way. On a perfect sitemap, people can filter your article by category, time, etc. So the sitemap help to increase your user-friendliness. So we can tell sitemap is the must for all blogs. 

How to create a sitemap page

Now I am telling you how you can create a professional sitemap page on Blogger. At fast open, your blogger dashboard then goes to the page section and create a new page then take the page name sitemap. Now copy the below code and this code on the HTML view of your page then publish your page and done.
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-s3kuUoVBLD4/Xx1if5ogHbI/AAAAAAAAAUU/EshioquzFfYPf2n49rUhm0_kjdeSMUnFACLcBGAsYHQ/s1600/Sitemap%2BArlina%2BCode.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Sitemap Arlina Code" class="lazyload" style="border: none;" data-original-height="444" data-original-width="1200" src="https://3.bp.blogspot.com/-s3kuUoVBLD4/Xx1if5ogHbI/AAAAAAAAAUU/EshioquzFfYPf2n49rUhm0_kjdeSMUnFACLcBGAsYHQ/s1600/Sitemap%2BArlina%2BCode.png" title="Sitemap Arlina Code" /></a></div>

<div id="bp_toc">
</div>
<script src="https://cdn.rawgit.com/Arlina-Design/redvision/master/daftar-isi-simple.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=99999&amp;callback=loadtoc" type="text/javascript"></script>
<style scoped="" type="text/css">#comments,#Label1,#FollowByEmail1{display:none}#bp_toc{color:#000;margin:0 auto;max-height:686px;overflow:hidden;overflow-y:auto}span.toc-note{margin:0 auto 25px auto;text-align:center;line-height:normal;display:table;position:relative;overflow:hidden;font-size:14px;padding:10px 20px;background:#007bff;background-image:linear-gradient(50deg,#ff4169,#8b41f6);background-size:100%;color:#fff;border-radius:99em;font-weight:500;transition:all .3s}span.toc-note:hover{background-size:200%}.toc-header-col1{padding:10px;background-color:#f5f5f5;width:250px}.toc-header-col2{padding:10px;background-color:#f5f5f5;width:75px}.toc-header-col3{padding:10px;background-color:#fff;width:125px}#bp_toc td.toc-header-col1,#bp_toc td.toc-header-col2,#bp_toc td.toc-header-col3{border:1px solid rgba(0,0,0,0.05);background:#fff}#bp_toc td.toc-header-col1{}#bp_toc td.toc-header-col2{}#bp_toc td.toc-header-col3{}.post td{background:transparent}#bp_toc td.toc-entry-col1,#bp_toc td.toc-entry-col2,#bp_toc td.toc-entry-col3{border:1px solid rgba(0,0,0,0.05)}#bp_toc td a{background:transparent;color:#222;float:none;border-radius:0;padding:0;font-size:100%;display:initial;box-shadow:none}#bp_toc td a:hover{color:#0984e3}.toc-header-col1 a:link,.toc-header-col1 a:visited,.toc-header-col2 a:link,.toc-header-col2 a:visited,.toc-header-col3 a:link,.toc-header-col3 a:visited{font-size:13px;text-decoration:none;color:#aaa;font-weight:500;letter-spacing:0.5px}.toc-header-col1 a:hover,.toc-header-col2 a:hover,.toc-header-col3 a:hover{text-decoration:none}.toc-entry-col1,.toc-entry-col2,.toc-entry-col3{padding:10px 5px;font-size:90%}.toc-entry-col1 a,.toc-entry-col2 a,.toc-entry-col3 a{color:#000}.toc-entry-col1 a:hover,.toc-entry-col2 a:hover,.toc-entry-col3 a:hover{color:#3498db}#bp_toc table{width:100%;margin:0 auto;counter-reset:rowNumber}.toc-entry-col1{counter-increment:rowNumber}#bp_toc table tr td.toc-entry-col1:first-child::before{content:counter(rowNumber);display:inline-block;min-width:38px;margin-right:.7em;background:#fc5c65;color:#fff;border-radius:99em;font-weight:500;text-align:center;font-size:12px;padding:0;line-height:1.7}
#bp_toc td.toc-entry-col1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:400px}
#bp_toc::-webkit-scrollbar{-webkit-appearance:none;width:4px;height:5px}#bp_toc::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.15);border-radius:10px}#bp_toc::-webkit-scrollbar-track{background-color:transparent}#bp_toc::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,.25)}
@media screen and (max-width:768px) {
#bp_toc td.toc-entry-col1{white-space:normal;overflow:visible;text-overflow:initial;max-width:100%}#bp_toc td.toc-header-col2,#bp_toc td.toc-header-col3,#bp_toc td.toc-entry-col2,#bp_toc td.toc-entry-col3,#bp_toc table tr td.toc-entry-col1:first-child::before{display:none}}
</style>

Conclusion

I hope you enjoy this article well the code is not created by me this sitemap is created by my friend arlina you can visit her website from this URL www.arlinacode.com. Thanks for with us.

How to create stylish sitemap page on Blogger

In this article, I will tell you how you can protect your post or page with a password on the blogger. If you want to sell any content on the blogger then you can use this trick to sell any content by blogger. If you want to give anyone any kind of personal docs by blogger then you can lock the page with the password so no one can view the content of this page.
If you don't understand then please see a preview of this script click on the below preview button to see the demo of password protected page. The password of the preview page is "test".

PREVIEW


Now if you see the preview then I hope you understand what I want to tell you. So many readers of this article tell me this, not an approved version! For who tells this I tell him you can't customize this boxed because this is not run by your theme CSS it's run by the alert box of the browser. All browser has a different kind of dialogs box.

The benefit of this script

There are so many benefits to this script. So those are some highlighted features of this script:
  1. Protect page or post.
  2. Save your personal docs.
  3. No ignorable points.
  4. Many more...
Now if you read details about those features then you can see by searching on google.

How to add this script on post or page

If you want to add this password script on your blog post/page then follow all the bellow steps I am telling you:
  1. Open your post editor in the HTML view of the blogger.
  2. Now copy the below code and paste it on the below of your post/page HTML view.

  3. <SCRIPT LANGUAGE="JavaScript">
    <!-- Begin
    var password = 'password'
    password=prompt('Please enter the password to enter this post:','');
    if (password != 'password') {
    location.href='URL';
    }
    // End -->
    </SCRIPT>
  4. Now open change password text with your password and add your blog homepage URL on the URL text.
Now publishes your article and see. Done.

Conclosing

Now after this code adding done don't forget me give a small thanks. You can also give your feedback on the comment section it's always opened for you. Thanks for stay with us.

How to protect blogger post or page with the password

How to install google custom search engine on blogger
What's up guys in this article I will talk about how you can install google custom search engine on google blogger. Google custom search engine helps you to add google search feature on your website. If you use this widget then you get free organic traffic from google. When anyone searches anything on your website then the person sees search results like google and when the person clicks on the result you get organic traffic from google. The main highlight of this widget is you can enable the Adsense ads option on the search result when anyone clicks on the ads you get 50% of this ad revenue. All of your earning is added on your AdSense account (to use this feature you must have an Adsense account).

The benefit of google custom search engine

The benefit of google custom search engine
You get so much benefit from google custom search engine. If you use this widget you get ultimate organic traffic from google and also your site always stays at the of the google search result. You can also earn so much money from this widget by using google ads. There is the same highlighted feature of this widget:

  1. Ultimate Organic traffic from google.
  2. Advanced search filter by keywords.
  3. Earn money.
  4. Many more...

Install google custom search engine on Blogger

Install google custom search engine on Blogger
I am already telling you so much fact about google custom search engines. Now I am telling you how you can add this custom search engine widget on your blogger blog.

  1. Open you this URL https://cse.google.com/cse/all
  2. Now you see an add button click on the button
  3. Give your site URL on the sites to search box
  4. Now select your blog language and customized it according to you
  5. Now after all done click on create then you will see get code button
  6. Now simply click on the get code button then copy all the code you get
  7. Now add the code on the widget section where you want it.
  8. Done.
Consolation your google custom search engine setup was done. Now enjoy this widget.

Conclusion

Now after you google custom search engine is install done so many people have a question why I don't tell how you can enable ads on google custom search engine? It's so easy to add this feature just go to edit custom search engine you get an ads option. Now after all thanks for with us.

How to install google custom search engine on blogger