Social Web Media

Add Widget Tags for Layouts for Blogger

2018-11-16T22:34:00.001-08:00

Widget Tags for Layouts

When you're using the Layouts theme to create the body section of your blog, you can use widgets to add page elements like pictures and a blogroll.

Types of tags

This section describes the HTML you can use inside of the closing tags.

Includes (b:include)

When to use includes

Includes are most useful if you have a section of code that you want to re-use in several different places, or only include in certain circumstances.

To do this, write the content inside a b:includable, then use b:include wherever you want it to appear.

Format

<b:includable id='main' var='thiswidget'>
  [insert whatever content you want here]
</b:includable>

Attributes


id (required): A unique identifier made up of letters and numbers. Each widget must have one includable with id='main'.
var (optional) An identifier made up of letters and numbers, for referencing data within this section.

If you make more includables with different IDs, they won't be displayed automatically. However, if you make an includable with id='new', then you can reference it in your main includable with <b:include name='new' /> and it will display that way.

The attributes for the b:include tag are as follows:



name (required): An identifier made up of letters and numbers. It must match the ID of an existing b:includable in the same widget.
data (optional): An expression or piece of data to pass on to the includable section. This will become the value of the var attribute in the includable.
cond (optional) An expression which causes the include to only execute when its result is true. This is the same as the cond attribute on a b:if.


Example

Here's an example that shows how to use b:includable and b:include.

The main thing to understand here is how the "main" section includes the "post" section within it. It passes along a post that it calls "p" and the included section references it as its var "post", then prints the title.

Note that the include only runs while the index is less than 10, so only a max of 10 posts would get rendered in this example (the index starts at 0).

<b:includable id='main'>
  <b:loop var='p' index='index' values='posts'>
    <b:include name='post' data='p' cond='index < 10'/>
  </b:loop>
</b:includable>
<b:includable id='post' var='post'>
  Title: <data:post.title/>
</b:includable>


Data Output (data:)

Examples

<data:title/> would print out the title of a widget



<data:photo.url/> - Size: <data.photo.width /> x <data.photo.height /> would print attributes of a photo component. A photo may have components such as url, height, and width. Using the "." notation indicates that we want the URL for this photo, rather than a URL from something else.


See more examples
See our complete list of the layouts data tags that are supported.


Loops (b:loop)

When to use b:loop
The b:loop tag lets you repeat a section of content multiple times. This is most commonly used for printing out each post in a list of posts for a given page, or each comment, or each label, etc.


Format
The general format for using loops is this:


<b:loop var='identifier' values='set-of-data'>
  [repeated content goes here]
</b:loop>


The 'identifier' (i) part can be any name you choose, and will be used to stand in for each new item in the list, each time through the loop. The set of data you specify for the values can be any piece of data described in the data tags article as being a list of items.

For example, in the blog posts widget, posts is a list. Code like the following will loop through each post, printing out the title for each one, with header tags around it.


<b:loop var='i' values='data:posts'>
  <h2><data:i.title/></h2>
</b:loop>


Notice how "i" takes on the value of each post in turn, so you can get the title from each one.

Number Range

A loop tag allows you to iterate across an inclusive number range, such as ‘1 to 3', ‘-3 to -9', where the value of the variable takes the number's value. The following example would create an unordered list of 1, 2 and 3.

<b:loop var='i' values='1 to 3'>
  <li><data:i /></li>
</b:loop>

Index Attribute



Loop tags also have an optional index attribute, which gives the zero-based index of the current iteration through the loop.





<ul>
  <b:loop var='number' index='index' values='9 to 7'>
    <li>Index: <data:index />, Number: <data:number /></li>
  </b:loop>
</ul>




This example would create an unordered list of:


Index: 2, Number: 7
Index: 0, Number: 9
Index: 1, Number: 8


If, elseif & else (b:if)


When to use if, elseif, or else
You can use the b:if, b:elseif and b:else tags to display certain content in particular cases, and other content in other cases. For example, you might only want to show certain text on the homepage, but different text when looking at individual posts.


