Editing Your Blog With Google Chrome
Feb 12th, 2009 by Carlos
Over the weekend I finally sat down and did something I’d been meaning to do for a long time: update the look and feel of the site. I added the banner, the two RSS buttons you see at the top, and tweaked some other things that aren’t really that noticeable.
Why did it take me so long to finally sit down and do this?
In one word: code.
You need to know what the code on the back end of your blog means when you’re trying to add or move things around. I’ve learned a little bit, but it can still be a hassle. It got to the point I was ready to pay someone to do it for me.
But I decided to just sit down and get it done, and the tool that helped me out the most was Google Chrome. It has a feature called “Inspect Element” that tells you what the code means and where it is on your page.
What is Google Chrome?
It’s a web browser just like Internet Explorer and Mozilla Firefox, only it claims to be faster and more efficient (I would agree). I’ve been using it for a few months and I highly recommend it.
Where Can I Get It?
First of all, you’ll have to download the browser from Google, and you can do that here. Don’t worry, it’s free.
Where is “Inspect Elements?”
Just right click anywhere on the page you want to “analyze” and and you’ll see this box. Right at the bottom you’ll see Inspect Element.
Then this box will come up:
Looks like a bunch of nonsense, doesn’t it? Sure it does, but that’s just because you need to know how to make sense of it. The left hand side is the section of your page. Whatever section is highlighted or selected on the left, its properties (size, color, margins, etc.) will be shown on the right.
The Cool/Helpful Part
Here is my favorite part: as you hover over certain parts of that left-hand side, you’ll see your page light up. That’s the part of the page the code represents! If you have two monitors it’s easier to use, but if you don’t here’s what it looks like (click on the image to blow it up):
That yellow box? That’s the highlighting…
This is what helped me “get” what I was doing as I edited my blog. Certain areas represented certain sections of code, and the more I used Chrome to explore the code on my site, the better I understood the changes I was making on the back end.
I really recommend bloggers take an hour or two to tool around with their code to really understand how to make certain changes, and this is a very helpful tool.
Doing it yourself is way better than paying someone else to do it—especially if you write about personal finance like I do!
Thanks so much for the tip. I’ve been putting off a few changes on my own blog because I know a little, but not enough, about the code. Up to this point it’s seemed like too much of a hassle to figure it out, but Google Chrome sounds like a great tool to use. I’ll be trying it out this weekend. Thanks again.
Beth, I hope it helps you as much as it helped me!
Wow, great tip. I didn’t know that feature existed in Chrome. I will have to try it when I get home tonight. I really need to do some tweaking to my blog’s design. It still looks alittle grocery store.
Hey, just noticed you’re reading Outliers. I just finished it last weekend. Thought it was pretty interesting.
Forest: Yeah I’m loving Outliers, lots of really good stuff in the book. Should be done with it soon.
I’ll keep this in mind. I’m going to purchase a host service this next week and begin my new blog. I’m not good with technology and need all the advice I can get on setting it up. Any other nuggets of wisdom are appreciated.
Thanks
You might also want to check out the ‘Web Developer’ add-on for FireFox. It does a lot of neat stuff like that too.
Great tip, I didn’t realize that google chrome had this feature. Very useful for us bloggers!