Haseebzone template: June 2008

Monday, 30 June 2008

Blogger Tips: feeds RSS list menu

Some readers asked to me ho to add the feed RSS menu in my previous post in their Blogger template.

It's very simple and no complex following these simple instructions. (I added this menu on my template... click on the Feed Rss link on my navigation bar).

Step 1: CSS Code for your menu
I suggest you to use Dreamweaver or an external editor do modify your template (you can also use notepad). Copy and paste HTML code in the step 1 and add it where you want in the source code of your template. I changed CSS code of #rss-menu ID adding a position:absolute, and z-index=2 (to display above all other elements in the page)

/* -------------------------------- */
/* RSS MENU */
#rss-menu{
padding:10px;
padding-top:0px;
width:270px;
border:solid 1px #CCCCCC;
margin-top:10px;
font-size:11px;
position:absolute;
background:#FFFFFF;
margin-left: 446px; /* Change it with your custom distance from the left margin */
top: 82px; /* Change it with your custom distance from top */
z-index:2;
}

Step 2: images
If you want to use directly my images, change the css feed icons code with:

/* FEED ICONS */
.feed-yahoo{
background:url(http://lh5.ggpht.com/antonio.lupetti/
SGkbSeViXCI/AAAAAAAABq0/VKFk--P6rzg/s144/feed-yahoo.png) no-repeat;
}
.feed-newsgator{
background:url(http://lh6.ggpht.com/antonio.lupetti/
SGkZt949soI/AAAAAAAABqk/0K_xT635iWc/s144/feed-newsgator.png) no-repeat;
}
.feed-netvibes{
background:url(http://lh6.ggpht.com/antonio.lupetti/
SGkZsku-McI/AAAAAAAABqc/geaegB--2R0/s144/feed-netvibes.png) no-repeat;
}
.feed-bloglines{
background:url(http://lh6.ggpht.com/antonio.lupetti/
SGkZlVYv_1I/AAAAAAAABqM/HSGE2JRVGA8/s144/feed-bloglines.png) no-repeat;
}
.feed-xml{
background:url(http://lh4.ggpht.com/antonio.lupetti/
SGkZvPomXRI/AAAAAAAABqs/hXOtnqszlws/s144/feed-xml.png) no-repeat;
}
.feed-google{
background:url(http://lh4.ggpht.com/antonio.lupetti/
SGkZrkp8XCI/AAAAAAAABqU/Yp-Rb_1L98k/s144/feed-google.png) no-repeat;
}

You can also save these images in your Picasa web album which you can use to store all image to publish on your blog. If you need more infos about some blogger tips take a look at this my old post.

Step 3: Javascript to show/hide the menu
Add the javascript function in the step 3 in the <head> tag of your blogger template inside the <script> tag:

It's all! If you need for help, contact me :)

Download source code

Related Content
Nice CSS menu with feed reader icons list
Some Blogger Tips you probably don't know

Nice CSS menu with feed reader icons list

This tutorial illustrates how to design a nice CSS menu with a list of feed reader icons.

I added to this menu the following links: standard reader (your browser), My Yahoo, NewsGator, Bloglines, Netvibes and Google Reader. The result is something like this:

Download source code for the full code and icons.

Download this tutorial

Step 1: HTML Code
Create a <div> element with ID=rss-menu and add an header using <h2> tag and an unordered list using <ul> tag:

<div id="rss-menu">
<h2>Subscribe My Feeds</h2>
<ul>

<li class="feed-xml">
<a href="http://feeds.feedburner.com/Woork">Subscribe to RSS Feed</a>
</li>

<li class="feed-yahoo">
<a href="http://add.my.yahoo.com/rss?url=http://feeds.feedburner.com/Woork">Add to My Yahoo</a>
</li>

<li class="feed-newsgator">
<a href="http://www.newsgator.com/ngs/subscriber/subext.aspx?url=http://feeds.feedburner.com/Woork">Subscribe in NewsGator</a>
</li>

