When Header Image is Stuck, Won't "Remove"

When the blog header image you decided you don't like after all won't let itself be removed, what are you supposed to do? People say their photo is stuck there and won't be removed! I believe them, but I've barely had it happen to me, so my experience has been of small proportions! I only had a stuck header image once. What did I do? I panicked, of course. WHAT was it doing? So I tried everything that I ever heard of or could vaguely imagine might work!. Attempts to "Remove Image" NO REAL SUCCESS AT THIS: I hit "Escape". I cleared the cache and cookies. Put the cursor over the window for the image and alternately clicked "Home" and "End" a few times. (This didn't work, although in the past, it DID WORK, turning out to be the odd solution to a newly-added header url that wouldn't go ahead and appear as an image in the same "Configure Header" Gadget. If the url doesn't change to an image in that small window, it usually means that the url had not actually "taken".) I closed the Gadget and then reopened it. I logged out of Blogger and logged back in. I restarted or changed the browser (or both). I did break it loose at last, but not before I'd gotten so flustered that I very unscientifically lost track of the order in which I did all these things. I can't even guess which one really "fixed" it. I nearly feel that it just gave up when it saw how hard I was going to work at it! (You can see how insensible it made me!!!) Remove Gadget, Not Just The Image! SUCCESS! The thing that has always occurred to me is this, though I only just now tested it. It seems to work. Why can't we just "Remove" the Header Page Element entirely if the header image stays stuck? Remove it, then add it back with "Add a Gadget" just like we do when some glitch kicks the "Archive" or "About Me" off the blog? This does work, although I had to "test" it without having a stuck header image. My solution was: IF THERE IS A "REMOVE" IN THE "CONFIGURE HEADER" AS THERE IS IN MANY PAGE ELEMENTS: Click "Remove" in the lower left corner of the "Configure Header" page. Confirm that request when you see "Are you sure?" Go to Layout page and click "Add a gadget". Select the "Header" type. IF THERE IS NO "REMOVE" IN "CONFIGURE HEADER": Go to Layout page. Click "Edit Html". Click "Expand widgets". locate the "header" widget. If the header widget code says "maxwidgets=1", change 1 to 2. (You may want to put something extra up there some day!) If the code says that "Locked="yes", change "yes" to "no". (This is the one that's NECESSARY. This action is what will put "Remove" in the lower left corner of the Configure Header page--otherwise, you have no icon to click!) Return to Layout page and click "Edit" on the Header. Click "Remove" Confirm that request when you see "Are you sure?" Go to Layout page and click "Add a gadget". Select the "Header" type. After either the short or the long list, I can only hope that you can finally remove the header image (replace it, too, if that's what you'd meant to do!). In my case, I ended up with a new Header Gadget with no image as I'd expected. I was then able to put a new image in the header, remove it, replace it (just to see if it would!). But I had no way of knowing that if it had originally been stuck, would the next attempt to add an image also stick?! This may be the problem, the "rub"--I had to test this (all 3 times) without a "stuck" header! So I wish you great Good Luck. You may learn a number of new things, but I can't promise any success! If anyone tries this, let me know if it fails or succeeds!

Place Gadget Above The Posts?

It's sometimes possible to create a page element and then slide it across (drag and drop) the blog and drop it above the posts. If that won't stick, you may have to find this line in your "edit html" (template): <b:section class='header' id='header' maxwidgets='1'> and change the maxwidgets number to 2. Don't neglect to Save template before you return to the Layout page. Now you should be able to "Add a gadget" from above the header. Then you can drag and drop that new Page Element below the header, where of course it'll be above the posts.

Add Line or Divider Between Posts

Directions, for white or black minima: Make a safety copy of your template as per the instructions on the "Edit html" page. I can't guarantee that all blog codes are going to look the same, but I did this on several of the Minima templates. I've done it on a couple of other template styles and they varied a little. So it might work right away or you might have to tinker! (Note: You can see the blue divider I talk about here at the end of all my posts.) Go to the template. Expand the widget templates. Locate the line of code in red below. add line or divider image like the .gif that I added before "post-footer-line-3". <center><img src='http://bp2.blogger.com/_AVxLoZ0mR_0/R3-8aw3SxjI/ AAAAAAAAAnM/Z3AlnL1FsMY/s400/bluedivider-b.gif'/></center> <div class='post-footer-line post-footer-line-3'>

[More below...Harbor example, etc.]

In a Harbor template I placed the same blue-divider gif in the footer as above, just before the (almost) same red line of code about "post-footer-line-3". <p class='post-footer-line post-footer-line-2'> <span class='post-labels'> <b:if cond='data:post.labels'> <data:postLabelsLabel/> <b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if> </b:loop> </b:if> </span> </p> <center><img src='http://bp2.blogger.com/_AVxLoZ0mR_0/R3-8aw3SxjI/AAAAAA AAAnM/Z3AlnL1FsMY/s400/bluedivider-b.gif'/></center> <p class='post-footer-line post-footer-line-3'/> </div>

When you make the change or addition, use Preview to see if it's what you think it's going to be. Wait until you're satisfied to save it. You can always "clear edits" and back out if you're not confident.


Bla bla bla, says the post!

---

LAZY WAY TO ADD A LINE:
I used to include <hr color=crimson> in my post template code so that a crimson line would be drawn during creation of the blank post and I'd then write my post above the crimson line. This was easier than adding a line or image to the footer widget, so a beginner might be attracted to it just for the ease of it. Some day all beginners stop being nervous about getting into the template, but it doesn't have to be today! I remember the feeling.

NOTE: additional graphics at http://www.graphics-4free.com/

Unordered List In Sidebar

You have two options:

• Unordered List (with bullets)
  
• Unordered List (with bullets)

OR

1. Ordered list (numbered)
   
2. Ordered list (numbered)

Newbies using New Blogger template may be better off using the Link List in the Page Elements. It is easier for the lazy Blogger; however, it is more difficult to backup the Link List widget than to just backup the Page Element. You'll also have more control over it later (when you've become more informed) in a Page Element.

