ProBloggerHacks

Review on J2A Networks

2010-03-07T03:47:00.000-08:00

There is a reason behind that i am not posting i this blog as i am working on the project of making websites network.
This networks include more than six sites.

www.script-zone.net
www.techshake.info
www.bahrians.info
www.moviesmafia.com(underconstruction)
www.eliteprox.com
tutorial4all.info(underconstruction)
and another site which is not mentionable on this blog.

SCRIPT-ZONE
   This is like blog on a wordpress where i put nulled scripts and nulled templates.
After some time in this blog i am gona post templates of blogger,wordpress and website free.
TECHSHAKE
   This site is dedicated to all the information i got from buying server,managing every thing and information about new web technology.

   All other sites are up and you can check it and tell me how are they..
as i buy a new server in Canada and it is off-shore if any one want hosting or some other help just mail me i am ready to help you or offer you cheap hosting.
   Bahrian@msn.com

Simple Photoshop Tips

2010-01-12T01:35:00.000-08:00

Learn new useful tips using Photoshop

Tip 1 :Glow Effect

Change the lighting effect of any image using the Lighting filter.

Open an image on your canvas by clicking on File>Open, select the image you want to open and click on 'Open'.
Click on Filter>Render>Lighting Effects . The Lighting Effects window opens, change only the Light type to 'Omni' let the other settings be the default. If you wish to, try changing the default values and check out the result effect.

Disfigure/Distort an Image

Open an image which you want to disfigure.
Select Filter>Liquify. The Liquify window opens, a circular cursor with a plus sign appears. Drag this tool on your image and play around till you are satisfied with what you've done to the image. Then click OK.

Stained Glass Effect

Open an image on your canvas by clicking on File>Open and select the image you want to open, then click 'Open'. The effect looks good only on bitmap images, but you can try it out on photos too. The effect varies for different images.
Click on Filter>Texture>Stained Glass the Stained Glass window appears, give the following properties : Cell size - 5, Border Thickness - 1, Light Intensity - 0. Then click on OK.

Ripple Effect

Give a ripple effect to an image using filters

Open an image on your canvas.
Click on Filter>Distort>Zigzag. The ZigZag window will open.
Give the settings as follows : Amount - 6, Ridges - 14, Style - Pond Ripples and click OK. Here's your final image.

Tip 2 :Great Looking Textures

Canvas Texture

Open an image on your canvas by clicking on File>Open and selecting an image.
Click on Filter>Texture>Texturizer. The Texturiser properties window appears.
Give the following values : Texturizer, Texture - Canvas, Scaling - 75% , Relief - 9 , Light - top
Click on OK.

Glass Texture

Open an image on your canvas by clicking on File>Open and selecting an image to open.
Click on Filter>Distort> Glass. The Glass properties window appears. Give the following settings :Glass, Distortion - 9 , Smoothness - 4 , Texture - Canvas, Scaling - 100%
Click on OK and check out your result.

3D Pyramid Texture

Open an image on your canvas by clicking on File>Open and browse for the image you want to open.
Click on Filter>Stylize>Extrude. The Extrude window will open. Give the settings as follows : Type - pyramids Size - 15 Depth - 15, select Level Based, check Mask Incomplete Blocks.

Tile Effect

Open an image on your canvas by clicking on File>Open and browse for the image you want to open.
Click on Filter>Stylize> Tiles. The Tile window will open. Give the settings as follows : Number of tiles - 5, Maximum offset - 5, select Background color.
Here's your final result.

Tip 3: Exporting individual images in Photoshop
When you save images for the web using Photoshop.
After slicing your images, click on File/Save for web. The following screen will appear :

Save as type: Now the tip is: Choose Images Only.
Settings: Choose Other
The following screen will appear :

The next tip is:
Unclick the Put images in folder. This tip will help you avoid unnecessary creation of the image folder.
Slices: Choose selected slices.

Tip 4: Giving gradients to shapes.

Selectcustom shape tool from the tools panel.
Click on the Shape drop down menu seen on the top toolbar.
Click on the arrow and select Object.
Select Fill pixels (third button seen in the tools panel in the left).
Look for the puzzle shape which is there and drag it to the canvas with the size you want.
Click on magic wand tool and select the shape.
Create a gradient. Go to Paint Bucket Tool and click on the dropdown menu
Select Gradient tool.
On the top panel the following panel will appear.
Select Noise Samples from the dropdown menu of gradient tool and chose the gradient which has red gradient.
Choose Mode as linear burn.
Now click inside the shape and drag from top to down. Your shape with gradient is ready.

logo design using Photoshop

2010-01-12T01:29:00.000-08:00

Smart, Colorful and unique Bird Logo

Let's start designing the logo. It's very simple.
Step 1: Open a new file by clicking on File>Open.
Step 2: Create a new layer. Name it logo.
Step 3: Choose the custom shape tool seen in the tools panel on the right.

The above panel will appear.
Step 4: Click on the Shape drop down menu seen on the top toolbar. Click on the arrow and select Animals. Select style as Buttons. Look for the multicolor button which is there. Look for the bird which is in the banner and drag it to the canvas with the size you want.

Wow! Your nice colorful Bird logo is ready!

Bright Sun Logo

Follow the steps:
Step 1:Choose the custom shape tool seen in the tools panel on the right. Click on the Shape drop down menu seen on the top toolbar. Click on the arrow and select Nature. Select Fill pixels (third button seen in the tools panel in the left). Look for the sun symbol which is there and drag it to the canvas with the size you want.
Step 2:Now click on magic wand tool and select the sun. Now create a gradient. Select Gradient tool. Select Color harmonies2 from the dropdown menu of gradient tool and chose the gradient which has orange to yellow gradient. Now click on the sun and drag from top to down. Your sun have the sun effect now.
Step 3:To make the text appear on top of the sun.
Click on and the below panel will appear on top of the photoshop file.
Select T and the below screen will appear.
Warp Text Screen Click on style as Arc Say ok.

Now you can write your company name.

Your logo is ready!

Here is the logo we designed for the Free Photoshop website template 2.

Follow the steps:
Choose the custom shape tool seen in the tools panel on the right. Click on the Shape drop down menu seen on the top toolbar. Click on the arrow and select Ornaments. Look for the ornament which is in the banner of website header 2. Here give color as Black. Drag the shape to the canvas.

Here is the logo we designed for the Free Photoshop website template 3.

Follow the steps:
custom shape tool seen in the tools panel on the right. Go to Shape toolClick on this Shape drop down menu. Click on the arrow and select Symbols. Look for the star symbol which is in the banner of website header 2. Click on the color as #A83C56.
Drag the star in the canvas.

Smart Star Logo

Follow the steps:
Choose the custom shape tool seen in the tools panel on the right. Click on the Shape drop down menu seen on the top toolbar. Click on the arrow and select Nature. Select style as Texture. Look for the pixelated texture which is there. Look for the star which is in the banner and drag it to the canvas with the size you want.

Your logo is ready!

Attractive Fire Logo

Follow the steps:
Step 1:First choose the custom shape tool seen in the tools panel on the right. Click on the Shape drop down menu seen on the top toolbar. Click on the arrow and select Symbols. Look for the first symbol which is in the banner.Select Fill pixels (third button seen in the tools panel in the left). Drag the fire symbol to the canvas.
Step 2:Now click on magic wand tool and select only the flames.
Step 3: Now create a gradient. Select Gradient tool. Select Color harmonies2 from the dropdown menu of gradient tool and chose the gradient which has orange to yellow gradient. Now click on the flames and drag from top to down. Your flames have the color effect of fire.
Step 4:Now choose the wood with magic wand tool and select the wood. Now choose a wood color like brown and fill it while choosing paint tool. Now go to filter/pixelate/fragment to get the wood effect.
Your fire logo is ready!

Congratulations! Your logo design is ready!

Designing website banner with a logo using Photoshop

2010-01-12T01:25:00.000-08:00

Simple step-by-step tutorial on how to create a web site banner and logo in Photoshop. The sample .psd and completed website are also included. A banner or a header is a graphic that is found at the top of a web site which usually displays the company name and the logo. It is often the first thing a person sees when they open the website. The blending of colors should be attractive, informative, comfortable for the eye and help to convince the viewer to stay on your site.

Let's start with our banner. Here we have a general banner and the colors used are soothing to the eyes. It can be used for a fashion and beauty banner or a personal or holiday banner as well.

Follow the below steps to create the above website banner :

Step 1 : Creating the banner size
Open a new file by clicking on File>Open. Make the file size width of 780px and height of 120px. You can go till 140px for the height. You can make a banner flexible according to your design.

Step 2: Giving the background color
Create a new layer. Name it bgcolor. Give a background color by doing the following:

Change the foreground color to #E4D1B8.
Click on the Paint Bucket Tool seen in the tools panel on the right.
Click on the canvas with your mouse. Your background color is now changed to the new color.

Step 3 : Giving the inside background color
Create a new layer. Name it insidecolor. Select Rectangular Marquee Tool seen in the tools panel on the right. Make the rectangle size width of 760px and height of 100px inside the background. Fill it with color # C64866 using the paint bucket tool.

Step 4 : Creating the logo background
Create a new layer. Name it logobkg. Select Rectangular Marquee Tool. Make the rectangle size width of 120px and height of 100px. Put the rectangle in the left side of the banner. Fill it with black color # 000000.

Step 5 : Creating a logo using the custom shape tool
Create a new layer. Name it logo. Choose the custom shape tool seen in the tools panel on the right. Click on the Shape drop down menu seen on the top toolbar. Click on the arrow and select Ornaments. Look for the ornament which is in the banner.
Drag it in the logo space and position it so it comes in the middle of the logo background. Now you have a temporary ornament as a logo which can be replaced with your company logo if needed.

Step 6 : Creating the vertical lines in the banner
Create a new layer. Name it band. Select Rectangular Marquee Tool. Make the rectangle size width of 7px and height of 120px. Put the rectangle in the middle of the banner. Fill it with color # E8B0BD. Make four copies of the layer band.

To make a copy, right click on the layer and click on duplicate. A screen named Duplicate Layer will appear.

Enter name of the layer as band copy. Click on OK. Do the same with band copy2, band copy3, band copy4. Place the bands properly in the banner.

Step 8 : Creating the Logo Border
Create a new layer. Name it border. Select Rectangular Marquee Tool. Make the rectangle size width of 20px and height of 100px. Fill it with color # A63D56. Put the rectangle on the right of the logo background. Make a copy and place the new rectangle on the left of the logo background.

Step 9 : Creating the dashed lines
Now select the Horizontal Type Tool (text tool). Type" _________" using the hyphen key. Place it on the top of the banner. Make a copy, right click on the layer and click on duplicate. Place it at the bottom of the banner.

Step 10 : Adding your Company Name
With the text tool type your company name or website name with the color # FCF3E5.

Congratulations! Your website banner with the logo is ready!

Adding Light Box To Blogger Images Fixed and working.

2009-12-20T11:39:00.000-08:00

What’s New About This Widget

* First of all we add the widget code to our template,
* You’ll be able to (Link) this widget to your single images in blogger.
* You can use it to make photo gallery.
* You can make Slide show with it.
* You can add it to your (links).

How Is It Work

First of all we add the widget code to our template,
Then when we add an image to a new post we have to {Link} it to the widget by adding a tiny code to it by changing the post writing mode from compose to html don’t worry it’s easy, continue reading to figure it out
Step 1
</head>

And Before it add the following code.

<!--Code-By-AllBlogTools-->

<link href='http://www.mydatanest.com/files/allblogtools/29603_izeup/lytebox.css' media='screen' rel='stylesheet' type='text/css'/>

