Welcome! At Blogspot Blogger Guide we show you the easy way to customize your Blogger Blog and offer tips, tricks and fixes to take the technical headache out of blogging.

Showing posts with label Blogspot Tutorial for Beginners. Show all posts
Showing posts with label Blogspot Tutorial for Beginners. Show all posts

Tuesday, April 5, 2022

Change Blog Post and Sidebar Width of a Blogger Theme

In today's Blogger tutorial I discuss how to change column width of both the sidebar and the blog post area of a Blogger Theme to either increase or decrease the size of the template displayed on the screen. I show you two methods of adjusting the width of the template: firstly through the Blogger Template Designer and secondly by making a small change to the template itself. These modifications are easy to achieve, only take a few minutes and will help you achieve the look you are after on your Blogspot Blog.
How to Change the Column Width of a Blogger Theme and Sidebar - Two Methods - Adjust width in Blogger Theme Designer or Edit Template and manually change the code

Older Default Blogger Themes

By default older Blogger templates eg Simple Blogger Theme were not full width but there was always the facility to increase or decrease the width of the columns of template according to user requirements. In the past it was recommended to keep the width of a Blogger blog under 1000px to ensure that visitors viewing on smaller screens did not have to keep scrolling to see the whole blog. Those days are gone now with responsive templates and the use of small devices like tablets and smartphones so it is fine to increase the entire width of your blog to 100% if you wish to.
The Column Width of older style Blogspot themes like Simple Template can be adjusted in the Blogger Theme Designer

Third Party Blogger Themes

If you are using a third party theme you may not be able to use the Blogger theme designer to adjust widths depending on how it was coded. You will still be able to use Method 2 as discussed below to make adjustments to the column width of the entire blog and / or the sidebar.

Newer Responsive Blogger Themes (Contempo, Soho, Emporio)

Newer responsive Blogger templates eg Notable Blogger template are already set at 100% width minus the sidebar so there is generally no need for tweaking the width.


How to Adjust the Column Width of Blogger Blogs


There are two basic ways to adjust the width of a Blogger template / Blogger Theme:

  1. Adjusting the width in Theme Designer of Blogger (or if this is not available)

  2. Changing the code within the Blogger template to the desired width



Method 1: Steps to Change the Width of a Blogger Template in the Theme Designer

  1. Login to Blogger

  2. At the Dashboard choose Theme

  3. Click on the orange Customize button which will take you to the Blogger Theme Designer

  4. On the left-hand menu click Adjust Widths

  5. How to Change the Column Width of a Blogger Theme and Sidebar in the Blogger Theme Designer Using the Slider to Set Desired Width in px

  6. Adjust the width using the slider to increase or decrease the width of the entire blog. Any changes you make can be viewed in the large window on the right-hand side.
    For example: To make your blog full width push the slider all the way across to 1500px.

  7. You can also change the width of the sidebar. By sliding the bar to the right you can increase the column size of the sidebar dimensions to a maximum width of 500px.

  8. Click on the Save button in the bottom right-hand corner of your screen.


Method 2: Steps to Change the Width of a Blogger Template in Blogger Edit HTML


If you are not able to edit the width of your Blogger template in Theme Designer then you will need to adjust the widths manually in the template itself.
  1. Login to Blogger

  2. At the Dashboard choose Theme

  3. Click on the down facing arrow next to the orange Customize button

  4. Choose Backup to make copy of your existing template in case you need to reinstae it

  5. Now choose Edit HTML

  6. Click anywhere inside the template and then CTRL + F (Command + F on a Mac) to bring up the search function

  7. Enter the following search term into the search window and press enter:

    b:template-skin

  8. Look for the following code:

    <b:template-skin>
    <b:variable default='960px' name='content.width' type='length' value='960px'/>
    <b:variable default='0' name='main.column.left.width' type='length'/>
    <b:variable default='310px' name='main.column.right.width' type='length'/>


  9. Change the value of the content width of the template to whatever width you would like eg for an entire blog width of 1200px the code would look as follows:

    <b:template-skin>
    <b:variable default='960px' name='content.width' type='length' value='1200px'/>
    <b:variable default='0' name='main.column.left.width' type='length'/>
    <b:variable default='310px' name='main.column.right.width' type='length'/>


  10. To change the sidebar width (assuming you have a right sidebar) change the main.column.right.width to a new width by changing its value or adding a value if not already there as in this example. eg For a sidebar of 500px the code would look like this:

    <b:template-skin>
    <b:variable default='960px' name='content.width' type='length' value='960px'/>
    <b:variable default='0' name='main.column.left.width' type='length'/>
    <b:variable default='310px' name='main.column.right.width' type='length' value='500px'/>


  11. Click on the Save icon in the top right-hand corner to save your changes.

  12. From the Dashboard click on View Blog to see your Blogger template with the widths you have input.

