How To Change Blog Design On Blogger
The default blogger theme and layout are pretty substandard and you would want to customize blogger layout and theme as per your needs.
In this detailed guide, I'll show you how you can make it happen!
Let's find out.
![customize-blogger-layout-and-theme](https://techgydbysm.com/wp-content/uploads/2021/05/customize-blogger-layout.jpg)
Blogger Admin Dashboard
Before we directly jump into changing the default layout and theme of Blogger, we have to understand every nook and corner of the blogger admin dashboard.
Let us first know about the items in menu list on the left one by one:
Posts
Posts: Here you'll find the collection of all those posts that you have Published on the blog, or left as a draft.
![new-blogger-admin-dashboard](https://techgydbysm.com/wp-content/uploads/2018/04/new-blogger-admin-dashboard.png)
The first drop-down menu you find on the left is there to choose between All, Scheduled, Published and Draft Posts.
![drop-down-posts-type](https://techgydbysm.com/wp-content/uploads/2018/04/drop-down-posts-type.png)
On the extreme right you can see the label icon. When you click on that icon, you can see a new pop-up where you can add a new label or filter the listed posts by selecting the desired labels checkbox.
![filter-by-label](https://techgydbysm.com/wp-content/uploads/2018/04/filter-by-label.png)
Just below that you can see the Select All checkbox. On clicking that, all the posts listed on your admin dashboard will get selected. Not only that, you can now perform batch operations like, Apply same label to selected posts, Publish all posts (which are in drafted condition), Revert all published posts to draft and Delete All posts.
![select-all-posts-checkbox](https://techgydbysm.com/wp-content/uploads/2018/04/select-all-posts-checkbox.png)
Finally when you reach the posts list, you can see all the posts in a horizontal slab format. When you hover your cursor over any individual post, the following details appear:
![individual-post-slabs](https://techgydbysm.com/wp-content/uploads/2018/04/individual-post-slabs.png)
Last, but not the least is the tiny circular "+" button. This is the New Post button that enables you to open up a post editor screen where you can type a fresh draft.
![new-post-icon](https://techgydbysm.com/wp-content/uploads/2018/04/new-post-icon.png)
Also Read: Ultimate Google AdSense Guide [2021 Update]
Stats
Stats: Like the name suggests, here you can find out statistical figures related to your blog.
![stats-window-blogger](https://techgydbysm.com/wp-content/uploads/2018/04/stats-window-blogger.png)
The topmost banner contains three figures related to your blog: Number of followers, Posts and Comments.
Immediately below you can see the number of pageviews your blog has received over different duration:
All time, Today, Yesterday, This month, Last Month.
I stopped working on this blog long back, it seems like the posts are still appearing on Google SERPs.
Below that there is a special banner that shows how your latest post has performed over time.
You can set the duration of stats from the drop-down menu above this banner. The time duration you can choose between is: Now, Last 24 hours, Last 7 days, Last 30 days, Last 3 months, Last 6 months, Last 12 months and All time.
![duration-of-performance](https://techgydbysm.com/wp-content/uploads/2018/04/duration-of-performance.png)
Below this, you can view the overall stats of the particular blog:
![blog-views](https://techgydbysm.com/wp-content/uploads/2018/04/blog-views.png)
For a detailed insight I recommend you check the link in the bottom right corner "MORE ABOUT THIS BLOG".
This will take you to a new page where you can check out the following stats about your blog:
Views
![blog-views](https://techgydbysm.com/wp-content/uploads/2018/04/blog-views.png)
Top referrers
![top-referrers-blog](https://techgydbysm.com/wp-content/uploads/2018/04/top-referrers-blog.png)
Top referring URLs
![top-referring-urls-blog](https://techgydbysm.com/wp-content/uploads/2018/04/top-referring-urls-blog.png)
Audience- Pageviews by Browsers
![audience-pageviews-by-browsers](https://techgydbysm.com/wp-content/uploads/2018/04/audience-pageviews-by-browsers.png)
Audience- Pageviews by Operating Systems
![audience-pageviews-by-operating-system](https://techgydbysm.com/wp-content/uploads/2018/04/audience-pageviews-by-operating-system.png)
Search Keywords
![blog-search-keywords](https://techgydbysm.com/wp-content/uploads/2018/04/blog-search-keywords.png)
Top Locations
![top-locations](https://techgydbysm.com/wp-content/uploads/2018/04/top-locations.jpg)
Posts
![posts-stats-screen](https://techgydbysm.com/wp-content/uploads/2018/04/posts-stats.png)
Pages
![pages-stats](https://techgydbysm.com/wp-content/uploads/2018/04/pages-stats.png)
Also Read: Affiliate Link Cloaking: 7 Honest Reasons + FREE Plugins
Comments: Here you'll find the collection of readers' responses on your articles. Both published as well as spam comments are available under two different submenus.
![individual-comment-slab-settings](https://techgydbysm.com/wp-content/uploads/2018/04/individual-comment-slab-settings.png)
This is almost similar to the UI of the posts window. But here are certain changes that we are gonna know about.
The extreme left of this comments window has a drop-down menu that lets you choose to view All, Awaiting moderation, Published or Spam comments.
![comment-drop-down-menu](https://techgydbysm.com/wp-content/uploads/2018/04/comment-drop-down-menu.jpg)
Just at the opposite corner you can find a checkbox that allows you to select all the comments on this page. That way you can do batch edit work like Mark all comments as spam, Delete contents of all comments and Delete all comments at once.
![batch-operation-comments](https://techgydbysm.com/wp-content/uploads/2018/04/batch-operation-comments.png)
Also Read: Add Favicon to WordPress Blog: 3 Awesome Methods
Earnings
Earnings: After your blog is qualified for Google Adsense earnings you'll see a page as the picture below.
This page has limited settings to position your ads on blogger blog. But this is not used much. It is better to use Google AdSense for this purpose.
![adsense-panel-blogspot](https://techgydbysm.com/wp-content/uploads/2018/05/adsense-panel-blogspot.jpg)
The page has information about the account that is linked to that blog and the client ID followed by it.
You can find a detailed report about your earnings from your blog by clicking the link "Visit AdSense for details of my earnings".
If you choose to switch your adsense account linked with a blog, then you can click on the "Switch AdSense account" link.
Also Read: Remove Subscribe to Posts from Blogger (2 Easy Ways)
Pages
Pages: This menu contains the collection of different pages be it published or drafted. Don't get confused between a page and a post.
The first drop-down menu you find on the left is there to choose between All, Published and Draft pages.
![pages-drop-down-menu](https://techgydbysm.com/wp-content/uploads/2018/04/pages-drop-down-menu.jpg)
Just on the opposite you can see the Select All checkbox. On clicking that, all the pages listed on your admin dashboard will get selected. Not only that, you can now perform batch operations like, Apply same label to selected posts, Publish all pages (which are in drafted condition), Revert all published pages to draft and Delete All pages.
![batch-select-pages](https://techgydbysm.com/wp-content/uploads/2018/04/batch-select-pages.jpg)
Finally when you reach the pages list, you can see all the pages in a horizontal slab format. When you hover your cursor over any individual page, the following details appear:
![individual-page-slabs](https://techgydbysm.com/wp-content/uploads/2018/04/individual-page-slabs.png)
Last, but not the least is the tiny circular "+" button. This is the New Page button that enables you to open up a page editor screen where you can type a fresh draft.
Also Read: Write an Impressive About Us Page [4 FREE Templates]
Layout
Layout: This page contains detailed architecture of your live blog theme. It appears in the form of individual blocks that has editable options. You can even Show/Hide any blocks from the layout just by editing them.
![blogger-layout-window](https://techgydbysm.com/wp-content/uploads/2018/04/blogger-layout-window.png)
Click on the Pencil icon on the right of any block that you want to customize. This will open a new window.
![layout-elements-edit-window](https://techgydbysm.com/wp-content/uploads/2018/04/layout-elements-edit-window.png)
Make whatever changes you want to make and then click Save.
Interestingly, you can drag and drop those blocks from one space to another.
Theme
Theme: This menu contains a list of all those themes that you saw while creating the blog. The top part of the screen shows a preview of the theme that is live on your blog.
![blogger-theme-window](https://techgydbysm.com/wp-content/uploads/2018/04/blogger-theme-window.png)
The customize button lets you make theme specific changes that we shall learn in detail in the later part of this post.
One can easily customize the theme using Customize or Edit HTML option.
Settings
Settings: This contains several options to change your blog's behaviour, but this I will save for another article else this article's subject will be long lost.
Also Read: Enable Advanced Blogger SEO Settings
How to Customize Blogger Layout and ?
Finally we are well acquainted with the different components of the blogger admin dashboard. It is time that we know how to customize blogger layout and theme.
Customizing Blogger Layout
Before we dive into this section, I got to tell you something more. Remember, I am using the Contempo Light theme. This is available in the default theme library of blogger.
In case you are using any other theme, all the contents that you are about to read below may not match ditto.
And if you are using any custom theme, then they are completely different in layout backend window.
However, you can find a narrow similarity in all of them. WIthout further ado, let's get started.
How to add a gadget to our blogger layout?
Few sections in the blog layout window allows you to add a gadget to your blogger. Like the one section Sidebar (top) as in the image below, you can see there is a link followed by the + icon.
Click on Add a Gadget and you can choose which gadget you want to add.
![add-a-gadget-window](https://techgydbysm.com/wp-content/uploads/2018/04/add-a-gadget-window-1024x527.png)
Those widgets which are already added will be labeled as Already added.
Now, choose the gadget that you want to add, but be double sure that you are not adding irrelevant widgets anywhere.
The gadgets that are available on blogger are: AdSense, Featured post, Blog Search, HTML/Javascript, Profile, Blog Archive, Page Header, Followers, Image, Labels, Pages, Link list, Text, Popular posts, Blog Stats,
Blog list, Follow by email, Feed, Logo, Subscription Links, Translate, List, Contact form, Wikipedia, Attribution and Report Abuse.
AdSense | Earn revenue by displaying relevant ads on your blog. |
Featured post | Highlight a special post on your blog. |
Blog Search | Let visitors search your blog. |
HTML/Javascript | Add third-party functionality or other code to your blog. |
Profile | Display information about yourself to your visitors. |
Blog Archive | Make it easy for visitors to navigate your blog with links to older posts. |
Page Header | Display your blog's title and description. |
Followers | Displays a list of users who follow your blog |
Image | Add an image from your computer, or from somewhere else on the web. |
Labels | Show all the labels of posts in your blog. |
Pages | Display a list of stand-alone pages on your blog. |
Link list | Display a collection of your favourite sites, blogs or web pages for your visitors. |
Text | Add a text message to your blog. |
Popular posts | Display a list of the most popular posts from your blog. |
Blog Stats | Display the number of page views to your blog. |
Blog list | Show off what you read with a blogroll of your favourite blogs. |
Follow by email | Make it easy for visitors to subscribe to email delivery when you publish a post. |
Feed | Add content from an RSS or Atom feed to your blog. |
Logo | Show your Blogger pride by adding a logo to your page. |
Subscription Links | Let your readers easily subscribe to your blog with popular feed readers |
Translate | Let visitors translate your blog into different languages. |
List | Add a list of your favourite books, films or anything you like. |
Contact form | Add a contact form to your blog. |
Wikipedia | With this gadget you can quickly, conveniently and easily search on Wikipedia for articles or full text. |
Attribution | Display your blog's attribution data. |
Report Abuse | Report inappropriate content. |
Total 26 of them.
I hope that much detail is enough for you. The remaining I will leave for you to explore.
Let us now head over to blogger theme customization.
Customize Blogger Theme
This page has a preview window of the current theme that is running on your blog. Alongside that preview window, we have Theme name, Orange CUSTOMIZE button and a three-dot menu.
![blogger-theme-window](https://techgydbysm.com/wp-content/uploads/2018/04/blogger-theme-window.png)
The three-dot menu when clicked pops up a menu with four options as under:
![blogger-theme-three-dot-menu](https://techgydbysm.com/wp-content/uploads/2018/04/blogger-theme-three-dot-menu-e1590671112563.png)
There you can choose to either Backup your existing theme, or Restore an old theme by uploading an XML file. The next option is not much in use based on the modern day HTML5 blog design.
The last option, i.e, Edit HTML is solely for geek coders and is not advised to proceed until you have the latest backup of your blogger theme.
But what is the work of CUSTOMIZE button here?
When you click the Customize button, you will be taken to a new page that is the hub for front end designing of your blog.
![customize-theme-window](https://techgydbysm.com/wp-content/uploads/2018/04/customize-theme-window-e1590671161991.png)
Here you can change background image:
![change-background-image-blogger](https://techgydbysm.com/wp-content/uploads/2018/04/change-background-image-blogger-e1590671002715.png)
Font colour, style and size:
![change-blogger-theme-fonts-colors](https://techgydbysm.com/wp-content/uploads/2018/04/change-blogger-theme-fonts-colors-e1590671307715.png)
Add custom CSS and even choose which gadgets you want show of hide:
![change-gadget-visibility](https://techgydbysm.com/wp-content/uploads/2018/04/change-gadget-visibility-e1590671282102.png)
I would leave the exploration part to you as it is worth visiting.
In the end this is what my blogger is looking like.
![new-blogger-blog](https://techgydbysm.com/wp-content/uploads/2018/04/new-blogger-blog-e1590671053151.png)
Also Read: Google AdSense Heatmap: Increase AdSense Earnings In 2021
Over to you
I am hopeful that after reaching down here you are well acquainted with how to customize blogger layout and theme. Let me know in the comments below about your blog address. I'll myself check that out.
Visit Blogging Guide to learn Blogging all the way from basics to grow into a pro.
If you have read the entire article and want more information regarding the topic, come hang out with me on my private community.
How To Change Blog Design On Blogger
Source: https://techgydbysm.com/customize-blogger-layout-and-theme/
Posted by: crewsmistne.blogspot.com
0 Response to "How To Change Blog Design On Blogger"
Post a Comment