Code: Linking to somewhere on the page

The following code will describe how to create a link that will go to somewhere on a webpage that is not the top.

expand instructions

This is the code for the link>>

<a href="#example">
Change the "example" (not the "#") to a unique name.

This is the code where the link will be directed>>

<a name="example"></a>
The "example" will be changed to what ever was after the "#" in the link. In this case it would be "example", NOT #example. Place where you want the link to link.

Code: Replacing the header with one of your own

This hack is probably one of the simplest ones on this blog. It requires knowledge of the code for the custom header.


expand instructions+examples

Instructions:
First, in your template find this

<$BlogTitle$>.

Then, replace it with the pic code.

If you want to replace the descripton too, find this this

<$BlogDescription$>

, and just delete it.

Simple as that.

Code: Drag-Down Menus

This is the code for creating drag-down menus. Figured it out by just looking at the HTML for some.

expand code+instructions
This is an example.

- Example -
Journal of a Suburban Observer
Blogger Forum
EDIT ME
EDIT ME
EDIT ME
EDIT ME
EDIT ME
EDIT ME


This is the code.
<select style="width:170px;" name="archivemenu" onchange="document.location.href=this.options[this.selectedIndex].value;">
<option selected>- Example -</option>
<option value="http://journalofasuburbanobserver.blogspot.com/">Journal of a Suburban Observer</option>
<option value="BloggerForum.com">Blogger Forum</option>
<option value="#">EDIT ME</option>
<option value="#">EDIT ME</option>
<option value="#">EDIT ME</option>
<option value="#">EDIT ME</option>
<option value="#">EDIT ME</option>
<option value="#">EDIT ME</option>

These are the instructions:
Find:
<option selected>- Example -</option>
Change:
"- Example -" to what ever you want the title to be.

Find:
<option value="#">EDIT ME</option>
Replace:
# with the URL of where you want the selection to be linked to.
Change:
EDIT ME to the name of the selection.

**EDIT**
add this between the tags to format it:

.dropdown {
font-family: arial;
font-size: 9px; 
color: #000000; 
width:120px; 
background-color: #FFFFFF;
}

Code: Read More Link (the toggle way)

There are already different ways to make "read more" links, as shown on the categories template, but I use the way using toggles (using javascript,css,and html). It should take you only a few minutes to set up. Currently, I have not put any read more links on my blog, because I don't have any posts that I would need to have a read more link on. This way hides part of the post when you first view the page, then toggles to show the entire post on the main page, which I think is better than going to its post page, because then readers will have easier access to the other posts.


expand instructions for "read more" (using toggles)

The javascript and the css are for the toggles, if you have already done this, skip down to the HTML.
Insert this javascript into your template just above <style type="text/css">:

<script type="text/Javascript">
function togglecomments (postid) { 
var whichpost = document.getElementById(postid); 
if (whichpost.className=="commentshown") { whichpost.className="commenthidden"; } else { whichpost.className="commentshown"; } 
} </script>

Put this CSS just below <style type="text/css">

.commenthidden {display:none} .commentshown {display:inline} 

Put this HTML in the post that has the "read more" link

<a aiotitle="click to expand" href="javascript:togglecomments('NAMEITHERE')">expand</a>
<div class="commenthidden" id="NAMEITHERE"></div>

Put a title that is unique in the " 'NAMEITHERE' " spots. Put the rest of the post that you want to hide right before the </div> tag. Change "expand" to "read more" or something else.

You could also put the toggle code in your post template by going to Settings>Publishing, so it will always appear in your post.

note

Gaby de Wilde showed me code for toggles.

Note: in post previews it doesn't seem to show the toggle, but once published it should.

Code: Linking to your blog instead of to your profile

On a recent post on Blogger Forum, someone asked if it is possible to make your username, when posting a comment, link to your blog instead of your profile. There is no way besides going to: Setting>Comments>Who Can Comment?>Anyone. Now is the comments it should give you the choice of commenting as your Blogger display name, Other (this is where you enter your name and website), or Anonymous.

Always preview your template before publishing!

Code: Redirecting

This is the code for redirecting someone to a new site.

<html>
<head>
<meta http-equiv="Refresh"
content="5;url=http://blogger.com">
</head>

<body>
<p>
Redirecting you: <a href="http://blogger.com">Blogger</a>
</p>

<p>
You will be redirected to the new address in five seconds.
</p>