Format
<b:if cond='condition'>
  [content to display if condition is true]
<b:elseif cond='another condition'/>
  [content to display if no previous if or elseif conditions have been true, and this elseif condition is true]
<b:else/>
  [content to display if no if or elseif conditions are met]
</b:if>








The b:elseif and b:else tags are optional. Without them, the result will be either the content listed in the b:if section or nothing. The closing </b:if> is required in each case, however.

For "condition" you can put in anything that evaluates to either true or false. Some data tags are simply true/false values on their own, e.g. allowComments on a post. With other pieces of data, you can compare them with specific values to get a true or false. Here are some examples:






<b:if cond='data:post.showBacklinks'>
True if the current post is set to show backlinks.
<b:if cond='data:blog.pageType == "item"'>
True if the current page is an item page (post page).
<b:if cond='data:blog.pageType == "item" and data:post.showBacklinks'>
True if the current page is an item page (post page) and the current post is set to show backlinks.
<b:if cond='data:displayname != "Fred"'>
True if this is not Fred's display name.
<b:if cond='data:displayname == "Fred" or data:blog.pageType == "static_page"'>
True if Fred is the display name, or the current page is a static page (not a post page).
<b:if cond='data:post.numComments > 1'>
True if the current post has more than one comment.
<b:if cond='data:blog.pageType in {"static_page", "item"}'> OR <b:if cond='{"static_page", "item"} contains data:blog.pageType'>
True if the current page is a specific post, or a page.



Switches (b:switch)
When to use a Switch
You can use b:switch tag much like you would use a b:if tag that has several b:elseif tags. The advantage of a switch branch is that you don’t need to repeat the variable name. You can easily read them to see what defines each case, and what the default case is.

Format

<b:switch var='[Data expression]'>
<b:case value="[Value 1]" />
 [Output if evaluation of var is equal to Value 1]
<b:case value="[Value 2]" />
 [Output if evaluation of var is equal to Value 2]
[… any other values]
<b:default />
 [Output if evaluation of var is not equal to any other stated b:case]
</b:switch>

Example
This example shows how to output a different header, depending on what type of page is being rendered.

<b:switch var='data:blog.pageType'>
<b:case value="static_page" />
  <h1>Page</h1>
<b:case value="item" />
  <h1>Post</h1>
<b:default />
  <h2>Blog Posts</h2>
</b:switch>

Attribute expressions (expr:)
When to use Expressions
You can use the expr attribute to set attribute values based on values in the data dictionary. 

Examples


<a expr:href='data:blog.homepageUrl'>Home</a>
A home link with the blog's homepage url.
<a expr:href='data:blog.homepageUrl + "feeds/posts/default"'>Posts RSS</a>
A link with the blog's post RSS feed url. The ‘+' operator concatenates the two strings.
<a expr:class='data:post.allowComments ? "comment" : "no-comment">Comment</a>
A link with the class "comment" when comments are allowed, and "no-comment" when they are not. The ternary operator (?:) takes the given boolean value and picks the first value (after the ?) if the boolean is true, or the second value (after the :) if the boolean is false.

Evaluated Expressions (b:eval)
When to use an Evaluated Expression
You can use b:eval tag to evaluate a more complicated expression than a standard data tag.

Format

<b:eval expr='[Expression]' />


Examples

min-height: <b:eval expr="data:newWidth * data:height / data:width" />px;
Output a calculated relative height, based on a new width value.
<b:eval expr="data:post.labels[0].url" />
Output the url of the first post label.
<b:eval expr='data:post.allowComments ? "Comment" : "Comments Disabled" />
Output “Comment” when comments are allowed, and “Comments Disabled” when they are not. Note that this expression makes use of the ternary operator.

Variable alias (b:with)
When to use a variable alias
You can use b:with tag to temporarily store the value of a computed expression and avoid complicated inline expressions.

Format

<b:with var='myComputedValue' value='[Data expression]' />

Examples
For a complicated style attribute based on data variables, you can compute it before the rest of the HTML output, so that the nested HTML is easier to read.

