Two CSS vertical menu with show/hide effects

CSS menu and "Web 2.0" transition effects are topics very popular on my site and in general I receive a lot of code requests about these arguments.

So I wrote this simple tutorial with two vertical menu examples with show/hide menu effect. First example uses a simple JavaScript code. Second example uses mootools to show/hide the menu with a nice vertical slide-in/slide-out effect.

Download the source code (it includes mootools framework) and take a look at the live preview to see how they woork.

Download this tutorial Live preview

1. Menu with simple show/hide effect
Step 1.1: HTML Code
This is the basic example with a simple show/hide effect which you can implement just with some lines of JavaScript code (see next step). Our menu is a <ul> list wih a button (link) which calls a simple javascript function showElement() in the next step. HTML code is the following and you can customize it how you prefer simply changing the CSS code in the source file:

<a href="#" class="button" onclick="javascript:showElement('v-menu')">
<span>Click Here</span>
</a>
<ul id="v-menu" class="v-menu" style="display:none;">

<li><a href="p1.html">Technology</a></li>
<li><a href="p2.html">Design</a></li>
<li><a href="p3.html">Css Gallery</a></li>
<li><a href="p4.html">Entertainment</a></li>
<li><a href="p5.html">Programming</a></li>

</ul>

Remember to add the property "display:none" in the ul element to hide the menu when an user load the page (it will appear only when an user clicks on the button).

1. Menu with simple show/hide effect
Step 1.2: JavaScript function
Now, in the head tag of the page, add this simple script to show/hide a generic HTML element using CSS display property:

<script type="text/javascript">
function showElement(layer){
var myLayer = document.getElementById(layer);
if(myLayer.style.display=="none"){
myLayer.style.display="block";
myLayer.backgroundPosition="top";
} else {
myLayer.style.display="none";
}
}
</script>

showElement() function take in input the ID of the HTML element you want to show/hide. When an user clicks the button and CSS display property is set to "none" (menu hidden) this script will set the property with a new value "block" (menu visible).


2. Menu with Mootools toggle effect
Step 2.1: HTML Code
This second example adds a nice vertical slide-in/slide out effect to our menu using Mootools toggle effect. HTML code is not so different from the previous example. You have:

<a href="#" class="button" id="toggle"><span>Click Here</span>
</a>
<ul id="v-menu" class="v-menu">

<li><a href="p1.html">Technology</a></li>
<li><a href="p2.html">Design</a></li>
<li><a href="p3.html">Css Gallery</a></li>
<li><a href="p4.html">Entertainment</a></li>
<li><a href="p5.html">Programming</a></li>

</ul>

... You have only to add an ID to the button which show/hide your menu. It's not necessary to add the property "display:none" I used in the previous example in <ul> to hide the menu when an user loads the page the first time. You can do it using mootools hide() function (see the next step).


2. Menu with Mootools toggle effect
Step 2.2: JavaScript/Mootools code
Now, first of all, add a link to mootools framework in the tag of your page using this line of code:

<script type="text/javascript" src="mootools.svn.js"></script>

... ..and the following script immediately below the previous code:

<script type="text/javascript">
window.addEvent('domready', function(){
var myMenu= new Fx.Slide('v-menu2');
myMenu.hide();
$('toggle').addEvent('click', function(e){
e = new Event(e);
myMenu.toggle();
e.stop();
});
});
</script>

In this way when an user clicks on the button, your menu will appear/disapper with a nice vertical slide-in, slide-out effect. myMenu.hide(); funcion hides the menu when the page is loaded.


Customize your menu changing CSS code
You can change the look of my menu simply changing some lines of CSS code:

Download the source code and take a look at the live preview to see how they woork.

Download this tutorial Live preview

Read More

One shot, one kill: how to become popular with (almost) each post you write on your blog

Do you need for traffic for your website? Take a look at these simple tips...

This post is dedicated to my readers that asked to me how I succeed in making "popular" a lot posts I published on Woork on delicious. There is a "simple" way to make popular your post and assure a costant high traffic on your site for a medium period conquering a place on delicious home page... and this is what you have to do.

