Customizing Body Width of Soho Blogger Theme

Blogger's new themes are responsive and you get a very little option to change the set width of the main area. The theme designer doesn't even an option to adjust the widths either.

We will use custom CSS codes to customize the width of the Soho theme's blog area to stretch more than the default setting.

This post would be very short, the reason for this being short is that this tutorial will simply teach you how to do a specific thing - here setting the width and that doesn't require too much technical background. Also we will be posting a series of customization tutorial for Blogger's new Themes (Soho, Contempo, Emporio and Notable), be sure to subscribe to our blog for updates.

Getting Started

Currently the largest width Soho theme stretches is 1000px, if the screen is more than 640px the blog post area as well as header & footer will stretch as much as 1000px.

The width of the parts of the theme is dependent on the available screen width, this is the nature of response web design. Nowadays everybody has screens larger than 1000px in width so it is a good idea to stretch the blog wider on larger screens than to leave empty areas.

CSS Snippet

Following is what we need, you don't have to customize it, it works well with existing standard screen widths and stretches the areas as required. Copy the CSS code -

/* For screen widths less than 1280px */
/* For screen widths less than 1280px */
@media screen and (min-width:1280px) {
    .centered-bottom, .centered-top {
        width: 1180px;
    }

    body.item-view .widget.Blog .post {
        width: 800px;
    }
}


/* For screen widths less than 1400px */
@media screen and (min-width:1400px) {
    .centered-bottom, .centered-top {
        width: 1300px;
    }

    body.item-view .widget.Blog .post {
        width: 1060px;
    }
}

After copying keep it in a notepad / textedit app since we are going to need it in the next step.

You can customize the values according to your needs if you know what you are doing else it is suggested you post a comment down below explaining how you want it to be different for your use so that we can help.

Applying the CSS

For a complete guide on adding CSS codes in Blogger refer to this tutorial - How to add CSS to your Blogger Blog.

1. Open your Blogger Dashboard and choose the blog
2. Go to the Theme section
3. click on Customize
4. Navigate to Advanced Add CSS
5. In the Add custom CSS text field enter the copied CSS code from the previous section. It should look like this -
   
   
   
   
   
6. Click on Apply to Blog to save the changes and go to the blog to see it live. 

That's it. Once the CSS is applied you will start seeing the customized width live on the blog. 

What's next?

We plan on posting more small tutorials like this on customizing parts of new themes. If you have any suggestions email it to us on depy45631@gmail.com or post your idea in the comments below. 

Show Full Blog Posts in Homepage of Contempo Theme in Blogger

After so many years Blogger has finally brought advanced and modern themes, which are responsive, optimized for mobile devices and are beautiful!

The need of every Blogger is different, same is in the case of snipped post that appears in homepage for Contempo Theme. The theme will only show a small excerpt of your blog posts on the home page, in this tutorial you will learn how you can change this behavior and have the full post on home and index pages.



For years blog owners want to have a way to show automatic post summaries, there still exists hundreds of tutorials for the templates that came out before these new modern themes. But not all blog owners wants to show a snipped version of their posts on the main page of their blog.

Blogger doesn't give you any option in the settings to disable / enable post snippets so we figured out a way to do that directly from the theme code.

Getting Started with the Tutorial

IMPORTANT - Since you will be working with template codes of your blog it is highly recommended that you take a backup of your Blog's theme before proceeding. 

Follow each step carefully and in steps that deals with codes we've provided screenshots of what you should be looking for to make the process easy and fast.

Changing the Theme XML Code

The first and most important part is to change the XML code in the theme code that is responsible for showing blog posts in different styles. 

1. Sign-into your Blogger profile
2. Select your blog from the blog list 
3. Go to the Theme section > click on Edit HTML button on the page
4. When the theme code editor opens, put the cursor inside of it and press CTRL+F / ⌘ + F to open the in-page search box
   