<b:with var='style'
       value='"background-image: url(\"" + data:sourceUrl "\"); "
           + " width: " + data:width + "px; " '>
 <div id='header-outer'>   
   <div id='header-inner' expr:style='data:style'>
     <h1>My Header</h1>
   </div>
 </div>
</b:with>

Note that the variable will only exist for the child nodes of the b:with tag.

See an example
Click to see an example of how all of these tags are used in the HTML for a PageList widget in your blog.

Example
In this widget, you can see example usages of the b:widget, b:includable (and b:include), b:if (and b:else), and b:loop tags.

<b:widget id='PageList1' locked='false' title='Pages' type='PageList'>
  <b:includable id='main'>
    <b:if cond='data:title != ""'>
      <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>
      <b:if cond='data:mobile'>
        <select expr:id='data:widget.instanceId + "_select"'>
        <b:loop values='data:links' var='link'>
          <b:if cond='data:link.isCurrentPage'>
            <option expr:value='data:link.href' selected='selected'><data:link.title/></option>
          <b:else/>
            <option expr:value='data:link.href'><data:link.title/></option> 
          </b:if>
        </b:loop>
        </select>
        <span class='pagelist-arrow'>&amp;#9660;</span>
      <b:else/>
        <ul>
        <b:loop values='data:links' var='link'>
          <b:if cond='data:link.isCurrentPage'>
            <li class='selected'>
              <a expr:href='data:link.href'><data:link.title/></a>
            </li>
          <b:else/>
            <li>
              <a expr:href='data:link.href'><data:link.title/></a>
            </li>
          </b:if>
        </b:loop>
        </ul>
      </b:if>
      <b:include name='quickedit'/>
    </div>
  </b:includable>
</b:widget>

Add Page Elements Tags for Layouts

2018-11-16T22:27:00.002-08:00

Page elements tags for layouts

The <body> section of a layout theme is made up of sections and widgets.

Sections are areas of your page, such as a sidebar, footer.
A widget is a page element such as a page, a blogroll, or anything else you can add from the “Page Elements” tab.

You can include any HTML you like around the sections in your theme.

Sections

Each section in your theme has opening and closing tags that look something like this:

<b:section id='header' class='header' maxwidgets="1" showaddelement="no">

</b:section>

<b:section> tag attributes



id – (Required) A unique name, with letters and numbers only.
class – (Optional) Common class names are “navbar,” “header,” “main,” “sidebar,” and “footer.” If you change themes later, these names help Blogger determine how to transfer your content.
maxwidgets –- (Optional) The maximum number of widgets to allow in this section. If you don't specify a limit, there won't be one.
showaddelement – (Optional) Can be “yes” or “no,” with “yes” as the default. This determines whether the Page Elements tab will show the 'Add a Page Element' link in this section.
growth – (Optional) Can be 'horizontal' or 'vertical,' with 'vertical' as the default. This determines whether widgets within this section are arranged side-by-side or stacked.



A section can only contain widgets. To insert extra code within a section, split the section into two or more new sections.

Widgets

A widget is represented by a single tag, which is a placeholder to indicate how the widget should be handled in the Page Elements tab.

Some examples of widgets (one for a page header and one for a list) are:

<b:widget id="header" type='HeaderView' locked="yes"/>

<b:widget id="myList" type='ListView' locked="no" title="My Favorite Things"/>

<b:widget id=”BlogArchive1” locked=”false” mobile=”yes” title=”Blog Archive” type=”BlogArchive”/>

Widget attributes



id – (Required) May contain letters and numbers only, and each widget ID in your theme should be unique. A widget's ID cannot be changed without deleting the widget and creating a new one.
type – (Required) Indicates the kind of widget.
locked – (Optional) Can be “yes” or “no,” with “no” as the default. A locked widget cannot be moved or deleted from the Page Elements tab.
title – (Optional) If no display title is specified, a default title such as “List1” will be used.
pageType – (Optional) Can be “all,” “archive,” “main,” or “item,” with “all” as the default. The widget will display only on the designated pages of your blog. (All widgets display on the Page Elements tab, regardless of their pageType.)
mobile – (Optional) Can be “yes”, ”no,” or “only” with “default” as the default. This decides if the widget will be displayed on mobile or not. Only Header, Blog, Profile, PageList, AdSense, Attribution will be displayed on mobile when the mobile attribute is “default.”