In this Blogger tutorial you have learned how to change the column width size of your Blogger template to increase or decrease the width of the entire blog and the sidebar. Changes to the width of the columns is best achieved by using the Blogger Template Designer but if this not available for some reason I have also shown you how to adjust the width manually by making small changes to the HTML of your Blogger template.


Related Articles

Easy Way to Put Banners on a Blogger Blog
Add a Widget or Gadget Above a Blog Post in Blogger
How to Delete a Blogspot Blog from Blogger - Step-by-Step Guide to Remove a Blog
How to Add a Welcome Message to the Blogger Homepage
How to Add a Blog Description to the Blogger Header of a Blogspot Blog



Thursday, March 24, 2022

How to Backdate a Blogger Post or Publish Article on a Retrospective Date

In today's Blogger tutorial I show you how to backdate a Blogger post to a date in the past. This handy Blogger feature allows content creators on the Blogger platform to customize blog posts by setting a user defined publication date for a blog post that is retrospective. Backdating a post is possible for any blog post you are about to publish or for an existing post where you want to change the publication date to an earlier date.
How to Backdate a Blogger Post or Publish an Article to a Retrospective Date

If you are looking for a Blogger Tutorial on how to set a future date you could check out my companion article on how to schedule Blogger Posts for a Specific Date in the Future.

Reasons to Backdate a Published Article or a New Post

It is not difficult to change the date of a blog post to a past date but this feature does need to be used with care. There are times when it can be useful to be able to backdate Blogger posts for example to fill a gap or to fit into a particular blog post timeline if your blog is date sensitve. You might change the dates of a blog post if you are intending to publish your blog as a book and want to tidy up the post dates for reasons of continuity.
How to Change the date of a Blogger Post to a retrospective date. Useful to keep blog post content in chronological order or to reorder the timeline of the date blog post are published
Change Date of Blog Posts to Past Date if You Need to Reorder the Timeline

Older Posts Can Be Seen as Less Relevant by Search Engines

Do keep in mind that older posts can potentially get penalized by the Google algorithm as they are viewed as less relevant.This is only an issue up to a point though as search engines are still able to recognize the actual date a post was published despite its timestamping. As a rule of thumb it is best not to overdo the backdating of blog articles unless you have a very specifc reason to do so.


Changing the Date of a Blogger Post Has No Affect on the Permalink

Changing the publication date of an blog article does not affect the permalink which is the URL (blog post address) assigned on publishing a blog post. Do not change the permalink without good reason as any backlinks to that article will be lost and search engines like Google will eventually remove the blog post from the search index. A redirect to handle deleted blog posts or changed permalinks can be set up but this is a subject for a more advanced Blogger tutorial that I will be writing about in the future.


Blogger Posts can be changed to a retrospective date without penalty even if they are already published
Blogger Posts Can Be Backdated to a Date and Time of Your Choice



Steps to Back Date an Existing Blog Post or to Publish an Article on an Earlier Date

  1. (a) Navigate to New Post and Create a Blogger post or
    (b) Open a draft post or
    (c) Open an already published post

  2. In the Blogger Post editor click on Published which is in the menu on the right-hand side of the compose box

  3. From the two radio buttons: Automatic and Set Time and Date click Set Time and Date and use the calendar that opens to set a date before the current date for your Blogger post

  4. (a) Click on Save and Update for an already published article or
    (b) Save from the Preview Drop Down Menu and then Publish to publish a new blog post

  5. Click on Posts to then view your post in a list of articles. It will now be timestamped for the date you selected.

  6. If you now click on the View button (the eye icon) to view the article you will see that the publication date of the blog post has changed to the date you selected. The date in the permalink which appears in the browser search window remains the same.


#blogspottutorial #bloggertutorial #changedate #blogposts

Summary

