Haseebzone template: January 2008

Thursday, 31 January 2008

Change HTML class attribute using javascript

If you are a JavaScript newbie this post helps you to implement a simple code to change the class for HTML elements.

Some readers asked to me how to change the class attribute of an HTML element using javascript. You can use setAttribute() in this way:

document.getElementById("idElement").setAttribute("class", "className");

...where className is the name of class you want to assign to your html element with ID equal to "idElement".

An example
Image you have a <div> element with a link which call a javascript function changeClass() to change the <div> class:

<div id="myElement">Welcome on my site!</div>
<a href="javascript:changeClass()"&gtChange Class</a>
<script language="javascript">
function changeClass(){
document.getElementById("idElement").setAttribute("class", "myClass");
}
</script>

Tabbed search bar using CSS and Javascript

Some lines of JavaScript code can help you to add nice effects to improve some features of your websites.

This tutorial explains how to implement a simple tabbed search bar using CSS and a javascript function which set "active" the selected tab and changes the value of an hidden <input> element to set search options and execute your search only for all items related to the selected topic (for example: web, images, videos...).

Take a look at how it works

Download this tutorial

HTML code for tabs
I used a <ul> list with <li> element to implement tabs

<ul class="search-options">
<li id="tab1" class="selected"><a href="#" onclick="javascript:setSearchOptions(1);">Web</a></li>
<li id="tab2"><a href="#" onclick="javascript:setSearchOptions(2);">Images</a></li>
<li id="tab3"><a href="#" onclick="javascript:setSearchOptions(3);">Videos</a></li>

You can add other tabs simply adding new <li>elements using a progressive number for ID attribute (tab4, tab5, teab6...). Each tab call a javascript function setSearchOption() which set "active" the selected tab and set the value of the following hidden <input> field to enable search options:

When you submit the form (using PHP or another server side language), if is set the post variable related to this hidden field ($_POST['searchop'] for example) and this variable is equal to some value (an integer or a string), then you can execute a query instead of another one. For example if you select image tab, your query will execute the search only for images.

Javascript setSearchOptions() function
This is the function which set the active tab and change the value of the hidden input element:

For more infos or questions contact me :)

Take a look at how it works

Download this tutorial

Socialiconize your site

Do you like social network? Add social network icons on your website.

This post explains how to use my CSS file and some lines of HTML code (unordered list with list elements) to add social-icons on your site with a link to your profile. See my social network section on this site (right-sidebar):

Step 1: link to CSS file
Add this line of cont in the <head> tag of your page:

It contains a link to the CSS file with all classes to design social button. Classes are defined in this way:

.digg{background:url(...) left 2px no-repeat;}
.delicious{background:url(...) left 2px no-repeat;}

Actual classes are:

.digg / .delicious / .technorati / .feed / .flickr / .mybloglog / .facebook / .twitter / .stumbleupon

Step 2: Add social icons on your page
To add a social icon you have to insert this simple code in your page with some <li> elements contained into an <ul> list with class parameter set to "iconize". Modify all links URL (in bold) with a link to your profile for each social netowork

<li class="delicious">
<a href="http://del.icio.us">delicious</a></li>
<li class="digg">
<a href="http://digg.com">digg</a></li>
<li class="technorati">
<a href="http://technorati.com">technorati</a></li>
<li class="feed">
<a href="#">feed</a></li>
<li class="flickr">
<a href="http://flickr.com">flickr</a></li>
<li class="mybloglog">
<a href="http://mybloglog.com">mybloglog</a></li>
<li class="facebook">
<a href="http://facebook.com">facebook</a></li>
<li class="twitter">
<a href="http://twitter.com">twitter</a></li>

</ul>

I'm going to add new icon in the next way. Send me some suggests for new icons and social networks.

Flickr like horizontal menu

Do you like Flickr and its simple and clean interface?

This tutorial explains how to implement an horizontal menu Flickr-like using CSS and Javascript to show/hide sub-menu:

Download this tutorial

Step 1: introduction
I used a simple javascript function showMenu() to show/hide sub-menu:

...take a look at this post for more infos about this function.

