Oxford Blogger University: 2009

Saturday, September 5, 2009

Using The Blogger Flag And Unflag

First, read or at least skim Blogger's explanation about it.

The Blogger Flag

There are times that spammers or hackers may have removed the entire Navbar, including the Flag. Below is a way to "click" the Flag, anyway!

First, copy and paste into address bar:

javascript:toggleFlag();

Then you can hit Enter. You're done. Don't expect any indication that it worked. But maybe it'll do you some good.

About Your Site Getting Flagged

I doubt from what I know that any small number of Flags against you amount to anything, otherwise smartass adolescents could go through and do to hundreds of blogs what they do when they first discover the telephone. If a noticeable number of flags were to occur (according to unstated Blogger policies), maybe then you'd get a notice. So don't worry unless you are notified by Blogger.

Thursday, August 20, 2009

Timestamp Format

How to display your time format under the post:

1. Click Settings.
2. Click Formatting.
3. Click Timestamp Format. Select a time display.
4. Save Settings at bottom of page.

END.

Wednesday, August 5, 2009

Your "posted by" Or Display Name

To change the name

1. Go to Dashboard.
2. Go to Edit Profile.
3. Go down to Display Name.
4. Fill in your name, your nom de plume, or your fake signature.
5. Go to bottom to Save Profile.

In classic Blogger be sure to republish after this is done.

END.

Monday, July 20, 2009

Low Sidebar

These are my rote instructions when sidebar nosedives happen, which mostly occur in the Internet Explorer browser. I don't know that it happens very much in Firefox, but I know other horror stories about Firefox, so don't get excited!

But, on to our problem! Sometimes it's simple, sometimes not.

Your sidebar may be going to the bottom because your server is crazy due to being worked on by Blogger. Your sidebar doesn't begin at the top like it's supposed to.
Wrong code or missing pieces of code sometimes cause this kind of jump or aberration.
It is probable you'll have to get out of Compose mode and enter Html mode in order to see wrong code in the posts.
It is possible you have posted too large a photo or too long a link. Change that and it might go back to the top of the page. Look for a misstated IMG code.
Possibly your main column width and sidebar exceed allowable Content width or header width.
Sometimes one of the "floats" in the template will get changed for some reason and be wrong. Investigate. Options are "left", "right", and "none".
If you suspect it may be caused by something in a particular post, you could Save as Draft to remove it temporarily and see if it was the cause. Then you can Publish it again later to put it back in place.
Also, sometimes I've found it to be caused by just getting some wrong or missing code in the template or in a recent post. You might have one tag or symbol too many or too few. If you've deleted some things, maybe you left one little piece of nonsense code behind that's confusing the template.
Once it was caused in a friend's site by a -->, the closing tag for hiding a comment; it had no start tag, was just wrongly there!

Play Sherlock Holmes and test some changes without saving them until you use Preview and see that the change works and does no harm. It's hard, but I don't know any easy way.

To test posts one at a time, use the Permalink feature; if you click on the Post Title, your site will show only that one post. When you keep doing the blog like that, you MAY find a single post that pushes the sidebar down and that post will be the cause of your trouble. In other cases, of course, the trouble is coming from the sidebar and you just have to figure it out.

To hear all this put another way, go to Peter's post about it or Chuck's post.

Sunday, July 5, 2009

Font Tags As Style Statement

W3C says: The <font> tag in HTML is deprecated. It is supposed to be removed in a future version of HTML.

Even if a lot of people are using it, you should try to avoid it, and use styles instead.

Yipes. I have always used the <font> tags, so I probably have lots of errors out there, but I don't think I'll correct any of them until they truly cease to work. Meanwhile I guess I will try to use the "styles". I'm still teaching myself and will probably step on my own whoosit! But let's plod on and look at the following that you/I might place in a post:

<p style="font-family:Times New Roman;font-size:130%;color:green">

ALL of it should precede the text to be viewed (green text below). View the Source Code for this post if that isn't clear.)

This is a sentence with some text in it. This is a dizzy sentence with some text in it. This is yet again a sentence with some text in it. This is another sentence with some text in it. This is a sentence with some silly green text in it. This is another silly sentence with some text in it. This is a damn sentence with some text in it. This is a puke-green sentence with some more damn text in it.

That would be too complicated, I suppose, if you needed it for frequent use or intended it for every post. I need to establish it as a CSS description so that it's on tap when I need it. So I'll add

#fs1 {font-family:Times New Roman;font-size:130%;color:green; }

to my template's CSS (cascading style sheets). The "fs1" is just an arbitrary code that I made up; as long as it is repeated in the code below, any word you choose instead will do.

Reference to the #fs1 is placed in the post thus:

<div id="fs1"> text </div>

Saturday, June 20, 2009

Expandable Post Summaries

These sites might help, but I haven't used them all, so I'm just pointing them out:

For New Blogger, see HACKOSPHERE

I have personally installed and used the hack from Hackosphere on 3 of my own blogs, including this one, and it works very well. It was demanding enough that it took me 4 times to get it right, but it was worth it.

Fair Warning, though, about the above: In some cases, even short posts that you have not coded to say "Read more" at the bottom will do so, anyway. I would like to see a fix for this myself, but until it occurs, I don't mind the slight confusion. In some cases, I marked my short posts with END. at the end of the post, so even if it's marked "Read more", you can see that it's finished.

For classic Blogger, check expandable post summaries in Blogger help or this one

END.

Wednesday, May 20, 2009

Unordered List In Sidebar

Unordered List

Newbies using New Blogger template may be better off using the Link List in the Page Elements. It is easier; however, it is more difficult to backup the Link List widget than to just backup the Page Element.

(Page Element and Widget are different names for the same thing--one is more accssible 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 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.

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 put in your sidebar via the template. The code could also be used in a html/javascript Page Element (in New Blogger). First one 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>list another one!
</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!

Tuesday, May 5, 2009

Find Width of Header For New Image

Header Width

This will tell you places to look for the width of your header. The image you want to place there should not exceed that. You should use a photo program to alter the width of your image BEFORE you upload it to your photo host (whether Blogger or otherwise).

To find the width of the header

1. Click Template
2. Click Edit Html
3. Scroll down to the header,header-wrapper, or wrap code and look for the WIDTH parameter.
4. If not found, look for outer-wrapper and see it's width. It will look something like this :

#outer-wrapper {
width: 1000px;
}

Or you could adjust the same WIDTH in the template CSS

If you are unwilling to fuss with making your photo width match the width of the header, you could try this. You might find some code like the one above or this one below showing the #wrap; change the width of 100px to 900, 850, or so until it begins to look acceptable to you. Don't Save until then. If your photo just wasn't nearly wide enough, it may still look odd (short) to some eyes. Actually adjusting the width of your image in a photo program would then be the better choice.

Another possible location of header width:

#wrap {
margin: 10px auto 0px;
padding: 0px 5px;
width: 900px;
text-align:left;
}

END.

Monday, April 20, 2009

Set Number of Posts On Front Page

From Blogger Support:
Re: System Error Message - 006

Thanks for writing in. Blogger imposes a size limit of 1 MB per page. So if you have too many posts displayed on the main page of your blog, you will run into this error. You can fix this by lowering the number of posts that are shown on your home page. Instructions for that are here:

Blogger Info

Other posts will still appear in your archives, so nothing will be lost. Also, your page will get the added benefit of loading faster when people view it. Let us know if you have any further questions or concerns.

MFBQ Instructions to set number of posts on main page:

1. Go to the Dashboard.
2. Click on Change Settings.
3. Click on Formatting.
4. Look at the first listing, Show.
5. Indicate how many posts or how many days you want on the Main Page.

(Though it won't be wrong, there may be times when some of last month's posts are both in the Archives and still on your front page. You may or may not mind that. You may just want a short front page.)

6. Go to the bottom of the page and Save Settings.

Exit.

Sunday, April 5, 2009

Scribe--additional words for links

If you're using the scribe template, thE script for the various titles is NOT a font, but each word is an graphic. You may want to know the following for further heading titles:

p.s. Every time I click on it, there's a glitch, a pause of a couple of seconds, that claims an "Internal Error" and then it goes on to the site. Be patient and it'll come up.

SCRIBE FONT, ADDITIONAL WORDS

Friday, March 20, 2009

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://bp1.blogger.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://bp3.blogger.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://bp3.blogger.com/_AVxLoZ0mR_0/RcNxJHiGO3I/AAAAAAAAAKA/%205GfVtiwhGRE/s1600/jg2.jpg" 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:

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" type="'Header'/"></b:widget>

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

Thursday, March 5, 2009

Page Elements--Html/Javascript & Text

The Html/Javascript Page Element Is Better!

At first I chose some Text Page Elements for my information at the top of the blog, but I have since changed it to an HTML/JAVASCRIPT Page Element. For some reason, both require line breaks in order to separate the text into paragraphs. Fair enough, I can do that. But the Text element loses those line breaks every time you return to do some editing, and that's crappy.

So if you had paragraphs or any kind of one-line-at-a-time "grocery list", you'd have to revamp the post to restore it to what you started with! Not hard, just time-consuming!

Text page elements are only good for a straightforward paragraph of information or for some other kind of information that you don't have to edit often.

In the HTML page element, nothing changes or is lost, and you can just edit what you meant to without a lot of special revamping. This is important to a ceaseless reviser like me--I often re-edit!

It is misleading to all users that we are able to put HTML into a Text page element when it's so problematic to do so! And there should have been a warning about this difficulty with making paragraphs. Anyway, fair warning from me!

Friday, February 20, 2009