In this Blogger Tutorial I have shown you how to backdate a Blogger post and discussed reasons why you might choose to set a date for a Blogger post that is retrospective. There are advantages in selecting a user defined date especially if you are needing to reorder the timeline of your blog posts in Blogger for some reason. As a general rule it is best to keep blog articles current otherwise their relevancy in terms of the Google search engine algorithm can be affected.



Related Links

Easy Ways to Put Banners on Blogger
How to Put a Twitter Follow Icon Next to Blog Post Title in Blogger
How to Add a Facebook Share Button to Blogger
How to Unlock or Delete Locked Widgets in Blogger
How to Add a Sticky Welcome Message Above Posts in Blogger
How to Add a Welcome Message to the Blogger Homepage
How to Schedule a Blog Post to a Future Date in Blogger
How to Change the Date of Blog Posts in Blogger


Sunday, March 13, 2022

How to Change Image Size in Blogger Posts

In this Blogger Tutorial I show you how to change image size in Blogger posts depending on how you would like the image to look. Resizing images to fit in with the look and feel of your blog will enhance the overall look of your blog and so it is worth changing images to the optimal size. This tutorial is suitable for all Blogspot bloggers wanting to learn more about image size for Blogger posts but is written with beginners in mind.

Level of Difficulty: Easy

Suitable for: Beginners


How to Change Image Size in Blogger Posts - Blogger Tutorial Showing the Easy Way to Modify Images in Blogspot in 2022

How to Change Image Size Blogger

Blogger displays uploaded images using 5 different pre-set image sizes:
  • small - 200 px
  • medium - 320 px
  • large - 400 px
  • extra large - 640 px
  • original size - actual dimensions of the image (should not be wider than the width of your blog post area)

By default images are uploaded as medium size which means they are displayed at a width of 320px. You can make the image larger or smaller depending on the look of your blog and its theme. To set your own custom dimensions instead check out: How to Set Custom Image Dimensions in Blogger

How to Resize Images in Blogger Posts by Changing the Image Size to Default Image Sizes to Make the larger or smaller


I suggest that early on you settle on an image size you like and then consistently use the same image size to keep all images a uniform size across your blog posts. Also try to resize your images before you upload them so that you are not using large files that may slow down loading times of your blog. For more information on resizing images check out 8 Tips for Uploading Images to Blogger.

  • Decide on a default image size for all your post images and use the same size.

  • Resize large images prior to upload to speed up page loading time


Change Image Size in Blogger use the same image size in your Blogger posts for consistency and success rather than using lots of different sizes