<script src='http://www.mydatanest.com/files/allblogtools/29602_xemqf/lytebox.js' type='text/javascript'/>

<!--Code-By-AllBlogTools-->

Now we’ve add all require codes to the template, lets know how to use it.

Step 2 – How To Use

The way to make this widget works in your blog is very easy but you have to know what you do,
What you have to do is : add a small code to the images code. and you can find the images code in post writing area when you change the mode from compose to edit html.

Step 2.1 – Add It To Single Image

Go to blogger account, start writing your post in normal mode (compose)
And once you add an image to your post, please change your mode to edit html, see previous imsge
You’ll find the image code looks like the following.

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_JwD5r652h00/Swa1Adh6yPI/AAAAAAAAATA/THiv6vdejW0/s1600/3924705805_15d638ca8d_o.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 324px;" src="http://4.bp.blogspot.com/_JwD5r652h00/Swa1Adh6yPI/AAAAAAAAATA/THiv6vdejW0/s400/3924705805_15d638ca8d_o.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5406207422236379378" /></a>

What we’ll need to add for this code is the next part

rel="lytebox"

Example Code For Single Image :

<a rel="lytebox" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_JwD5r652h00/Swa1Adh6yPI/AAAAAAAAATA/THiv6vdejW0/s1600/3924705805_15d638ca8d_o.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 324px;" src="http://4.bp.blogspot.com/_JwD5r652h00/Swa1Adh6yPI/AAAAAAAAATA/THiv6vdejW0/s400/3924705805_15d638ca8d_o.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5406207422236379378" /></a>

And you are done.

Step 2.2 – How To Make Photo Group Gallery

We’ll do the same as the previous step, but instead of adding Only

rel="lytebox"

we’ll have to add a name for this code so it’ll be

rel="lytebox[groub1]"

when you add this code for more than one image, all the images will open as a group.
Example Code For Images Album :

rel="lytebox[groub1]" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_JwD5r652h00/Swa1Adh6yPI/AAAAAAAAATA/THiv6vdejW0/s1600/3924705805_15d638ca8d_oddjpg">

rel="lytebox[groub1]" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_JwD5r652h00/Swa1Adh6yPI/AAAAAAAAATA/THiv6vdejW0/s1600/3924705805_15d638ca8d_oddjpg">

Step 2.2 – How To Make A Slide Show

Instead Of adding

rel="lytebox[groub1]"

We’ll add

rel="lyteshow[groub1]"

For links we use rel="lyteframe" before href of the link
thanks if you have any problem email me or comment here.
demo:Saab Pakistani 2000

SEO Optimization for blog and websites

2009-12-20T00:10:00.001-08:00

Changing your site's title and description in search results

Google's creation of sites' titles and descriptions (or "snippets") is completely automated and takes into account both the content of a page as well as references to it that appear on the web.
We use a number of different sources for this information, including descriptive information in the META tag for each page. Where this information isn't available, we may use publicly available information from DMOZ. While accurate meta descriptions can improve clickthrough, they won't impact your ranking within search results. We frequently prefer to display meta descriptions of pages (when available) because it gives users a clear idea of the URL's content. This directs them to good results faster and reduces the click-and-backtrack behavior that frustrates visitors and inflates web traffic metrics.

While we're unable to manually change titles or snippets for individual sites, we're always working to make them as relevant as possible. You can help improve the quality of the snippets displayed for your pages by providing informative meta descriptions for each page.

Create good meta descriptions

Prevent search engines from displaying DMOZ data in search results for your site

Create good meta descriptions

* Differentiate the descriptions for different pages : Using identical or similar descriptions on every page of a site isn't very helpful when individual pages appear in the web results. In these cases we're less likely to display the boilerplate text. Wherever possible, create descriptions that accurately describe the specific page. Use site-level descriptions on the main home page or other aggregation pages, and use page-level descriptions everywhere else. If you don't have time to create a description for every single page, try to prioritize your content: At the very least, create a description for the critical URLs like your home page and popular pages.
* Include clearly tagged facts in the description : The meta description doesn't just have to be in sentence format; it's also a great place to include structured data about the page. For example, news or blog postings can list the author, date of publication, or byline information. This can give potential visitors very relevant information that might not be displayed in the snippet otherwise. Similarly, product pages might have the key bits of information - price, age, manufacturer - scattered throughout a page. A good meta description can bring all this data together. For example, the following meta description provides detailed information about a book.

* In this example, information is clearly tagged and separated.

* Programmatically generate descriptions : For some sites, like news media sources, generating an accurate and unique description for each page is easy: since each article is hand-written, it takes minimal effort to also add a one-sentence description. For larger database-driven sites, like product aggregators, hand-written descriptions can be impossible. In the latter case, however, programmatic generation of the descriptions can be appropriate and are encouraged. Good descriptions are human-readable and diverse, as we talked about in the first point above. The page-specific data we mentioned in the second point is a good candidate for programmatic generation. Keep in mind that meta descriptions comprised of long strings of keywords don't give users a clear idea of the page's content, and are less likely to be displayed in place of a regular snippet.
* Use quality descriptions : Finally, make sure your descriptions are truly descriptive. Because the meta descriptions aren't displayed in the pages the user sees, it's easy to let this content slide. But high-quality descriptions can be displayed in Google's search results, and can go a long way to improving the quality and quantity of your search traffic.

Prevent search engines from displaying DMOZ data in search results for your site
One source we use to generate snippets is the Open Directory Project. You can direct us not to use this as a source by adding a meta tag to your pages.
To prevent all search engines (that support the meta tag) from using this information for the page's description, use the following:

To specifically prevent Google from using this information for a page's description, use the following:

If you use the robots meta tag for other directives, you can combine those. For instance:

Note that once you add this meta tag to your pages, it may take some time for changes to your snippets to appear in the index.
If you're concerned about content in your title or snippet, you may want to double-check that this content doesn't appear on your site. If it does, changing it may affect your Google snippet after we next crawl your site. If it doesn't, try searching Google.com for the title or snippet enclosed in quotation marks. This will display pages on the web that refer to your site using this text. If you contact these webmasters to request that they change their information about your site, any changes to their sites will be recognized by our crawler after we next crawl their pages.

Simple Way to Make Tabbed Sidebars on Blogger

2009-12-17T05:36:00.000-08:00

Tabs are well know for being very useful to everyone, specially for those who have a lot of content on their blogs and spend much time thinking where to place new stuff.

I know there are quite a few tutorials around about making tabs for blogger, but they all have one thing in common, are kind of difficult to implement, and may confuse some users.
The method I developed is inspired in a tutorial from Webitect, I just found it very useful and decided to adapt that technique to Blogger platform. This tutorial will bring you a very easy to implement way to make tabs out of your sidebar widgets, here are some features of my method:

Easy to install.
No need edit html in Sidebar part.
Automatically place your handpicked widgets inside tabs.
Freedom to set what widgets stay out of the tabs.
After implementing, Widgets are normally edited from Page Elements section.

The Final Result

If you want to see it working please check the live demo.

Step 1 - Placing the styles on your CSS

The style of the tabs can be easily changed anytime just using CSS, but this is not the main reason for this tutorial, It’s up to you to change or not, use your own CSS skills. We’ve made a general layout for it, to install it just place the following code right before the ]]> line:

/* Tabbed Sidebar Widgets

--------------------------------- */

.widget-wrapper2{

    border:1px solid #494e52;

    background-color:#636d76;

    padding:8px;

}



.widget-tab {

-moz-border-radius-bottomleft:5px;

-moz-border-radius-bottomright:5px;

-moz-border-radius-topright:5px;

-webkit-border-radius-bottomleft:5px;

-webkit-border-radius-bottomright:5px;

-webkit-border-radius-topright:5px;

background:#FFFFFF url(http://i195.photobucket.com/albums/z105/dantearaujo/tabcontentbg.gif) repeat-x scroll left bottom !important;

border:1px solid #CFCFCF;

font-family:Arial,Helvetica,sans-serif;

padding:15px !important;

}



.widget-tab  ul {

    margin:0px;

    padding:0px 20px 0px 20px;

}

.widget-tab  ul li {

    list-style:none;

    border-bottom:1px solid #d6dde0;

    padding-top:10px;

    padding-bottom:10px;

    font-size:13px;

}

.widget-tab  ul li:last-child {

    border-bottom:none;

}

.widget-tab  ul li a {

    text-decoration:none;

    color:#3e4346;

}

.widget-tab  ul li a small {

    color:#8b959c;

    font-size:9px;

    text-transform:uppercase;

    font-family:Verdana, Arial, Helvetica, sans-serif;

    position:relative;

    left:4px;

    top:0px;

}

.tab-content  ul li a:hover {

    color:#a59c83;

}

.tab-content  ul li a:hover small {

    color:#baae8e;

}



.active-tab{

background:#FFFFFF url(http://i195.photobucket.com/albums/z105/dantearaujo/tabtopbg.gif) repeat-x scroll left top !important;

border-color:#CFCFCF #CFCFCF #FFFFFF #CFCFCF !important;

border-style:solid !important;

border-width:1px 1px 2px !important;

color:#282E32 !important;        



}



ul.tab-wrapper {

    margin:0px; padding:0px;

    margin-top:5px;

    margin-bottom:6px;

}

ul.tab-wrapper li {

-webkit-border-radius-topleft:5px;

-webkit-border-radius-topright:5px;

-moz-border-radius-topleft:5px;

-moz-border-radius-topright:5px;

background:#191919 url(http://i195.photobucket.com/albums/z105/dantearaujo/tabinactivebg.gif) repeat-x scroll left top;

border:1px solid #464C54;

color:#FFFFFF;

cursor:pointer;

display:inline;

font-family:Verdana,Arial,Helvetica,sans-serif;

font-size:9px;

font-weight:bold;

line-height:2em;

list-style-image:none !important;

list-style-position:outside !important;

list-style-type:none !important;

margin-right:1px;

padding:8px 14px;

text-align:center;

text-decoration:none;

text-transform:uppercase;

}

Step 2 - Installing jQuery Library

This script needs the jQuery JavaScript library, if you already have it installed, you can skip this step, if you don’t just paste the code below right before your line:

<!-- jQuery Call -->



<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>



<!-- End of jQuery Call -->

Step 3 - Installing the Script

Ok now that you’ve made sure that you have jQuery installed, you need to install the script that will do all the magic for us, just place the following code right before your line:

<script type="text/javascript"> 

var starttab=0; 

var endtab=2; 

var sidebarname="sidebar1"; 

</script> 

<script type="text/javascript" src="http://tab-for-blogger.googlecode.com/files/bloggertabv1.0-min.js"></script>

Customizing

As you have noted you’ll get a few lines that can be customized, those are:
var starttab=0;
var endtab=2;
var sidebarname="sidebar";
Very quickly: starttab is the starting number for your chosen widgets, it starts counting from 0. endtab is the number for your last included widget. sidebarname is your sidebar’s id, it is generally just “sidebar”, but just in case you have a different id, we’ll help you finding the right one to place here.

How to find your sidebar’s ID

Ok if you have installed the script and it is not working, you may have a different sidebar ID that is not only “sidebar”, use the following methods to find he right id of your sidebar.

Method 1 - Getting from the HTML

This one may be the fastest one, if you use Minima template, or any template derived from it, just go to Layout > Edit HTML > Search for “sidebar-wrapper” and you may get something like this:

<div id='sidebar-wrapper'>



<b:section class='sidebar' id='sidebar' preferred='yes'>

Just take a closer look and you will find it id='sidebar'.

Method 2 - Using Firebug

Firebug is the most wonderful Firefox extension for web developers, If you dont have it, just download it from here.