<li class="feed-bloglines">
<a href="http://www.bloglines.com/sub/ http://feeds.feedburner.com/Woork">Subscribe with Bloglines</a>
</li>

<li class="feed-netvibes">
<a href="http://www.netvibes.com/subscribe.php?url=http://feeds.feedburner.com/Woork">Add to Netvibes</a>
</li>

<li class="feed-google">
<a href="http://fusion.google.com/add?feedurl=http://feeds.feedburner.com/Woork">Add to Google</a>
</li>

</ul
</div>

How you can see from the code above, each feed reader link is contained into a <li> element:

I designed and used a background icon for each <li> element (using CSS), adding a short description. (ex. "Add to netvibes").

Step 2: CSS Code
I used a CSS class for each feed icons:

.feed-yahoo{
background:url(pic/feed-yahoo.png) no-repeat;
}
.feed-newsgator{
background:url(pic/feed-newsgator.png) no-repeat;
}
.feed-netvibes{
background:url(pic/feed-netvibes.png) no-repeat;
}
.feed-bloglines{
background:url(pic/feed-bloglines.png) no-repeat;
}
.feed-xml{
background:url(pic/feed-xml.png) no-repeat;
}
.feed-google{
background:url(pic/feed-google.png) no-repeat;
}

Download source code for full CSS code.

Step 3: Show/Hide Menu with Javascript
You can also add a javascript function to show/hide this menu in your page adding this simple javascript code in the <head> tag:

This function take in input a parameter which is the ID of the layer you want to show/hide (in this case "rss-menu"). So, create a button which you can use to show/hide your menu:

<a href="#" onclick="javascript:showlayer('rss-menu')" class="rss-button">Subscribe My Feed</a>

If you want your menu is displayed above the content of your page set CSS attribute position to absolute

It's all!

Download this tutorial

FORM elements design using CSS and list (ul and dl)

Tables are useful to design complex HTML forms but a good alternative is to use list elements and CSS.

After my last post (Clean and pure CSS FORM design) I receive a lot of messages with some suggests, opinions and critics about the method illustrated in these post to design a FORM using pure CSS code. I have to say I prefer to use table to place FORM elements into the page, but another method I often use is the following: using unordered list (<ul>).

In this post I would show another way to design FORM using list elements <ul> and <li> (Jennifer also suggested to use <dl> tag). In any case, if you want to use pure CSS code instead of HTML table to design your FORM I think this is a good way to do it.

Download source code

Step 1: HTML Code
HTML code is very simple. I use a <fieldset> to contain our form and I placed each form element inside a <li> tag as it was a row of a table:

HTML code is:

<li> <label for="email">Email</label>
<input type="text" name="email" id="email" size="30" />
</li>

<li> <label for="psw">Password</label>
<input type="text" name="psw" id="psw" size="30" />
</li>

<li> <label for="free">Free Subscrition</label>
<input type="radio" name="subscription" id="free"/>
</li>

<li> <label for="professional">Professional</label>
<input type="radio" name="subscription" id="professional"/> </li>

<li>
<label for="newsletter">Newsletter</label>
<input type="checkbox" name="newsletter" id="newsletter"/>
</li>

</fieldset>

...and CSS code "to simulate" a table structure where to place each form element is:

fieldset ul, fieldset li{
border:0; margin:0; padding:0; list-style:none;
}
fieldset li{
clear:both;
list-style:none;
padding-bottom:10px;
}

fieldset input{
float:left;
}
fieldset label{
width:140px;
float:left;
}

The result is something like this:

Ok, I admit, it don't look so nice, but with some lines of CSS code we could do a good job to make it more grateful.

Download source code

Related Post
Clean and pure CSS FORM design
Table's anatomy: why tables are not so bad
Are you a CSS fanatic?
Improve form usability with auto messages

Clean and pure CSS FORM design