Header Picture Code

Unscrambling Blogger photo code for Header picture code

Blogger's picture icon is good for regular pictures in the post or in the sidebar, but it's overdone for the purpose of putting a photo in your header. You don't need both large and small versions for the header.

What Blogger may give you when you upload the photo to a post (Save it, but don't Publish it!) will resemble this:

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpW1aB-k5624zmLHtevnTSHu92pNnWHqXUKjExe1a8I07pY2lG-8k2gfSJjZjDYBqsveMXGO6S2_JObmNffTGAb1a3tjqAvOWfUv-dYq1yXjZi2P5zbRMOFP5fQuAqJon51K8q5kzJCjQ/s1600-h/dgblues.jpg"><img id="BLOGGER_PHOTO_ID_5025971925707284738" style="DISPLAY: block; MARGIN: 0px auto 10px; CURSOR: hand; TEXT-ALIGN: center" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpW1aB-k5624zmLHtevnTSHu92pNnWHqXUKjExe1a8I07pY2lG-8k2gfSJjZjDYBqsveMXGO6S2_JObmNffTGAb1a3tjqAvOWfUv-dYq1yXjZi2P5zbRMOFP5fQuAqJon51K8q5kzJCjQ/s400/dgblues.jpg" border="0" /></a>

What you would need to extract is this:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpW1aB-k5624zmLHtevnTSHu92pNnWHqXUKjExe1a8I07pY2lG-8k2gfSJjZjDYBqsveMXGO6S2_JObmNffTGAb1a3tjqAvOWfUv-dYq1yXjZi2P5zbRMOFP5fQuAqJon51K8q5kzJCjQ/s1600/dgblues.jpg

If you didn't notice on your own, the difference between the red code at the top and the red code above this paragraph is that the -h has been deleted after S1600.

SMALL IMAGE: The url contained in the blue text (marked S400) is the smaller of the images and will need no correction--just the code, such as this, shown above:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpW1aB-k5624zmLHtevnTSHu92pNnWHqXUKjExe1a8I07pY2lG-8k2gfSJjZjDYBqsveMXGO6S2_JObmNffTGAb1a3tjqAvOWfUv-dYq1yXjZi2P5zbRMOFP5fQuAqJon51K8q5kzJCjQ/s400/dgblues.jpg

Assuming that the S400 is actually small and not just less than the large one, you could enter that code, as shown, into the Photo Url as your Profile Photo.

END.

Thursday, February 5, 2009

How To Post Photos

The most direct way to get photos on your post is to use Blogger's picture icon:

1. Go to your Post Editor.

2. Click on Blogger's picture icon.

3. When you see "browse", click on that.
4. when it takes you to your own computer, locate the photo you want to use.
5. Click Upload.
6. Click on Done.
7. If you uploaded to a post different from where it's intended to go, possibly even on a different blog, Copy the html code.
8. Paste the code into the right post.

There are alternate free photo hosts such as Picasa, Photobucket, Flickr,

[Below is a screenshot of the top part of this post in the Post Editor. It shows the Blogger picture icon, the tiny rectangle that's blue in the top half, and primarily green in the bottom half.]

[Below are screen shots of the photo download process.]

New images always load into a post at the top. If you view the image in Compose mode, you can Drag and Drop it to other locations; if you are viewing it in Edit Html mode, use Cut and Paste to relocate it.

END.

Tuesday, January 20, 2009

Html Tags Come In Pairs

There are too many tags to make good sense if they were all listed. Some common ones you might have a use for or that will explain the concept are listed below.

Tags come in pairs, a start tag and an end tag.

examples below:

1. bold: put in front of the text to start it and then turn it off with
2. italic: use and
3. blue text: and
4. small text: and
5. comment (hides text or code, almost any amount):
starts with

I learned lately that comment doesn't hide much in Firefox. That was a let-down.

Monday, January 5, 2009

How To Indent

1. IN YOUR CLASSIC TEMPLATE, FIND THE FOLLOWING LINE:

<style type="text/css">

(In New Blogger's template, you may have to search for Body or some word typically found in the style sheet.)

2. BELOW THE STYLE LINE (AND PROBABLY BELOW THE "BODY" LINE, INSERT THE FOLLOWING:

#inden
{
text-indent: 25px
}

or just

#inden {text-indent: 25px }

3. SAVE THE CHANGE.
4. AFTER YOU GET IT TO WORK, YOU CAN INCREASE OR DECREASE THE 25PX ABOVE.
5. GO TO EDIT POST.
6. IN EACH POST PARAGRAPH INSERT THE FOLLOWING:

<p id="inden"> TEXT </p>

Below is an example of the indent:

This is just quick and dirty, and not quick enough for some people, since it requires that you write the code for each of your paragraphs! It would be easier to write the code only once!

So far I've been too bone-headed to figure that out.

Subscribe to: Posts (Atom)