Women Magazine Islamic Wallpapers Islamic Names Arabic Mehndi Design Faraz Poetry Vector Icons Beauty Tips India Mehndi Design Boys and Girls Names Directories Web Games 2012 Events and Holidays Web Templates

Home Sitemap Contact
Home Islam News Horoscope Urdu Jokes SMS Women Section Articles Urdu Section Weather Directories Urdu Poetry
Today Date:
You are here: Home > Articles > CSS Articles > How To Create A Blogger/Blogspot Theme - Article

CSS Articles

Quick Links:   

How To Create A Blogger/Blogspot Theme

This tutorial will cover the steps needed to create your own blogger template. Many people have used blogger to run blogs and have wondered how they can make their own theme to use with it. There are a very few hard to find guides on how to do this, so I've decided to take up the task to help as many people as I can, create one. Incase you are skimming over the content, this article is teaching you "How to create a blogger / blogspot theme"

To create a blogger template, you will need a graphic editor (Such as Photoshop, GIMP, or even Paint will do) to create images for backgrounds, post headers, sidebars, etc.. We will get to that later. You will also need an idea or vision about what you want to create. Without that, you are just wasting your time and electricity. Lastly, you will need to know about C.S.S (Cascading.Style.Sheets) and how to operate them. If you do not know how to do that, you cannot apply interesting effects to your newly designed template (Such as: Positioning pictures or text, creating repeated backgrounds, moving around pictures and text and more). A great guide on how to get started with this is available here.

Once you have got everything you need, you should start the C.S.S Framework by putting properties such as

