Along with the development of web technologies and web programming languages, web designing becoming more complex and the websites more flexible and user friendly. With the invention of CSS technology, web designing and programming becoming more easier than ever.

By using cascading style sheet (CSS) and its properties, you can give custom design to your website for different medias like screen, print, tv and for different screen sizes. The CSS @media property allows you to do such task.

Today I am going to describe "How to create custom CSS template for printing".

Designing Custom CSS Template for Printing

If you wanted to allow your website visitors to print the content of your website, you can design custom template for printing using CSS. You can define which part or your website will be printed or not and can add page setting for printing.

Here is a sample CSS code for website template.

body{
     background:#00aaff;
     font-color:#00000;
     font-size:16px;
     }

h1, h2, h3 { 

/* CSS codes for h1, h2, h3 */

}

#wrapper{
        width:80%;
        margin: 0 auto;
        background:#fff;
        padding:20px;
}

#content{
        width:54%;
        float:left;
        margin-right:3%;
}

#header{
       width:100%;
       margin-top:2%;
}

#sidebar-left{
        width:20%;
        float:left:
        margin-right:3%;
}

#sidebar-right{
        width:20%;
        float:left;
}

#footer{
       width:100%;
        }

While printing you can hide default header, menu and sidebar using CSS codes. Here is a sample CSS code for printing webpage.

body{
     background:#00aaff;
     font-color:#00000;
     font-size:16px;
     }

h1, h2, h3 { 

/* CSS codes for h1, h2, h3 */

}

#wrapper{
        width:80%;
        margin: 0 auto;
        background:#fff;
        padding:20px;
}

#header{
       display:none;
}


#content{
        width:100%;
        clear:both;
        margin-right:3%;
}

#sidebar-left{
         display:none;
}

#sidebar-right{
         display:none;
}

#footer{
        display:none;
        }

Place the above CSS code inside media queries for printing as below.

@media only print and (orientation:portrait) { 
    
     /* Add CSS code here for printing on portrait mode */
 }

@media only print and (orientation:landscape) { 
    
     /* Add CSS code here for printing on landscape mode */
 }

Adding Printing function and icon

Add the following HTML code where you want to place print icon.

<a href="javascript:window.print()"> Print this page </a>

Using this code the print link looks like as below                                     Print this page

<a href="javascript:window.print()"> <img src="print.jpg"></a>

Using this code the print icon looks like as below

<form><input type="button" value="Print This" onclick="window.print()"></form>

Using this code the print button looks like as below                                                            

Related Posts:

• How to Create Responsive Website or Blogger Template
• How to Create Simple Blogger Template Easily?
• How To Make Simple CSS Stylesheet for a Website ?
• How To Create Simple Menu Using CSS ?
• How to validate required field in a form using javascript
• How to Display Date Format in JavaScript?
• How to Create a Digital Clock in JavaScript?
• What are the Different Ways to Redirect Page in JavaScript?
• How to Detect Visitor's Browser Using JavaScript?
• Image Slideshow with Navigation Buttons Using Javascript
• How to Create Simple JavaScript Fade Effect Animation?
• Simple JavaScript Fade Effect Animation Using Jquery

To create successful blog, it needs to create blogger template more attractive and looks more professional. Even you can buy professional blogger template on the web, you may want to create blogger template by yourself for your blog. Creating a professional blogger template is more challenging task, but if you have some knowledge on HTML, XML, CSS and JavaScript, it is possible to create professional blogger template easily by yourself. In this series of tutorial, I am going to teach you basic to advanced steps to create blogger template. Today I am telling you "steps for creating a simple blogger template" with describing basic elements and along with its corresponding style sheet codes.

Step1: Preparing demo blog for creating blogger template

To test blogger template you have created, at first you need to set up a blogger blog and have to add some posts on the blog. To create a blog, go to blogger home page, log in using your Google user name and password and then click on create a blog link to get started. Write posts for a blog by clicking on create a new post button from the blogger dashboard.

Step2: Creating basic elements for blogger template

Open Notepad file write the codes according to the following format and save it as .xml extension.

# Creating XML Part

At first, add the following codes for  Document Type Deceleration(DTD) on XML part.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1 -strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

# Creating Header Part

After that, add the following header elements like head and title of the blog.

<head>
<title>
<b:if cond='data:blog.pageType == "index"'>
<data:blog.pageTitle/>
<b:else/>
<b:if cond='data:blog.pageType != "error_page"'>
<data:blog.pageName/> | <data:blog.title/>
<b:else/>
Page Not Found | <data:blog.title/>
</b:if>
</b:if>
</title>
</head>

# Creating CSS Part

Add custom css codes for your template in the following format. The css codes must be placed inside <![CDATA[*/ and ]]>

tag.

body{
font:normal normal 14px Verdana,Geneva,sans-serif;
color:#000;padding:0 40px 40px 40px;
background:#fff;
font-size:14px;
}
#outer-wrapper{
CSS for outer-wrapper
}
#header-wrapper{
CSS for header-wrapper
}
#titlewrapper{
CSS for titlewrapper
}
#descriptionwrapper{
CSS for descriptionwrapper
}
#menuwrapper{
CSS for menuwrapper
}
#contentwrapper{
CSS for contentwrapper
}
#mainwrapper{ 
CSS for mainwrapper
}

# Creating a Menu 

To create menu for a blog, add the code in the following format. Replace URL and name of the tabs. 

<div id='menuwrapper'>
<ul class='FirstLevel'>
<li><a href='http://www.homepage.com/' target='_self'>Home 
</a></li>
<li><a href='http://www.homepage.com/menu1.html' target='_self'>Menu1 
</a></li>
<li><a href='http://www.homepage.com/menu2.html' target='_self'>Menu2 
</a></li>
<li><a href='http://www.homepage.com/menu3.html' target='_self'>Menu3 
</a></li>
</ul></div>

# Creating blog content

To add main blog content part, add these codes to create a widget named Blog1.

<div id='outer-wrapper'>
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
  <b:widget id='HTML1' locked='true' title='Header' type='HTML'>
 </b:widget>
</b:section>
</div>
<div id='content-wrapper'>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
</b:widget>
</b:section>
</div>
</div>
</div>

Step3: Creating gadgets on sidebar and footer.

To create sidebar and footer and to add widgets  for them add these code, which allows you to add widgets on sidebar and footer.

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' showaddelement='yes'>
</b:section>
</div>

<div id='footer-wrapper'>
<b:section class='footer' id='footer' showaddelement='yes'>
</b:section>
</div>

Step4: Installing blogger template on required blog.

After creating a code file on Notepad in XML format, test it on demo blog. To install prepared template, click on backup and restore button from template option on blogger dashboard. Click on download full template, the xml file will be downloaded. Then go to the required blog then go to Template  ›  Backup / Restore option and browse and upload that xml file. The template will be applied on your blog.

Related Posts:

• How To Make Simple CSS Stylesheet for a Website ?
• How To Create Simple Menu Using CSS ?
• How to validate required field in a form using javascript
• How to Display Date Format in JavaScript?
• How to Create a Digital Clock in JavaScript?
• What are the Different Ways to Redirect Page in JavaScript?
• How to Detect Visitor's Browser Using JavaScript?
• Image Slideshow with Navigation Buttons Using Javascript
• How to Create Simple JavaScript Fade Effect Animation?
• Simple JavaScript Fade Effect Animation Using Jquery