HTML code changes.. it's not so scary!

During my month-long blogging hiatus, I received lots of blog editing questions. Today we're going to deal with two of the most popular questions...

#1- Removing the border from your header picture.

Everyone likes borders around the pictures on your blog, but usually the border around your HEADER picture doesn't fit. This is very easy to take off. You just need to be brave enough to play around with your HTML code. Here are a few steps for those who don't know where to begin. (The edit HTML template is under the LAYOUT tab.)

*before you change anything, download a backup to your template. It's always safe to have your template saved just in case you really screw things up. This only takes a minute...

Scroll down and find the header coding. It looks something like this:

/* Header
-----------------------------------------------
*/

#header-wrapper {
margin:0 2% 10px;
border:1px solid $bordercolor;
}

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;

Now, change the 1px to 0px on both border lines...

I will highlight what needs to be changed... we're just talking about 2 little numbers here..

/* Header
-----------------------------------------------
*/

#header-wrapper {
margin:0 2% 10px;
border: 0px solid $bordercolor;
}

#header {
margin: 5px;
border: 0px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;

After you change it, make sure to hit SAVE and preview your blog. You can always go in and change it back if you don't like what it looks like.. Easy as that, my friends. If your border fits and you like it, you can make it thicker by changing the 1px to a 2px or 3px. You can change it to have just ONE border instead of two.. FYI- my headers usually always have borders, but that's because I edit them onto the picture before I upload it... that can be done in any photo editing software. I've said it before and I will say it again, I love Photoscape. It's a free photo editing software and it's very user-friendly.

#2- Label Clouds

Blogger doesn't give you the option of having a label cloud... they do organize your posts according to topics, but the only options of posting those labels is a long laundry list on your sidebar. The bunch of green words to the left is my label cloud. Adding this to your HTML code is a bit more complicated, but all you have to do is copy and paste over your old code. Don't be intimidated. You can do it! .

DISCLAIMER. I did not write this code (obviously) just adapted it from a genius who did...


First, label your posts :) Obviously, a cloud won't show up until you have a few labels. Once this code is added to your HTML, a new label will show up in your cloud every time it's added.. Time saver tip: I always add labels at the bottom of each new post... however, if you are adding labels to OLD posts you don't have to edit each one separately. You can add 20+ labels at a time. Under "Edit Posts" (where you can see your long list of posts) and click on the posts you want to add and do them together. This can save a lot of time.

Second, add the label gadget to your layout. Once you see the long laundry list of labels on your sidebar, you are ready to change the code.

Third, email me or comment and I will send you the code. I posted it earlier, but Blogger converts some of the code and makes it more complicated. If you want the long code, I will happily email it to you.

.