body[ background-color: #000000; margin: 0 auto; font-family: “Trebuchet MS”, Arial, Helvetica, sans-serif; font-size: 14px;}

#title [ font-size: 32px; color: #000011; }

so-on and so forth. A basic list of these tags that were taken from Blogger's simple white theme are available here: (PDF File) XML Tags Blogger List Of CSS. An easier way to do this would be to find a theme that you like and copy and paste the C.S.S, editing it along the way so that time is saved. The only problem with doing that is that every theme is engineered differently so the tags will change.

After configuring your CSS Stylesheet, you must piece it together in HTML. This can be achieved using similar structures.

<div id='main-wrapper'> <b:section class='main' id='main' showaddelement='no'> <b:widget id=’Blog1′ locked=’true' title='Blog Posts' type=Blog'/> </b:section> </div>

Do not forget to reference blogger templates that have already been created for the required widgets that you are supposed to put in certain spots. Without doing this, you could not complete making your own template.

Now comes the grueling part that you can either do yourself which could take hours to finish, or copy from another site and edit accordingly. Blogger is configured using widgets. All your posts are just one big widget hence the code up there. An Example of the code that you could type yourself or copy is:

<div class='post-footer'> <p class='post-footer-line post-footer-line-1'><span class='post-author'> <b:if cond='data:top.showAuthor'> <data:top.authorLabel/> <data:post.author/> </b:if> </span> <span class='post-timestamp'> <b:if cond='data:top.showTimestamp'> <data:top.timestampLabel/> <b:if cond='data:post.url'> <data:post.timestamp/> </b:if> </b:if> </span> <span class='post-comment-link'> <b:if cond='data:blog.pageType != “item”'>

<b:if cond='data:post.allowComments'> <b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if> </b:if> </b:if> </span> <span class=’post-icons’> <!-" email post links -"> <b:if cond=’data:post.emailPostUrl’> <span class=’item-action’> <span class=’email-post-icon’> </span> </span> </b:if>

<!" quickedit pencil "> <b:include data=’post’ name=’postQuickEdit’/> </span>

<p class=’post-footer-line post-footer-line-2′><span class=’post-labels’> <b:if cond=’data:post.labels’> <data:postLabelsLabel/> <b:loop values=’data:post.labels’ var=’label’> <data:label.name/><b:if cond=’data:label.isLast != “true”‘>,</b:if> </b:loop> </b:if> </span>

That code translated into human terms controls what goes at the bottom of every post…In this case its the author, time, comment link and labels. To extract the code from other templates, just click the “Expand Widget Templates” button and it is below the stylesheet on a certain template.

Most of creating a template is just trial and error. If you look at the code and try to piece it together bit by bit.. you will eventually succeed and reap the rewards of creating one. I hope this tutorial has covered everything that you will need and comments/suggestions would be greatly appreciated as it would be great if this tutorial would become a one-stop source for all of the Blogger CMS(Content Management System) users.

Source: Brad
More Articles Listing in this category:
The benefits of using CSS
Submitted by: Jim McCoy on 14-09-2008
Stylish and Accessible Forms using CSS
Submitted by: Sam Hickson on 14-09-2008
CSS Buttons Instead Of Image Files
Submitted by: Timothy Aaron Whiston on 14-09-2008
How To Create A Blogger & Blogspot Theme
Submitted by: Brad on 14-09-2008
Rollover CSS Image Menu
Submitted by: KarachiCorner-Admin on 14-09-2008
Share It!
  • Digg
  • Yahoo! Buzz
  • StumbleUpon
  • TwitThis
  • Reddit
  • del.icio.us
  • Technorati
  • Facebook
  • Mixx
  • MySpace
  • LinkedIn
  • Google Bookmarks
  • Print this article!
  • E-mail this story to a friend!
blog comments powered by Disqus

Subscribe via email
Download Free Vector Images Daily Horoscope
Send Free Greeting Cards Women's Corner
       Search Our Archives
Bookmark and Share
Makkah Wallpapers
Madina Wallpapers
Hamd | Naat | Bayanat
Urdu Stories
Urdu Poetry
Urdu Jokes
Urdu SMS
Women Section
Cooking Tips
Women Beauty Tips
Women Fashion
Mens Fashion
Pakistani Music
SEO Articles
Make Money Online
Islamic Boys Names
Islamic Girls Names
Urdu Novel
MSN Stuff
Love Calculator
Funny Videos
Online Games
Telephone Directory
Mobile Softwares
Web Templates
Events & Holidays
Hina Mehndi Designs
    More Categories
    Graphics Resources
Business Cards Designs
Latest jQuery Plugins
Fresh jQuery Plugins
Vector Graphics
Pattern and Texture
Business Card Design
Vintage Posters
Movie Posters
Advertise here
Makkah Wallpapers Madina Wallpapers News Mehndi Designs Daily Horoscope Mobile Ringtones Online Games Jokes Funny SMS Weather Updates SEO Articles Flash Games Make Money Articles Cooking Recipes Beauty Tips Women Section Greeting Cards Vector Icons Free PSD Templates Muslim Boys Names Women Jewelry Designs Banks Best Hotels Mobile Softwares
    Graphics Resources
Free Vector Cliparts
Free Vector Background
Mini Pixel Icons
Icon Packages
Technology Photos
Interface Icons
Vista Icons
Multimedia Icons
Mix Icons
Ecommerce Icons
Icandy Toolbar Icons
Custom Software Icons
Web Application Icons
Christmas Icons
Windows XP Icons
PSD Templates
Mobile Ringtones
    Useful Links
Earn Money with your Blog or Website
Urdu Jokes Urdu SMS Urdu Poetry
Women's Jewelry Women's Fashion Hind Mehndi Desings
    Technology Links
Free Online Games
Muslim Name islamic Names
Web 2 SMS Send Free SMS
Urdu Recipes

Popular Posts:

Mehndi Designs
Mehndi Designs, Hina Mehndi Designs, Arabic Mehndi Designs, India Mehndi Designs, Bridal Mehndi Designs
Urdu Poetry
The huge collection of Urdu poetry web site of the world. Faraz Poetry, Wash Shsh Poetry, Parveen Shakir, Mirza Ghalib
Daily Horoscope
Urdu-Mag.com has been providing horoscopes, astrology, and psychic readings on the internet for free.
Download Vector Icons
You can download high quality Vector and Web-Ready clipart for FREE. Free Vector Background, Mini Pixel Icons, Interface Icons, Vista Icons, Mix Icons
Food and Recipes (Cooking Recipes)
We have huge collection of Pakistani Recipes, Indian Recipes, Chicken Recipes, Lamb Recipes, Vegatable Recipes, Cury Recipes and much more...
Send Greeting Cards
Send free online greeting cards, animated cards, ecards, postcards & egreetings with quotes for friends and family on special occasions: Eid Geeting Cards, Birthday Greeting Cards, Love Greeting Cards, Friendship Greeting, ...
Donwload Mobile Ringtones
Browse our collection of polyphonic ringtones alphabetically or use our powerful search to find ringtones quickly.

Most Popular Pages:

News (Daily News, Sports News, Business News, World News)
Urdu-Mag.com News brings the breaking and latest news of Pakistan, world, business, technology, sports, entertainment, education, cricket, politics, and more & more.
Articles (SEO Articles, Health Articles, Make Money Articles )
Urdu-Mag.com is a free content search engine and article directory.
Submit your articles, email articles, browse articles in more than 50 categories.
Web Directories (Submit Your Site)
One Way Text Link is a list of web directories and a free directory submission tool to submit semi-automatically to over 3500 quality free web directories as well as paid directories and keep track of all of your submissions.
Urdu Poetry (Ahmed Faraz, Wash Shah, Parveen Shakir)
Urdu-mag.com have huge collection of faraz poetry, wash shah poetry, parveen shakir and other popular poets poetry, Urdu poetry archive with ghazals, nazms, articles, and links to related websites.
Islamic Names | Muslim Boys Names | Muslim Girls Name
Urdu-mag.com have large collection of Muslim Boys & Muslim Girls Names. Muslim names with meanings and arabic text. Islamic baby boy and girl names. Search Muslims Names.
Download Free PSD Templates
You can download high quality PSD Templates, Joomla Templates, Flash Templates, Business Templates, OSCommerce Templates, Mombo Templates, Free CSS website Templates, Ecommerce Templates for FREE..
Free SEO Tools
Free SEO Tools for webmaster, SEO Tools are Google Page Rank, Google Indexing, Yahoo Indexing, Alexa Page Rank, Backlinks, Link Popularty and more free SEO stuff
Copyright© 2008-2009 www.urdu-mag.com, All Rights Reserved. Contact Us