Step 1: Write something interesting
...otherwise it's all useless.

Step 2: your link on delicious/popular page
If you want to conquer delicious home page with your new post, the first step is do appear your new post/link on del.icio.us/popular page:

How can you do it? It's not so difficult if you have a medium daily traffic and a god number of feeds subscribers. I noticed in average 10-12 votes on delicious (users who save your link to their bookmars) in 30 minutes are enough to do appear your link on delicious/popular page and - this is the good news - immediatly you'll receive a high number of new visits from this page.

The "bad" news is: if you want to remain for a long time on delicious/popular page page (and in this way have a possibility to conquer delicious home page) you have to mantain an increasing votes trend for your link. And how can you do it? The faster way is using social network to promote your new post.


Step 3: Publish it and promote it on social networks
In general I use this simple... let me say... "rule" which works very well: when I publish a post on Woork the first thing I do is add it to some general news sites (I use only digg, mixx, reddit) and other niche websites related to the topics about which I write on my blog (Dzone, Design Float and CSS Globe).

Combined effect in terms of visits from these websites produces in general the hoped result and the number of people who save your link on delicious will increase quickly. In this way after one / two hours your link on delicious will catch up 100 votes, enough to appears on delicious home page!

Read More

Blog Design Madness Round 2!

With big pleasure I won the first round of Blog Design Madness on vandelaydesign.com. I received a lots of votes (woork has been the most voted site in this contest!) and I want to say thanks to everyone who voted me.

Today started the second round and you can vote for woork at this link:
http://vandelaydesign.com/blog/competition/round-two/

Thanks!

Read More

Nice comments counter style for your blog post

Are you looking for an idea to restyle your comments counter on your blog?

This post illustrates how to design a nice comments counter for your blog post and obtain an elegant post header using just some lines of CSS code. This is the result:

You can download the source code and use it immediatly on your blog.

Download source code

Counter structure
The following picture explains how to design our comments counter:

We have a main DIV which includes a <span> element (with class attribute = "count") which displays the number of comments for the current post and, below it, the text "comments". I prepared this image to for the DIV background using Photoshop:


I'll apply this image to background attribute in the CSS definition.


HTML and CSS Code
This is our HTML code:

<div class="bubble">
<span class="count">... counter ...</span>
comments
</div>

...and this is the CSS code:

.bubble{

background:url(img/bubble.png) left top no-repeat;
color:#575553;
float:left;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
height:68px;
margin-right:20px;
padding-top:7px;
text-align:center;
width:70px;

}

.bubble .count{

font-family:Georgia, "Times New Roman", Times, serif;
font-size:24px;
color:#CC6600;

}

It's all! Nothing simpler :)

Read More

Vote Woork on Vandelaydesign.com

Guys, Woork partecipates to "Blog Design Madness" on Vandelaydesign.com. Please vote for me at the following link!

http://vandelaydesign.com/blog/competition/round-one-2/

Thanks! :))

Read More

Using CSS and Mootools to simulate Flash horizontal navigation effect

Some year ago I was a big Macromedia/Adobe Flash fan. Let me say... at that time, if you used Flash for your websites you was really cool and ok... I admit it, I liked the simplicity to place everything where I wanted and all fantastic animation effects I could obtain using Actionscript. But times change and I had a new "conversion" from FLASH to HTML when I discovered the CSS beauty. In particular using Flash I loved this kind of layout/effect: follow mouse sliding content.

Yesterday I asked to me how could obtain the same effect using CSS and HTML... So, I found an interesting solution at my question which I want to share with you. This tutorial explains how to use Mootools and pure CSS / HTML code to simulate a Flash (follow mouse) horizontal navigation effect.

You can download the source code (ready to use in your web projects) and see how this tutorial works using the following links:

Download this tutorial Live Preview