5. In the code editor you will be looking for the following block of code
   
   

   <b:if cond='data:view.isSingleItem'>
       <b:include data='post' name='postBody'/>
   <b:else/> 
       <b:include data='post' name='postBodySnippet'/>
       <b:include data='post' name='postJumpLink'/>
   </b:if>

   
   You do not have to enter the entire block of code in the search box, use only a small part from the code block which should bring you to the same exact code in a few tries.
   
   This is how the code that you are looking for in the theme code editor
   
   
   
   
6. Once the code is visible on your theme editor, use your cursor to select from <b:if... part to the ending </b:if.. part,
   
   
7. Upon highlighting it, delete the highlighted part. 
8. Copy the following code which we will be placing in the place of the previous code (that we deleted in the last step)
   
   

   <b:if cond='data:view.isSingleItem'>
       <b:include data='post' name='postBody'/>
   <b:else/> 
       <b:include data='post' name='postBody'/>
   </b:if>

   
   After successfully placing the code given above, the theme code editor should look like this with the code in place :
   
   
   
9. Now click on the "Save theme" button to save the theme.
10. Visit your blog to see the changes live, you may need to clear caches if you are not able to see any changes. 

If you noticed that the blog posts are not snipped now but still aren't showing as full then probably you have put a page break in your blog post, removing it should fix this, see the section "Remove Page Breaks from Post" below. 

Hide the "Keep Reading" Link

The "Keep Reading" jump link might have not gone away. This following CSS code will help in hiding the link from the posts on home page. 

Copy the following CSS code :

.jump-link {
    display: none; 
}

And add it to your blog. [See how to add CSS in a Blogger Blog]

Remove Page Breaks from Post

In case you put page breaks in your posts the posts may not appear full. So if you want a post to be shown full instead of till the page-break part remove the page break from the post.

1. Sign in to Blogger.
2. Click the post in the post editor.
3. In the composer box, place your cursor after the page-break element (it is a grey horizontal line with dashes) 
4. Hit backspace to remove it.
5. Save the post. 

What about other themes like Soho, Emporio and Notable

We're glad you asked this - the same code doesn't exist in other themes so this tutorial isn't applicable for other new themes. Following are the tutorials for other new Blogger themes to do the same on it.

• Full Blog Posts on Notable Theme's Homepage in Blogger Blogs

Blogger Page and Post Titles Style for Better SEO

Definitely content is the king, but how we present the content to the people and also the search bots is an important aspect. In this post we will talk about how to display page titles of your blog in order to get highest visibility on search engines like Google.

SEO short of Search Engine Optimization is a broad topic on how to maintain and create a website / blog that performs well enough with search engine bots so it comes up on user queries at the best ranking possible. 

That doesn't mean SEO is a very complicated topic, yet applying it might be somewhat require a learning curve since editing code and adding functionalities to websites require one to be familiar with codes. 

What's with the page title of Blogger Blogs?

Skip to the next section to learn how to optimize the blog's page title, to learn more about it read below.

The page title we are talking about is the document title of a web page that appears in most browsers in the tab - in HTML it is situated in the HEAD of a web page as
<title>Blog Title - Some Example Page</title>

Majority of Blogger templates (expect for the themes that has been recently introduced) have a very unconventional and non-optimized for search way of display the page title on posts in Blogger blogs.

Each of your posts is a different web page on your blog, and it is important that all of them are optimized for SEO, primary focus should be on the content, and another important aspect, which we are discussing here, is the page title, it's the part that appears on search engine's results.

Check this and ask yourself, which one gives a human being more detail about the search result for the term "How to add CSS to Blogger Blogs"?



Search engines wants values small but descriptive page titles, it is a bad idea to take up a significant amount of space in your page title with your blog's title.

A page title on posts page can be and generally are consisted of two parts, "The post title - The Blog Title", the problem with many Blogger themes / templates are that it puts the blog title first even on post pages, so if one has a blog named "Alison's Travel Photography Blog" a blog post on the blog will have a page title like "Alison's Travel Photography Blog : This Is The Title of The Post"

We are just going to optimize this for search in Blogger.

