Yahoo! Tips N Tricks: New Blogger Tips

Showing posts with label New Blogger Tips. Show all posts

Tuesday, February 3, 2009

Free Image Button Rollovers

Flickering scenarios

Its quite some time now I had the problem that whenever we use Image buttons for some of the graphic oriented sites the biggest problem we used to face is when ever we specify different image for the hover effect the first hover used to take very long ( unless you had servers as fast as Google ).

The solution to the above problem was done in a very tricky way of loading the images when the body load's and this use to save us from such delayed hover problem but when you have quite a few buttons the solution slows down the page load and so it was not a good alternative to the first hover flicker.

Solution

I have manged to get a permanent solution to this problem and I would like to share them with you here. The same solution is used on many sites including YouTube.

First you have to create and Image which has all the button states like Normal / Hover / Visited.

Also I prefer to have all my buttons into one image so that it reduces the loading time of small images.

Now you have to create CSS using the above Image. The dimension of the buttons is 130x40 and I have attached the well sliced PSD for your reference.

The code

Code: CSS

< type=""text/css" >

.NavigationMenu ul li{

    margin:0px;

    padding:2px;

    float:left;

    list-style:none;

    text-indent:-9999px;

}

.NavigationMenu ul li a#g4ef{

    position:relative;

    display:block;

    width:130px;

    line-height:40px;

    background:url(btnbg.gif) no-repeat 0px -40px;

}

.NavigationMenu ul li a#g4ef:hover{

    background:url(btnbg.gif) no-repeat 0px 0px;

}

.NavigationMenu ul li a#home{

    position:relative;

    display:block;

    width:130px;

    line-height:40px;

    background:url(btnbg.gif) no-repeat -130px -40px;

}

.NavigationMenu ul li a#home:hover{

    background:url(btnbg.gif) no-repeat -130px 0px;

}

< /style >

The CSS code is self explanatory but still I would prefer to describe the use of each of the styles.

NavigationMenu ul li

We would make the list in the NavigationMenu class change with content not getting displayed as we would use text in the images.
NavigationMenu ul li a#g4ef

This is one of the id of our navigation menu where for link we specify the location of the background, width and height.
Code: CSS
```
width:130px;

line-height:40px;

background:url(btnbg.gif) no-repeat 0px -40px;
```
NavigationMenu ul li a#g4ef:hover

When anybody hovers we change the position of the background.
Code: CSS
```
background:url(btnbg.gif) no-repeat 0px 0px;
```
NavigationMenu ul li a#home

This would be the second menu item for our menu and here also we specify the same things but just changing the position of the background with respect to our image.
Code: CSS
```
width:130px;

line-height:40px;

background:url(btnbg.gif) no-repeat -130px -40px;
```
NavigationMenu ul li a#home:hover

Repeat the same for hover of our home menu.
Code: CSS
```
background:url(btnbg.gif) no-repeat -130px 0px;
```

Now all you have to do is put the following into the HTML File

Code: HTML

<> class="NavigationMenu" > 

    <>

        <><> href="http://www.go4expert.com/" id="home" >Home< /a >< /li >

        <><> href="http://www.g4ef.com/" id="g4ef" >g4ef< /a>< /li>

    < /ul>

< /div>

and you are done.

Points to Note

If we want to have text on the Images we need to move the content of the actual li to place where its not visible.
We need to have the HREF tag as the content as thats the only tag in CSS which allows hover effect.

http://i710.photobucket.com/albums/ww102/king_raavanan/5xaT5Afk6X.gif

How To Post HTML Code In Your Blog Posts

We all hope that Blogger will soon evolve out of the stone age and provide bloggers with the ability to wrap blocks of html, c, java, et. al. in tags for automatic entity conversion and formatting. Unfortunately, that has yet to happen and you will have to escape your HTML code by hand. Or not... There are several free HTML escapers floating around the net and I have even tried my hand at putting together one for my own use. What has to happen to display HTML code in a Blogger post is that all "<" and ">" characters need to be replaced with their HTML entity equivalents "<" and ">".

Separate WordPress Comments and Trackbacks

With all the WordPress themes available to WordPress users, it always surprises me how these incredible theme authors don’t take a few extra seconds to separate their theme’s trackbacks from the comments. It doesn’t look very professional and it can make it extremely difficult to follow a conversation in the comments.

Separating your trackbacks and comments requires a minimal amount of coding work to set up. First, you’ll want to make a backup of your comments.php file just in case something goes wrong. Next, follow these three steps:

1 ) Access your comments.php file and locate the following code:

< ?php foreach ($comments as $comment) : ? >

Immediately after the above code, you’ll want to place this code:

< ?php $comment_type = get_comment_type(); ? > < ?php if($comment_type == 'comment') { ? >

2 ) Next, you’ll want to scroll down a little bit and locate the following code:

< ?php endforeach; /* end for each comment */ ? >

Immediately before the above code, you’ll want to place this code:

< ?php } /* End of is_comment statement */ ? >

This will filter out all of the trackbacks and pingbacks from your main comments loop. Now we need to create a second comments loop to display the trackbacks and pingbacks.