Step 2: HTML menu structure
The menu structure is the following:

...with sub-menu contained inside <li> element and (for default) with CSS display property set to "none";

HTML code is like this:

<ul>
<li class="menu" id="profile"><span><a href="index.html">Profile</a> <img src="arrow.png" name="arrow_profile"></span>

<div class="sub_menu" id="id_menu_profile">
<a href="index.html">Modify Profile</a>
<a href="index.html">Contact List</a>
<a href="index.html">Add photo</a>
<a href="index.html">class="item_line">Invite your Friends</a>
<a href="index.html">Invite History</a>
<a href="index.html">Guest Pass History</a>
</div>

</li>
</ul>

To try it download the package!

Download this tutorial

Design your favicon on-line with Favicon.cc

Are you looking wor a free service to convert your pictures into a icons? Take a look at Favicon.cc

Favicon.cc is an useful on-line service to design a favicon for your website. This application has a simple web interface with a grid with 16x16 squares (equal to default favicon dimension: 16x16 pixel) where you can design pixel-by-pixel your icon:

There are some problems with Safari, but with Firefox works well. Take a look.

Toggle effect using Scriptaculous

Another post dedicated to Scriptaculous and to a nice way to implement Toggle effect.

This tutorial explains how to implement a simple Toggle effect using Scriptaculous framework. I prepared a simple tutorial you can download to see it in action:

Download this tutorial

To use scriptaculous effect on your pages you have to add this lines of code in the <head> tag:

Then, you can apply Scriptaculous Toggle effect using this simple code, for example calling this function inside "onClick" attribute:

Effect.toggle('ID','type-of-effect'); return false

...where "ID" is the element you want to apply the toggle effect and "type-of-effect" is a toggle "sub-effect" (blind, appear, slide). I chose as toggle sub-effect "blink":

<h1 onclick="Effect.toggle('about-me','blind'); return false">About me</h1>
<div id="about-me">...some content...</div>

In this way you can apply this effect to every element using HTML "id" attribute.

Download this tutorial

Simple selector list using CSS and Javascript

This tutorial explains how to implement a simple selector list using few lines of code with CSS and Javascript. The result is something like this:

Download this tutorial

Step 1: HTML code
Create a new html page and copy and paste the code below:

<div class="selector_int">Chose topic</div>
<ul id="selector">
<li id="sel1"><input type="checkbox" id="inp1" onClick="javascript:selectElement(1)"/>Technology</li>
<li id="sel2"><input type="checkbox" id="inp2" onClick="javascript:selectElement(2)"/>Science</li>
<li id="sel3"><input type="checkbox" id="inp3" onClick="javascript:selectElement(3)"/>Gaming</li>
<li id="sel4"><input type="checkbox" id="inp4" onClick="javascript:selectElement(4)"/>Lifestyle</li>
<li id="sel5"><input type="checkbox" id="inp5" onClick="javascript:selectElement(5)"/>Entertainment</li>
<li id="sel6"><input type="checkbox" id="inp6" onClick="javascript:selectElement(16)"/>Sport</li>
</ul>
<div class="selector_footer">
<input type="button" value="Save">
</div>

When you check an input checkbox, the relative row going to change the background color in a light yellow. To implement this effect I used a simple javascript function (see step 3) which is called using this code:

onClick="javascript:selectElement(id)

...where id is an integer which identifies the current elements.

You can populate dinamically this list using for example query results in PHP. For example, this is a query which return id_desc_pk (primary key) and description from the table TOPIC:

<?php
$getTopic_sql = 'SELECT id_desc_pk, description FROM TOPIC';
$getTopic = mysql_query($getTopic_sql);
?>

...and this is the PHP code to add dinamically <li> element from getTopic query:

<?php while ($row = mysql_fetch_array($getTopic)) {?>
<li id="sel<?php echo $row['id_desc_pk']; ?>"><input type="checkbox" id="inp<?php echo $row['id_desc_pk']; ?>" onClick="javascript:selectElement(<?php echo $row['id_desc_pk']; ?>)"/>
<?php echo $row['description']; ?></li>
<?php } ?>