Method 3 - Using Web developer Firefox Plugin

This is another great extension, if you don't have it, get it here.

Ok now that you have installed the script on your blog, you should be able to normally edit your widgets on your page elements section.

What are the Gadget Numbers

Here is a simple explanation for those who haven’t understand the numbers yet. Let’s say that you want make tabs out of your first 3 widgets, so your starting number will be 0 and your finishing number will be 2:
var starttab=0;
var endtab=2;
var sidebarname="sidebar";
Check images below for better understanding:

In this case, Widget 3 and 4 will not get any tabs, because your finishing number was 2. Very easy huh?

Advices

This script works for only one sidebar per blog.
We have included a general styles for your tabs, however, you can use your CSS skills to customize them, but be aware that CSS related errors will not be supported here, make sure you do the right thing.
All the tabbed widgets need to have a title.

Three colum footer for blogger blogs

2009-12-14T22:47:00.000-08:00

Creating the new columns

Here are the four steps needed to transform the footer section of your blog template:

Back up your existing blog template!

Before making any modifications to your blog template, it is essential that you make a back up of your existing template. Then if you make any mistakes, or decide you don't like the new look, you can easily revert back to this design.

To back up your existing template, go to Template>Edit HTML in your Blogger dashboard, and click on the "Download Full Template" link near the top of the page. You can then save your existing XML template file to your computer.
Move all existing widgets from the existing footer section

In the Layouts section of your Blogger dashboard, move all widgets which are present in your footer section into your sidebar (or other section) instead. This is only temporary, as you can move them back later once we have finished adding your new footer section. Most importantly, this ensures that you don't lose these widgets during the modification, and makes it much easier to complete.
Add extra code to your footer section.

Go to Template>Edit HTML in your Blogger dashboard, and do not check the "expand widget templates" box (this simplifies the process).

Now you need to find this section in your template:

<div id='footer-wrapper'>

<b:section class='footer' id='footer'/>

</div>

Please note that this particular section may be called something slightly different in your template, eg: "footer-wrap" or "footer". In the case of Rounders templates, you may notice that there are in fact two DIV sections around the footer section. In any case, all we need to change is the line highlighted in red.

Replace the entire line highlighted in red with the code below:

<div id='footer-column-container'>



        <div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>



            <b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>

        </div>



        <div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>

            <b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>

        </div>



        <div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>



            <b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>

        </div>



<div style='clear:both;'/>

<p>

<hr align='center' color='#5d5d54' width='90%'/></p>

<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>



<b:section class='footer' id='col-bottom' preferred='yes'>

<b:widget id='Text2' locked='false' title='' type='Text'/>

</b:section>



</div>

<div style='clear:both;'/>



</div>

is a good idea to save your template at this stage, before we add just one small section of code to style the new footer section and ensure that the widgets don't get pushed beneath each other when you add them later.

Adding style for the new footer section

Once again, open the Edit HTML section in your Blogger dashboard. This time, you need to find the closing "" tag, which is where the style section of your template ends.
Immediately before this line, add the following lines of code:

#footer-column-container {

clear:both;

}



.footer-column {

padding: 10px;



}

And save your template again. The style in these lines of code ensure that the footer column don't get too bunched up, or slide beneath each other in the layout of your template.
Now you have finished adding these new sections to your footer, go to the Layout section of your Blogger dashboard (Template>Layout), and you will see the three new column, plus a lower section which spans the width of all three column, to which you can now add new widgets!
I added a horizontal line to the footer section to ensure that there is a clear distinction between content in the footer columns and content in the wider section beneath. If you would like to change the color of this line, you can do so by replacing the hex color values in the line below (highlighted in red) with a different color:

<hr align='center' color='#5d5d54' width='90%'/>

Height Fixer For Blogger

2009-12-12T00:47:00.000-08:00

Making the Sidebar and the Post Area to be of Same Height

Some of the simple blogger templates use CSS to set the background color of the sidebar and the main post part.In this case,the heights of these two columns can be different making it look a little awkward.In many cases you may want to make both of these columns of the same height.
If you didn't understand what i am talking of,then i will show you some demos.
Check out the sidebars of both

Blog Without Height Fixing – Link
Blog After Height Fixing – Link
The height adjustment can be done using a very simple javascript code.Actually i had to make something like this for another site of mine.So i thought of sharing this with you guys,
Here is the height fixing script.

<script type='text/javascript'>
<!--
onload=function() {

var mh = document.getElementById('main-wrapper').offsetHeight;
var sh = document.getElementById('sidebar-wrapper').offsetHeight;
if(sh>mh) mh=sh;
document.getElementById('main-wrapper').style.height = document.getElementById('sidebar-wrapper').style.height = mh+ 'px'
 }
//-->
</script>

What does this height fixer do?

When the page is fully loaded,this javascript code will get executed(as we have used onload). Now the variable mh will get the value of the height of the div with id main-wrapper.The variable sh will get the value of the height of the div with id sidebar-wrapper,Next we make a check.We check if sh is greater than mh.The greater of these values will be assigned to the variable mh
Now we set the height of both the divs[div with id sidebar-wrapper and the div with id main-wrapper] as sh pixels. So what does this actually do?? This script checks which of these divs have a larger height and assigns that larger height to both of these divs thus making both of them of equal height.

Where to place this height Fixer Code?

The height fixer code can be placed anywhere in the head section of your template.If you are still confused about where to place the code,then place it just above

</head>

Where else Can i Use this Script?

This script can be used anywhere where you need to adjust the height of two divisions(divs) to be the same.In that case don’t forget to change main-wrapper and sidebar-wrapper in this script with the respective ids of those divs.That means you can use this script to adjust the height of any two columns and make them of same height.
Why is the script having so many complex characters like < > etc?.
This is a parsed javascript.Blogger has problems with normal javascript(you might know this if you have tried to add the adsense code into the template).

Does this work on All Browsers?

This is a a very simple javascript code and it will work on all browsers.

blogger with name.com domain.

2009-12-12T00:40:00.000-08:00

Some days ago i bought a domain from name.com for a friend.

but the redirection is hard part.After search of 2 hours i got this tutorial

How to buy the Domain Name?

Name.Com will allow you to buy domains with different extensions like .COM, .NET, .ORG etc .
1. First of all Goto Name.Com and you will find a Search Box there. This search box can be used to check if the domain name is available or not. For example if i need the domain mynewcustomdomain.com , then i will search for mynewcustomdomain

2.Name will show the available domain name extensions.Select the one you want.

3.Click the Checkout Button and on the next screen opt to create an account(if you don’t have one. if you have one , then login with that account)

4.Now finish the payment process(using credit card or paypal) and you will be having the domain under your name.com account

How to Setup the Blogger Custom Domain?

1.If you are logged in at your name.com account, then click the Account Icon V

2. Now you will be taken to a page listing all your domains. Click on the domain name which you want to use for your blogger blog.

3. On the next screen Click DNS Management form the Right Sidebar
4.In the DNS Management, add a new CNAME record with the following values CNAME, www, ghs.google.com,1800 and submit

5.Now again add another DNS record with the following values A, (leave next field blank),216.239.32.21 and 1800 and click submit

6. Now we are done setting up the CNAMES
Adding the Custom domain at Blogger.com
1.Login to your Blogger Dashboard and Navigate to Settings > Publishing.
2.Opt For Switch to: Custom Domain (Point your own registered domain name to your blog) and switch to advanced settings
3.Type your new domain there ,fill in the Captcha and save the settings.
4.Now select the redirection Option and save the settings Once again
5. Now your blog should be visible at your new domain. The changes can take up to 3 days to take effect (This is because your ISP’s DNS Server has to get the new updated information aboutthe domain records.)

Setting Up Google APPs

1.Login to you Name.Com account once again
2.Click the Account Icon and then Click the domain name that we just used.
3.Now Click on the Enable link next to Google APPS

4. On the next Screen fill out the required details and click Continue with setup

5.Now you will be able to access your version of Gmail at http://mail.yourcustomdomain.com and similarly you will have the other Google apps running on your sub domains.

that's all but this tutorial is very rear in the web so copy :)

Highlight Author Comment in Blogspot

2009-12-12T00:22:00.000-08:00

This trick is to give a Highlight Author Comment . This will make the blog's owner comments looks different from the visitors comments. It's very usefull and interesting blogger hack tips. You can see the example in my blog. Here is what to do to make a "Highlight Author Comment" effect in Blogspot.

1. Login to blogger, then choose "Layout --> Edit HTML". Don't forget to backup your template first.
2. Check the "Expand Widget Templates" box.
3. Copy this script and put it before

]]></b:skin>

or copy to your CSS area.

.comment-body-author {

background: #E6E6E6; /* Background color*/

color: #000; /* Text color*/

border-top: 1px dotted #223344;border-bottom: 1px dotted #223344;border-left: 1px dotted #223344;border-right: 1px dotted #223344;

margin:0;

padding:0 0 0 20px; /* Posotion*/

}

4. Then find this code:

<dl id='comments-block'>



<b:loop values='data:post.comments' var='comment'>



<dt class='comment-author' expr:id='"comment-" + data:comment.id'>



<a expr:name='"comment-" + data:comment.id'/>



<b:if cond='data:comment.authorUrl'>



<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>



<b:else/>



<data:comment.author/>



</b:if>



said...



</dt>







<b:if cond='data:comment.author == data:post.author'>


<dd class='comment-body-author'>


<p><data:comment.body/></p>


</dd>


<b:else/>







<dd class='comment-body'>



<b:if cond='data:comment.isDeleted'>



<span class='deleted-comment'><data:comment.body/></span>



<b:else/>



<p><data:comment.body/></p>



</b:if>



</dd>







</b:if>







<dd class='comment-footer'>



<span class='comment-timestamp'>



<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>



<data:comment.timestamp/>



</a>



<b:include data='comment' name='commentDeleteIcon'/>



</span>



</dd>



</b:loop>



</dl>

5. The red color text is the code that you have to add to your script. The position must be right.
6. And then save your template.

* You have to login into your blogger account before to give comments.

Banner on top of post area

2009-12-08T07:54:00.000-08:00

Let's suppose you want to feature a sticky post at the top of your Blogger posts, or perhaps you'd like to insert an AdSense box or site search facility. At present, there is no facility to do this in the default Blogger layouts system. But there are two ways around this problem. Change the post date to a future time: This is the easiest method, and is most useful for those who need a sticky post, perhaps about a future event after which time the post need not be at the top of other posts. To do this, simply click on "Post Options" beneath the type box when you are editing your post and change the date to somewhere in the future. Blogger doesn't have the facility to publish posts on a future date, so your "sticky post" will remain at the top of your main column until this date has passed.
Add a new page element:
This is a more permanant, neater and convenient way to add a "sticky post" to the top of your main column. Uses for this may include a search box, a message about your blog, or Adsense/banner ads. You'll notice in the default Blogger layout for your template that there is no "Add a page elenent" in the posts box. You can change this by following these steps:

Go to Page Elements>Edit HTML in your blogger dashboard. You don't need to expand the widget templates for this hack.

Find the following section of code:

This section relates to the "Posts" section in your layout.
Notice the part which says: You need to change this to "yes" to allow other elements to be added to the posts section.
Save your template and take a look at your "Page Elements". You should now see an "Add Page Element" link in the posts section (click image for an enlargement):

You can choose to add different page elements depending on your requirements:

To write an introduction to your blog, choose "Text"To add code for Adsense/banner ads, choose "HTML/Javascript"
To add a search function, copy your code into an "HTML/Javascript" element.
To add an image, choose "Picture".

Another Artical from blogger buster

Add a "Top of Page" Icon Link