3 ) Almost immediately below the code from step 2 you should find this code:

< ?php else : // this is displayed if there are no comments so far ? >

Immediately before the above code, you’ll want to place this code:

<>Trackbacks <> < ?php foreach ($comments as $comment) : ? > < ?php $comment_type = get_comment_type(); ? > < ?php if($comment_type != 'comment') { ? > <>< /li > < ?php } ? > < ?php endforeach; ? > < /ol >

You can adjust this code to display how you want to, including using a different header if you have a specific look for your header 3.

Top 20 Blogger Templates Of 2008

In 2008 we saw a surge in the quantity and sheer quality of free Blogger templates made available for us to download. Now that designers are turning their attention towards designing for this free blogging system, we can only expect this trend for increased quality to extend far into the new year.

Over the past twelve months I've published several posts offering collections of free Blogger templates for you to download. However, there are certain templates which are simply outstanding: the cream of the crop, which have proved their worth as the best Blogger templates of 2008.

Here is my personal selection of the 20 best Blogger templates from 2008 (in no particular order or preference!) with previews and links to their download sites. I hope you will enjoy browsing through these templates if you are searching for an ideal template for your blogging project or simply to be inspired by great design.

The Daily Inspired by Woork

Antonio Lupetti's fabulous design is exclusively available for use with Blogger templates. Featuring a magazine style layout with many useful features, this clean and professional design provides the perfect canvas for business, design and magazine style blogs.

I must point out that this template is an advanced layout, and you will need to be familiar with the Blogger and HTML code if you intend to use this as much editing is required for this template to function properly. In any case, this is one of my favorite templates ever created for Blogger, and I'm sure most of you will love this design as much as I do too!

View this template in action | Download The Daily Inspired Blogger template

Dreamwork Redux (Converted by JackBook)

This stunning template is a conversion of the Wordpress template by Vinh Le and includes many useful customizations. The footer section is fully widgetized while the sidebar contains integrated widgets for recent posts and comments.

I loved the original striking style of the original Wordpress theme so I personally was thrilled to see this template ported over to Blogger!

View this template in action | Download Dreamwork Redux template for Blogger

Notepad Chaos (Converted by GosuBlogger)

Here is a truly stunning, grunge style design which was converted from the Wordpress theme distributed through Smashing Magazine.

Besides the stunning header section, this design offers styling of appropriate widgets in the sidebar; tabs for the date headings, and an informational section in the footer.

GosuBlogger has done a great job of this conversion to ensure no functions have been lost in the conversion and that new widgets can be added with just a few clicks.

View this template in action | Download the Notepad Chaos Blogger Template

Color Paper (Converted by Falcon Hive)

This dark grunge style template is made to appear printed on colored paper. It features a fully widgetized sidebar, integrated search function and tabs for the date headings.

I've only recently discovered Alvaris Falcon's beautiful selection of Blogger templates but I'm sure his talents will spread his fame as a Blogger template designer throughout this next year!

View this template in action | Download Color Paper Blogger Template

Creative Art (Converted by GosuBlogger)

Here is another stunning Blogger template by GosuBlogger which is converted from the Wordpress theme by DT Website Templates.

This template uses a striking background image for the header section, tabs for navigation, an integrated Flickr photostream and fully widgetized sidebar.

Preview this template | Download the Creative Art Blogger template

Revolution Theme for Blogger (Converted by Aborregate)

Brian Gardner's themes for Wordpress are among the most popular available and virtually revolutionized the WP theme market. Aborregate's conversion of the classic Revolution theme for Blogger provices a highly useful, functional and customizable layout with an air of professionalism which makes it ideal for the business minded blogger.

This theme includes tabbed navigation in the sidebar, a three column layout and stylized icons for post meta data.

Aborregate's site seems to be down at the moment, so instead I have provided links to the demo and download locations on BTemplates.com (the premier collaboration site for free Blogger templates).

Preview this theme | Download Revolution for Blogger

WP Polaroid (Converted by eBlog Templates)

Since it's release in January last year, the WP Polaroid conversion of Adii's Wordpress theme has proved one of the most used Blogger templates ever - and for good reasons! This wide two column template is the ideal solution for a portfolio or showcase site, with space in the header section for information about the site, integrated ads above the sidebar and a sllit widgetised sidebar section with custom images for each heading.

View live demo | Download WP Polaoid for Blogger

Zinmag Remedy (Converted by Falcoln Hive)

This is a truly stunning template when seen live in action. Converted from the template designed by Jinsona Design, this layout features a fantastic slideshow below the header (great for showcasing feature posts), a truly magazine-style layout and even a video section on the home page.

Please do take a look at this template in action as I personally am awed at the excellent job Alvaris has made with this conversion for Blogger! This screenshot does not give justice to the excellent functions included in this design!

View live demo | Download Zinmag Remedy template for Blogger

Angel (Converted by Hajunik)

This beautifully simple theme was converted from the Wordpress template by Blog Oh Blog and offers a clean yet professional layout with tabbed navigation in the sidebar, icons for lists and stylish icons throughout.