Step 3: Javascript function
This simple function chages the color of row background when a checkbox is selected. You can modify the color "on selected" changing colorSelected variable value (now is #FFFFCC).

Add this function into <head> tag of your page and try the result.

Download this tutorial

From zero to (almost) hero in three months

I started this blog on October 7 2007 but after two months my traffic did not take off. In december I had 50 feeds subscribers (in average) with 150 unique visitors day. It was a frustrating situation. So I decide to find a simple way to drive more traffic on my site and after some attempts I found it. This is the increment of my feeds subscribers (today are 204) which reflects the increment of daily unique visitors on woork:

I passed from 150 unique visitors/day in december to 3200 unique visitors (in average) in January 2008 with over 5800 page views/day. So, I also increased my revenues with AdSense. How I saw, there are not secrets or magical SEO strategies: the only rule is more traffic, more clicks, more revenues. In fact, considering My Google AdSense conversions (clicks) are now about 1%-3% of the total daily traffic my actual revenues are a good incentive to continue on this way!

How can you drive more traffic on your site?
The most important thing is writing more you can, every day for example. For the rest, I don't know if this is the better solution to do it but, I can say, it works well. With order, I suggest you to do in this way:

1. Publish your post and add it on digg.com

- Before to add your posts on Digg be sure to have a good number of active friends.
- Then, send a shout to everyone about your post.

2. Promote your contents on other communities with the same topics you publish on your site

- If your blog is about web design/programming I suggest to add your posts on DZone.com, PoshCSS (if your post is about CSS), Design Float (web design, css, graphic). These digg-like site can drive a huge traffic on your site for days if your post becomes famous! Use community message on MyBlogLog to inform your community members about all new updates on your site.

3. Don't underrate del.icio.us power!

- Add your post on del.icio.us and use traffic generated from digg/other communities submission to increase the number of users who share your post.

Plan your time
I spend not more then three hours/day. At the week-end I do a list of four-five topic I want to publish, so during the week I can spend more time to add contents and promote them instead of thinking "how can I write?".

I hope you can find usueful these suggests. Good luck!

Horizontal animated menu using Mootools

Do you want to add a nice animated menu on your website? Take a look at this nice MooTools effect!

This is my favourite Mootools effect: a nice horizontal animated menu which changes dinamically the blocks width when you pass your mouse over a selected block. You can see the effect on mootools home page

Code is simple and you can customize all parameters you want such as blocks size, blocks colour, blocks number, background image, and blocks content.

Download this tutorial

Change bocks size
In order to change the blocks size, modify these parameters:

var szNormal = 140, szSmall = 80, szFull = 200;

... where szNormal is the normal blocks size, szSmall is the block size when your mouse is over another block and szFull is the block size when your mouse is over the selected box.

Add new blocks
To add new blocks find this code:

<div id="kwicks_container">
<ul id="kwicks">
...

... and add <li> elements with a progressive ID (kwick_6, kwick_7, kwick_X...) into <ul> tag:

<li id="kwick_6" class="kwick">...some code here...</li>
<li id="kwick_7" class="kwick">...some code here...</li>
<li id="kwick_8" class="kwick">...some code here...</li>
...

For each <li> element you can also define a custom style with CSS in this simple way:

#kwick_6 {background-color: #ff9230;}
#kwick_7{background-color: #ff6600;}
#kwick_8 {background-color: #ffffff;}

...and define other attributes such as text color, background image or links colors.

Download this tutorial

Add Design Float button on Blogger template

Design Float is a great resource - digg-like - to share stories about Web Design, CSS, Identity and Branding, Digital art and Illustration.

This tutorial explains how to add a Float it! button on each post on your Blogger template.

Edit your Blogger template and check "Expand Widget Models". Find this line of code:

<'post-footer-line post-footer-line-3'>

...and paste, below this line, this code

The result looks like this

If you prefer a big button copy and paste this button instead of the first code:

The result is like this

Save your template and post your stories on Design Float!

Simplicity is better: some suggestions for a clean blog layout

In the past week I received many good comments about the design of my blog and some visitors asked to me suggestions about how to improve their site layout.

I want to share with you some tips I think interesting about this topic. These are not general rules but only simple suggestions which can help you in order to make your site more attractive.

Simplicity is better
Be simple. Don't use complex site structure for your informative blog (like my site for example). A vertical orientation with two main columns is the better solutions, linear and simple to manage. If you need for help to design the page layout take a look at this post: Conceptual design for site's layout

Background and text color for content.
Use a white background (#FFFFFF) with black/gray scale text for the content. You can use black color (#000000) in order to emphasize title of posts and gray scale color (#444444, #555555...) for text (but don't use a gray too bright!). Other color combinations, such as background black and text white, are more indicated for design-oriented sites such as on-line portfolio or similar.

Use colors but don't abuse them.
Colors are nice but if poorly used they make a webpage very unsightly. If you have some dubts about colors you used on your site, take a look at Adobe Kuler an useful web application to create harmonious color themes online for your blog/site.

Don't add. Remove.
Remove all things are not really useful to attract traffic or earn money. Don't amuse your readers from content and don't fill your page with advertisements. Two ads block (below post title and on sidebar) are a good solution to perform good incomes.

Widget invasion
Widgets like MyBlogLog Recent Readers are funny but don't use them only because give "color" to the page. They can help you to attract more visitors if used in a good way.

Tell "who you are".
Tell your visitors "who you are" in a section on top of the page. Add links to your identity on social network sites like digg, delicious, technorati. Use a small section on right side of your template, below who you are, with icons and a short description. If this can help you, take ispiration from my social network section.

Giant feed icon. Why?
Ok, feed subscribers are important. But is not necessary use giant icon to say "subscribe my feed!". Your readers are not blind and if the content of your site is good you will find new subscribers also using a small icon.

Social Networks buttons war.
In the past two months, I tryed to use a lot of social buttons combinations. Now I found a good compromise, using only digg and delicious buttons. I use digg to promote my posts immediately after I published them so, in general, I receive a lot of traffic in the first two hour after submission. At the same time, all readers who find the post interesting add it to delicious and when the post become popular I receive a lot of traffic for many days after.
Take a look for example at this post, Digg-like navigation bar using CSS, popular on delicious and which drive a lot of daily traffic on this site.

That's all. I hope you can find this informations useful :)

Liquid styled input element with CSS

If you hate the standard design of FORM elements, this tutorial helps you to design nice input elements using a background image which fits automatically the width of the fields.

This tutorial explains how to implement a simple linquid styled <input> element using css.

Download this tutorial

Step 1: HTML code
HTML code is very simple. I added a <fieldset> element with two <input> elements:

<fieldset class="w_auto">
<legend>Login</legend>
<div class="msg">Add a message here. New user? <a href="p2.html">Sign-up</a></div>
<label>User</label>
<div class="w_span_auto"><input type="text" name="email" id="email" class="w_auto"/></div>
<label>Password</label>
<div class="w_span_auto"><input type="password" name="password" id="password" class="w_auto"/></div>
Lost password <a href="p1.html">Retrieve data</a>
</fieldset>

Step 2: CSS code for liquid input elements
In order to implement a liquid input I used this HTML/CSS structure we have already seen in this post. The structure is like this:

...HTML code (see step 1) is something like the following:

...and CSS code is:

div.w_span_auto{
background:url(wr.png) top right no-repeat;
padding-right:18px;
height:34px;
line-height:34px;
clear:both;
margin-bottom:14px;
}
input.w_auto{
border:none;
height:28px;
padding-top:6px;
text-indent:18px;
display:block;
font-size:15px;
color:#666666;
width:100%;
background:url(wl.png) top left no-repeat;
}

For the complete code source download this tutorial.

Download this tutorial

Mootools animated sidebar menu

Are you looking for an original menu for your new website? Take a look at this animated menu with MooTools.

This tutorial explains how to implement an animated menu using mootools. You can see how it works directly from mootools site.

Download source file

This pack contains all source code, mootools framework and moofx.js file to enable visual effects.

A nice week-end to everyone :)

Simple CSS vertical menu Digg-like

Do you like Digg.com webdesign? I like much its menu, simple and clean.

This tutorial explains how to implement a simple vertical menu digg-like using CSS and javascript to show/hide sub-menu. The result is like this:

Download this tutorial

Step 1: HTML code
HTML structure is very simple and contains two <ul> tags (menu and sub-menu):

Copy and paste the following code in a new html page:

<li><a href="#" onclick="javascript:showlayer('sm_1')"> Profile</a></li>

<ul class="submenu" id="sm_1">
<li><a href="p1.html">Profile</a></li>
<li><a href="p2.hmtl">Inbox </a></li>
<li><a href="p3.hmtl">Log-out</a></li>
</ul>

</ul>
</div>

Step 2: CSS code
Copy and paste this code to define menu button:

ul, li{margin:0; border:0; padding:0; list-style:none;}
#middlebar{
font-size:11px;
color:#3b5d14;
background:#90b557;
font-weight:bold;
padding:4px;
height:30px;
}
#middlebar .menu li {
background:url(lm.png) left top no-repeat;
height:30px;
float:left;
margin-right:10px;
}
#middlebar .menu li a{
color:#3b5d14;
text-decoration:none;
padding:0 10px;
height:30px;
line-height:30px;
display:block;
float:left;
padding:0 26px 0 10px;
background:url(rm.png) right top no-repeat;
}
#middlebar .menu li a:hover{
color:#666666;
}