2009-12-08T07:42:00.001-08:00

The icon is styled to appear in the bottom right-hand corner of the page (no matter what screen resolution a visitor uses to access your blog), and is linked to target the top of the page using the "#" symbol.
The icon link used in this blog is small and unobtrusive; to help new visitors understand how this can be used, I added title text to the image so the "Back to Top" prompt will appear when the visitor hovers their mouse over the link.
The code used to add a "Top of Page" icon link is constructed as follows (I have forced line breaks for clarity):

<a href="#"> <-- This link targets the top of the page



<img src="url-of-image" <-- The URL of your icon



alt="alternative text" <-- Alt text for accessibility



title="Back to Top" <-- This will produce the hover text



style="display: scroll; <-- This allows the image to scroll



position: fixed;<-- This fixes the image in place



bottom: 5px; <-- Makes the image appear 5px from the bottom



right: 5px;" /></a> <-- Makes the image appear 5px from the right,

 
then closes all tags

How to install the "Top of Page" Icon Link

To use an icon link like the one used here at Blogger Buster, simply copy all of the code below and paste this into an HTML/JavaScript widget in your layout:

If you use a Classic Blogger template (with no drag and drop widgets), you can paste this code into your blog's HTML code, somewhere between the and tags instead.

Customizing the Icon Link

If you would prefer to use a different image than the one used here, simply replace the URL of the image with the URL of your preferred image instead.
You can also reposition the icon to suit your design needs. For example, if you wanted the icon to be flush with the bottom right corner (no space), change the code explained above to read this instead:

position: fixed;
bottom: 0px;
right: 0px;

To position the icon further away from the right or bottom sides, simply increase the pixel value to reflect this distance.

Some Examples of "Top of Page" Icon Links

You needn't be restricted to using an arrow for your top of page link! Some of the designs I showcased in this recent post used ingenious methods of linking to the top of the page:

Left: La Blogueria uses paperclips to link to the top (and other parts) of the blog.
Center: In Tuneando el Blog, the icon link is animated when the mouse hovers over it!
Right: This page curl at the bottom right of Mi-Microsmos is a cleverly disguised (and very stylish) link which features a prompt on mouseover.
source:bloggerbuster

Install the Christmas Banner widget

2009-12-08T07:38:00.001-08:00

The Christmas banner is available in two formats for you to install as a widget in your blog:

PNG format: this is the style you can see in my own blog. PNG is a better format for images with transparency, but you will need to ensure you have also installed the PNG fix for IE6 and below, otherwise you will see a grey background to the image!
GIF format: this is suitable for all blogs and browsers, though the image quality isn't quite as good.

Use the appropriate button below to install your own Christmas banner with just one click! After Christmas, you can easily delete your widget, or replace it with a New Year banner instead (which I will be uploading shortly).

Install the New Year Banner widget

2009-12-08T07:36:00.000-08:00

This New Year banner is available in two formats for you to install as a widget in your blog:

PNG format: this is the style you can see in my own blog. PNG is a better format for images with transparency, but you will need to ensure you have also installed the PNG fix for IE6 and below, otherwise you will see a grey background to the image!
GIF format: this is suitable for all blogs and browsers, though the image quality isn't quite as good.

Use the appropriate button below to install your own New Year banner with just one click! You can easily remove the widget whenever you like by simply opening up the widget and clicking on the "remove page element" button in the pop-up window.
Wishing you all a happy and prosperous New Year!

Linkwithin related post widget

2009-12-08T07:22:00.000-08:00

Displaying links to "related posts" beneath individual entries on our blogs is a tried and trusted method of providing useful and interesting reading material for our readers.

I've written about several different methods which Blogger users can choose to display related posts - all of which perform their function well enough. But after seeing several of my favourite sites displaying links to related items with thumbnails using LinkWithin's free service, I was intrigued to discover how well this may be adapted for use with Blogger.

About LinkWithin

LinkWithin is a free service offered by a small team based in New York. This free service enables us to display related posts with thumbnails below our blog posts (the thumbnail is taken from an image within the post it links to).

We retrieve and index all stories from your blog archive, not just recent stories, making them accessible to new or casual readers of your blog who would not otherwise encounter them.

The posts chosen to appear as related posts are based on several factors including:

Relevance

Popularity

Recency

At present, LinkWithin is not ad-supported and is completely free to use. As explained on the FAQ page:

We plan to introduce revenue-sharing features in the future, but they will be optional.

At present, there is little documentation for us to be certain of these factors, though after testing LinkWithin in a few different sites, I'm pretty impressed by the choices generated for each post!

Here is an example of how LinkWithin functions for WeLoveBlogger.com:

Why LinkWithin may be a more ideal solution than other related posts solutions for Blogger

The "related posts" solutions for Blogger which I've used until now have all relied on label feeds. That is, the recent posts generated by such scripts collect recent posts from the same label (category). This often means that posts deeper within our archives are generally ignored, even when they may be far more relevant than the more recent posts displayed.

LinkWithin parses all posts from our blogs, and chooses the posts to be displayed using more complex and relevant factors. This ensures far greater relevancy which is better for our readers and also ensures that older posts are included in the display.

How to add LinkWithin Related Posts to Your Blogger Blog

If you're using a standard, uncustomized Blogger template, the method for installing LinkWithin is fairly straightforward. Simply visit the LinkWithin website, fill in the form on the right-hand side (choosing Blogger as your platform) and follow the instructions provided.

This will install the related posts in your template as a gadget beneath the main posts section, though you'll find the "You may like these related stories" section will be displayed beneath each of your blog posts (before the post-footer section). It will also display on each and every page of your blog, including the main, archive and search pages.

Custom Installation of LinkWithin for Blogger templates

If you prefer to display your related posts only on item pages or have a customized, non-standard Blogger template, here is how you can install LinkWithin:

Visit the LinkWithin website and fill in the form on the right-hand side. For the "platform" be sure to choose "Other":

On the next page, you will find a script like this is generated. From this code, you need to write down your unique "site ID" for later use (or copy this to your favourite text editor):

Once you have a note of your Site ID, go to Layout>Edit HTML in your Blogger dashboard and ensure you have checked the "Expand widget templates" box.

Using your browser's search function, locate this tag (or similar) in your Blogger template code:

Immediately before this line, paste the following section of code, replacing "YOUR_SITE_ID" with the ID number you have noted down for your site:
<b:if cond='data:blog.pageType == "item"'>

<script>

var linkwithin_site_id = YOUR_SITE_ID;

(function () {

var elem = document.createElement('script');

elem.type = 'text/javascript';

elem.src = 'http://www.linkwithin.com/widget.js?rand=' + Math.random();

document.getElementsByTagName('head')[0].appendChild(elem);

})();

</script>

<a href="http://www.linkwithin.com/"><img src="http://www.linkwithin.com/pixel.png" alt="Blog Widget by LinkWithin" style="border: 0" /></a>

</b:if>

Preview the changes you have made before saving your template. The LinkWithin gadget should not display in the preview; furthermore, if there are any errors in the installation you will be able to see before attempting to save.

If all is well, save your template and visit an item page in your blog: you should be able to see related posts showing up beneath your blog posts.

Support for LinkWithin's related posts

While I can help with installation for LinkWithin in Blogger templates, I'm not able to help with specific problems with the script.

Luckily, the LinkWithin team offer a good support service via email:

If your blog uses a non-standard custom template/theme, we will need to add support for your blog manually, and we can do this only if the widget remains installed on your blog. Please email us at support AT linkwithin DOT com, and we will fix the problem, usually within 1-2 days. Thank you for your patience!

At the moment, it appears we can only display three related posts. Hopefully LinkWithin will offer the option to display more (or less) items in a future version of the script.

Why I'm not using LinkWithin yet...

LinkWithin is a very useful solution for Blogger users wishing to display links to related posts in their blog. I recommend this service and will be using this in a future release of Blogger Buster.

My current template is highly complex and has served me well for many months. However, there are several new (and upcoming) customizations and new features for Blogger which may not work so well in this design. I'll explain more about this in a future post when the site changes are closer to completion.
source:bloggerbuster

Add a Customized Twitter Widget to your Blogger Blog

2009-12-08T03:40:00.000-08:00

Twitter has become one of the most useful social applications for bloggers. Many bloggers choose to feature their latest updates in a widget visible in their blogs. Here at Blogger Buster, for example, you can see a Twitter widget in the header section which features my latest "tweet".
Many readers have emailed me to ask how I customized this widget, so in this post I'll explain some methods you could use to create and customize your own Twitter updates widget, including a simple widget installer for you to add a widget similar to the one used here.
Twitter does offer a "Blogger" widget which can be installed using a one-click installer. This widget does not have any styling associated with it, ensuring your updates will appear in the same fonts and colors as other widgets in your blog.
If you have already added a Twitter widget to your blog, you can easily customize the appearance of this widget using some simple CSS techniques.
The widget code for your Twitter badge will most likely appear like this:

<--Add Style Here --> id="twitter_div">
follow me on Twitter

As you can see from the comments I added in red, you can add inline CSS styling to your widget code, in order to add borders, background color or even an easily recognizable icon.
Here are some examples of the code you can add in this section:

style="border: 3px solid #cccccc; padding: 5px;" <--This will add a wide grey border around the widget with some padding to ensure the text doesn't get too close to the edges.

style="background: #ffcc00;" <-- This will add a bright yellow background to the widget, ensuring this contrasts with other elements in the page.

style="background: url(http://imagehost.com/youricon.jpg) top left no-repeat; padding-left: 50px;" <--This will add an icon as a background image to your widget. The padding declaration ensures the text does not overlap the icon (this is the solution I use to feature the blue bird in my Twitter icon in the header section).

To add these style declarations into your Twitter widget, simply go to Layout>Page Elements in your Blogger dashboard and click on the "Edit" link for your Twitter widget. Then locate the section of code which begins like this:

and add your styling code to this section.Here is an example of the Twitter widget code with style declarations added in red:

style="background: url(http://bloggerbuster.com/images/twitter-icon.gif) top left no-repeat; padding-left: 50px;" id="twitter_div">
follow me on Twitter
view source click here

RSS Comments-update in discutions

2009-12-08T03:32:00.000-08:00

Using comments subscription is easy way to update yourself about comments.in specific topic.According to
Karl L. Gechlik other way is

Replace your commenting system with Intense Debate for more control over comments with a social flare. It is really easy to do, check out this information from their web site:

Interested in the comments your friends make? What if there was a way to follow your friends and be notified when, where, and also what they comment? Intense Debate provides this functionality through RSS feeds for each user. Subscribers will be notified in their RSS readers with a direct link to view the context surrounding the comment as well. Give it a try!
Also, don’t waste anymore time checking back in on a blog to see if anyone responded to your comment. Now you can get email notifications of replies to your comments, letting you know when the conversation continues while you’re gone.

Removing The Blogger Bar

2009-12-08T03:20:00.000-08:00

I hated the blogger bar across the top of my Web site because it didn’t really go with my template and I already had a Google search bar integrated. So I went on a mission to remove it and de-bloggerify my blog. I searched far and wide and for some reason kept hitting a dead end. It turns out that the code used to change the old blogger templates no longer works! So after tracking down the CSS changes here is how I did it:

All you need to do is add the following CSS to your template under edit HTML. You need to put in anywhere in your template between the tags.

#navbar-iframe { height:0px; visibility:hidden; display:none; }

It's a good idea to block out the layout of your design before you start, either on paper or in Photoshop, to streamline your workflow and organize your ideas.

Step 3 - Getting Started