Learn more on editing widget tags.



Note: In your published blog, all <b:section> and <b:widget> tags will be replaced with <div> tags, which will have the specified ID. This will allow you to refer to, for example, div#header or div#myList in your CSS.

How to change the Design of your blog

2018-11-16T22:11:00.001-08:00

Change the design of your blog

You can change your blog’s layout, color scheme, and more.

Change your blog using gadgets

You can use gadgets to do things like display your blog's archive, show blog labels in a list on every page, or put your profile on every page.

Add a gadget to your blog

Sign in to Blogger.
Choose the blog to update.
In the left menu, click Layout.
In the area where you want to add something, click Add a Gadget.
In the window that opens, choose the gadget to add and click Add Add.
In the lower left, click Save.
Optional: To change the settings on a gadget, click Edit.

Change your blog’s design using HTML or CSS

Use HTML to change your blog’s design

Sign in to Blogger.
Choose the blog to update.
In the left menu, click Theme.
Under “Live on Blog,” click Edit HTML.
Make the changes you want.
Click Save theme.

Note:

You can customize how different sections of all of the pages, such as the footer or a sidebar, look by using page element tags.
You can use widget template tags to customize the info shown on each individual page: for example, in the sidebar, page header, and page footer gadgets.

Use CSS to change your blog’s design

Sign in to Blogger.
Choose the blog to update.
In the left menu, click Theme.
Under “Live on blog," click Customize.
In the left menu, click Advanced and then Add CSS.
Add your code.
On the top right, click Apply to blog.

Note: Google claims no ownership or control over any content submitted, posted, or displayed by an author on or through Google services. Blog authors who add code or third-party widgets do so at their own risk.

How to Customize CSS tags for layouts

2018-11-16T22:01:00.001-08:00

Customize CSS tags for layouts

To use the template designer with the CSS of your blog’s template, there are a few guidelines to follow.

Set up the variables

In the <head> section of your code, you'll need to have a pair of <b:skin> </b:skin> tags.

The CSS style declarations will go in between those tags, along with the variable names that make your design work with the Fonts and Colors page.

Example

<head>

...
<b:skin>
<style type='text/css'>
/*
  * Variable definitions:
  * <Variable name='bgcolor' description='Page Background Color'
      type='color' default='#fff'/>
  */
body {
   background: $bgcolor;
   margin: 0;
   padding: 40px 20px;
}
</style>
</b:skin>
</head>

The CSS code enclosed in /* and */ comment tags won't be shown on your blog.

There will be a list of variables here, one for each font or color that you want to be editable from the “Fonts and Colors” tab. Each variable is required to have the information shown in the example above and described here:

name – May contain letters or numbers. Each name in your template must be unique.
description – Add a description to appear in “Fonts and Colors" section.
type – "Font" or "color."
default – The default value. For colors, this should be a hexadecimal color code, for example #FF0066. For fonts, it will be a list of the form font-style font-weight font-size font-family.

Use the variables

After the variables are set up, when you want to use the value of a variable, enter $variable_name in the b:skin css.

Variable types

The template designer has editing support for a specific set of CSS variable types. To set the type of variable:

color variables will provide a color palette for selection in the template designer.
font variables will provide a font selection, with size and bold or italics options, in the template designer.