A little introduction
The following image explains the structure of this tutorial. You have a DIV layer (#container) which is the "visible mask" for all elements contained into the DIV .slide. All HTML elements outside the "borders" of the DIV #container are hidden (in this case section 4 and section 5). Section 1, Section 2... Section 5 are DIV layers with some HTML content you can customize how you prefer:

When you move your mouse to the right of the div #container, the DIV #slider with its content will move itself to the right. In this way section 1 and section 2 will move beyond the borders of the visible mask (#container) and they will be hidden:

HTML code
HTML code is very simple. First add a link to mootools framework in the <head> tag of your page using this line of code:

<script type="text/javascript" src="mootools.svn.js"></script>

...and the following script immediately below the previous code:

<script type="text/javascript">
window.addEvent('domready', function(){
var scroll = new Scroller('container', {area: 100, velocity: 1});
$('container').addEvent('mouseover', scroll.start.bind(scroll));
$('container').addEvent('mouseout', scroll.stop.bind(scroll));
});
</script>

Now, add this code in the <body> tag:

<div id="container">

<div class="slider">
... add some HML sections here...
</div>

</div>

...and you can add some sections simply adding some DIV layers into the DIV #slider:

<div id="container">

<div class="slider">

<div class="section">section 1 content</div>
<div class="section">section 2 content</div>
<div class="section">section 3 content</div>
<div class="section">section 4 content</div>
<div class="section">section 5 content</div>

</div>

</div>

Ok... now the only thing you have to do is free your creativity to design your sections using CSS and images.

CSS code
CSS code for the main structure is the following (take a mind you can customize this code how you prefer, but the only attributes you have not to change are overwlow attributes of the ID #container):

#container{

width: 780px;
height: 440px;
border: 8px solid #FFF;
overflow: auto;
margin: 0 auto;
overflow-x: hidden;
overflow-y: hidden;

}

.slider{

width: 2000px;
height: 400px;
padding: 20px;
background: #CCCCCC;

}

.section{

margin:0;
width:220px;
float:left;
margin-right:50px;

}

For a perfect result, the height attribute of #container must be equal to the sum of height + padding of the class .slider. The width attribute of the class .slider have to be a value greater than #container width.

You can customize the .section class changing the width, the background color and all other parameters you want.

It's all! Download the source code and try it!

Download this tutorial Live Preview

Read More

CSS Message Box collection

Message boxes are useful elements to display status messages after or during a specific user request.

Some days ago I wrote this post about how to implement a nice Ajax chains of effects (fade in, delay, fade out) for a common message box using mootools. Today I want to share with you a collection of some simple CSS styles you can apply to your message boxes (clean, solid, iconized, alternated rounded borders, tooltip).

I added also a link to download a beautiful icon pack to use in your projects to design custom message box or other graphic elements.

Download message box collection source code


Clean message box
I love clean and simple design and in general this is my preferred message box style: a border (1px) and a light background color:

HTML code is very simple:

<div class="clean-gray">Clean message box</div>

...a DIV layer with with some text within. And CSS code is something like this:

.clean-gray{

border:solid 1px #DEDEDE;
background:#EFEFEF;
color:#222222;
padding:4px;
text-align:center;

}

I suggest you to use "pastel" color for the background color and a darker color for the text.


Iconized message box
This is another box style I like. A simple box with an icon in background which describe visually the "event" it represents (ok, error, alert...):

HTML code is the same you saw in the previous example:

<div class="clean-gray">Clean message box</div>

...and the related CSS code is:

.icon-heart{

border:solid 1px #DEDEDE;
background:#FFFFCC url(img/icon-heart.png) 8px 6px no-repeat;
color:#222222;
padding:4px;
text-align:center;

}

If you are looking for nice icons I suggest to download this beautiful icon pack (Sweetie Pack). This is a preview of the content:

Download Sweetie Icon Pack 1 Sweetie website

You can use it to design your iconized message box or, for example, CSS buttons and other graphic elements for your web projects.


Solid message box
Nothing simpler: a message box with no borders and with text color in contrast with the background color:

HTML code is:

<div class="solid-green">Solid message box green</div>

...and CSS code is:

.solid-green{

background:#008000;
color:#FFFFFF;
font-weight:bold;
padding:4px;
text-align:center;

}

...choose the background color you prefer!


Alternated rounded borders message box
This is anoter nice solution with alternated rounded borders (top-left, bottom-right). The box adapts automatically the rounded borders position with its width and height:

HTML code is the following:

<div class="round-a-gray"><div>Alternated rounded borders message box</div></div>

...a DIV layer inside the main DIV layer with "round-a-gray" class. CSS code is:

.round-a-gray{

background:#444444 url(img/round_gray-left.png) left top no-repeat;
color:#FFFFFF;
text-align:center;

}
.round-a-gray div{

background:url(img/round_gray-right.png) right bottom no-repeat;
padding:4px;

}

Solid tooltip message box
This is a classic. A tooltip message box:

HTML is the following:

<div class="tooltips-gray">Solid message box<div></div></div>

...and CSS code is:

.tooltips-gray{

background:#444444;
color:#FFFFFF;
text-align:center;
padding-top:4px;

}
.tooltips-gray div{

background:url(img/tips_gray.png) left bottom no-repeat;
padding-top:4px;
height:18px;

}

You can yse the image you prefer to simulate the "arrow" for your tooltip.

Download the source code (HTML+CSS)

Download message box collection source code

Read More

Custom search engine on your Blogger template

Improve your Blogger template adding search form.

I found this code on http://blogger-templates.blogspot.com but I received some emails from other people who said me the original code it's their. I'll add other credits in the comments of this post.

Today I received many questions about how to add the same search engine form I added on my Blogger Template. You only have to add these lines of code on your template changing the form action URL with the URL of your site:

<form action='http://yoursite.blogspot.com/search' method='get'>
<input name='q' size='24' type='text'/>
<input name='submit' type='submit' value='search'/>
<input name='max-results' type='hidden' value='4'/>
</form>

The input hidden field "max results" set the number of results you want to display on your page after a search.

<input name='max-results' type='hidden' value='4'/>

I set it to 4 but you can change it how you prefer. I suggest don't use a number greater than 10 post for page otherwise the results page will be loaded slowly.


Related Content
Some Blogger Tips you probably don't know
Blogger Hack: add social buttons to increase your traffic

Read More

XHTML IT convert your design into a valid W3C web standard

XHTMLiT is a InterDevil Company specialized in developing websites in HTML4, XHTML Strict 1.0 and CSS 2.1/3.0 for small to large businesses which offers designers, developers and other majority of clients with a unique and easy conversion service, by converting client's design into a Hyper-Text Markup Language (XHTML) usually within 8 business hours but some times you will receive your design in 4 hours or even less.

If you are a web designer, when your graphical design is finished and ready to be implemented you can simply click on get started and fill out the short order form. Every package and every order include:

-Web Standards compiant (W3C Valid XHMTL and W3C Valid CSS) coding conversion
- Markup that works with all well known browsers and search engine friendly
- 50% Discount provided on additional pages, must be similar to first page
- 100% Satisfaction Guaranteed and Friendly Staff
- Free delivery and 30 days support from day of xhtml delivery
- Proper organized and structured XHTML and CSS
- Images are sliced with details and optimized for quality
- Fast and Reliable turn-around just under 8 business hours
- Everything is Hand Coded, No Software or Special Tools, just our hands and fingers

XHTMLiT has covered over a 5000 clients and offers special discounts to clients who would like to settle in and have more then 5 projects per month. They are always available no matter what time of the day it is and its staff is always able to answer questions at any time of the day.

You can find a collection of their works here.

Take a look at this link:

XHTMLiT


Related post
Get a review for your site

Read More

Clean Tab Bar Digg-like using CSS

Do you like Digg comments tabbed bar with sliding doors effect for each tab?

This tutorial explains how to design a clean Tab Bar (Digg-like) with rounded tabs (liquid width) using CSS and just one background image to manage all status for each tab (standard, active, hover). The result is something like this:

Download the source code ready to use in your projects:

Download this tutorial


Tab bar anatomy
Before illustrating the code, a little explanation about our Tab Bar. How you can see in this image, whe have three main elements:

- Active element (Home)
- Standard tab (Community, Messages, Contact)
- Hover element (Blog)

Each element has rounded corners and adapts its width to the text conteined inside it.

Ok, if this is clear how can you do it using CSS and HTML? A good way to implement it is using a <span> element within an <a> element and apply to both elements a background image with rounded corners:

Take a look a this post for more infos about rounded corners in liquid elements for a better explanation about this topic.

Background image with rounded corners
How I said some row above, we'll use just one background image to manage active, standard, hover tab status. The image is the following:

We'll use position properties for CSS background attribute to change the state of each tab (active, standard, hover) in this way:

- Active, background top position: top
- Standard, background top position: 30px
- Hover, background top position: 60px

HTML Code
HTML code for each tab will be something like this:

<a href="community.html"><span>Community</span></a>

... and in this specific case each tag is a <li> element of an <ul> list:

<li><a href="community.html"><span>Community</span></a>>/li>

How you can see, HTML is a simple list:

<ul class="tab">
<li class="active"><a href="home.html"><span>Home </span></a></li>
<li><a href="community.html"><span>Community </span></a></li>
<li><a href="blog.html"><span>Blog </span></a></li>
<li><a href="messages.html"><span>Messages </span></a></li>
<li><a href="contact.html"><span>Contact </span></a></li>
</ul>

When you want an element set to active, you have to add the class "active" to the list element (in bold in the previous code).

CSS code
CSS is a little more complex respect HTML code, but no fear is not so difficult to understand:

ul, li{border:0; margin:0; padding:0; list-style:none;}
ul{

border-bottom:solid 1px #DEDEDE;
height:29px;
padding-left:20px;

}
li{float:left; margin-right:2px;}

.tab a:link, .tab a:visited{

background:url(img/tab-round.png) right 60px;
color:#666666;
display:block;
font-weight:bold;
height:30px;
line-height:30px;
text-decoration:none;

}
.tab a span{

background:url(img/tab-round.png) left 60px;
display:block;
height:30px;
margin-right:14px;
padding-left:14px;

}
.tab a:hover{

background:url(img/tab-round.png) right 30px;
display:block;

}
.tab a:hover span{

background:url(img/tab-round.png) left 30px;
display:block;

}

/* -------------------------------- */
/* ACTIVE ELEMENTS */
.active a:link, .active a:visited, .active a:visited, .active a:hover{

background:url(img/tab-round.png) right 0 no-repeat;

}
.active a span, .active a:hover span{

background:url(img/tab-round.png) left 0 no-repeat;

}

It's all. Ready to use in your projects, if you want only changing the background image to adapt it to your custom layout.

Download this tutorial

Read More

Blog Perfume, WordPress blogs with themes, plugins and Blogging Resources

Blog Perfume is a great place on-line where you can find all the best WordPress related resources.

You can find templates, plugins, tools, tips to monetize your blog and more other useful informations to make your blogger life a lot easier. If you are a pro-blogger or a newbie Blog Perfume is a good start point to help you make a successful blog.

Feed Analysis Tool
Blog Perfume provides the best on-line tool I never used to analyze myFeedburner Feeds: BlogFeed Analysis. This application provides a detailed report with charts number subscribers for month, daily hits, views and clicks, total subscribers for week day, number of predicted subscribers after three months, and other interesting functions such as estimated value for one Banner ADS on your site and the worth of your blog.

You can also share your Feed Analysis report with your clients, your advertisers or your readers using a link like this:

http://www.blogperfume.com/feed-analysis/?uri=http://feeds.feedburner.com/Woork

Take a look at this link:

Blog Perfume


Related post
Get a review for your site

Read More

Explicit porn advertising on Technorati (part 2)

Some days ago I published this post about some explicit porn ads on Technorati. Today I received this email from Max Gideon (Advertising Operations Manager at Technorati) which said:

Hi,

We would like to inform you that we've had a recent issue with an advertiser serving adult ads on our site. We do not allow ads of this sort and have stopped all advertising with this company. Technorati strives to serve high quality, family friendly advertising and we take any violation of this very seriously.

If you see any adult advertising in the future please do not hesitate to email me personally.

Thank you,

Max

mgideon at technorati.com

Thanks Max for your reply.

Read More

Market Hero, online indian stock game

MarketHero is the first free Web 2.0 game based on India's stock markets.

Anybody can sign up and start with a million Indian Rupees in a virtual portfolio ready to trade equities with real prices like a millionaire.It's in public alpha right now and will be rolling out new features and enhancements on a weekly basis. Once the site releases out of alpha, there will be monthly prizes for the biggest winners.

The founders' aim is to bring the Indian markets to the global public and to simplify some of its more complex features. The site uses AJAX to make finding and trading stocks extremely quick. What previously took 3-4 clicks is accomplished with just a single click on MarketHero. Beginners can also leverage the community's knowledge by following tips and the latest chats. If they find an user who is turning into a real market hero, they can fave that user and also add him/her as a friend.

Built by a dedicated team the startup's primary focus is how to create a deeper social connection between the people who know and do not know about trading and the share market. Using Rails as it's core the site has a lightweight feature set to be agile enough to tailor itself to it's users' feedback. There's a lot more coming very soon.

MarketHero


Related post
Get a review for your site

Read More

Stockvault.net, free stock photos and free images

Stockvault.net is a great stock photo sharing website with over 9.400 free stock photos where photographers, designers and students can share their photographs and images with each other.

All images are free for personal and education project (non-commercial usage), organized in several categories such as animal, nature, people, industrial, to help you to find immediatly what you are looking for.

Tutorials and videos
Stockvault.net is not only a place where to share your photos but also a perfect resource where to find all informations you need about photography and other related topics. Tutorial and Articles sections contain useful tips about how to obtain the better result form photo editing using Photoshop.

The video section contains a lot of videos useful to learn all photography secrets such as how to photograph a model, how to prepare a studio photography at home, working with lights, wedding photography etc, in a fast and simple way.

Membership
All Stockvault.net contents are available for free but if you want to access to extra features such as lightbox, photo rating, e-mail photo you can subscribe a membership account (for free or with a little donation).


Stockvault.net


Related post
Get a review for your site

Read More

Perfect pagination style using CSS

This tutorial explains how to design a pagination for search results or more in general to split a long list of records in more pages. It's a question I often receive, so I decided to publish a very simple post which explains how to design a perfect pagination style using some lines of HTML and CSS code.

This tutorial also includes HTML/CSS code to implement a Flickr-like, Digg-like, Clean pagination style ready to use in your web projects.

Update as March 17, 2008: My friends Simone Saveri solved some issuse with IE6 and IE7.

Download this tutorial (original)

Download this tutorial (Simone Saveri version)



Typical pagination structure
The following image represents an example of a typical pagination structure:

In general you can identify four main elements:

- Previous/Next button (disabled)
- Current Active page
- Standard Page selector
- Previous/Next button (enabled)

You can design this structure using an HTML list (<ul>) which contains some <li> elements (one for each pagination element) and apply an ID to the <ul> list to assign a specific pagination style to the current list. Take a look at these tutorials for an explanation.


Flickr-like pagination: HTML Code
Image you want to design a Flickr-like pagination style which looks like this:

HTML code is very simple and you can reuse this structure in all pagination-style you want only changing the <ul> ID (in this case I added "pagination-flickr", in bold in the code below):

<ul id="pagination-flickr">

<li class="previous-off">«Previous</li>
<li class="active">1</li>
<li><a href="?page=2">2</a></li>
<li><a href="?page=3">3</a></li>
<li><a href="?page=4">4</a></li>
<li><a href="?page=5">5</a></li>
<li><a href="?page=6">6</a></li>
<li><a href="?page=7">7</a></li>
<li class="next"><a href="?page=2">Next »</a></li>

</ul>

Now, you have only to redefine CSS element properties (ul, li, a).


Flickr-like pagination: CSS Code
Is very simple:

ul{border:0; margin:0; padding:0;}

#pagination-flickr li{

border:0; margin:0; padding:0;
font-size:11px;
list-style:none;

}
#pagination-flickr a{