Open up a shiny, new Photoshop document, say, 1000px by 1200px. We can always crop it later. I'm making it pretty narrow because I'm working on a laptop here, but feel free to go wider if you like more space to work.
Now, I'm not going to go into the debate about screen resolutions and optimal website width here. All you need to know is that the content of our page is going to be 800px wide, and that that's okay. So, on our 1000px wide document, we're going to drag in guides at the 100 and 900px marks to set the width. Our design has a sidebar, and I've decided to make it one third the width of the page. Two thirds of 800 is about 530, so let's put in one more guide at 630px. We'll also set a nice background color of #ebe8e8.

Step 4 - Header

Grab the rectangle tool and draw a big, blue box at the top of the document, mine is about 170px high and the color is #23b6eb. Next draw a skinny, dark grey bar at the very top of the page, I used #5d5a5a

Step 5 - Highlight

Now we're going to add a bit of a lighting effect on the blue header area. Create a clipping mask above the blue layer, then Grab a big, soft brush (400px wide) and pick a color a bit lighter than the blue background.
Now lightly click the tip of the brush right below the bar, around the centre of the document. Keep it subtle, and try not to let the lighter color reach the edges of the page (this will be clear later). And set the blending mode to screen.

Step 6 - Navigation Bar

Now we're going to add another bar to the bottom of the blue one, we can make it grey, but we're going to add a gradient overlay so it doesn't really matter.
In the layer styles panel, add a gradient from #e2e3e4 to #bebdbd at 90degrees.

Step 7 - Footer

Next, let's draw a grey box at the bottom of the page, I picked a color a bit darker than the grey from the bar at the top.

Step 8 - Logo

Background

For the logo, we're going to draw a rectangle and add another anchor point at the end, then drag it out to the side. To get rid of the rounding, option-click on the point.

Next, add some layer styles: a gradient overlay and a 1px stroke: Gradient from #aec457 to # cdf399

Text

Now for the text: big and bold.

Font: Myriad Pro
Style: Bold
Size: 60px
Color: #36809a

To give it some depth, add an inner shadow:

Step 9 - Tagline

Next I just added in a short tagline:

Font: Arial
Style: Bold
Size: 30pt
Color: #e4dfdf

Step 10 - Navigation

Write in the navigation links nice and big, spread them out and space them about evenly.

Font: Arial
Style: Bold
Size: 30pt
Color: #676666

Step 11 - Main Content

Time to paste in some dummy content. I used one bit header, which will be h2 and the smaller one will be h3 link to html ipsum.
Make the text boxes about The width of the first 2 thirds of the page. Text styles:
h2 Header:

Font: Arial
Style: Bold
Size: 36pt
Color: #0e5d7a

h3 Header:

Font: Arial
Style: Bold
Size: 24pt
Color: #444444

Paragraph:

Font: Arial
Style: Normal
Size: 14pt
Color: #595858

The dates under "latest updates" are going to be wrapped in a small tag, the font is the same as the paragraph, but 12pt. I copied the news item twice, cause I'm lazy.

Step 12 - Sidebar

Links

Next draw a skinny rectangle over our sidebar region, color #d4d6d3, with a 1 px stroke of #bebdbd
Fill up the sidebar with some more dummy content, you can get the free icons I used here. The fonts are:
h3 Headers:

Font: Arial
Style: Normal
Size: 24pt
Color: #044055

List items:

Font: Arial
Style: Normal
Size: 18/14pt
Color: #373737

Button

Next we're going to add a "join our team" button beneath the contributors links. The button is just a rectangle with the same gradient as the logo, and a 1px stroke color c7c7c7. The text is:

Font: Arial
Style: Normal
Size: 24pt
Color: #434343

Step 13 - Footer

To finish off the mockup, just add a bit of dummy copyright text, or whatever you want, to the footer. The font is:

Font: Arial
Style: Normal
Size: 14pt
Color: #e0e2e2

And that's it for the page design, it's nothing special, but its simplicity will make it easier for you to follow the rest of the process.

Part Two - Slicing the PSD

Now that we have our lovely completed psd, it's time to chop it up into pieces we can use. The idea here is to use as few images as possible, and to make them as small as possible. Okay, so let's start with the header. We want it to stretch out across the whole screen, no matter how wide it is. To do that, we're going to grab a tiny little sliver of the header, and have it repeat across the screen again and again, no matter how wide.

Step 14 - The Slice Tool

Now you probably haven't had to use the slice tool before, but it's really very simple. It just lets you slice your file into teeny tiny pieces which can be exported for the web.

Header

So, let's go ahead and grab a little slice of our header. Click and drag to create the slice, just like the rectangular marquee tool. Be careful to take the slice from the side of the image, so you don't get any of the highlight.

Now that we have this little stripe, we can repeat it along the x-axis. The highlighted area, however, is non-repeating, so we have to cut out the whole thing. Slice the section of the header between the two guides that denote our 800px width.

Footer

We use the exact same process for slicing the footer, grab a skinny piece of the footer.

Everything Else

