Powered by Blogger.

Responsive Ad Slot

Fiksioner Free Blogger Theme Download

Theme Layout

Theme Translation

Trending Posts Display

Home Layout Display

Posts Title Display


We Are Sorry, Page Not Found

Home Page
Today's article will give you different types of pleasure for blogger blog usage. Because in this article I'll show you how to change the color of your blogger dashboard layout design for your template. Although such changes will not improve the front-end of your blog. But somehow, it will help you to increase concentrate on your lifelong blogging career. Here, you can know that the color change of the blogger dashboard layout design will not slow your blog.

Let's see how we can change the color of the blogger dashboard layout design with care.

Some Caution

It is important to take some precautions at the beginning of such a change. So, what to do to be careful -
1. At first back up your Blogger template.
2. Copy all the code between <b:template-skin> from ]]></ b:template-skin> so that you can paste there again if you make any mistakes.
3. When adding color codes, do not change any single letter in the template's code, not even a (,) coma.

Change The Color of Blogger Layout Section

STEP 01:
Open two separate browser tabs from Blogger Dashboard for work together -
(1) Blogger Dashboard > Layout
(2) Blogger Dashboard > Theme > Edit Html

STEP 02:
Then notice the layout page, each layout section has different names. It can be a div tag or it can be a specific name. That's why you need to confirm the correct div tag.

STEP 03:
To find the correct div tag, you've to go Blogger Dashboard Theme Edit Html and press Ctrl + F after a single click inside template code area.

STEP 04:
Next, type the layout section name in the new search box between the code box and search for it.

Suppose we are searching the div tag for footer-1, which we got from the name of a section of blogger layout. For the footer-1, the div tagline will be like this <div id='footer-1'>  or <div id='footer-wrap'> (or similar)
In this case, footer or footer-wrap is your div tag.

STEP 05:
Now find that div tag  between <b: template-skin> from ]]></b: template-skin> code area. Now if you found that div tag code for footer-1, then the code will be such  (or similar).

body#layout #footer-1 { background-color: RGB (204, 51, 153); border-color: none !important;}
body#layout #footer-1 .draggable-widget .widget-wrap2 { background-color: #E6FEBF;}

Here you have to change the (background-color:#E6FEBF;) background-color only. Here, #E6FEBF is the color code or sometimes which can be RGB (204, 51, 153) in such a way.

That means that you will simply replace the color code in the Yellow marked portion. You can copy such colors code by pressing Ctrl + C from these pages ( w3schools or from Color Code Generator).

STEP 06:
In this way, change all the colors you like and save the template.

Change The Color For New Layout Section

Now, when you add a new layout section, that section will show the default color. In this case, you need to add background-color to that new layout section.

body#layout #yourdivId { background-color: RGB (204, 51, 153); border-color: none !important;}
body#layout #yourdivId .draggable-widget .widget-wrap2 { background-color: #E6FEBF;}

Here, replace your yourdivId and color code in the yellow section below as before, and add this code just above ]]></ b: template-skin>

Then click on Save Template and notice the design change of new layout section.

Change Full Blogger Layout Background Color

Here we will change the full background-color of the Blogger Dashboard Layout. For such a change, add the following code just above </b:template-skin>

body#layout {background-color: #4d4d4d!important;}

Change Every Section Name In Blogger Layout

By changing the name of your favorite section, you can bring one more type of change to the Blogger Dashboard Layout Design. For this, find out each section line of code, search <b:section by typing this code inside of your blogger template code from Blogger Dashboard Theme Edit Html

To do this, search for the following line of code (or similar): 

<b:section class='sidebar' id='sidebar'  maxwidgets='5' preferred='yes'>

After getting the section line of code, you have to attach this code (name = 'Your New Section Name' ). In this case, after the new code, the section line must look like this.

<b:section class='sidebar' id='sidebar'  name='Your New Section Name'  maxwidgets='5' preferred='yes'>

In other words, the red part mentioned above will be added. Here you can change this part 'Your New Section Name' which must be present in the ( ' ) on both sides.

At The End

Here's the end of the blogger dashboard layout design. If you want to know more about this, write down in the comment box below, I will try to answer. Happy Blogging!
Leave A Reply
  1. Your blog is very valuable which you have shared here about Graphic design services toronto canada. I appreciate your efforts which you have put into this article and also it is a gainful article for us. Thank you for sharing this article here


Are you the kind of entrepreneur who takes action?

Subscribe Our Newsletter