Do you want to adjust some elements of your blog? But you’re not sure where to start to find the exact code you are looking for. Well here is a trick to edit blog’s code the easy way!
This tutorial is assuming that you are using a WordPress platform. Plus it’s always a wonderful idea to backup your website before making any changes.
BEFORE YOU BEGIN
Before you can start the process you will need a couple of things first.
- You need to download the Jetpack Plugin. Then enable the Custom CSS (under Settings-Appearance)
- You need a certain internet browsers. I do know this will work with Google Chrome & Firefox.
- It does not work with Internet Explorer. And I have not tested Safari
- You will need a basic understanding of code. Don’t worry you just need to have an understanding! Be sure to check out my post called “Basic Code every Blogger should now”.
Once you have done all this you can now begin!
YOUR WEBSITE’S CODE
Here is the easy way to find your website’s code:
- Open your website in one of the browsers listed above. I personality use Google Chrome.
- Find the item you would like to change
- Right click on that item
- Then scroll down to the “inspect” or “inspect element” option and click it.
- A new window will display inside your current page. This is your website’s code.
FIND THE CODE
Because you clicked on the item you wanted to change. Its code should be displaying (or a part of it). The box to the right is the CSS code; this is the stuff you will need to change the code on your website. The left box is the HTML code.
TIP: You will maybe have to pick a different HTML element to find the code you need.
Here is the COOL part about using Google Chrome. In the box to the right, you can edit the code there to see how it looks before changing your website’s code. And that’s the TRICK!
This is why you need to have an understanding of basic code to change the CSS code on your website. After you have adjusted the CSS code to the way you want it. Copy the CSS code (ctrl-C for PC).
ADDING THE CODE
Inside your WordPress dashboard, go to appearance then Edit CSS. This is where you will add your new code without adjusting the main code of the website.
SIDE NOTE: My Edit CSS could look different than yours
Now just paste the code into the box and preview it BEFORE saving. Once everything looks the way you want it, save your work.
THE TRICK TO EDIT BLOG’S CODE
Now, this tutorial could have made NO sense to you so I have created a video to show you the process.
I hope this trick will help you edit and design the website you are hoping for. Do you have any questions or additional tricks?