View live demo | Download this template

Wordpress Fun (Converted by GosuBlogger)

Here is another template offering a definite "WoW" effect! Origanally created by Malleika Attawel for Smashing Magazine, this template features a stunning header image and colorful layout with plenty of room for all your favorite widgets.

View live demo | Download this template

Butterfly (Converted by Blogger Tricks)

This beautiful template features a stunning vector style header and two column sidebar for your widgets and advertisements and was converted from the original theme by Templates4All.

Although this theme offers simple functions, the beauty fo the design has ensured this template is a popular choice for Blogger users.

View live demo | Download Butterfly template for Blogger

Masinop (Converted by Falcon Hive)

Here is another amazing template conversion by Alvaris of Falcom Hive. Featuring a colorful bar set against a dark grey background, this template offers a professional yet wholly useful approach for Blogger template design.

The sidebar is fully widgetised with an integrated search bar and a section for important blog links, while the footer offers space for advertising or an "About this site" paragraph.

View live demo | Download Masinop for Blogger

Wordpress Admin (Converted by ThemeLib)

Here is an unusual and wholly elegant theme conversion from ThemeLib. This Wordpress Admin styled template is designed to mimic the Wordpress dashboard while offering a fully useful approach to the Blogger layout. I love the simplicity and professional style of this theme, and those icons for comment counts of each post are the perfect finishing touch.

View live demo | Download Wordpress Admin Blogger template

Squick Design (Converted by Blog and Web)

This elegant design was converted from the original template by Web Page Design and offers a clean, vector style layout with space beneath the header for your company motto or introduction.

View live demo | Download Squick Design Blogger template

Japanese Fleur (Converted by ThemeLib)

This beautiful template features a two column layout, integrated RSS feed icon and search functions. It was converted from the Wordpress.org theme by Lorelie and offers a beautiful template for those wanting a feminine approach to their design.

View live demo | Download Japanese Fleur Blogger template

Japan Style (Converted by Falcon Hive)

Here is another stunning design which has been converted by Alvaris Falcon. This stunning layout offers a Japanese theme with a wonderful background image for both the header and footer sections.

It offers integrated navigation buttons, feed subscription link and search in the sidebar. I'm sure you will agree this is a truly beautiful Blogger template!

View live demo | Download Japan Style Blogger Template

Emo Blue by ZixPk

This original Blogger template is a dark and sleek design which features a subtle grunge design. It is a three column layout with integrated feed links and search function and is fully widgetized.

View live demo | Download

Welcome Autumn by Gisele Jaquenod

Gisele's templates are always beautifully designed (just take a look at her blog to see the best examples). This autumn themed template features the familiar "Birdy" character above the sidebar and it's neutral color scheme enables this template to be used for a whole variety of blog niches.

Read more and download the Welcome Autumn template for Blogger

Made in Spain (via BTemplates)

According to the statistics from BTemplates.com - the leading resource site for free Blogger template downloads - the Made in Spain template is among the most popular Blogger templates of all time, boasting almost 20,000 downloads from BTemplates alone at the time of writing.

This two column template offers a notebook style appearance, tabbed navigation to the left of the main section (made to appear like post-it notes) and a fully widgetized sidebar.

View live demo | Download the Made in Spain template for Blogger

DfMarine (Converted by TemplatesNovoBlogger)

Here is a sleek and professional template which was converted from the original theme by Deziner Folio.

It features a stylish three column section for links/bookmark icons below the header, a fully widgetized sidebar, calendar icons and much more.

View live demo | Download DfMarine Blogger Template

Bonus!

Here is another AMAZING template which I'd forgotten to add to this list (thank you Daniel for reminding me!)

Cellar Heat (Converted by MagzNetwork)

This fabulous template displays posts in rows of three, side by side on the home page, while on item pages the posts are expanded to fill the main area. It includes a single sidebar to the right of the posts column and three widgetized sections in the footer area.

Originally created by Evan Eckard for Smashing Magazine, I am awed by the wonderful conversion made by Magznetwork and truly recommend this template for those who desire an edgy, grunge style theme.

View live demo | Download Cellar Heat Blogger Template

Overview

While some of these templates may be familiar from my previous Blogger template articles, I've only recently discovered most of these templates and feel it only fair to share the best of my discoveries with you.

There are dozens more beautiful Blogger designs I have encountered over the past year and this is my personal selection of favorites. So if you feel I've left out an outstanding design or would simply like to share your own favorite designs, please feel free to discuss this in the comments below.

Your Name :
Your Email :
Subject :
Message :
Image (case-sensitive):

Message Box

Linkbar

Tuesday, February 3, 2009

Made in Spain (via BTemplates)

Bonus!

Overview

Leave a Comments !

Chat Room

Search Tips N Tricks

Sponsos's

Contact Author !

Site Translate

Blog Archive

Subscribe To

Popular Articels

What ' s Your Favourite Browser ?

Disclaimer

Admin - RaaVaNaN

Recent Comments

Labels

Recent Updates!

Chat With Me !

Followers

Free Sms !