Before I forget, there is a third kind of list; when you just start your list items and don't specify either ordered or unordered, you will get plain bullets (or whatever your CSS specifies)

There is an even newer Blog List type of page element if you're trying to create a BlogRoll and you may find it preferable--it does a very different (and nifty) thing for you!

[More below...]

(Page Element and Gadget (or Widget) are different names for the same thing--one is more accessible to you (through the Layout page) and the other, in the template, you can go into more deeply as far as editing it IF you know how!) So I prefer the ul or ol list, whose html code I can keep backed up in a Notepad file or other plain-text program, in an html/javascript page element.

If you are using a Classic template, you will need a list of this sort for the sidebar. In a Layout template, you'd put the code in a Gadget.

Put this after or at least not inside the other ul lists in the sidebar in the template.

Below is the code for a list of links that you could use HTML to put it in your sidebar via the Classic template or into a Gadget (html/javascript Page Element)in a Layout template. First one below is an example of a link. <h2>New Category</h2> <ul> <li><a href="http://www.zandria.us/">Keep Up With Me </a> </li> <li>list another one! </li> <li>list another one! </li> </ul>

If your template uses a particular "class" for it's titles in the sidebar, just imitate (copy) them in order for your new list titles to match the old ones.

For a second list, if needed, do another title and pair of start and end tags and fill in the middle part.

For just one link in the sidebar, use code as below: <a href="http://rodentia.blogspot.com/The Rat Squeaks</a>

The difference between an unordered list as above and an ordered list which Numbers your list is merely using an ol tag instead of the ul tag!

Where To Place A Graphic For The Header

New Blogger method, easier for most

1. In Dashboard go to Layout. 2. Click Header in the Layout. 3. Have the url of the image you want to use handy. 4. Type or paste or Browse for the url into one of the two Image boxes, 5. Either an image on your computer or one already hosted on the Web. 6. You can choose to add the photo Behind the Title and Description or 7. You can Replace the Title and Description with the photo. 8. Be sure to Save Changes.

I can't emphasize how much easier the method above is!

Below is the old (Classic) method

This method still useable and ultimately more flexible (but you may be well satisfied with the first method above):

The code you'd look for to put a graphic into the header seems to come from a variety of locations in your template. It might go in the #header or #header-wrapper. The method I usually use is to locate a background url that already exists like these:

#header {
margin: 0 2%;
background-color: $headerBgColor; background:url("
http://2.bp.blogspot.com/_AVxLoZ0mR_0/Rb_W1nLeYQI/AAAAAAAAAIg/
qCR5JYhLf6o/s1600/dgblues.jpg") no-repeat bottom 10px;
color: $headerTextColor;
padding: 0;
font: $headerFont;
position: relative;
}

or

#wrap2
{background:url("xxxhttp://4.bp.blogspot.com/_AVxLoZ0mR_0/
RcNxJHiGO3I/AAAAAAAAAKA/5GfVtiwhGRE/s1600/jg2.jpg")
no-repeat center top; }

If this doesn't make anything more clear, ask again. I won't mind. But I don't know everything!

------------------------------------

It also worked for me to place an extra html/javascript page element above the header, with code like below:


<a href="http://jgblues.blogspot.com/"><img top
src="http://4.bp.blogspot.com/_AVxLoZ0mR_0/RcNxJHiGO3I/AAAAAAAAAKA/
5GfVtiwhGRE/s1600/jg2.jpg" no-repeat center/></a>

but first you'll have to go into the header widget in the template and change it so that the extra header is allowed, like this:

1. Go to Template.
2. Click on Edit Html
3. Click on Expand widget templates.
4. Locate the header widget.
5. It might look like this:
<b:section class='header' id='header' maxwidgets='1'>
6. Change the maxwidgets number to 2 or more.
7. If there's a showaddelement='no', change it to say 'yes'.
8. I don't advise removing the old header entirely unless you can otherwise preserve the title for the search engines, but if you mean to try, I understand that you'll have to change locked='yes' to 'no'.
9. Save your new template.

Some have remarked that they have no header at all, and I don't know what that's about. In new blogger, you might find a section like this, which reflects the fact above that I have the mentioned html/javascript page element added to that header.

<b:section class='header' id='header' maxwidgets='4'><b:widget id='HTML6' locked='false' title='' type='HTML'/><b:widget id='Header1' locked='true' title='JUDY GARLAND BLUES (Header)' type='Header'/></b:section>

Various statements of fact and warnings on this subject may be missing or careless at present, so beware.