border:solid 1px #DDDDDD;
margin-right:2px;

}
#pagination-flickr .previous-off,
#pagination-flickr .next-off {

color:#666666;
display:block;
float:left;
font-weight:bold;
padding:3px 4px;

}
#pagination-flickr .next a,
#pagination-flickr .previous a {

font-weight:bold;
border:solid 1px #FFFFFF;

}
#pagination-flickr .active{

color:#ff0084;
font-weight:bold;
display:block;
float:left;
padding:4px 6px;

}
#pagination-flickr a:link,
#pagination-flickr a:visited {

color:#0063e3;
display:block;
float:left;
padding:3px 6px;
text-decoration:none;

}
#pagination-flickr a:hover{

border:solid 1px #666666;

}

Digg-like pagination: HTML Code
Ok, now you want to design a Digg-like pagination style which looks like this:

From the previous tutorial copy and paste the HTML structure. You have only to change the <ul> ID ("pagination-digg" instead of "pagination-flickr"):

<ul id="pagination-digg">

<li class="previous-off">«Previous</li>
<li class="active">1</li>
<li><a href="?page=2">2</a></li>
<li><a href="?page=3">3</a></li>
<li><a href="?page=4">4</a></li>
<li><a href="?page=5">5</a></li>
<li><a href="?page=6">6</a></li>
<li><a href="?page=7">7</a></li>
<li class="next"><a href="?page=2">Next »</a></li>