In the example above, there is a variable called bgcolor, which is set to white (#fff). In the next code, it says: background: $bgcolor. This turns the background white, and you can change it in the “Fonts and Colors” section.

Note: You don’t need to create variables for other types of CSS attributes. These can be included in the CSS just as they normally would be (as with the margin: and padding: attributes in the example above).

Learn more about CSS.

Add Thems to Change your Blog in Blogger

2018-11-16T21:44:00.003-08:00

Use themes to change how your blog looks

People can see and interact with your blog in different ways by using one of Blogger’s themes.

Choose a theme to use

Sign in to Blogger.
In the top left, click the Down arrow Down arrow.
Click a blog to update.
In the left menu, click Theme.
Click the theme you want to use.
In the bottom right, click Apply to Blog.
Optional: To save a copy of your theme, in the top right, click Backup/Restore and then Download theme.

Use a Dynamic Views theme

When you’re using a Dynamic Views theme:

Blogger will record each post displayed as a pageview.
Your readers will have the option to change their default view.

To use Dynamic Views, make sure sharing is turned on for your blog.

Customize your theme

Change the background, column widths, and more

Sign in to Blogger.
In the top left, click the Down arrow Down arrow.
Click a blog to update.
In the left menu, click Theme.
Under “Live on Blog," click Customize.
Use the left menu to customize your background image or color and to adjust widths, layout, and other settings.
In the top right corner, click Apply to Blog to make your changes live.

Change font color and size

You can change the font, font color, and font size for your entire blog:

Sign in to Blogger.
In the top left, click the Down arrow Down arrow.
Click a blog to update.
In the left menu, click Theme.
Click Customize.
In the top left corner, click Advanced.
Choose the font, font size, and font color you want for each kind of text you want to use. For instance, you can change the formatting for the regular blog post text or for the page headers.
In the top right, click Apply to Blog.

Add Custom CSS to your Blogger

2018-11-16T21:34:00.001-08:00

Change the design of your blog

If you are a Blogger, You can change your blog’s layout, color scheme, and more.

Change your blog using gadgets

You can use gadgets to do things like display your blog's archive, show blog labels in a list on every page, or put your profile on every page.

Add a gadget to your blog

Sign in to Blogger.
Choose the blog to update.
In the left menu, click Layout.
In the area where you want to add something, click Add a Gadget.
In the window that opens, choose the gadget to add and click Add Add.
In the lower left, click Save.
Optional: To change the settings on a gadget, click Edit.

Change your blog’s design using HTML or CSS

Use HTML to change your blog’s design

Sign in to Blogger.
Choose the blog to update.
In the left menu, click Theme.
Under “Live on Blog,” click Edit HTML.
Make the changes you want.
Click Save theme.

Note:

You can customize how different sections of all of the pages, such as the footer or a sidebar, look by using page element tags.
You can use widget template tags to customize the info shown on each individual page: for example, in the sidebar, page header, and page footer gadgets.

Use CSS to change your blog’s design

Sign in to Blogger.
Choose the blog to update.
In the left menu, click Theme.
Under “Live on blog," click Customize.
In the left menu, click Advanced and then Add CSS.
Add your code.
On the top right, click Apply to blog.

Add Custom Robots Header Tags in Blogger

2018-11-16T16:56:00.001-08:00

Don’t you know there are search robots? They are responsible for recognising the updates on our sites and notifying the search engines about the same.

With the help of proper predefined tags, you can communicate with the crawlers to increase and decrease the search visibility. That’s what exactly you are going to read in this post.

Set up Custom Robots Header Tags on Blogger

I hope you are a Blogger user looking forward to increasing your search engine exposure so that the organic traffic will reach a zenith.

If so, I recommend following this guide and enabling the custom robots header tags for maximum search engine visibility (especially for new blogs).

Before getting to know the process of setting up custom robots header tags on Blogger, you should know what they are.

1. all – If you set this tag, crawlers are not bound by any constraints. They can freely crawl, index and expose your content.

2. noindex – Not all the blogs are for public notice. Even if you don’t share the URL of your personal blog with anybody, chances are people will come to it from search results. On such a scenario, you can use noindex tag as it prevents search engines from indexing the pages.

3. nofollow – Nofollow and dofollow tags are for outbound links. Dofollow is the default robot tag for all your outbound links. That means the search engines can sneak upon the pages you linked to. If you don’t want search bots to look through your links, addition of a nofollow tag must help you.

4. none – none combines the features of both noindex and nofollow tags. The crawlers will neither index your pages nor skim through the links.

5. noarchive – You might have noticed a cached label with most of the website links on SERPs. It shows that Google has captured a copy of your site into their server to display in case it goes down. That being said, the noarchive tag turns off cached version in search pages.

6. nosnippet – The text snippets in search results help people find what’s on the webpage. If you want to keep the content exclusive, you can turn this header tag on.

7. noodp – Open Directory Project or Dmoz is a man-made directory of websites. Google use the information from there sometimes. You can turn it off with this tag if you want to.

8. notranslate – Do you want to disable translation on your site? Then use notranslate for the exact purpose.

9. noimageindex – If you allow Google to index your images, people may steal it and use on their own websites. To prevent that, you can keep the images deindexed using noimageindex tag. Also Read this Image SEO guide.

10. unavailable_after – In Blogger, you will get a field right to this tag. So, the webpage will be deindexed after this time.

With that being said, let’s get into the real meat of this post.

How to Setup Custom Robots Header Tags?
As you know, we are talking about setting up robots tags on blogger. Follow the steps given below to proceed with this.

Step 1: Visit blogger.com and sign in to your account. From the list of your blogs, choose the one for which you want to modify robots tags.

Step 2: Then go to Settings >> Search preference. There you can see a setting called Custom robots header tags under Crawlers and Indexing. Click the Edit link to the right of it.

Crawlers and Indexing

Step 3: At this step, you will notice two radio buttons. Obviously, the first one should be your pick.

Enable Custom Robots Header Tags

Step 4: Now, you will get a set of checkboxes. But don’t get intimidated! It may feel like a complicated one, but it’s not. You can set them on your own by reading the “Custom Robots Header Tags and Purpose” once again. Or, just follow the same settings I chose (refer to the image given below) and hit Save changes.

Custom Robots Header Tags Settings

Note: We can set this up for the homepage, archive pages, and post pages as well.

Hurray! You have done this.

Bottom Line

Trust me custom robots header tags are powerful! As Google provides a readymade setup to use them, why don’t you go for it?

And, don’t tick noindex checkbox until and unless you are sure about it because doing the same will pull your website off from search engine result pages (SERPs).

Let me know if anything bothers you regarding this topic through the comment form down below.

Add Custom Ads.Txt File in Blogger?

2018-11-16T08:05:00.001-08:00

The advertisement is the primary key for a publisher to generate money. The ads can be of many types and there are many ad providers that help publishers to make money from their blogs. But, it is very necessary to check the authenticity of the ads that are shown on a particular website. The verification of ads shown on a website can be achieved by ads.txt file. An ads.txt file secures both publisher and advertiser from frauds or viruses. This is essential to add the ads.txt file on your website or blog, so here we are discussing how you can easily add the ads.txt file in your BlogSpot blog.

Before adding ads.txt file on your blogger blog, let us know what exactly is ads.txt and how is it going to benefit us.

What is Ads.txt File?

The “Ads.txt” is simply a text file that can be placed on your blog's server and carries information about the advertising networks used by the blog's owner and the owner authorised these ads networks to show ads on the website. The main idea behind using this ads.txt file is to protect publishers from frauds and viruses as you will only authorise those ads network to display ads on your website which you're aware of and hence any malware script that showing ads on your blog without your permission from any unknown sources, cannot perform the task it ought to do.

Advantages of Using Ads.txt:

Obviously, it is future. The technology is growing day by day. Advertisers looking for exposure on your site won’t be tricked into buying misrepresented inventory and you retain control over pricing. So, let's start rolling your fingers on how you can add an ads.txt file in your Blogger BlogSpot blog.
Steps to Add Custom Ads.txt file in Blogger?
You just need to follow step by step guide to add a custom ads.txt file in your blogger blog.

Login to Blogger Dashboard and Select the Desired blog you want to add an ads.txt file.

Click on Settings Tab and then Search Preferences.

Under the Monetisation heading, you will see an option to Edit custom ads.txt. (Check screenshot)

Click on Edit and then Select Yes to Enable custom ads.txt content.

You will shown-up a text box and you have to enter your desired ads.txt file. There are many ads networks and they have a different identity for ads.txt.
If you are using only Google Adsense as your monetising partner, then use the below Ads.txt file.

google.com, pub-xxxxxxxxxx, DIRECT, f08c47fec0942fa0

Replace, pub-xxxxxxxxxx with your Adsense publisher ID.

Also, if you're selling Adsense ads space on your blog, means you're using some other person's Adsense on your blog then you need to replace DIRECT with RESELLER to authenticate yourself as a reseller of the particular Adsense publisher ID, like:
google.com, pub-xxxxxxxxxx, RESELLER, f08c47fec0942fa0

Once you're done! Click on Save changes.
That's it your ads.txt file is now live on your blog. You can check your ads.txt file by going to www.bbeginner.com/ads.txt.

Note: Do not forget to replace social-webmedia.blogspot.com with your domain name.

Create & Publish a new post in Blogger (write, edit, delete)

2018-11-16T04:10:00.000-08:00

If you are a Blogger, You can write, edit, delete posts and drafts at any time.

Write a new post :

Sign in to Blogger.
Click New Post.
Create the post.
Optional: To see how your post will look, click Preview.
To save your post without publishing it, click Save. To publish your post, click Publish.

Publish a post :

Schedule a post

Under the name of the blog, click Posts.

Click the title of the post.

On the right, click Post settings and then Schedule.

Choose a time and date to publish your post.

Click Done.

To set your time zone:

In the main dashboard, in the left menu, click Settings and then Language and formatting.
Under "Formatting," choose the time zone you want.
In the top right corner, click Save settings.

Use email to post to your blog

Turn on posting by email

Sign in to Blogger.
In the top left, click the Down arrow Down Arrow.
Click the blog.
In the left menu, click Settings and then Email.
Next to "Posting using email," type a unique word to create an email address to send posts to.
Choose whether to publish emailed posts immediately or to save them as drafts and publish them yourself later.
In the top right corner, click Save settings.

Post by email

Create an email with your post title as the subject.
The body of the email will be the post: (1).To mark the end of your post, enter #end. (2).To include an image, attach an image to your email.
Send the email to the email address you created: (username.[secretword]@blogger.com).

Note: Anyone who emails this unique email address will be able to post as you on your blog.

Edit a post

Sign in to Blogger.
Under the name of the blog, click Posts.
Point to the post you want to edit.
Click Edit.
Make your changes.
Optional: To see how your post will look, click Preview.
For posts that have already been published, click Update or Revert to draft. For posts that haven’t been published yet, click Publish or Save.

Delete a post:

Sign in to Blogger.
In the top left, click the Down arrow Down Arrow.
On the dashboard, click the blog.
Point to the post you want to delete.
Click Delete.

Format a post :

Choose how HTML and line breaks are handled in your posts

Sign in to Blogger.
Under the name of the blog, click Posts.
Click the title of the post you want to edit.
On the right side, click Post settings and then Options.
Choose how HTML code is displayed.
Choose how line breaks are handled.
Click Done.
For posts that have already been published, click Update or Revert to draft. For posts that haven’t been published yet, click Publish or Save.

Add a Read More link

Sign in to Blogger.
In the top left, click the Down arrow Down Arrow.
Click the blog.
Click the post.
In the composer box, place your cursor where you want to put the "Read More" link.
Click Insert jump break.

Create a post template

Sign in to Blogger.
In the top left, click the Down arrow Down Arrow .
Click the blog.
In the left menu, click Settings and then Posts, comments and sharing.
Under "Posts," next to Post Template, click Add.
Add your template.
In the top right corner, click Save settings.

Content to avoid adding to your blog

Avoid adding content hosted by someone else without their consent.
Avoid using copyrighted materials.
Avoid adding content that violates our content policy. This includes, but is not limited to, explicit imagery posted without the subject’s consent and hateful, violent, or crude content.

Add Custom Robots.txt to the Blogger

2018-11-15T01:12:00.000-08:00

Robots.txt is a text file which contains few lines of simple code.

It is saved on the website or blog's server which instruct the web crawlers on how to index and crawl your blog in the search results.

That means you can restrict any web page on your blog from web crawlers so that it can't get indexed in search engines like your blog labels page, your demo page or any other pages that are not as important to get indexed.

Always remember that search crawlers scan the robots.txt file before crawling any web page.

Each blog hosted on blogger has its default robots.txt file which is something look like this:

User-agent: Mediapartners-Google
Disallow:
User-agent: *
Disallow: /search
Allow: /
Sitemap: http://example.blogspot.com/feeds/posts/default?orderby=UPDATED

Explanation

This code is divided into three sections. Let's first study each of them after that we will learn how to add custom robots.txt file in blogspot blogs.

User-agent: Mediapartners-Google

This code is for Google Adsense robots which help them to serve better ads on your blog. Either you are using Google Adsense on your blog or not simply leave it as it is.

User-agent: *

This is for all robots marked with asterisk (*). In default settings our blog's labels links are restricted to indexed by search crawlers that means the web crawlers will not index our labels page links because of below code.

Disallow: /search

That means the links having keyword search just after the domain name will be ignored. See below example which is a link of label page named SEO

And if we remove Disallow: /search from the above code then crawlers will access our entire blog to index and crawl all of its content and web pages.

Here Allow: / refers to the Homepage that means web crawlers can crawl and index our blog's homepage.

Disallow Particular Post

Now suppose if we want to exclude a particular post from indexing then we can add below lines in the code.

Disallow: /yyyy/mm/post-url.html

Here yyyy and mm refers to the publishing year and month of the post respectively. For example if we have published a post in year 2013 in month of March then we have to use below format.

Disallow: /2013/03/post-url.html

To make this task easy, you can simply copy the post URL and remove the blog name from the beginning.

Disallow Particular Page

If we need to disallow a particular page then we can use the same method as above. Simply copy the page URL and remove blog address from it which will something look like this:

Disallow: /p/page-url.html

Sitemap:

http://example.blogspot.com/feeds/posts/default?orderby=UPDATED

This code refers to the sitemap of our blog. By adding sitemap link here we are simply optimizing our blog's crawling rate.

Means whenever the web crawlers scan our robots.txt file they will find a path to our sitemap where all the links of our published posts present.

Web crawlers will find it easy to crawl all of our posts.

Hence, there are better chances that web crawlers crawl all of our blog posts without ignoring a single one.

Note: This sitemap will only tell the web crawlers about the recent 25 posts. If you want to increase the number of link in your sitemap then replace default sitemap with below one. It will work for first 500 recent posts.

Sitemap: http://example.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=500

If you have more than 500 published posts in your blog then you can use two sitemaps like below:

Sitemap: http://example.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=500

Sitemap: http://example.blogspot.com/atom.xml?redirect=false&start-index=500&max-results=1000

Adding Custom Robots.Txt to Blogger

Now the main part of this tutorial is how to add custom robots.txt in blogger. So below are steps to add it.

Go to your blogger blog.
Navigate to Settings >> Search Preferences ›› Crawlers and indexing ›› Custom robots.txt ›› Edit ›› Yes
Now paste your robots.txt file code in the box.
Click on Save Changes button.
You are done!

blogger custom robots.txt

How to Check Your Robots.txt File?

You can check this file on your blog by adding /robots.txt at the end of your blog URL in the web browser. For example:

http://www.yourblogurl.blogspot.com/robots.txt

Once you visit the robots.txt file URL you will see the entire code which you are using in your custom robots.txt file.

See below image.

Final Words!

This was the today's complete tutorial on how to add custom robots.txt file in blogger.

I tried my best to make this tutorial as simple and informative as possible. But still if you have any doubt or query then feel free to ask me in the comment section below.

Make sure not to put any code in your custom robots.txt settings without knowing about it. Simply ask me to resolve your queries. I'll tell you everything in detail.

Thanks guys for reading this tutorial. If you liked it then please support me to spread my words by sharing this post on your social media profiles. Happy Blogging!