We just need a couple more images: the "subscribe" icons and the "join our team" button.
Because the icons and the logo are irregularly shaped, we're going to save them as transparent .png files, so we're going to come back and grab them separately.
Okay, so to slice the button, we can use the same technique as the header and footer, but this time we only need the one thin slice. When you make the slice, be sure to not include the 1px stroke, (we're going to add that in later) you might need to zoom in really close for this.

Step 15 - Export for the Web

Now that we have our images all sliced up, let's save them as optimized jpegs and put them someplace useful.
Go to File/Save for web and devices... In the popup window, hold down shift and click to select each of the slices (again, you might want to zoom in) Check that the "preset" drop-down menu is set to JPEG-High, uncheck the "convert to srgb" and click "save"

In the next window that pops up, pick a name and location for your images, I'm just going to save to the desktop for now.
Make sure it's set to "images only", "default settings", and "selected slices only."

Next, check out the location you saved your files to. Instead of seeing the individual images, you'll just find a folder labeled "images" where all your pictures are located. The computer will give each image a number, which isn't very useful. Check that you have the right images, then name them appropriately.
Now, back to those pesky icons and the logo. Be sure to hide all the background layers, then take out the slice tool again and cut out nice little boxes around each icon and the logo.

Now we go through the same process of exporting for the web as we did with the jpegs, only this time be sure to select PNG-24 from the "preset" dropdown menu, and that the "transparency" box is checkmarked. Rename these files too, and your images folder should look something like this:

Alright, that's it, we're done cutting up our psd, and we have all the images we need. Don't close Photoshop just yet, though, we'll still need to pick out colors, fonts, dimensions, etc.

Part 3 - HTML

Step 16 - Getting Started

Alright, time to dive into some html. The first thing you're going to need is a code editor of some kind. This is often an area of personal preference, but I recommend starting off with a free one. For mac and PC, I highly recommend Komodo edit as a first code editor. It has a lot of features that are ideal for beginners and advanced users. One of the best features is the syntax-checker, which is like the spell-check in word processors, which will identify and explain little mistakes. For PC, there are a lot more options, none of which I'm very familiar with, but check out Andrew Burgess' article 22 Neat Code Editors for Windows
In this tutorial, we're going to use Komodo edit, but the principles are the same in every editor.

Step 17 - Setting up our Folders

First things first, we need to set up a place to hold all the files related to our site. Create a folder for your website, mine is called "MySite", inside this folder, create another folder containing the images we just sliced. Name this folder "images". Now we open up our code editor, this part will be a bit different depending on what software you're using: If you're following along in Komodo, select "create new project" and save/move the .kpf file to the "MySite" folder. When you open up the file, the file browser at the side of Komodo should display the contents of the folder. Next right-click on the project file, and scroll to "add" and select "new file". In the window that pops up, select "html(xhtml)" and name the file "index.html".

If you're using another editor, the process should be similar, but the essentials are the same: you need to create an index.html file, and it needs to be in the "MySite" folder along with the images folder.

Step 18 - Setting up our index.html File

The first thing we need to do is declare the doc type, character encoding, and create the tags. Many editors will do this for you, but if not, it should look something like this:

xml version="1.0" encoding="UTF-8"?>
>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
html>

between the html tags, we need a "head" section, which contains all sorts of important information about the site which isn't displayed within the body of the site. For us, at this point all it's going to contain is the title of the page, like this:

<head>
<title>MySitetitle>
head>

	MySite

below the head, logically, we add the body, also contained within the tags. Okay, so far we have:

xml version="1.0" encoding="UTF-8"?>
>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>MySitetitle>
head>
<body>
body>
html>

MySite

This is a basic page setup, you might want to save this clip somewhere for future use. So remember when we said we'd have header, content, sidebar, and footer sections? Good, now each of these is going to be within its own

, and will be given an appropriate id.

<body>
<div id="header">
div>
<div id="content">
div>
<div id="sidebar">
div>
<div id="footer">
div>
body>

NOTE: it's a good idea, especially when you first start, to add comments at every

so you can keep track of the hierarchy of divs. Now let's take another look at our psd - remember how we want the footer and header slices to repeat indefinitely out to the sides? We're going to need a way to let these elements stretch out, but at the same time, we need the main content ("content" "sidebar") to be contained within a specified width at the centre of the screen.
To handle this, we need a big div holding our expanding elements, and a div to contain the main content. We should also notice that the footer text is centered too, so we need to repeat the same process for the footer. To do this, we need to wrap some divs around the ones we already have. We have two basic sections, the main section, and the footer section. Each is going to be contained within one big, unruly div with an unspecified width, and the content of each will be wrapped in individual divs that specify width and centering.
We want to use the same rules for the main and footer content, so instead of (or in addition to) specific id's, they will have specified classes, which means you can create a set of rules to define all div's with the same class.
So the main content is going to be wrapped inside a div with the id "main" and our footer will be wrapped in a div with the id "footer." If it helps to visualize the structure, here's a diagram:

And the markup looks like this:

<body>
<div id="main">
<div id="header">
div>
<div id="content">
div>
<div id="sidebar">
div>
div>
<div id="footer">
div>
body>

Now we wrap each section in a containing div, with the class of "container."

view plain copy to clipboard print ?

<div id="main">
<div class="container">
<div id="header">
div>
<div id="content">
div>
<div id="sidebar">
div>
div>
div>
<div id="footer">
<div class="container">
div>
div>

I know all these wrapping divs seem redundant, but they will become relevant when we start styling the page.

Step 19 - Adding Content

Now that the structure of our page is set, we can start adding content, from top to bottom. Here's an outline of the html elements that will make up our page:

Header

At the very top we have our header, and within the header we have 3 main elements: a logo, a tagline, and a navigation menu. So let's create a div for our header, and to keep things clean, we'll put the logo and tagline in their own divs.

<div id="header">
<div id="logo">
div>
<div id="tagline">
div>
div>

Because it's the most important heading of the page, the Logo is going inside an

tag. We have more options for the tagline, depending on how relevant it is to your site. In this case, I'm using an

tag. For the navigation, standard practice is to place menu items within an unordered list, with each list item containing an anchor tag. So we have:

<div id="header">
<div id="logo">
<h1>Logoh1>
div>
<div id="tagline">
<h3>And a little tagline, too.h3>
div>
<ul id="menu">
<li><a href="#">Homea>li>
<li><a href="#">Abouta>li>
<li><a href="#">Portfolioa>li>
<li><a href="#">Contacta>li>
ul>
div>

Logo
And a little tagline, too.
Home
About
Portfolio
Contact

NOTE: the "href" value in the anchor tags would normally specify where the link goes, but in this case, the pound symbol just means "link to top of page."

Main content

Looking at our main content area, we have 4 different styles of type: a big heading at the top, a smaller one, and an even smaller one heading for the news item titles, plus some paragraphs, and the small little dates on news items. We're going to call these

,

, , and , respectively. Now it's just a matter of pasting in your content, which isn't much fun, but it is pretty easy.

<div id="content">
<h2>Lorem ipsum, Dolor sith2>
<h3>Nullam vulputate felis id odio interdum nec malesuada mi pretium. h3>
<p>Praesent luctus egestas nisl, vitae vehicula eros rhoncus vel.
Phasellus consequat arcu eu neque convallis eu vulputate diam vehicula. In eget venenatis nisl.
Vestibulum id nulla eu sapien pellentesque malesuada pharetra ac lacus.
Curabitur et ultricies quam. Aenean pretium aliquet velit, gravida vulputate urna tempus vel. p>
<p>Proin tempor erat sit amet nisl porta nec vulputate arcu imperdiet. Praesent luctus egestas nisl, vitae vehicula eros rhoncus vel.
Phasellus consequat arcu eu neque convallis eu vulputate diam vehicula. In eget venenatis nisl.
Vestibulum id nulla eu sapien pellentesque malesuada pharetra ac lacus. Curabitur et ultricies quam. Aenean pretium aliquet velit,
gravida vulputate urna tempus vel. Proin tempor erat sit amet nisl porta nec vulputate arcu imperdiet. p>
<div id="news">
<h3>Latest Updatesh3>
<h4>Vestibulum id nulla eu sapien pellentesqueh4>
<small>June 1, 2009small>
<p>Ut vel turpis a orci pulvinar tincidunt. Mauris id purus turpis. Aliquam metus arcu,
facilisis quis pellentesque vitae, dapibus non nulla. Nulla suscipit sagittis sodales.
Etiam laoreet ante in purus laoreet id malesuada dui pretium.<a href="#"> Read Morea>p>
<h4>Vestibulum id nulla eu sapien pellentesqueh4>
<small>June 1, 2009small>
<p>Ut vel turpis a orci pulvinar tincidunt. Mauris id purus turpis. Aliquam metus arcu,
facilisis quis pellentesque vitae, dapibus non nulla. Nulla suscipit sagittis sodales.
Etiam laoreet ante in purus laoreet id malesuada dui pretium.<a href="#"> Read Morea>p>
div>
div>

Lorem ipsum, Dolor sit

Nullam vulputate felis id odio interdum nec malesuada mi pretium.
Praesent luctus egestas nisl, vitae vehicula eros rhoncus vel.
Phasellus consequat arcu eu neque convallis eu vulputate diam vehicula. In eget venenatis nisl.
Vestibulum id nulla eu sapien pellentesque malesuada pharetra ac lacus.
Curabitur et ultricies quam. Aenean pretium aliquet velit, gravida vulputate urna tempus vel.
Proin tempor erat sit amet nisl porta nec vulputate arcu imperdiet. Praesent luctus egestas nisl, vitae vehicula eros rhoncus vel.
Phasellus consequat arcu eu neque convallis eu vulputate diam vehicula. In eget venenatis nisl.
Vestibulum id nulla eu sapien pellentesque malesuada pharetra ac lacus. Curabitur et ultricies quam. Aenean pretium aliquet velit,
gravida vulputate urna tempus vel. Proin tempor erat sit amet nisl porta nec vulputate arcu imperdiet.

Latest Updates

Vestibulum id nulla eu sapien pellentesque
June 1, 2009
Ut vel turpis a orci pulvinar tincidunt. Mauris id purus turpis. Aliquam metus arcu,
facilisis quis pellentesque vitae, dapibus non nulla. Nulla suscipit sagittis sodales.
Etiam laoreet ante in purus laoreet id malesuada dui pretium. Read More

I've added anchor tags with the value "Read More" at the end of each news item.

Sidebar

On to the sidebar now. The sidebar has three elements, each of which will be wrapped in its own div. Each div will contain an

header, and an unordered list, and each list item will again contain an anchor tag. So go ahead and copy and paste your text in, and it should look something like this:

<div id="sidebar">
<div id="subscribe">
<h3>Subscribe!h3>
<ul>
<li><a href="#">Subscribe via RSSa>li>
<li><a href="#">Get Email Updatesa>li>
<li><a href="#">Follow us on Twittera>li>
ul>
div>
<div id="popular">
<h3>Popular Itemsh3>
<ul>
<li><a href="#">Lorem ipsum dolor site ameta>li>
<li><a href="#">Ulvinar tincidunt, Mauris ida>li>
<li><a href="#">Lorem ipsum dolor site ameta>li>
<li><a href="#">Proin tempor erat sit tenea>li>
ul>
div>
<div id="contributors">
<h3>Contributorsh3>
<ul>
<li><a href="#">John Smith, freelance writera>li>
<li><a href="#">Jack McCoy, designera>li>
<li><a href="#">Lenny Briscoe, editora>li>
<li><a href="#">John Smith, martketinga>li>
ul>
<a href="#">Join Our Teama>
div>
div>

                





                    





Subscribe!
                    





                        
Subscribe via RSS
                        
Get Email Updates
                        
Follow us on Twitter
                    
                





                





                    





Popular Items
                    





                        
Lorem ipsum dolor site amet
                        
Ulvinar tincidunt, Mauris id
                        
Lorem ipsum dolor site amet
                        
Proin tempor erat sit tene
                    
                





                





                    





Contributors
                    





                        
John Smith, freelance writer
                        
Jack McCoy, designer
                        
Lenny Briscoe, editor
                        
John Smith, martketing
                    
                    Join Our Team

Footer

We may as well put the footer in before checking it in the browser, it should only take a second. Worth noting is that any symbols you want to use in your text have special codes in html, for example, the copyright symbol is coded as ©

<div id="footer">
<div class="container">
<p>Copyright © 2009 MySite <br />
All Rights Reservedp>
div>
div>

        





            Copyright © 2009  MySite 

            All Rights Reserved

And that's about it for the markup, let's take a look:

looks pretty good, no? Well, no, not yet. But it does contain all the information we need, and is ready for styling.

Part Four - CSS

Step 20 - Adding CSS

Now, this is where the magic happens. Create a new file in our site folder, and call it "style.css". Now we need a way to tell the browser that this css file belongs to our index.html file, so we link to it with the "link href" tag. Put this line of code into your section, beneath the title.

"style.css" rel="stylesheet" type="text/css" media="screen" />

Now our html file can access our css file, so whatever changes we make to the css will affect the html file.

Step 21 - Basic Cleanup

There are a couple ugly things about our site that we can fix right away: we want to change the default font, we want the content to be 800px wide and centered, and we want to get rid of all those spaces between the elements.
First, we're going to pick a font for all text within the body of the page, which will be displayed unless otherwise specified:

body { font-family: Arial, Helvetica, sans-serif; }

body { font-family: Arial, Helvetica, sans-serif; }

Next, let's define the width and margins of our "container" class divs.

.container {
width: 800px;
margin: 0 auto;
}

.container {
    width: 800px;
    margin: 0 auto; 
}

the margin: 0 auto property is shorthand meaning that there is no margin at the top, and that it will be automatically centered horizontally. Let's take a look.

Much better. The next step is going to make things look much worse, but stick with me.

CSS reset

All browsers use default padding and margin values for each element, which makes unstyled pages look nice, but for us they just get in the way of our own styles.
To get rid of all these messy margins, we're going to use a very simple css reset, which is just a rule that gets rid of the default padding and margins on the elements we're using. Put this at the top of your css file:

'
body, div, h1, h2, h3, h4, h5, h6, p, ul, img {margin:0px; padding:0px; }

'
body, div, h1, h2, h3, h4, h5, h6, p, ul, img {margin:0px; padding:0px; }

now let's look:

Step 22 - Header

Okay, so everything's all squished up and ready for us to manipulate! Now we get to start adding our own styles, again, from top to bottom. Let's get the tricky part out of the way first: setting the background images for the header.
We'll star with the repeating slice we took of the header. The repeating image is going to be within the "main" div, which has an undefined width. We need to let the browser know where the image is, and what to do with it (repeat, no-repeat) to set a background image, we use the property "background" and specify the location of the image or 'url': in our case, the image is in our images folder, so we specify the location like this:

url (images/header_slice.jpg)

 
url (images/header_slice.jpg)

then specify that we want it to repeat along the x-axis:

#main {
background: url(images/header_slice.jpg) repeat-x;
}

#main {
    background: url(images/header_slice.jpg) repeat-x; 
}

Check it out:

awesome, right? Try stretching out your browser, it just goes on and on and on... But we're still missing the highlight on the blue bar, and since we cut out an 800px part of our header, we can put it inside our "container" div. Problem is, we have two of those (one for the main div, one for the footer) so we need to specify that we want the div with the class "container" that lies within the div with the id "main" set the image the same way as before, but this time we need to specify "no-repeat":

#main .container {
background: url(images/header.jpg) no-repeat;
}

#main .container {
    background: url(images/header.jpg) no-repeat; 
}

Take a look:

great! the highlight is sitting just where we want it, and blending in to the repeating sides.

Step 23 - Logo Image Replacement

Our logo is pretty complicated, right? we're using an image background, and a non-html font with an inner shadow. We can't do that in css, so we have to replace the text with an image. "why not just put the image in place of the

line?" you may ask. Well, on the internet, the

header is basically the 'name' of your page, and important, powerful robots (google) scan for this property when searching for keywords. If you don't have an

header, your site could be called kalamazoo, but it wouldn't turn up in a search for that exact word. There are various other techniques which have their advantages over this one, (see here, especially technique #8) but this is the simplest and the most appropriate technique for this situation. So, to fix this problem, we use a devious little technique called "image replacement" to use the image that we want, while keeping the

header in our markup. First, let's add the image as a background to the #logo div.

#logo {
background: url(images/logo.png) no-repeat;
}

#logo {
    background: url(images/logo.png) no-repeat;
}

if you look at your browser, you'll see that our logo has been chopped in half. This is because we haven't given it any room, we can solve this by specifying the dimensions of the image:

#logo {
background: url(images/logo.png) no-repeat;
height: 84px;
width: 235px;
}

#logo {
    background: url(images/logo.png) no-repeat;
    height: 84px;
    width: 235px; 
}

Better, but we still have the original

text in our way, but we can fix it! All we're going to do is set the text-indent value to something ridiculous, like -9999px, way off the page, so no one will ever see it, except the search engine robots.

#logo h1 {
text-indent: -9999px;
}

#logo h1 {
    text-indent: -9999px; 
}

now take a look, and our logo image is happily sitting where our

text used to be. But it still looks pretty bad, all cramped up at the top there. When we want to move an item from its original position on the page, we can use both the padding and the margin properties. We're going to try both to see the difference First, let's try adding a margin to the top of the h1 tag. We can find out how big to make it with the ruler tool in Photoshop.

#logo h1 {
text-indent: -9999px;
margin-top: 40px;
}

#logo h1 {
    text-indent: -9999px;
    margin-top: 40px; 
}

Oops! We managed to move the logo, but it took the whole page with it! Let's try adjusting the padding instead:

#logo h1 {
text-indent: -9999px;
padding-top: 40px;
}

#logo h1 {
    text-indent: -9999px;
    padding-top: 40px; 
}

Now take a look, and the damn thing went back to where it started! This is because the margin property moves the whole element, but the padding only moves the content of the element, leaving the background where it is. So, if our screen was, say , 19999px wide, we would see our outcast

header move down 40px, but this is not what we were going for. So, to move the background image of the logo, we need to move the div above it, because the whole logo div is the "content" of the header div. let's try it out:

#logo h1 {
text-indent: -9999px;
}
#header {
padding-top: 40px;
}

#logo h1 {
    text-indent: -9999px;
}

