If you are serious about getting exposure and making some extra adsense cash this is a contest for you.

- Out of My Mouth – http://www.outofmymouth.com -

Copyright © 2008 Out of My Mouth. All rights reserved.
This post is protected property of OutofMyMouth.com and the copyright holder. It may not be copied, syndicated, or used without including the Author Information and this disclaimer. OutofMyMouth.com is a member of The Hart Blog Network

I am in no way an expert in Blogger or BlogSpot, but I am passing along to your a nice free article on how to write a theme there since I know some of you blog there.

How To Create A Blogger/Blogspot Theme by Brad

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’>
<a class=’timestamp-link’ expr:href=’data:post.url’ title=’permanent link’><data:post.timestamp/></a>
</b:if>
</b:if>
</span> <span class=’post-comment-link’>
<b:if cond=’data:blog.pageType != “item”‘>

<b:if cond=’data:post.allowComments’>
<a class=’comment-link’ expr:href=’data:post.addCommentUrl’ expr:onclick=’data:post.addCommentOnclick’><b:if cond=’data:post.numComments == 1′>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</span> <span class=’post-icons’>
<!– email post links –>
<b:if cond=’data:post.emailPostUrl’>
<span class=’item-action’>
<a expr:href=’data:post.emailPostUrl’ expr:title=’data:top.emailPostMsg’>
<span class=’email-post-icon’> </span>
</a>
</span>
</b:if>

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

<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’>
<a expr:href=’data:label.url’ rel=’tag’><data:label.name/></a><b:if cond=’data:label.isLast != “true”‘>,</b:if>
</b:loop>
</b:if>
</span> </p>

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.

About the Author

This post was created by Brad. This article is from Brad Blogging.com, which is also where he blogs about tips to make your blog better, through personal experience. If you run a blog, or will be considering about creating one in the future, this blog may be the ultimate resource for you to achieve maximum success!!

BlogBoy Notes:To me everything looked quite sound, but I am not expert on blogger or BlogSpot so make sure you back up your current themes and templates.

]]> http://bradtheblogboy.com/wordpress-2/theme/bloggerblogspot-themes/feed/ 23 http://bradtheblogboy.com/wordpress-2/plugins/new-wordpress-25-plugins/?source=rss http://bradtheblogboy.com/wordpress-2/plugins/new-wordpress-25-plugins/#comments Wed, 23 Apr 2008 17:55:25 +0000 Blogboy http://bradtheblogboy.com/?p=64 Reading time: 2 – 4 minutes

I hit the jackpot on good plugin finds today for all you junkines. This morning I found myself sitting face to face with a site called Coffee 2 Code and a long list of WordPress 2.5 compatible plugins. I won’t go through the whole list but here are the ones you can bet will find their way into my blogs very soon.

· Auto Hyprelink URLs. It does just what it says by coding any plaint URL from your post or comment into a clickable link. While this has the potential for abuse with spam, it does mean you can remove the linking feature from the comments that might redirect someone elsewhere.

· HTML Special Character Helper. I don’t this very often, but when I do I really hate looking it up in an external program.

· Post to Post Link. While this is easily done with some preplanning normally, the description makes it look even simpler. I haven’t gone through the full trial on it, but it looked too good not to mention.

· Extra Sentence Space. As a novelist, this is one of those things that really, really bugs me about writing online. I see single spaces between a period and the next sentence and I want to correct it, which is bad because I have been web authoring before we were even calling it the web so I should be used to it, but I’m not.

· Obfuscate Email. This is another one I really don’t need since I already use another method to prevent harvesting.

Everyone needs to go have a look at their Technorati accounts today and make sure that their posts are getting indexed properly.  Because of some flaws and coding errors, and down right hacking by theme designers your Blog may be at risk.  Not only is Technorati not indexing, it can very well lead to your sight as being mark for spam on Yahoo and Google.

To see if you possibly aren’t being indexed or the spiders are just taking their sweet ass time getting to you try manually pinging  your account by entering a post specific url into the form at http://www.technorati.com/ping/  Give it an hour or so to get around to you and see if you get your pages added in, before bitching at tech support.  Also remember if you are using FireFox as a browser you should hit control f5 to reload the page and bypass the cache file when you are checking these accounts.

Check out Vulnerable WordPress Blogs Not Being Indexed for further reading.  If you have WP 2.5 you can also find the link on your dashboard. 

Featured links

Brad The Blog Boy - http://bradtheblogboy.com A Blunt Blog About Blogging.

Reciprocal links

	Brad’s Tiny World - http://www.bradstinyworld.com/ Current Events and Technology
	The Other Blog - http://bradsotherblog.com Brad Hart’s Pop Culture Blog!
	Mailboxmoney - http://mailboxmoney.blogspot.com A blog about making money online
	Experiments - http://www.experiments-experiments.blogspot.com This website talks about blogging and making money online
	ARC’s Earn Online - http://arc-earn-online.blogspot.com/ The purpose of starting this Blog is primarily try out all possible avenues in making money online and share the status and the outcome here.I am not here to make you millionaire but I could guide you
	Make Online Income - http://makeonlineincome.wordpress.com Learn to make a full time income online for no charge.

Submit your website

Please add a link to our website http://bradtheblogboy.com to your links page before
submitting this form!

Your link can immediately be seen on the main Link Exchange Page

I will give a free 60 Day Featured Link on my side bar to anyone who tell help me autoload this links table using the free php script PHP Link manager 1.4 from PHP Junkyard.