Improvements to the Blogger template HTML editor

Whether you’re a web developer who builds blog templates for a living, or a web-savvy blog owner who prefers to make changes to your template using HTML, CSS or JavaScript, you may be interested in some enhancements that we made to Blogger’s Template HTML Editor.

Your blog’s HTML template is the source code that controls the appearance of your blog. This template can be customized to appear however you’d like. The improved HTML template editor now supports line numbering, syntax highlighting, auto-indentation and code folding to make editing your template much easier.

Suppose we wanted to move the date of a blog post underneath the post title, similar to the Blogger Buzz blog. To do this, follow these steps:

Click the “Template” tab on the Blogger dashboard, then the “Edit HTML” button, to see the new template HTML editor:

Locate the “Blog1” widget quickly using the new “Jump to widget” drop down:

This widget controls how your blog posts are displayed. The code inside the widget is folded by default. Clicking the new fold markers ‘►’ next to the line numbers expands the widget and reveals a set of “includable” tags:

Inside the “main” includable is the block of code that renders the post date:

Cut the post date code section and move it to where we want it, in this case, under the post title in the “post” includable:

To check our changes, click the new “Preview template” button to see the updates:

The post date is exactly where we want it, so tab back to “Edit template”, hit “Save template” and we’re done!

Finally, we’ve added a “Format template” button that automatically cleans up the indentation of the template, and made it possible to search for text by pressing “Ctrl+F” once you’ve clicked into the editor. To find and replace text occurrences one by one, use “Ctrl+Shift+F” or to find and replace all occurrences at once, use “Ctrl+Shift+R”.

 
We worked on this project as part of Google Australia’s BOLD Diversity Internship Program. We hope you enjoy the changes we’ve made!

(Cross-posted from the Blogger Developers Network)

Read More...

Make A Rollover Image Effect - Image Changes On Hover

A rollover or mouse over image is a great image effect you will have seen used on lots of blogs and websites.When you use this effect with an image or Picture you add to your blog the image will change to differant image once you hover your cursor over it.It's also a very easy to use and can have so many uses.

Here's a preview of a rollover image, Place your cursor over the image to see it change:

The image is also a clickable link so you can use it as a link on your blog.

More Examples : Kate the author of Cronicles Of A Country Girl has used this effect to display two versions of photos.In her words "Basically, what I wanted to show on my blog was the original photo, but if you move your mouse over it, you’d be able to see the SOOC version. (SOOC means Straight Out Of Camera). "You can check out how the results here - Kates Mouseover Images

Making Rollover Effect Image

This is the code we use to make the image.

<a href="TARGET URL GOES HERE"><img onmouseout="this.src='URL OF FIRST IMAGE GOES HERE'" onmouseover="this.src='URL OF SECOND IMAGE GOES HERE'" src="URL OF FIRST IMAGE GOES HERE" />

You now need to customize the code by adding the images you want to use and the address you want it to lead to when clicked.

In the above code change the following:

1.TARGET URL GOES HERE

Place the address you want the image to lead to when it's clicked.
Example : http://www.spiceyupourblog.com

2.URL OF FIRST IMAGE GOES HERE (x2)

Place the URL of the first image here this is the image shown before you hover over it.
Example: http://i941.photobucket.com/albums/ad259/spiceupyourblog/info.jpg

3.URL OF SECOND IMAGE GOES HERE
Place the URL of the second image there, this is the image that appears when your cursor hovers over it.
Example : http://i941.photobucket.com/albums/ad259/spiceupyourblog/Blogger-2.png

Once the changes are made your done you can place the image in your blog posts/sidebar or anywhere html can be used.

Drop Your Comments And Questions Below.

Read More...