#header {
    padding-top: 40px; 
}

Much better! Now our logo looks just like it does in our psd, in exactly the right spot. If only we could fix that tagline...

Step 24 - Floating the Tagline

So now we need to find a way to get that tagline out beside the logo. Problem is, html elements naturally stack vertically, pushing eachother up and down the page. We have a few options to fix this, but I'm going to use floats, which are a little tricky, but seriously useful once you get the hang of them.
Okay, so what's a float? Well, that's complicated. Basically, when you tell an element to 'float', it sticks it to the side of a page or element, and also takes it out of the normal "flow" of the page. Confused? Let me demonstrate.

view plain copy to clipboard print ?

#logo {
background: url(images/logo.png) no-repeat;
height: 84px;
width: 235px;
float: left;
}

#logo {
    background: url(images/logo.png) no-repeat;
    height: 84px;
    width: 235px;
    float: left; 
}

Well, as you can see, we managed to get our tagline out to the side, but it took the navigation menu with it. I think of it this way: a normal element (for example, a div, or an h1 header, or an image), even if it's really small, invisibly occupies all the space to the side of it, like one big long horizontal bar.

This is why all the other elements stay beneath it, instead of cozying up beside. When you float an element, You take away all the extra space to the side, and restrict it to only the space it directly takes up, allowing other elements to wrap around it. Now that you know how floats work, how can we fix our present situation? First, we have to isolate the tagline into a float of its own, so it too lies outside the normal "flow" of the page:

#tagline {
float: left;
}

#tagline {
    float: left; 
}

Take a peek in the browser, and look at that, we made it worse. Now the menu items are wrapping around our tagline! What we need here is to restore the normal flow of the document after the floated elements. There are a couple ways to do this, but we're using the most straight-forward method. Go back to your index.html file, and add in a new div beneath our floated divs. Instead of adding a class or id to this div, we're going to give it a style (yes it's an inline style, but only a teeny little one) clear: both.

<div id="header">
<div id="logo">
<h1>Logoh1>
div>
<div id="tagline">
<h3>And a little tagline, too.h3>
div>
<div style="clear:both">div>

    





    	





Logo
    





    





    	





And a little tagline, too.

Resave your html file and check in your browser: you should see the tagline out beside the logo, with the menu below. Now all we have to do is get that tagline into shape, and put it where it belongs. Let's start by copying the font styles over from Photoshop:

#tagline h3 {font-size: 30px; color: #e4dfdf; }

#tagline h3 {font-size: 30px; color: #e4dfdf; }

and then add a bit of padding at the top and left:

#tagline {
float: left;
padding-top: 20px;
padding-left: 20px;
}

#tagline {
    float: left;
    padding-top: 20px;
    padding-left: 20px; 
}

take a look: now we're getting somewhere!

Step 25 - Navigation Bar

now we need to get our navigation menu in a straight line. First things first, though, we're going to style the font so we can space things out accordingly. When you style the font of a list of anchor tags, you need to specify not only that you are referring to list items, but to the anchors within them. We're specifying our specific unordered list, so that we can deal with the other ones separately. We also need to get rid of the underlines and the bullet points.

ul#menu {
list-style: none;
}
ul#menu li a {
font-size: 30px;
color: #676666;
text-decoration: none;
}

ul#menu {
    list-style: none; 
}

ul#menu li a {
    font-size: 30px;
    color: #676666;
    text-decoration: none; 
}

Great, now, we need to find a way to get all our links in a row. How? More Floats! We're going to set the list-items to float left, so that each item sticks to the one beside it.

view plain copy to clipboard print ?

ul#menu li {
float: left;
}

ul#menu li {
    float: left; 
}

If you look in your browser, you'll notice the same problem we had before with floated items: other elements are wrapping around it. Just like before, we can insert our clearing div right after the unordered list.

<ul id="menu">
<li><a href="#">Homea>li>
<li><a href="#">Abouta>li>
<li><a href="#">Portfolioa>li>
<li><a href="#">Contacta>li>
ul>
<div style="clear:both">div>
div>

	
Home
	
About
	
Portfolio
	
Contact

All our list items should be in a line now, we just have to space them out and move the menu down a bit. So first measure the distance from the bottom of our logo to the top of the menu text, and we get about 55px. the first item is about 30px left of our guide, so let's set the list item padding to 30px left.

ul#menu {
list-style: none;
padding-top: 55px;
}
ul#menu li {
float: left;
padding-left: 30px;
}

ul#menu {
    list-style: none;
    padding-top: 55px; 
}

ul#menu li {
    float: left;
    padding-left: 30px; 
}

We still need to put more space between each item, if we measure the space in our psd, it's about 105px, but since we already have 30px padding between each, we only need to add 75px padding to the right of each item.

view plain copy to clipboard print ?

ul#menu li {
float: left;
padding-left: 30px;
padding-right: 75px;
}

ul#menu li {
    float: left;
    padding-left: 30px;
    padding-right: 75px; 
}

And finally, admire our work:

Perfect! Our menu is just like the psd. On to the content!

Step 26 - Content

Top area

The first thing we're going to do here is set all the fonts, so we can see the spacing we have to work with. just plug in the font info from Photoshop:

#content h2 {
font-size: 36px;
color: #015878;
}
#content h3 {
font-size: 24px;
color: #444444;
}
#content h4 {
font-size: 18px;
color: #373737;
font-weight: normal;
}
#content p {
font-size: 14px;
color: #595858;
}
#content small {
font-size: 12px;
color: #373737;
}
#content a {
color: #0f6c8d;
font-weight: bold;
text-decoration: none;
}

#content h2 {
    font-size: 36px;
    color: #015878; 
}

#content h3 {
    font-size: 24px;
    color: #444444;
}

#content h4 {
    font-size: 18px;
    color: #373737;
    font-weight: normal; 
}

#content p {
    font-size: 14px;
    color: #595858; 
}

#content small {
    font-size: 12px;
    color: #373737; 
}

#content a {
    color: #0f6c8d;
    font-weight: bold;
    text-decoration: none; 
}

We get something like this:

At this point you may notice that we haven't set a background color for the content area yet. This is because... I forgot. So let's just do that now, shall we?

body {
font-family: Arial, Helvetica, sans-serif;
background: #ebe8e8;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background: #ebe8e8; 
}

Alright, now we're ready to add some padding to space everything out. first, the distance from the bottom of the nav menu to the top of the h2 heading is about 25px:

#content h2 {
font-size: 36px;
color: #015878;
padding-top: 25px;
}

#content h2 {
    font-size: 36px;
    color: #015878;
    padding-top: 25px; 
}

Next, the distance from the bottom of the h2 heading to the top of the h3 heading is also around 25px, so repeat basically the same code:

#content h3 {
font-size: 24px;
color: #444444;
padding-top: 20px;
}

#content h3 {
    font-size: 24px;
    color: #444444;
    padding-top: 20px; 
}

Now, the distance from the bottom of the h3 heading to the top of the first paragraph is about 45px, but if we set the padding-top to 40px, we will also end up with 40px of padding between the two paragraphs. Since the paragraphs are only about 20px apart, we need to split the padding into top and bottom: add 20px of padding to the bottom of the h3 heading, and 20px of padding to the top of the paragraph.

#content h3 {
font-size: 24px;
color: #444444;
padding-top: 20px;
padding-bottom: 20px;
}
#content p {
font-size: 14px;
color: #595858;
padding-top: 20px;
}

#content h3 {
    font-size: 24px;
    color: #444444;
    padding-top: 20px;
    padding-bottom: 20px; 
}

#content p {
    font-size: 14px;
    color: #595858;
    padding-top: 20px; 
}

Check out the results:

News section

The spacing is a little different in the news section, first of all, we need to push it down the page a bit. There's also too much padding beneath the h3 heading, so we're going to remove a bit. We also need to reduce the padding above the paragraphs, and add some padding between the two news items.

#news {
padding-top: 10px;
}
#news h3 {
padding-bottom: 10px;
}
#news p {
padding-top: 10px;
padding-bottom: 14px;
}

#news {
    padding-top: 10px; 
}

#news h3 {
    padding-bottom: 10px; 
}

#news p {
    padding-top: 10px;
    padding-bottom: 14px; 
}

Which looks like this:

There, now all we need to do is get the sidebar out to the side, and we're done the main content.

Step 27 - Floating the Sidebar

first, we need to set the width for the content section:

#content {
width: 510px;
}

#content {
    width: 510px; 
}

Now, to get the sidebar out there, we will once again be using floats, setting both the content area and sidebar to float left.

#content {
width: 510px;
float: left;
}
#sidebar {
float: left;
}

#content {
    width: 510px;
    float: left; 
}

#sidebar {
    float: left; 
}

If you take a look in your browser, you will notice that our footer text has wrapped around the sidebar. We know how to deal with this problem by now: we just need to add our little clearing div to the markup:

<div id="contributors">
<h3>Contributorsh3>
<ul>
<li><a href="#">John Smith, freelance writera>li>
<li><a href="#">Jack McCoy, designera>li>
<li><a href="#">Lenny Briscoe, editora>li>
<li><a href="#">John Smith, martketinga>li>
ul>
<a href="#">Join Our Teama>
div>
div>
<div style="clear:both">div>
div>
div>

	





Contributors
	





		
John Smith, freelance writer
		
Jack McCoy, designer
		
Lenny Briscoe, editor
		
John Smith, martketing
	
	Join Our Team

Alright, next step is to just copy over the font styles from our psd for the sidebar:

#sidebar h3 {
font-size: 24px;
color: #044055;
font-weight: normal;
}
#sidebar ul li a {
font-size: 14px;
color: #393838;
}

#sidebar h3 {
    font-size: 24px;
    color: #044055;
    font-weight: normal;
}

#sidebar ul li a {
    font-size: 14px;
    color: #393838; 
}

Remember that to style the font of the links in an unordered list, we need to refer to the anchor tag, rather than the list item itself. Now, if we look over at our psd again, we'll notice that the text for the list items in the "subscribe" widget is slightly larger than in the rest of the sidebar. To fix this, we need to target the specific unordered list, so we need to add an id value to the subscribe ul in our markup:

<ul id="subscribe">
<li><a href="#">Subscribe via RSSa>li>
<li><a href="#">Get Email Updatesa>li>
<li><a href="#">Follow us on Twittera>li>
ul>

	
Subscribe via RSS
	
Get Email Updates
	
Follow us on Twitter

Then we can refer to it in our css:

ul#subscribe li a {
font-size: 18px;
}

ul#subscribe li a {
    font-size: 18px; 
}

Now we need to style our sidebar: add padding, margins, backgrounds and borders. First let's get rid of the bullets:

#sidebar ul {
list-style: none;
}

#sidebar ul {
    list-style: none; 
}

OK so it's still way in the wrong spot, so let's fix that by adding margins to the top and left. When measuring in your psd, measure to where the border of the sidebar begins.

#sidebar {
float: left;
margin-left: 55px;
margin-top: 35px;
}

#sidebar {
    float: left;
    margin-left: 55px;
    margin-top: 35px;
}

Now for the background: underneath the margin-top property, add the background and border properties:

background: #d4d6d3;
border: 1px solid #BEBDBD;

background: #d4d6d3;
border: 1px solid #BEBDBD;

Next we'll add 15 px of padding on all sides:

padding: 15px;

padding: 15px;

And then add the padding to our text styles to space out our menu:

#sidebar h3 {
font-size: 24px;
color: #044055;
font-weight: normal;
padding-bottom: 20px;
padding-left: 15px;
}
#sidebar ul {
list-style: none;
padding-bottom: 25px;
}
#sidebar ul li a {
font-size: 14px;
color: #393838;
}
ul#subscribe li {
padding-bottom: 5px;
}
ul#subscribe li a {
font-size: 18px;
}