<p>
If you see this message for more than 5 seconds, please click on the link above.

</p>

</body>
</html>

Find: content="5;
Change the "5", to any amount of seconds. This determines how fast someone will be redirecting.

Admin: Categories

Please note the categories in the sidebar, which use the blog search engine. Because of this, please be patient for the search engines to properly update.
Thanks

JSO has 1,000 page views!

Code: Recent Comments Code

Enter this somewhere in sidebar code to show the most recent comments on your blog:

<MainPage>
  <h2 class="sidebar-title">Recent Comments</h2>
    <ul>
     <Blogger>
           <BlogItemCommentsEnabled>
           <BlogItemComments>
                         <li><$BlogCommentAuthor$> @  <a href="<$BlogCommentPermalinkURL$>"><$BlogCommentDateTime$></a></li>
                        </BlogItemComments>
           </BlogItemCommentsEnabled>
       </Blogger>
  </ul></MainPage>

to view this on the main or archive pages, change <mainpage></mainpage> to <mainorarchivepage></mainorarchivepage>.

Always preview your template before publishing it!

Code: Code for Making a Post Footer

This is the code for making a post footer that looks like: 2/28/06 14:12(24hr clock-no seconds)
In template find:

<BlogDateHeader><h2 class="date-header"><$BlogDateHeaderDate$></h2></B<a href="<$BlogItemPermalinkUrl$>" title="permanent link">

Add this after:

<DateHeader><$BlogItemDateTime$></a>

It should look like:

<a href="<$BlogItemPermalinkUrl$>" title="permanent link"><BlogDateHeader><h2 class="date-header"><$BlogDateHeaderDate$></h2></BlogDateHeader><$BlogItemDateTime$></a>

On the blog it should look like:2.22.2006(date)6:56(24hour clock).
The problem is that the date and time are not on the same line.Preview it first to make sure you like how it looks!!!

I also answered this on Blogger Forum.

Code: Code for Hiding Something

<!--TEXT YOU WANT TO HIDE GOES HERE-->

You could use this for hiding stuff in a template, for example.

Posts: Curling?

Before the Olympics started I never really even heard of curling, now I've decided that curling is one of my favorite winter sports (I have only watched 4 times). But, I still don't really get the full meaning but I think it's starting to come to me (I am just guessing), slide the rock down the ice. It's sort of weird to watch the curlers call time-outs an plan their next move when you don't even know what the point of the game is. Also, I don't understand how 'sweeping' in front of the rock could make the rock curl. If anyone is a curling expert, please help explain this to me, for I am at a loss.

Posts: Employee,"I don't know"

Yesterday, I went to buy the new Sanyo C6, a really great little cameracorder. This was the second huge store I went to in NYC. The first one, J&R, had no idea what I was talking about. My helper was new and apparently no one was helping him. Now, at D&H, I make the mistake of asking the employee if this was compatible with Apple's iLife '06. The man answers "no", and sends me over to Computer Video Editing center where the person there doesn't even know how to use his computer, saying that all the links were broken(for some unknown reason he wasn't typing in the URL bar). Most likely, I'll just order it online, and if it ends up not being able to edit on iMovie(which I dearly hope will work), I will just have to return it.

In other news: the Jane Goodall Institute's new blog, Gombe Chimpanzee Blog, opens

BlogThis!: ecmanaut: Sunlight over the year

View thispost on ecmanaut.

Links: Indonesia Tsunami Satillite

Click to watch a movie of the Indonesian tsunami from space.

Code: URL Favicon Code

Enter this under <$BlogMetaData$>:

<link rel="shortcut icon" href="FAVICON IMAGE URL" type="image/xxx-icon" />

If you are using Firefox or Safari you should see the icon to the left of the URL. For my blog you should see

JSO

in blue letters.

Notice that towards the end ofthe code it says "xxx-icon", when I first found this code it was only "x-icon". This didn't seem to work in Safari so I changed it.
**EDIT**, the new favicon (of the blobs), didn't seem too work with "xxx-icon", but worked with only one "x".


See Blogger Forum's post on the matter.

Code: Movable Window Code

To make a post have a movable window as seen in my previous post, insert this between the <style></style> tags of your template:

pre {
text-align: left;
font-size: 1.5em;
width:100%;
border:1px solid #3366FF;
overflow:scroll;
}