Optimizing Page Title for Search Engines

This is a very small change to make though it can make significant amount of difference in your search rankings and we recommend you to do this if your page titles aren't optimized yet.

Blogger has launched new themes recently which already has better page title than the old ones, but if you are using a third-party template or Blogger's default templates follow the steps below.

For Normal Blogger Templates and Third-Party Templates

It is recommended that you take a backup of your template before proceeding. 

The following steps are for normal blogger templates that you can choose from the theme selection area in Blogger or third-party templates based on those templates.

1. Go to your Blogger Dashboard (https://www.blogger.com)
2. On the blog's dashboard, go to the Theme section
   
   
3. When you are in the Theme section, click on the "Edit HTML" button under your blog's preview.
   
4. After the template code appears on the screen, focus in the template code area and hit CTRL+F / ⌘ + f and search for the following piece of code, tip: only enter <title> should bring this up.
   
   <title><data:blog.pageTitle/></title>
   
   
5. Delete the line of code that found in the last step, and replace it with this code:
   
   

   <b:if cond='data:blog.pageType == &quot;index&quot;'>
       <title><data:blog.title/></title>
     <b:else/>
       <title><data:blog.pageName/> | <data:blog.title/></title>
   </b:if>
   

   
   
6. Save the template and visit your blog. Check your page's title in the browser's tab to see if it is SEO optimized or not. 

The "|" is a character that will separate your current page name and the main blog title, i.e "My Blog | An example blog post title" or "Stramaxon | How to add CSS" etc. 

If you like you can change that to something else such as "/", ":", "||". It is a preference but may also have some effect on SEO, so pick a different one only when you are sure what you are doing. 

EXTRA: Adding Blog's Tagline in Title

The instructions in the section above works great even without modifications but if you like you can add a tag line of your blog in the page title so that it appears in the browser's tab and most importantly in

Benefit of adding a tag line: If your blog's title is short, then adding a tag line makes fill up the left space. Your blog's results will look better and your reader can tell what your blog is about right from the search itself.

The code that you were given produces the result like A, and the following will produce the result B. It is highly recommended you add a tag line for your blog if your blog title is short.

Here's the code (similar to the code in the main steps, only added the description part):

<b:if cond='data:blog.pageType == &quot;index&quot;'>
    <title><data:blog.title/> - Enter your Blogs Tagline</title>
  <b:else/>
    <title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>

Copy the code and paste it first in a notepad editor, and replace the part Enter your Blogs Tagline with your own tag line: Keep it short and descriptive, it is what will appear in searches along with your blog title, so make it attractive, short and simple.

The steps to add this code is similar to the steps given in the previous section.

Search Optimization and Results

Following this tutorial and making this change to your blog may or may not give you immediate results. To improve your search visibility you still have to post genuine and content that your readers would like to read, this tutorial helps you make your blog's visibility better for what you already have and going to post in the future on your blog. 

If you have questions or have any suggestions then please do comment down below.


The tutorial will be updated to list steps for new Blogger themes...

Solving Blogger Template Error for AdSense Ad Implementation

If you are recently enrolled in AdSense and you are trying to implement ad code that you got from AdSense directly in your Blog's template you might have run into problems, we will walk you through fixing it.



If you are trying to add code from AdSense which looks something like this (there is a difference between the two codes, which we will explain)

Demonstration of the ad code in Blogger template and the error that occurs

<script async src="//pagead2.googlesyndication.com/
pagead/js/adsbygoogle.js"></script>
<!-- leaderboard -->
<ins class="adsbygoogle"
    style="display:inline-block;width:728px;height:90px"
    data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
    data-ad-slot="1234567890"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

OR

<script async src="//pagead2.googlesyndication.com/
pagead/js/adsbygoogle.js"></script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

The the only difference between the two snippet is that the first one displays an ad, whereas the second one is used only to load AdSense's JavaScript files.

In many cases to improve page load speed you just want to load the scripts once because AdSense ad codes always include the ad-block HTML code as well as the scripts. Or when you are enabling Page Level Ads the script tags needs to be added in the template once, the following code is give, which you are supposed to implement in your Blogger's template / theme

The error that you might be getting when trying to add these code snippet in your template is

Attribute name "async" associated with an element type "script" must be followed by the ' = ' character. 

Fixing the error

There's nothing wrong with the code, according to HTML5's standard it is an error free code, but Blogger's template / thee is coded in XML and it fails to parse it because of a small part in the codes

Right now we have (note that we are only displaying the part of code that requires modification, rest should be left untouched),

<script async src="//pagead2.googlesyndication.com/
pagead/js/adsbygoogle.js [...]

The problem here is that the "async" attribute has no values passed into it, for e.g "src" has a "=" sign with a value in it. All we need to do is pass a value to the attribute and Blogger will accept it.

<script async="async" src="//pagead2.googlesyndication.com/
pagead/js/adsbygoogle.js [...]

Notice the difference between the two snippets. We have set it async="async", that makes it comply with XML thus Blogger accepts it and saves the template without any error.

That's pretty much everything to it. Follow the steps given above and save the template, it must parse the code without any problems. If you are facing problems implementing ad-code other than this then don't hesitate to let us know in the comments (add a screenshot for better help)

How to Backup Your Blogger Theme / Template

A step-by-step guide on backing up a Blogger.com Theme / Template for the newest Blogger UI updates.

We have another guide on backing up the template in Blogger but since the roll-out of the newer UI and the changes in the design we are updating the steps with a new tutorial for relevant visual demos.

You can still check the old tutorial on backing up the template here though it is not relevant anymore : http://www.stramaxon.com/2012/03/backup-your-template-of-your-blogger.html

Why back-up a template / theme ?

In the Blogger environment we often want to add a new widget or a functionality in our blog and tutorials ask us to make changes to our templates, it is important we have a backed-up template so if anything goes wrong we can always fallback to the previous version.

There are more reason why -

1. Making changes to Blogger templates to add functionality or change design
2. When trying out new themes / template
3. Using the template / theme again on another blogger blog

Read below for steps on backing up a template / theme, note that we are going to use the terms "template" and "theme" interchangeably. 

Backing Up the Template / Theme on BlogSpot

Let's start with backing up the template.

1. Log-into your Blogger account to go to your Dashboard. 
2. From the blog's drop-down list choose the blog
   
   
3. On the left pane choose the "Theme" option
   
   
4. In the Theme section page, click on the "Backup / Restore" button on the top right corner of the page
   
   
5. A dialog box may appear, to download the template backup click on the orange "Download" button as shown below -
   
   
6. A file with a name similar to theme-2887119284088758674.xml will be downloaded. This file is the backup template / theme file, it can be used to recover your template / theme on Blogger. 

That's it, save the theme .xml file at a safe place where you can access it in the future in case you have a broken template. Make it a practice to take a backup of the template before making any changes to it. 

Restoring the Template / Theme Using the XML file

In the previous section you learn how to download a backup of your template. Restoring the template is simple as well, 

1. in the last section follow till Step #4
2. Now in the dialog box that opens, which looks like this click "Choose file" (maybe labelled differently on different browsers) -
   
   
3. Browse to the template's XML file and then click on "Upload" 
4. Once the upload finishes your template will be restored. 

That's it. Do let us know if you have any questions or suggestions regarding this tutorial. 

Set Mobile Browser Theme Color for Blogger Blogs

More people now loves reading on the go, be it a news article or a travel blog, almost everyone's first choice for reading blogs and browsing social media sites are smartphones. Same goes for your readers, many may love reading on their smartphones, and setting a theme color would make your Blogger blog stand out in the crowd.


The major browsers even on smartphones are very advanced and it provides a lot of options for websites to personalize how their website looks on a readers phone, they can control the icon they see in the browser as well as the color of the browser's address-bar in mobile Chrome, Opera and Firefox OS.

If you use Chrome you might have noticed that  upon visiting some websites the top bar of Chrome changes color and mostly according to theme of the website. It is not something that Chrome does magically, the website developers can set a specific color for Chrome to be themed with and that is very simple.

Bloggers on the Blogger.com platform has transitioned to a mobile-first approach, and it is a wise thing to do as the readers are more comfortable on mobile phones than on a laptop or a PC.

Setting Theme Color on your Blogger Blog

By default if you visit your blog on a mobile browser, here Chrome, you will see the default light grey color on the top bar, and that looks boring.

Doing this is very simple, it requires you to add a line of code in your template and that's it. The steps are mentioned below.

Note: It is recommended that you always take backup of your template before making any code customization. Click here to see how to take a backup of your Blogger template.

Before we proceed, copy this line of code -

<meta name="theme-color" content="#4285f4"/>

1. Now, go to your Blogger Dashboard and select your blog. 
2. Click on the "Template" option in the left panel
3. Once the section is loaded, you will see a button with "Edit HTML" label, click on it to open the template editor.
4. Inside the template editor hitCTRL+F  / ⌘ + F and search for <head>, it should be on the top already so you will find it easily
   
   
   
5. Now paste the code we copied before immediately on the next line of <head>



Once the code is at place it should look similar to the screenshot above. Now click on "Save template" on the screen and then load your blog in Chrome browser on your smartphone. You will now see that the top bar of Chrome has turned into another color other than the default light grey color.

Set your desired color

You may of course want to set a color of your choice, the one that would be set in the default code provided in the tutorial you will get a dark blue color.

To change the color that is set you have to make edit in the code that you use, this is the code -

<meta name="theme-color" content="#4285f4"/>

The yellow highlighted text #4285f4 (without the quotes) is the hex value of the color, in HTML colors also has hex values. If you aren't sure what is the hex value of the color you want, go to http://www.color-hex.com/ to choose the color and get your desired color's hex value. Then replace the yellow highlighted part with your own.

For example, if we want a certain shade of green, which has the hex value #215C03, we modify our code to this

<meta name="theme-color" content="#215C03"/>

That is simple. All you have to do is replace the hex value in the code with your desired color and place it in the template by following the steps in the previous section.

It's all. Impress your readers by doing what most Blogger blog owners don't think about.

Comment on the post if you like this, share it with your friends and family for them to make their blog look pretty as well. For any questions or suggestions feel free to comment.

Where to Find Blogger App for iOS

If you have been looking for the Blogger app on your iOS device then you are out of luck. Blogger took down its official iOS app and stopped supporting it and its been a pretty while.

There are many Blogger users who needs to update and post to their blog on a regular basis, from their smartphone and it is very inconvenient without an app to do that. And especially now that smartphone users are the majority, Blogger lags behind in providing an official app, which is not a great thing for such a popular Blogging platform.

Straightforward answer to the question is that, Blogger does not have any official app for smartphones. That's the sad and bitter truth, the good news is that there are tons of other apps on the app store available as well as other workaround to access Blogger on phones.

Use Blogger with Chrome

If you use Chrome you can access the full desktop version dashboard of your blogger account directly on your phone. The UI is the same as it is on desktop browsers thus there is nothing new to learn to get started. 

Download Google Chrome browser on your iOS device, go to this page to download Google Chrome on your device. Set it up, sign-in with your Google account and you are good to go. 

Simply access https://www.blogger.com in Chrome and you will see all your blogs in the dashboard, from there on you can add new post, edit them and change blog settings if you wish. It is basically the same as use on a desktop, only on a relatively smaller screen. You need to get used to pinch-zoom in and out, it takes a while but it is worth it.

Other third party app 

We do not guarantee the performance and usability of these apps. Check the reviews before you try them.

BlogGo for Blogger 






BlogTouch Pro (for Blogspot Blogger) 





Right now there aren't a lot of high quality apps for Blogger in the app store, but these are the best based on user reviews.



If you have any questions regarding Blogger or these apps, do let us know in the comments below.