</ul>

Digg-like pagination: CSS Code
CSS code is very similar to the previous Flickr-like example.You have only to change some attributes, and modify #pagination-flikr ID with #pagination-digg, but CSS pagination elements don't change:

ul{border:0; margin:0; padding:0;}

#pagination-digg li{

border:0; margin:0; padding:0;
font-size:11px;
list-style:none;
margin-right:2px;

}
#pagination-digg a{

border:solid 1px #9aafe5
margin-right:2px;

}
#pagination-digg .previous-off,
#pagination-digg .next-off {

border:solid 1px #DEDEDE
color:#888888
display:block;
float:left;
font-weight:bold;
margin-right:2px;
padding:3px 4px;

}
#pagination-digg .next a,
#pagination-digg .previous a {

font-weight:bold;

}
#pagination-digg .active{

background:#2e6ab1;
color:#FFFFFF;
font-weight:bold;
display:block;
float:left;
padding:4px 6px;

}
#pagination-digg a:link,
#pagination-digg a:visited {

color:#0e509e
display:block;
float:left;
padding:3px 6px;
text-decoration:none;

}
#pagination-digg a:hover{

border:solid 1px #0e509e

}

Clean pagination style: HTML Code
If you like minimal, clean design this example shows how to design a very clean pagination style which looks like this:

HTML structure is the same of two previous examples. The only thing you have to change is the <ul> ID with "pagination-clean":

<ul id="pagination-clean">

<li class="previous-off">«Previous</li>
<li class="active">1</li>
<li><a href="?page=2">2</a></li>
<li><a href="?page=3">3</a></li>
<li><a href="?page=4">4</a></li>
<li><a href="?page=5">5</a></li>
<li><a href="?page=6">6</a></li>
<li><a href="?page=7">7</a></li>
<li class="next"><a href="?page=2">Next »</a></li>

</ul>

Clean pagination style: CSS Code
CSS code for this kind of pagination style is:

ul{border:0; margin:0; padding:0;}

#pagination-clean li{

border:0; margin:0; padding:0;
font-size:11px;
list-style:none;

}
#pagination-clean li, #pagination-clean a{

border:solid 1px #DEDEDE
margin-right:2px;

}
#pagination-clean .previous-off,
#pagination-clean .next-off {

color:#888888
display:block;
float:left;
font-weight:bold;
padding:3px 4px;

}
#pagination-clean .next a,
#pagination-clean .previous a {

font-weight:bold;
border:solid 1px #FFFFFF;

}
#pagination-clean .active{

color:#00000
font-weight:bold;
display:block;
float:left;
padding:4px 6px;

}
#pagination-clean a:link,
#pagination-clean a:visited {

color:#0033CC
display:block;
float:left;
padding:3px 6px;
text-decoration:none;

}
#pagination-clean a:hover{

text-decoration:none;

}

Download this tutorial

Read More