This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. By using this website you also agree to our FTC Disclosure, Privacy Policies, Copyright Notice, and other Terms and Conditions"

Proudly Powered By Blogger
Completely Unique Theme Development
Designed with by ™ SHIBLI N.

Think Globally, But Act Locally

WorkStation247 | Creative Resources

StartUp Digital Entrepreneur's Creative Converting Resources

13 July 2016

How To Change The Blogger Dashboard Layout Design

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!
How To Change The Blogger Dashboard Layout Design
4/ 5 stars - "How To Change The Blogger Dashboard Layout Design" Today's article will give you different types of pleasure for blogger blog usage. Because in this article I'll show you how to cha...

No comments:

Post a Comment

Recent Comments

Theme Design Secrets

" No matter how many times you made mistakes
or how slow you progressed
you are still way ahead of everyone
who are not trying"

Blogger Theme Design Secrets
Learn Form The Basic
[ ] hover over to see secrets

Soon to be revealedy

In progress 'Wait for it...' ;)

About Services

Video Editing, Graphic Design, Custom Template Design, service is currently not available due to excessive demand. We expect to accept new orders from March 1st, 2019.
Exclusively on Fiverr
Thank you for your understanding.

And this is what i do

$('.comment-content a[rel$=nofollow]').replaceWith(function(){return ($(this).text());});