Steps to Resize an Image in a Blogger Post

  1. Login in to your Blogger blog

  2. From the Dashboard select Posts from the left-hand menu to modify an image in an existing post
    or
    Select the New Post button to create a new post with images.

  3. Check you are in the Compose View (click the down arrow of the first icon of the tools menu.

  4. Find the image you want to resize.

  5. Click on the image once to highlight the picture.

  6. Steps to Change Image Sizes in Blogger Posts in the Compose View - Select the Wheel icon and select the size by clicking on the radio button

  7. Click on the gear icon (little wheel) that appears in the menu bar below the image

  8. Select the size of the image that best suits the look of your particular blog (Note: do not make your image larger than the width of your posts (an extra large setting displays at 640 width).

  9. How to Increase or Decrease Image Sizes in Blogger Posts using the Compose View

  10. Click Preview to check the look of your image as it will appear in your blog post

  11. Make an changes to the image size if necessary by clicking on the gear icon again

  12. If satisfied with the size of the image go ahead and save by either clicking save under Preview if creating a new post or if you are ready for your blog post to go live click Publish

  13. Click on the eye preview icon in the listing of your blog posts to see your image resized in your live blog post.


In this article you have learned how to change image size in Blogger. Image sizes can be changed to any of the default sizes in the Compose View in Blogger: small, medium, large, extra large and original size. It is helpful for the overall look of your blog to ensure that Blogger Post images sizes are the same size across your blog.

If you want to learn how to override the default image settings in Blogger then check out my other post which teaches you how to set your own custom image dimensions.



Related Articles

How to Add a Welcome Message to a Blogger Homepage
How to Change the Color of the Blogger Navbar
How to Choose a Great Topic for a Blogger Blog in 2020
How to Resize Images in Blogger to User Defined Dimensions
How to Schedule Blog Posts for a Specific Future Date in Blogger

Thursday, February 12, 2009

How to Set up Blogger and Configure All Settings for a New Blogspot Blog in 2022

Before you launch into publishing the first post of your new Blogspot blog at Blogger.com it pays to properly set up and configure your free blog. There are a number of key settings that need correct set up to improve functionality and to avoid problems down the track. This Blogger tutorial shows you how to set up a new blog step-by-step and covers all the main settings you will need to consider to customize the set up of your blog.
How to Set up Blogger and Configure All Settings for a New Free Blogspot Blog in 2022

For bloggers hoping to attract visitors and perhaps make money from advertising and affiliate links it is a good idea to ensure that you have configured your blog correctly particularly the way blog posts are displayed and comments are handled.
How to Set up a New Free Blog at Blogger to make money

If you have not yet got a blog at Blogger.com please see my Blogger tutorial about how to start a Blogspot Blog: Get a Free Blogspot Blog at Blogger.com. If you are still considering your blog topic and niche you will find plenty of tips on how to choose a good topic for your blog.


How to Configure Basic Settings in Blogger

Prior to writing your first post configure Blogger by clicking on Settings in the menu on the left-hand side of the Dashboard.

Set or Change the Blog Language of Your Blogger Blog

In English speaking countries the language of your blog will automatically be set to US English. For bloggers from other English speaking countries outside the US you may prefer to change the language settings to UK English.
How to Set up Blogger - How to Change or Set the Blog Language. Non US may want to change the language to UK English

If you would like to change the language you can do so under the Settings > Blog Language option. From there it is just a question of checking the radio button according to the language you want to choose and then clicking save.

Add a Blog Description

Enter a short tagline, phrase or short sentence as your Blog Description in the page header of your blog. As you are limited to 500 characters your blog description needs to be concise. Make sure it describes the purpose of your site and gives some indication of what kind of content a visitor might expect. The blog description will appear on your blog just under the blog name in the header section. It can be changed at a later date if needed.

For tips on adding a blog description to a Blogspot Blog check out my earlier Blogger tutorial.

Make Your Blog Visible to Search Engines

If you are wishing to keep your blog completely private of for just friends and family rather than the whole world ensure that the visible to search engines setting slider under Privacy in the Settings menu is set to the off position.

If you want search engines like Google to index your blog for the purposes of attracting visitors the visibility to search engines setting will need to be on otherwise your blog will not get much in the way of traffic. To check the visible to search engines setting ensure the slider is green (the on position) in Settings under the Privacy heading.

You will need some patience initially as it does take search engines like Google time to crawl your site and index your blog posts. To improve your chances of your blog being indexed thorough I suggest you consider adding a sitemap at some point. To learn more take a look at my Blogger tutorial on how to add a simple atom sitemap to the Google Search Console.

Check HTTPS Redirect is Turned On to Secure your Blog.

By default this setting should be turned on but it is worth checking the slider is in the green on position. Older blogs and those using third party templates may find the HTTPS setting is turned off. The advantage of having this setting turned on is that all blog posts and pages are delivered encrypted regardless of whether the blog address is http or https.

Set Permissions for Reader Access of Your Blogger Blog


Under Reader Access in the Permissions Setting set the privacy setting to your preferred setting.
  • Custom Readers if you want to keep your blog private with only selected readers.
  • Private to Authors: If you want to invite other blog authors and have them read posts then set the permission to private with other blog authors.
  • Public: If you want your blog to have the widest readership then set the permission to public which means anyone and everyone can read it.


How to Configure Blog Posts in Blogger


Maximum Number of Blog Posts Setting

Under the Posts heading set the number of posts to show on the main page. By default the number of blog posts is set to 7 but you can have more or less than this number. To change the maximum number of posts click on the number of posts and then using the up and down arrows select the number of posts to display.
How to Set up Blogger and Configure All Settings - Set Maximum Number of Blog Posts from 5-10 to display on the home page in most cases

I would advise against showing too many posts on the home page as it may lengthen loading times which is a big factor in visitor retention. One way to get around this issue so you can display more posts is by using jump breaks so visitors are only shown a shortened version of the post on the main page and the full post when they click on read more. You may need to experiment with this feature before you find the best balance for your blog.

Archiving


In the past it was possible to set the frequency of the archiving of your blog to other than monthly. This feature is turned off currently.
Configure your Blogger Blog settings from the Settings Menu interface circa 2009

Configuring Commenting on Your Blogger Blog


Who Can Comment

In the Comments section under Settings you can control who is allowed to comment on your blog.You can set three different options to handle comments:
  • Anyone (including anonymous)
  • Users with Google Accounts
  • Only members of this blog
Unless you have a private blog then in most cases who can comment is likely to be set to anyone. You may find spam commenting becomes an issue so I suggest that you set up moderate comments at the same time so that you can filter genuine comments from the spam ones.


Comment Moderation

In the Comments Moderation section it is possible to control comments before they go live. In the past spam has been quite a problem with Blogger blogs and remains so today depending on the niche topic and the popularity of your blog. I would suggest you apply some comment moderation and your best bet is to set it to always to comletely filter out spam.

There are three different levels of Comment Moderation that can be applied to a Blogger blog:
  • Always
  • Sometimes
  • Never

How to Set up Blogger and Configure All Settings for a New Blogspot Blog - Set Comment Moderation to Always if blog is public

Email Notification of Comments It may worth setting up email notification of new comments if you set comment moderation to always otherwise you may forget to check the comments section periodically. You can add your email address under the Settings >> Comments >> Email moderation requests to: section.

Reader Comment Captcha
It is possible to control spam from spam bots to some degree with captcha. I suggest you make sure that the green slider is set to on prevent unwelcome messages especially from spambots.


Comment Moderation

How to Set Up Time Zone Format and Date Header in Blogger


Set Up Time Zone

The Time Zone is set to (GMT-07:00) Pacific Time – Los Angeles by default so you will need to set up the Time Zone depending on your geographical location. To select the Time Zone click on the Time Zone heading and then select the correct Time Zone by clicking on the radio button next to the appropriate Time Zone and then selecting save.

Set Up Date Format

Blogger offers multiple options for displaying the date. To make changes click on the Date Header Format heading and then choosing your desired format by selecting the radio button from the dropdown menu. You will need to save changes for the different date format to take effect. To see the change in effect, preview a blog post or click on View Blog.

Set Up Timestamp Format

There are 11 different Timestamp options provided by Blogger which allow you to customize how the time will appear on a post. You can change the Timestamp to suit your preferences by navigating to Settings >> Timestamp Format. Select the option from the the options that appear in the popup window and click save to apply the changes.

Set Up Comment Timestamp Format

You can also customize the appearance of the timestamp on comments. Set up is the same as for setting up the timestamp.

Configure Other Settings in Blogger


Declare Adult Content

Make sure that adult content is set to no unless your blog does have adult content of course.

Google Analytics ID

If you have a Google Analytics ID already enter it in the space provided to track blog performance.  If you have just started your blog make a point of coming later once you have your Google Analytics ID and entering it here.

Congfigure Site Feed

Post Feed
There are 5 options for the Post Feed: full, until jump break, short, custom and none.

For a new blog not using a feed service your feed in most cases should be set to short or to jump break. If you are not sure you can leave it at full for now and come back to it later.

Often a full feed is used where blogs posts are being desseminated by a RSS service eg Feedburner. These days social media platforms do much of that job so there is a debate about whether RSS feeds are still worth it especially as there is a higher risk of content theft and readers are not visiting your blog to read your content. Conversely blog feeds are needed for some functionality to work eg the recent posts gadget works off the feed.

Post Feed Footer
In the Post Feed Footer enter a copyright notice about your material which will appear in the bottom of your feed after every post. This will act as a deterrent to content lifting and blog scraping.


Configure Your Blogger User Profile

If you want your readers to know a bit about you consider configuring your user profile with information about yourself. Do you want your readers to be able to email you for example? You can enter as much or as little information as you like.

To make changes to your user profile scroll right to the bottom of Settings and click on the user profile link. Check the options if you want to share your profile and email address. You can also select what name gets displayed on your blog posts on your user profile page. You can add a photo, your geographical location and any other information you might wish to.

Congratulations! With these settings in place it's time to go ahead and make your first post.

While any of the settings discussed in this Blogger tutorial are able to be altered at any time it is a good idea to put them in place prior to writing a first post so that you don't forget to set something important once the business of writing blog posts takes over. This Blogger tutorial provides instructions on how to configure and set some of the basic settings and features for Blogspot blogs at Blogger.com.



Related Articles

How to Get a Free Blog on Google Blogger
How to Choose a Great Blog Topic for a Blogger Blog - 7 Tips for Beginner Bloggers