...and this is the code for the sub-menu:

#middlebar ul .submenu {
border:solid 1px #c9dea1;
border-top:none;
background:#FFFFFF;
position:relative;
top:4px;
width:150px;
padding:6px 0;
clear:both;
z-index:2;
display:none;
}
#middlebar ul .submenu li{
background:none;
display:block;
float:none;
margin:0 6px;
border:0;
height:auto;
line-height:normal;
border-top:solid 1px #DEDEDE;
}
#middlebar .submenu li a{
background:none;
display:block;
float:none;
padding:6px 6px;
margin:0;
border:0;
height:auto;
color:#105cbe;
line-height:normal;
}
#middlebar .submenu li a:hover{
background:#e3edef;
}

Step 3: Javascript to show/hide submenu
Now, add this simple Javascript code to show/hide the sub-menu when an user clicks on a link contained into the menu.

This function get in input the parameter layer (the ID of sub-menu you want hide/display), in this case sm_1, passed from this link:

<li><a href="#" onclick="javascript:showlayer('sm_1')"> Profile</a></li>

Save all and try it!

Download this tutorial

Related content
Digg-like navigation bar using CSS

Add DZone button on Blogger template

DZone.com is a popular digg-like portal to share interesting and useful links for developers.

It provides two type of buttons to vote a post directly from your site (like digg) with different size: tall and wide:

To add DZone buttons on your blogger template, in each post of your blog, select "modify html" and check "Expand Widget Models" (remember to save your template before!).

Better position to place the big button (tall) is beside the title of post. Find this line of code:

...<data:post.body/>...

Copy and paste the following code below the line above:

In order to choose the small button (wide size) instead of big button change this line:

...whit the following:

I suggest to place wide size button to the end of post (for example below tags line). Past the code below this line of code in your blogger template:

Save your template and try it!

Haseebzone template

Pages

Thursday, 31 January 2008

Change HTML class attribute using javascript

Wednesday, 30 January 2008

Tabbed search bar using CSS and Javascript

Tuesday, 29 January 2008

Socialiconize your site

Sunday, 27 January 2008

Flickr like horizontal menu

Saturday, 26 January 2008

Design your favicon on-line with Favicon.cc

Toggle effect using Scriptaculous

Thursday, 24 January 2008

Simple selector list using CSS and Javascript

Wednesday, 23 January 2008

From zero to (almost) hero in three months

Horizontal animated menu using Mootools

Tuesday, 22 January 2008

Add Design Float button on Blogger template

Monday, 21 January 2008

Simplicity is better: some suggestions for a clean blog layout

Sunday, 20 January 2008

Liquid styled input element with CSS

Saturday, 19 January 2008

Mootools animated sidebar menu

Friday, 18 January 2008

Simple CSS vertical menu Digg-like

Add DZone button on Blogger template