Breaking News

Responsive Ad

Blogger Website appearance solution Using Chrome Web Developer Tool.


Whenever you create a website on a blogger, what kind of problems do you face and what is the solution to it, I will tell you in this post.


  1. First appearance

  1. second performance



As we said we are going to use Chrome DevTools here. If you do not have a Chrome browser, download it.

In Blogger, Google gives you a feature in which you can customize your theme. And we can improve the appearance of our website by using
  • Blogger customized features like edit HTML and override CSS
  • Chrome developer tools.
First of all, you should back up your theme,
Go to theme>three dots>backup
In case of any disturbance, we will be able to restore the theme back.

You can do many types of experiments with the help of developer tools, Don't panic on the website, this will not spoil your website in reality.
Because when you reload your page, it will return to its previous state.
We are using developer tools so that we can know the selector or data-message attribute of a particular text or area Which we have to change.



Let's start you log in to your blogger account in your chrome browser.
Click on Customize option within Theme option
If you have used Google themes in your website, then all kinds of options will be open for you, but if your theme is a third party theme then most of the options will be not available for you Because Google has not created the code of your theme.

But there is an option which is available for all types of themes.

Advance Override CSS



It will change only color, layout and font of any area & text,
open a new tab in the Chrome browser and load your website.
And right-click on the text or area on your website that you want to change the appearance.

Right-click > inspect

If your website is not being clicked right then you can open it from within the settings of the chrome browser.

Settings>more tools>Developer tool
Or using a shortcut Ctrl+shift+I

And it will show you the all of the coding done on your website.
The inspected element is highlighted blue in the DOM Tree
CSS classes being applied to the selected element are displayed in the Styles tab.
In the DOM Tree, find the value of the data-message attribute element.
Don't panic
Developer tools are only used for realtime experimentation on the website.
It's don't edit your code unless you change from the blogger website.

Example1:- 

As you can see in the image in this.
I want the "breaking news" in my website to be white from black color,
so I have to right-click on that text and inspect its code.




If you move cursor then you can still select a particular area. Of a website

In the left section of the browser, you can see that the text on your website is currently selected. When you hover the cursor on its code in the right section.
if you want to change color only then click it's on value and change them like this:-






Then we see a selector name above that text on your website.

Go back to the Blogger tab and write
that selector in the override CSS box,
with
element.style{ } which is parent of h3.title{ } see image clearly,

And write the name of the property you want to change.
And assign it a value
Like this
element.style{ } selector{property:value}; ( Universal code )
element.style{ } is parent code,
h3.title{ } is selector,

write and apply it on blogger advance Add CSS:-

element.style{ } h3.title{color:white}; ( Apply this code into add CSS )
or
element.style{ } h3.title{color:#ffffff}; with hex code




Apply to Blog and Done.

Example2:-

I want the size of my post image to be cover better enough to look beautiful
so I have to right-click on that post image and inspect its code.




but I want all of my image posts to cover the maximum area let's.
Remember: inspected element is highlighted blue in the DOM Tree
In Dom tree means source code, if you can hover over codes one by one, then you will be able to see on which code your post image has been highlighted blue.

Now click on that code.CSS property will appear on the right panel of Devtool. If you hover over of any selector in the CSS property.

selectors such as .index-post




So all the posts related to that element will be highlighted in blue.
That means you hover over the right selector if only post images highlighted in Blue.

Now we can change its CSS property easily.
now, we have to increase the size of the images, so we will reduce its padding size

Padding is the distance between our border and the content.
Now we try to reduce padding and see when our image looks better.
Double click on the value of the padding and change its value from 15 pixels to 3 pixels.
And images looks absolutely clear and better on our website.



Now after this experiment, we will write the real code in the blogger's override CSS.
With parents element.style{}





element.style{} .index-post{padding:3px}; ( Apply this code into add CSS )


Apply to Blog and Done.


Example 3:-


I want my given post to have a separating line between the preview and the header to look more beautiful and clear.



Because we have to draw the line under header, right-click on that and inspect its code.

If we look at its CSS property.

Hover over an appropriate selector so only all Post header highlighted blue.


Remember: In Dom tree, if you can hover over codes one by one, then you will be able to see on which code your all post header has been highlighted blue.

Because we are not going to decorate all the text with this. So we can only decorate a box of the post's header.
inspect code, hover and click on Appropriate code in Dom tree,

after clicking on it, the CSS property will appear on the right panel of Devtool.
Just add a new property experiment purpose

OR
Simply write box-shadow (just one click on the panel under appropriate selector such as .index-post .post-title a)
Or


from three dots>Add textAdd box-shadowAdd colorAdd background-colorInsert style rule below>choose insert style rule below
and write it
box-shadow:1px 1px black in css panel



After performing a real-time experiment.
Write that code in advance CSS override. With parents elements


element.style{ } .index-post .post-title a{ box-shadow:1px 1px black};

Apply to Blog and Done.

https://developers.google.com/web/tools/chrome-devtools/css

Bug in advance CSS

After the real-time experiment, if you write your code in Blogger's CSS, sometimes it does not work.And for this,
  • It is necessary that the code you wrote cut the codes and paste it in your notepad.
  • Click on Apply to Blog.
  • Open again advance CSS.
  • Copy and paste line by line CSS into add CSS.

Post a Comment

0 Comments