Some readers of my blog hate html tables and often ask to me which is the better way to design FORMS with CSS, without using tables to place each form element in a table's cell.

How I said some time ago... tables are not evil. Sincerly, in some case I used pure CSS code to design forms but, in general, I prefer to use tables. It's simpler and faster than use only CSS property "to simulate" a table structure. In any case, for CSS lovers, this tutorial illustrates a proposal about how to design a pure CSS form without using html tables.

You can download the source code and use it in your web projects.

Download source code

Step 1: HTML Code
Create a new page index.html and copy and past this code into the tag <body>:

<div id="stylized" class="myform">
<form id="form" name="form" method="post" action="index.html">
<h1>Sign-up form</h1>
<p>This is the basic look of my form without table</p>

<label>Name
<span class="small">Add your name</span>
</label>
<input type="text" name="name" id="name" />

<label>Email
<span class="small">Add a valid address</span>
</label>
<input type="text" name="email" id="email" />

<label>Password
<span class="small">Min. size 6 chars</span>
</label>
<input type="text" name="password" id="password" />

<button type="submit">Sign-up</button>
<div class="spacer"></div>

</form>
</div>

How you can see from the code above, the structure of our CSS form is the following:

I used <label> for the name of each input element and <span> tag for the short description. All labels and input elements have float CSS property set to left;

Step 2: CSS Code
Copy and paste the following CSS code in the <head> tag of your page:

body{
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
p, h1, form, button{border:0; margin:0; padding:0;}
.spacer{clear:both; height:1px;}
/* ----------- My Form ----------- */
.myform{
margin:0 auto;
width:400px;
padding:14px;
}

/* ----------- stylized ----------- */
#stylized{
border:solid 2px #b7ddf2;
background:#ebf4fb;
}
#stylized h1 {
font-size:14px;
font-weight:bold;
margin-bottom:8px;
}
#stylized p{
font-size:11px;
color:#666666;
margin-bottom:20px;
border-bottom:solid 1px #b7ddf2;
padding-bottom:10px;
}
#stylized label{
display:block;
font-weight:bold;
text-align:right;
width:140px;
float:left;
}
#stylized .small{
color:#666666;
display:block;
font-size:11px;
font-weight:normal;
text-align:right;
width:140px;
}
#stylized input{
float:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #aacfe4;
width:200px;
margin:2px 0 20px 10px;
}
#stylized button{
clear:both;
margin-left:150px;
width:125px;
height:31px;
background:#666666 url(img/button.png) no-repeat;
text-align:center;
line-height:31px;
color:#FFFFFF;
font-size:11px;
font-weight:bold;
}

This is only a proposal for the form layout. You can reuse this code changing all properties how you prefer.

Download source code

Related Post
Table's anatomy: why tables are not so bad
Are you a CSS fanatic?
Improve form usability with auto messages

Photoshop Lady: best Photoshop tutorials around the world

Photoshop Lady is a great resource on-line (with a very nice layout), which provides you daily, all the best Photoshop tutorials to find inspiration and new ideas for your design projects.

All tutorials are divided in categories (3D, abstract, drawing, photo, text, texture, patterns effects) to make simpler browsing and finding everything you are looking for. You can also create your custom profile, save your preferred bookmarks, vote and share them with all other readers.

Subscribe RSS Feed
In order not to miss all new post visit Photoshop Lady and subscribe the RSS feed of the site.
For more info about this site take a look at the link below:

Photoshop Lady

Related post
Get a review for your site

Beautiful CSS buttons with icon set

Do you like simple and clean design? Take a look at this collection of buttons for your website.

I love clean design and in general simple solutions to design nice and attractive elements for my websites. This tutorial illustrates how to design nice clean buttons using some lines of HTML, CSS code and proxal icon set. The result is something like this:

Simple, clean and nice. Click on the link below to download the source code ready to use in your web projects.

Download source code