Add this around the text you want to put in a window:

<pre>Your Text Here</pre>

**UPDATE**Add height:100px; below width: 100% to enable up and down scrolling.

Thanks to The Little Master™ for showing me this.

Posts: A History Full of Lies

Have you ever considered that some of the records kept long ago were lies?
I have.

Photos_Movies: Recipe for "Dinner for One"

There is now a recipe for (a) "Dinner for One".

Dig In.

Reviews: iLife '06

I received iLife '06 a few days ago. It comes with new features for iPhoto, iMovie HD, iDVD, GarageBand, and iWeb.

iPhoto
I was never really a fan of iPhoto because of its usual crashing upon camera connection, but now it has improved dramatically with many new features like being able to make a slideshow, card, calender, book (all with cool themes), and publishing to iWeb. Also, you are able to subscribe to "photocasts". I would still use other photo programs like Canon Image Browser.


iMovie HD
iMovie HD is one of the best programs. You are now able to add themes like for chapters or credits which you can customize. Another good addition is that you are able to insert chapters into your movie. There are many new audio clips. Another good thing is that Titles, Transitions, Video FX, and Audio FX are all under the section editing. Now you can film straight to iMovie using Magic iMovie. A big improvment since the previous one.


iDVD
Great. Amazing themes with built-in audio. You can make it widescreen or standard. Also with Magic iDVD.


GarageBand
GarageBand. A great new version, with the ability to make a normal song, podcast episode, and a movie score. In the podcast section you can record or import you podcasts. You can also add chapters, pictures (for color iPods), radio sounds, 201 jingles, and 166 special effects like airplane cabin sounds, arena cheers, and bell towers. In making a movie score you import a movie and make the track as you watch. There are new loops as well. A great program, hands down.


iWeb
The new program was a great success. Being able to create you own site ti .mac or somewhere else with a Welcome, About Me, Photos, Movie, Blog and Podcast pages, all with a lot of customizations. I still don't know if once you get the full membership of .mac (I only have a trial), you get a domain name, not a subu-domain. On the podcast page it comes with a Subscribe button, and on the photos page it comes with a slideshow page. Also you are able to insert Email Me and Hit Counters on your website.


I would agree that iLife '06 is the best yet.

Photos_Movies: 139-3939_IMG

139-3939_IMG, originally uploaded by Noah Bulgaria.

Real post coming about the new iLife '06.

Photos_Movies: 141-4156_IMG_2

141-4156_IMG_2, originally uploaded by Noah Bulgaria.

Washington Sq. Arch in the West Village

Real non-pix post on its way...

Links: Coldplay-Speed of Sound

Listen on iTunes

Code: Buttons

To put the JSO button on your blog insert this code into your sidebar:

<a href="http://journalofasuburbanobserver.blogspot.com"><img style="cursor:pointer; cursor:hand;" src="http://photos1.blogger.com/blogger/6882/1771/320/jso-blog.png" border="0" alt="" /></a>

To put the My Flickr button on your blog insert this code into your sidebar:

<a href="http://www.flickr.com/photos/noahbulgaria"><img style="cursor:pointer; cursor:hand;" src="http://photos1.blogger.com/blogger/6882/1771/320/my-flickr.png" border="0" alt="" /></a>

Photos_Movies: Makin' a Getaway

140-4096_IMG, originally uploaded by Noah Bulgaria.

Photos_Movies: A Dinner for One

Mmmmmmmmm...


Recipe

Grill brotwurst

Melt chedder cheese on bun

Grill onions

Put together

Eat with mustard

Photos_Movies: You Tube Movie 1

Posts: Bob Not Bill-Lyrics

To the tune of Ode to Joy
Click here to listen while you sing
It sounds even better in a duet.
Lyrics by Noah Bulgaria

My name is Bob not Bill

and I like to oo sip coffee! My name

My name is Bob not Bill (bob not bill-2nd time)

(music ends)and I like to oo2 sip coffeeee!§(2nd time)

But my name is really

George Hammond

George Hammond the 2nd

and I like too oo oooooooooo

munch

munch munch munch munch munch munch munch munch munch munch

do oh nuts

and sing that my name is Bob na ha ha ha ha ha1 hat Billlllllllll.

repeat

§=end

1follow music for the # of ha

do not read lyrics in ( )

It sounds very cool if you sing it in German by clicking on Germany's flag.

2first time only