#sidebar h3 {
    font-size: 24px;
    color: #044055;
    font-weight: normal;
    padding-bottom: 20px;
    padding-left: 15px;
}

#sidebar ul {
    list-style: none;
    padding-bottom: 25px;
}

#sidebar ul li a {
    font-size: 14px;
    color: #393838; 
}

ul#subscribe li {
    padding-bottom: 5px; 
}

ul#subscribe li a {
    font-size: 18px; 
}

Our sidebar already looks almost perfect, we just need to add in the icons in the subscribe section, and style that "join us" anchor tag.
Okay, so let's get those icons working. Adding images to an unordered list can seem confusing, but if you take things step by step, it makes perfect sense. But it is a bit tedious. To start, we're going to have to make some room for the icons. We're going to set them as background images, so if we use the padding property to move our list items over a bit, the images won't be affected. The icons are about 26px wide, so we'll add some padding to the left of the list items:

ul#subscribe li {
padding-bottom: 5px;
padding-left: 30px;
}

ul#subscribe li {
    padding-bottom: 5px;
    padding-left: 30px; 
}

Now we need a way to target each separate list item, so we'll add some id's in the markup:

<ul id="subscribe">
<li id="rss"><a href="#">Subscribe via RSSa>li>
<li id="email"><a href="#">Get Email Updatesa>li>
<li id="twitter"><a href="#">Follow us on Twittera>li>
ul>

	
Subscribe via RSS
	
Get Email Updates
	
Follow us on Twitter

Now we add background images to each list item:

li#rss {
background: url(images/rss_icon.png) no-repeat;
}
li#email {
background: url(images/email_icon.png) no-repeat;
}
li#twitter {
background: url(images/twitter_icon.png) no-repeat;
}

li#rss {
    background: url(images/rss_icon.png) no-repeat; 
}

li#email {
    background: url(images/email_icon.png) no-repeat; 
}

li#twitter {
    background: url(images/twitter_icon.png) no-repeat; 
}

At this point it occurred to me that perhaps 18px was a bit too big for the links here, so I reduced it to a less dramatic 16px, which allowed me to add in a teeny bit more padding on the left without stretching the sidebar out.

ul#subscribe li {
padding-bottom: 5px;
padding-left: 35px;
}

ul#subscribe li {
    padding-bottom: 5px;
    padding-left: 35px; 
}

Our spartan little sidebar is almost complete! Now to style our button:
We need to target the button, so let's add a class to the markup: (im using a class instead of an id this time, which is common practice, as we could hypothetically add more buttons later)

"#" class="button">Join Our Team

Join Our Team

So let's just fix up the text style and add in our repeating background slice:

a.button {
color: #393838;
text-decoration: none;
background: url(images/button_slice.jpg) repeat-x;
}

a.button {
    color: #393838;
    text-decoration: none;
    background: url(images/button_slice.jpg) repeat-x; 
}

as you can see, our background image is there, but it only appears directly behind the text, we need to give it space to spread out. First, let's give it a margin to get it into the centre of the sidebar:

margin-left: 30px;

  margin-left: 30px;

and some padding on each side so our button spreads out:

padding: 13px 23px;

 padding: 13px 23px;

This is a short-hand way to write the padding properties, and is entirely acceptable, and even encouraged, since it saves space. In this case, it specifies 13px of padding on the top AND bottom, and 23px of padding on the left and right.

the button looks great, but oops! it moved to the right 23px, so let's reduce our margin a bit to compensate:

view plain copy to clipboard print ?

margin-left: 14px;

margin-left: 14px;

Now let's just give it some space underneath by adding padding to the entire sidebar div:

#sidebar {
float: left;
margin-left: 55px;
margin-top: 35px;
background: #d4d6d3;
border: 1px solid #BEBDBD;
padding: 15px 15px 30px 15px;
}

#sidebar {
    float: left;
    margin-left: 55px;
    margin-top: 35px;
    background: #d4d6d3;
    border: 1px solid #BEBDBD;
    padding: 15px 15px 30px 15px;  
}

here's that shorthand property again: it goes in this order: top, left, bottom, right. So here it says 15px on all sides except the bottom, which should be 30px.
finally, we just need to add that 1px border to the button class:

border: 1px solid #c7c7c7;

 border: 1px solid #c7c7c7;

And there we have it, one sidebar!

Step 28 - The Footer

Last but not least, our simple little footer. We'll set the footer the same way as we set the header: Using a repeating slice within an div of unspecified width, and then adding the content inside a fixed-width, centred div. This is where our .container div comes in handy, because we don't need to specify the 800px or margin:auto this time, because it's already done. Let's start with the repeating slice:

#footer {

    background: url(images/footer_slice.jpg) repeat-x; 

}

#footer {
    background: url(images/footer_slice.jpg) repeat-x; 
}

It's a start, but it's really tiny. let's add some padding, and make the text white:

#footer {

    background: url(images/footer_slice.jpg) repeat-x;

    padding-top: 20px;

    padding-bottom:60px;

    margin-top: 40px;

    color: #fff; 

}

#footer {
    background: url(images/footer_slice.jpg) repeat-x;
    padding-top: 20px;
    padding-bottom:60px;
    margin-top: 40px;
    color: #fff; 
}

and the whole thing:

Step 29 - Little Changes

In a browser, stuff looks a bit different than in Photoshop, so we might want to make some minor changes. For example, I'd like a bit more padding above the main content and sidebar. We'll add it to the bottom of the menu.

ul#menu {padding-bottom: 50px}

ul#menu {padding-bottom: 50px}

I also decided that I wanted the menu to align to the left, so I'm going to remove the padding-left. Now the items are closer together, because we had padding of 75px on the right and 30px on the left, for a total of 105. Now that we've taken away the left padding, we need to add it to the right to make up the difference:

ul#menu li {

    float: left;

    padding-right: 105px;

    width: 95px; 

}

ul#menu li {
    float: left;
    padding-right: 105px;
    width: 95px; 
}

And the grand finale:

So next... wait? what? we're done? We're done!
Now just some housekeeping to worry about: Validation.

Step 30 - Validation

Now validation is a crucial step in website design, I'm not going to go into the endless reasons here because this article does it for me. Here I'm just going to walk through the process:

HTML Validation

Go to the w3.org Validation Service, select validate by file upload, and select your index.html file, and click "check." Next... The moment of truth:
RED (Red is bad!)
Don't worry, it's not so bad; let's review what went wrong: looks like I only have one error:

They caught me using the same id tag twice, which could cause serious confusion. Since we have lots of styles defined for the ul with the id "subscribe", we're just going to change the name of the div instead: let's call it "feeds" Now we need to check that we haven't defined any styles for #subscribe, and we haven't! To be safe, let's reload our page to make sure there were no unintentional changes. Looks good! Now let's run the validation again:
Success! Our page is now valid XHTML. You can even download an icon if you want to brag.
Note: I was pleasantly surprised to find only one error, if you're not so lucky, read the suggested info at w3 shcools, or check out this article by Glen Stansberry.
It seems we're done! Ah, but if only it were that easy. We still have to validate our CSS!

CSS Validation

Head over to The w3 CSS Validator and go through the same process as with the html, only this time select your style.css file. Checking...
We're Valid!
However, we did get a couple warnings. To stay within the good graces of the church, we should certainly pay attention to them:

It's just a few little problems: we should have declared widths for all our floated items. Again, these suggestions are optional, but it's best to listen to constructive criticisms. Cleaning Up: our tagline, menu unordered list items, and sidebar all need to have widths declared. We also want to do this without changing the appearance of the page. First up, the tagline. We can just make a rough guess on this one, it's about 400px wide.

#tagline {

    float: left;

    padding-top: 20px;

    padding-left: 20px;

    width: 400px; 

}

#tagline {
    float: left;
    padding-top: 20px;
    padding-left: 20px;
    width: 400px; 
}

And reload: no change, excellent. Next, the menu list items. this is a little trickier: Our page is 800px wide, so that's the maximum total width of all the list items together. If we divide by the four list items, and set the width to 200px, the items get mixed up and list vertically. This is because we have padding on either side of each list items: 30px on the left and 75px on the right. Subtract that 105 from 200, and the remaining width is 95px.

ul#menu li {

    float: left;

    padding-left: 30px;

    padding-right: 75px;

    width: 95px; 

}

ul#menu li {
    float: left;
    padding-left: 30px;
    padding-right: 75px;
    width: 95px; 
}

Same idea with the sidebar: let's first take a look at the width of the content area: 510px. The remainder in our 800px page is 290px, but first we need to subtract all the padding on the left and right: 290-30=260. Next subtract the left margin, and we're left with 205px. One last problem: our 1px border, so let's subtract another 2px, and set the width of the sidebar to 203px. Check it again, no change.
Excellent, if we validate again, no errors, not even a warning! Our webpage, as far as w3c standards are concerned, is perfect.

ProBloggerHacks

Review on J2A Networks

Simple Photoshop Tips

Disfigure/Distort an Image

Stained Glass Effect

Ripple Effect

Canvas Texture

Glass Texture

3D Pyramid Texture

Tile Effect

logo design using Photoshop

Wow! Your nice colorful Bird logo is ready!

Your logo is ready!

Your logo is ready!

Designing website banner with a logo using Photoshop

Adding Light Box To Blogger Images Fixed and working.

SEO Optimization for blog and websites

Simple Way to Make Tabbed Sidebars on Blogger

The Final Result

Step 1 - Placing the styles on your CSS

Step 2 - Installing jQuery Library

Step 3 - Installing the Script

Customizing

How to find your sidebar’s ID

Method 1 - Getting from the HTML

Method 2 - Using Firebug

Method 3 - Using Web developer Firefox Plugin

What are the Gadget Numbers

Advices

Three colum footer for blogger blogs

Creating the new columns

Height Fixer For Blogger

Making the Sidebar and the Post Area to be of Same Height

What does this height fixer do?

Where to place this height Fixer Code?

Where else Can i Use this Script?

Does this work on All Browsers?

blogger with name.com domain.

Some days ago i bought a domain from name.com for a friend.

but the redirection is hard part.After search of 2 hours i got this tutorial

How to buy the Domain Name?

How to Setup the Blogger Custom Domain?

Setting Up Google APPs

that's all but this tutorial is very rear in the web so copy :)

Highlight Author Comment in Blogspot

Banner on top of post area

Add a "Top of Page" Icon Link

How to install the "Top of Page" Icon Link

Customizing the Icon Link

Some Examples of "Top of Page" Icon Links

Install the Christmas Banner widget

Install the New Year Banner widget

Linkwithin related post widget

About LinkWithin

Why LinkWithin may be a more ideal solution than other related posts solutions for Blogger

How to add LinkWithin Related Posts to Your Blogger Blog

Custom Installation of LinkWithin for Blogger templates

Support for LinkWithin's related posts

Why I'm not using LinkWithin yet...

Add a Customized Twitter Widget to your Blogger Blog

RSS Comments-update in discutions

Recent comments from blogger buster

Removing The Blogger Bar

Related Posts with Thumbnails for Blogger - New Version by BloggerWidgets

Related Posts Widget with Thumbnails for Blogger

demo

Table of Content

Design and Code Your First Website in Easy to Understand Steps

Step 2 - Getting Ready

What you need

Layout

Step 3 - Getting Started

Step 4 - Header

Step 5 - Highlight

Step 6 - Navigation Bar

Step 7 - Footer

Step 8 - Logo

Background

Text

Step 9 - Tagline