Step 1: HTML Code
You can design this kind of buttons using this simple structure: a link (<a> tag) with a span tag inside, in this way:

<a href="#" class="button">
<span class="add">Add to your bookmark</span>
</a>

You can replicate this structure for all buttons you want to add in your page:

...where link tag (<a>) is the "container" of the button:

...and class property for span tag is equal to CSS class which contains in CSS background propery the icon you want to apply to the current button:

For example, you can define new buttons in this way:

<a href="#" class="button">
<span class="delete">Delete this bookmark</span>
</a>

<a href="#" class="button">
<span class="user">Add to friends</span>
</a>

Step 2: CSS Code
This is the CSS code for button "container" which includes the button background and how the button looks (font, width, height...):

a.button{
background:url(img/button.gif);
display:block;
color:#555555;
font-weight:bold;
height:30px;
line-height:29px;
margin-bottom:14px;
text-decoration:none;
width:191px;
}
a:hover.button{
color:#0066CC;
}

...and now we can add some classes to design each button in this way:

/* -------------------- */
/* CLASSES */
/* -------------------- */
.add{
background:url(img/add.gif) no-repeat 10px 8px;
text-indent:30px;
display:block;
}
.delete{
background:url(img/delete.gif) no-repeat 10px 8px;
text-indent:30px;
display:block;
}
.user{
background:url(img/user.gif) no-repeat 10px 8px;
text-indent:30px;
display:block;
}
...

For each class, you can set background property with the icon you want, directy from your preferred icon set. In this example I used Proxal Icon Set V2, a very clean and nice icon set I found on Deviantart. Thake a look here for the original link to this icon set.

Download source code

Related content
See also:

CSS Message Box collection
Perfect pagination style using CSS

Google Spreadsheets Tips: Gantt Chart (Microsoft Project-like) using Widget

Google Spreadsheets is a powerful web application to do everything you do using Excel. A nice way to use it is to manage a project plan with a gantt chart (microsoft project-like) and share it on-line with your team.This is a free and versatile solution to do that. This tutorial illustrates how to use Google Spreadsheets Viewpath Gadget to implement it.

Take a look at this spreadsheet

Step 1: Project Plan structure
First step is defiing your project plan structure. I suggest you to use this basic structure:

Column A: Task ID (WBS) (an unique ID which identifyes each task with a progressive number).
Column B: Task description (a short description of the activity).
Column C: Percentage of completion (0%-100%).
Column D: Predecessor (finish-start relationships between tasks).
Column E: Start date (task start date).
Column F: Finis date (task finish date).

The result is something like this:

All previous fields are required for viewpath gadget but, if you want, you can add other columns with other infos (for example the name of a resource assigned to each task, task duration in terms of day, ecc...). When your project plan structure is completed you are ready to add Gantt Chart using Google Spreadsheets Viewpath Gadget.

Step 2: Add Gantt Gadget
Click on Chart icon and select Gadget option.

In the Gadget window find and select Gantt Chart gadget (by Viewpath) and click on Add to spreadsheet button:

In the option window assign all required parameters to the correct column of your project plan structure (for example Start dates in this example are in the column E):

After assigned all columns, click on apply button and see the result. Now you can save your project plan , publish and share it with all member of your team.

Related Content
See also the following link about this topic:

Haseebzone template

Pages

Monday, 30 June 2008

Blogger Tips: feeds RSS list menu

Sunday, 29 June 2008

Nice CSS menu with feed reader icons list

Monday, 9 June 2008

FORM elements design using CSS and list (ul and dl)

Sunday, 8 June 2008

Clean and pure CSS FORM design

Wednesday, 4 June 2008

Photoshop Lady: best Photoshop tutorials around the world

Monday, 2 June 2008

Beautiful CSS buttons with icon set

Sunday, 1 June 2008

Google Spreadsheets Tips: Gantt Chart (Microsoft Project-like) using Widget