Customize a template is one of the first challenges for those who start a blog. To do this, nothing can save us of learning the basics of HTML and CSS, but there are some tools that can make this easier, as Firebug, a extension for Firefox and Chrome.

One of the simplest tools, but also more useful, in Firebug is Inspected, as its name implies, lets you navigate through each element of a website and know how it is configured and related to other elements.

This little guide will focus mainly on modifying the CSS code to adapt a design to our needs. CSS in Blogger is within the same template, between the codes <b:skin> and </b:skin>.

Customizing the CSS of a web element with Firebug.

To customize any feature of a web element from a Blogger template you simply:

1. Install Firebug in your browser: Firefox or Chrome. Personally I recommend to use Firefox, is more complete and quick, but applies to both the content of this tutorial.

2. Click the button for Firebug in the toolbar , then click the button to Inspect  and place the cursor right over the element to customize, it can be text, image, video, flash or anything, and click on it.

3. In the right Firebug panel, with the tab “style” active, shows all the styles that affect the element.

Styles are shown as a CSS style sheet, however, Firebug, sort and standardized the properties alphabetically.

It’s easy to recognize the following information: selectors, properties and the CSS rule location (code line and file that contains it).

4. Live tests.
Something very interesting of Firebug is that you can modify any CSS property and see the results directly applied on the page. You only need to click on the property or value to change it and see what happens directly on the page.

For properties that can only take certain values​​, Firebug lets explore them just clicking on the value and use the up and down keys of the keyboard.

And in the same way for numeric values:

Another really useful option is to disable the properties to see how an element behaves without them, simply click on the red circle to the left of each property.

Find the background image of an element is also useful when you are customizing a template, for it is only necessary to be placed on the element, clicking, and the panel of “Style” will appear the selector that contains the image, usually in property background or background-image.

Once you know you’ve come to the desired result in the tests, you need to apply those same changes to the styles in your template. Firebug saves never the changes, you should make this part of your hand.

In other words, if you’ve added a property in Firebug, you should add that same property to your CSS code, if you’ve made ​​a modification, it must be done in the styles of your template.

Screencast

With this introduction, you can see Firebug in action in the official screencast.

Conclusion

Firebug is a very intuitively tool, so some recommendations: Try and try, you will learn a lot about CSS and the tool itself, but without the risk of affecting your design. Read the official guide, where you can learn to take better advantage of the extension. And finally, learn at least basic CSS and HTML, it will make any design task less frustrating.

Step by step:

1. Go to your template code (Desktop → Design → Edit HTML) and expand widget templates.

2. Search the pages widget code, it looks more or less as follows:

<b:widget id='PageList1' locked='true' title='Pages' type='PageList'>
<b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content'>
    <ul>
      <b:loop values='data:links' var='link'>
        <b:if cond='data:link.isCurrentPage'>
          <li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li>
        <b:else/>
          <li><a expr:href='data:link.href'><data:link.title/></a></li>
        </b:if>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

To facilitate the search, can search with your browser: id = ‘PageList

3. Once you locate the code, there are two places where you can put new links:

• Before <ul>. The link will be the first one in the menu.
• After </ul>. The link will be the last one in the menu.

As this is an HTML list, the link will follow this format:

<li><a href='http://mysite.com/mylink/'>My link</a></li>

You can add as many links as the design permits. Always taking care of opening and closing tags correctly.

4. Save the changes.

In this way you can add links to a important label, an external site, the feed url or any other link.

This time we will make an exercise to create a small character from the paper, through Adobe Illustrator, to its implementation on HTML and CSS. At the bottom of the page we leave a file with the images and the code for you, so you can implement it on your web if you want. (See demo)

Vectors and picture

Vectors have great advantages and latest versions of Illustrator are amazing, our designs will be more than colored spots.

I won’t deny the fact that knowing some drawing basics is helpful, but definitely the web is a summary with images to take ideas from, to see different techniques. To begin on making our projects, drawing helps, but good ideas are always better.

From sketch to Illustrator

Let’s begin sketching our character. This will help us to have an clearer idea on how to start. As I said before, you can take ideas from images you have seen before and you think they are interesting.

I can say I like to making it this way, sketching. I usually trace on Illustrator directly but at least I can get a clearer idea and I know what to do. A while ago I spent a lot of time in front of computer without having a clear idea on what to draw and because of that I lost time. Some sketches finished that.

We will start with basic shapes for head and ears, we’ll draw three circles together and then apply Pathfinder (Shift+Ctrl+F9 or Window → Pathfinder) and apply Unite.

We’ll trace eyes, two black, little circles will be enough, we’ll put them and center them, and then we’ll make hair.

Now we’ll just color it and unite shapes.

This is merely a guide. You should be able to create any character you want. I’m just showing you a boy.

Now the interesting thing: the smile which will change. At first, we’ll make a simple smile (closed mouth); a half a circle will be enough, then we’ll make a bright smile. We duplicate our layer with the simple smile character and in the duplicated layer we do the following;

RSS icon and strokes

We’ll make our feed RSS icon which is the main reason for doing this illustration.  We’re going to put it behind the character and in the final image the button will be released, so it will create a movement effect.

Now let’s make the final touches to our button, select the character, unite all the shapes using Pathfinder, fill it with any color and apply a thick stroke to the shape. Do the same to the RSS icon.

We’re going to make a sparkle that comes from behind the character. Draw a vertical stripe and apply Transform effect (Effects → Distor & Transform).

Expand the shape (Object → Expand Appearance) and apply Unite. Adjust some ends and add a gradient.

We’re finally add some text to make more obvious the rollover image, so we have now two images like these:

Implementing the button

From Illustrator export both images. The result, two images in web format like PNG8, in example. To make possible use them in a hover, both images must be the same size and be perfectly aligned, vertically and horizontally, and then join them together. In other words, if you put one over the other, their shapes should match.

We have put both images one above the other to use them as a CSS sprite.

For the HTML this code is enough:

<a href='http://btemplates.com/feed/' class='botonrss'>Feed RSS</a>

The CSS will give the ‘hover’ effect, so when you pass the mouse pointer over the image, it will show the second image, giving the appearance of animation.

a.botonrss {
    width:166px;
    height:180px; /* Image size */
    text-indent:-9999px;
    overflow:hidden; /* Hiding the link text */
    display:block;
    background:url(images/rss-boton.png) no-repeat 0 0; /* Setting the image as a background */
}
a.botonrss:hover {
    background: url(images/rss-boton.png) no-repeat 0 -180px; /* When passing the mouse over, the image will be 'raised' */
}

Now, we just need to see the demo working.

Implement it on Blooger or WordPress

It’s really easy to implement it on Blogger or WordPress. The HTML code can be added to any widget on the sidebar. On WordPress, the CSS code is added to the style.css file and on Blogger after this code:

]]></b:skin>

Don’t forget to change the URL for the one of your feed and the image routh in the CSS.

Download

Download HTML code and images.

Conclusion

In this tutorial we learned how to create an ‘animated’ button starting from the paper. Although tt may require some work, the final thing worth the effort.

In the same way, if you liked this button to use it on your website, download it and implement it. We released it under Creative Commons License, and if you want to link us giving proper credit, we will appreciate it in advance.

By the way: this is the first tutorial we Ulises and Francisco make together, -mainly Ulises. We hope you have enjoy it like we did!

You can also easily create this kind of dates on Blogger by adding two javascripts to the template.

Friendlier Dates on Blogger

1. Go to the template code editor (Dashboard → Design → Edit HTML → Expand Widget Templates) and search for this code:

]]></b:skin>

And then add the following script after it:

<script type='text/javascript'>
/* Friendlier Dates on Blogger: http://blog.btemplates.com/209 */
function timeAgo(date1,date2,granularity){var self=this;periods=[];periods[&#39;week&#39;]=604800;periods[&#39;day&#39;]=86400;periods[&#39;hour&#39;]=3600;if(!granularity){granularity=5;}
(typeof(date1)==&#39;string&#39;)?date1=new Date(date1).getTime()/1000:date1=new Date().getTime()/1000;(typeof(date2)==&#39;string&#39;)?date2=new Date(date2).getTime()/1000:date2=new Date().getTime()/1000;if(date1&gt;date2){difference=date1-date2;}else{difference=date2-date1;}
output=&#39;&#39;;for(var period in periods){var value=periods[period];if(difference&gt;=value){time=Math.floor(difference/value);difference%=value;output=output+time+&#39; &#39;;if(time&gt;1){output=output+period+&#39;s &#39;;}else{output=output+period+&#39; &#39;;}}
granularity--;if(granularity==0){break;}}
return output + &#39; ago.&#39;;}
$(document).ready(function(){});
</script>

2. Now search for this:

<data:post.dateHeader/>

Notice: make sure that "Expand Widget Templates" is checked; otherwise you won’t find the code.

And replace it with:

<script type='text/javascript'>document.write(timeAgo(&#39;<data:post.dateHeader/>&#39;));</script>

3. The last step is to change the date format so it can be compatible with the scripts. Go to Dashboard → Settings → Formatting → Date Header Format and change the date format to the type 7/18/2010 (the sixth one from top to bottom). Save the settings.

Done! You can see the result on our demo.

Script to get the time passed between two dates

This useful javascript function can be used in any other development. It requires two dates or one as parameters. If two dates are given, it will calculate the time between them; if it’s one date, it will calculate the time passed to current date.

function timeAgo(date1, date2, granularity){

	var self = this;

	periods = [];
	periods['week'] = 604800;
	periods['day'] = 86400;
	periods['hour'] = 3600;
	periods['minute'] = 60;
	periods['second'] = 1;

	if(!granularity){
		granularity = 5;
	}

	(typeof(date1) == 'string') ? date1 = new Date(date1).getTime() / 1000 : date1 = new Date().getTime() / 1000;
	(typeof(date2) == 'string') ? date2 = new Date(date2).getTime() / 1000 : date2 = new Date().getTime() / 1000;

	if(date1 > date2){
		difference = date1 - date2;
	}else{
		difference = date2 - date1;
	}

	output = '';

	for(var period in periods){
		var value = periods[period];

		if(difference >= value){
			time = Math.floor(difference / value);
			difference %= value;

			output = output +  time + ' ';

			if(time > 1){
				output = output + period + 's ';
			}else{
				output = output + period + ' ';
			}
		}

		granularity--;
		if(granularity == 0){
			break;
		}
	}

	return output + ' ago.';
}

Notice: The above function for Blogger has been compressed to load faster.

You can also find the PHP version on the article "Friendlier Dates on WordPress" (spanish).

HTML/XML structure

As every search box, it is necessary arrange it as a form with two inputs with the blog’s data to make the search successful. The code is as follows:

<div id='search'>
<form expr:action='data:blog.homepageUrl + &quot;search/&quot;' id='searchform' method='get'>
	<div>
		<input class='searchtext' id='q' name='q' type='text'/>
		<input class='searchsubmit' type='image' name='submit' src='http://sitio-de-hosting.com/search.gif'/>
	</div>
</form>
</div>

The first "input" is the text box in which the user will put his/her query, the second is the submit button, which allows (you guessed it) submit the query in the first "input" to process it. This second "input" comes defined by a image (it may be an icon as well) which is why you only have to put in the address to our image on the src attribute, you can get this address by uploading this image to a free hosting service like Imageshack or Photobucket. That’s the only thing you have to modify in the code above.

This code can be added just before the above code:

Dashboard → Layout → Edit HTML

<div id='sidebar-wrapper'>

to show it on the top of the sidebar, but it works on any other location.

CSS Stylesheets

Starting from the classes and ID’s we can apply styles to the form: a background, borders, text format, padding, etc… with CSS. This is an example:

/* Search.
main-wrapper: form */

#search form {
	border:1px solid #999999;
	background:#E5E5E5;
	padding:10px;
	margin:0 10px 15px;
	position:relative;
}

/* Text box */

.searchtext {
	padding:2px 5px;
	color:#999;
	font-size:11px;
	line-height:15px;
	height:15px;
	width:87%;
	border:2px solid #BBDAFD;
}

/* submit button */

.searchsubmit {
	position:absolute;
	right:10px;
	top:10px;
}

And the result is something like this:

This is just an example, but it is ready to use just by modifying the input’s image address, background colors and borders, width and marggins, etc… The CSS code is always located before:

]]></b:skin>

It’s simple and looks great fixing this important part of our blog.

Broadly speaking the process is as follows:

1. Analyze the structure and style of the template.
2. Adding a new editable area, ie the area to add new gadgets.
3. Modify styles.

To follow this without issues this and any other tutorial that involves making changes in the structure of a blog or website is very advisable to know some html and CSS. So:

Analyze the structure and style of the template

For the majority of the templates, and specially Blogger ones, have a very similar structure, a header with title and description, a wrapper with the main column, a sidebar, and a footer with credits and some other information.

In this case our interest is the wrapper in which we have the content and the sidebar, starting from the Blogger code (Design/Edit HTML) it looks something like this:

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

	<div id='sidebar-wrapper'>
		<b:section class='sidebar' id='sidebar' preferred='yes'>
			<!-- Sidebar's widgets and gadgets code -->
		</b:section>	

	</div>
</div>

This varies a little from one template to the otherplate but broadly speaking is very similar to this. Both main-wrapper and sidebar-wrapper are defined by CSS styles which determine their width, depth and some other features. So, first things first, search this features looking for something like this:

#main-wrapper {
float:left;
width:620px;
/*.... more attributes ... */
}
#sidebar-wrapper {
float:right;
width:300px;
/*.... more attributes ... */
}

Note: It is likely that you won’t find them all together or exactly the same and sometimes, more than once.

Here we need to be aware of the width of each element, to add a new bar we’ll need to change the distribution. By adding the width of the example code we have a 920px total, which will be the available space for the main wrapper and the sidebars.

Add a new editable area.

Adding a new editable area in Blogger is very simple, these are defined by "section" elements that when included into the code they may contain gadgets (page elements). The code for the new editable area is something like:

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

And to add a new editable area, we just need to add this code just after the existing editable area:

<div id='content-wrapper'>
	<div id='main-wrapper'>
		<b:section class='main' id='main' showaddelement='no'>
		<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
		</b:section>
	</div>

	<div id='sidebar-wrapper'>
		<!-- Existing editable area -->
		<b:section class='sidebar' id='sidebar' preferred='yes'>
			<!-- Sidebar's gadgets and widgets code -->
		</b:section>	

		<!-- New editable area -->
		<b:section class='sidebar' id='sidebar2' preferred='yes'></b:section>		

	</div>
</div>

We have to be careful with the ID of the new area, in must not exist in any other "section" element, that’s why in the example it is shown as "sidebar2". The class cannot be repeated and in case of sidebars it is even convenient to be that way. As it is a new area, it doesn’t need to have gadget code, these will be integrated automatically when we add a new gadget from "Page Elements".

Now we have a editable zone but as the template is not prepared it may be shown corrupted, so we need to do some changes.

Modify sytles

We already know the total available width and we have an editable area, so now we have to assign width to each element. Following the example; main-wrapper gets reduced to 540px and sidebar-wrapper, which now contains both sidebars, gets enlarged to 380px. Fitting styles as follows:

#main-wrapper {
float:left;
width:540px;
/*.... attributes ... */
}
#sidebar-wrapper {
float:right;
width:380px;
/*.... attributes ... */
}

This way the available space for both sidebars is 380px. The most common thing to do is to give them the same width, so they will use 50% of the space each. Starting from the IDs of each editable zone we now assign the width of each on and its location (left – right) in the [i]sidebar-wrapper[/i], by adding these styles:

#sidebar {
width:50%;
float:left;
/*.... any other attributes you may find necessary like: padding, margin, etc ... */
}
#sidebar2 {
width:50%;
float:right;
/*.... any other attributes you may find necessary like: padding, margin, etc ... */
}

With this done now we have 2 sidebars 190px wide each, able to support gadgets.

Observations

Some templates may present issues while changing the sidebar’s or main wrapper’s width, specifically those based on fixed images which obviously will not change their size by reducing width. In this case you may edit those images with Photoshop to fit them to the new width.

Conclusion

All in all, this process might get a bit difficult, mostly if you haven’t got too much knowledge on CSS or if the template has a complex structure. The only thing we can recommend in this case is learning some CSS or look for a 3-column template and customize it. Opinions? Questions? Doubts? Fire them off in the comments.

Now, using bit.ly’s API, Twitter’s default service, we can create and publish short URL’s for every entry on Blogger.

Step by Step

1. To show a short URL at the bottom of every entry, do this search with the gadgets expanded:

   <div class='post-footer-line post-footer-line-3'>
   
   </div>

   They might also be post-footer-line-1 or post-footer-line-2, just be careful you open and close the tags the right way.

2. Inside any of the 3 footer lines, paste this code:

   <b:if cond='data:blog.pageType == "item"'><form id='shorturl'/></b:if>

3. Right before the closing tag:

   </head>

   Paste the following script:

   <script type="text/javascript" charset="utf-8" src="http://bit.ly/javascript-api.js?version=latest&amp;login=bturls&amp;apiKey=R_37db93397f2c5d6b49a0f3d778d2e142"></script>
   <script type="text/javascript" charset="utf-8">
   	BitlyClient.addPageLoadEvent(function(){
   		BitlyCB.myShortenCallback = function(data) {
   			// this is how to get a result of shortening a single url
   			var result;
   			for (var r in data.results) {
   				result = data.results[r];
   				result['longUrl'] = r;
   				break;
   			}
   			document.getElementById("shorturl").innerHTML = "Share this link: &lt;input type='text' value='" + result['shortUrl'] + "' name='bitlyurl'/&gt;";
   		}
   		BitlyClient.shorten(document.location, 'BitlyCB.myShortenCallback');
   	});
   </script>

4. As an option, you can give it your own style, in order to match your blog’s layout. For example:

   form#shorturl {
   color:#666;
   font-size:11px
   }
   
   #shorturl input {
   color:#999;
   border:1px inset #CDCDCD;
   padding:1px 5px;
   }

   Just remember that the styles go right before the closing tag:

   </b:skin>

5. As a result, with the given style sample, in every individual page it looks like this:

    

   Providing a short URL instead of the original URL to tweet makes it cool to use in any other social networks where a long URL is not very aesthetic, not only Twitter.

E-mail subscriptions aren’t dead, on the contrary, many people prefer to keep up-to-date this way and depending of the topic the ratings can be more or less important. In this guide we’ll show you how to activate this service until the point of creating a custom subscribe-form step-by-step for Blogger and, by the way, WordPress.

Activate e-mail subscriptions on FeedBurner

There are multiple online services to create e-mail subscriptions starting from the blog’s RSS address, in this case and considering the service’s popularity we’ll talk about FeedBurner, and it is very likely most of you have already moved your feeds there, if not, starting with a Google account you can create a FeedBurner one.

To activate it, in your website’s panel go to the "Publicize" tab and then to the e-mail subscriptions option, here you’re given some generic code to offer e-mail subscription with a form or link, but as we’re going to customize it later right now we just need to click "Active".

Setting up e-mails by content

The subscribed users will get an e-mail daily with you blog’s new stuff and with FeedBurner you can configure several parameters, we already talked you into including the post’s title in the subscriptions and now we’ll look into this and many other options.

These options are located in "Publicize ? Email Subscriptions ? Email Branding"

Email title or theme

Here you can determine the email’s title with our content. We have two fields, first one is for when our email has just one article, and the second one is for when there is more than one. We also have 3 variables we can make use of:

${latestItemTitle} – Title of your last article.
${n} – Total number of articles per email.
${m} – Email’s article count minus one. For example: if an email has 3 articles, m = 2.

So for example, for the first field we can define the next formatting:

${latestItemTitle} | Your Blog's Name

And for the second field, activating the option Change Subject when an email has 2 or more items, we’ll use this next format:

${latestItemTitle} and ${m} more articles | Your Blog's Name

Logo’s URL

To make a real mark you have the option to add your logo to every email, a 150 to 250 px in width picture in neutral colors can help you accomplish the task.

Typography Format

We’re also given to adjust color, size and typography for the articles contained on the email. In my opinion default values are pretty readable and only by a personal exception it won’t be necessary to modify them.

Now save the changes for the options to apply in the next venues.

Sender address

By default, the address shown on the sent emails is the one you registered with in feedburner, and not always this is the best option. The panel to change the sender address is found in:

Publicize ? Email subscriptions ? Communication Preferences.

The ideal would be an address like this one:

no-reply@mydomain.com

In this same panel are located the options to customize the activation message to the users, it is really important to check this out.

Offer email subscriptions on your blog

There are two ways to offer email subscriptions to your readers:

• A link, which once clicked opens on a new window showing a form to type in the email address and an anti-spam captcha.
• Directly a form, which once filled opens a new window to fill in an anti-spam captcha

In both cases opens a new window, so just pick one up according the space you have available, next up we’ll show you the HTML code to insert them and the CSS to add some style.

Subscription link

The subscription link has no major complications, the code is this one:

<a href="http://feedburner.google.com/fb/a/mailverify?uri=YourFeedBurnerURI" class="mailsubscription">Free Email Subscription</a>

Where YourFeedBurnerURI comes from your FeedBurner’s URL, for example, our RSS address is: http://feeds.feedburner.com/btemplatesblog, YourFeedBurnerURI would be btemplatesblog. And to add some style, it’ll be enough with the assigned class, the CSS:

a.mailsuscription {

}

Something really common is to add a mini icon to this link to make it stand out.

Subscription Form

The subscription form is not so different from any other, so it is customizable as far as our CSS knowledge can take us, the basic HTML to add the form is as follows:

<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=YourFeedBurnerURI', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" id="fmailsubscription">

<div>
	<p>Subscribe via email:</p>
	<p><input type="text" name="email" id="emailfield"/></p>

	<input type="hidden" value="YourFeedBurnerURI" name="uri"/>
	<input type="hidden" name="loc" value="en_US"/>

	<input type="submit" value="Subscribe" id="mailsubmit"/>
</div>
</form>

Then again we have to replace YourFeedBurnerURI with our own URL. Contrary to the code provided by FeedBurner, this code validates correctly and is easier to appreciate the structure and add style. For example, these next CSS styles:

#fmailsubscription {

}

#fmailsuscription p {
margin:10px 0;
}

input#emailfield {
color:#999999;
float:left;
font-size:12px;
height:12px;
padding:2px;
width:65%;
}

input#mailsubmit {
background:#EEEEEE none repeat scroll 0 0;
border:1px outset #CDCDCD;
float:right;
font-size:10px;
padding:2px;
text-align:center;
width:25%;
}

With these styles, the result is:

You can adapt this styles to match your blog’s layout.

For Blogger and WordPress HTML.

HTML. The same for both, you can add a html widget on the sidebar.

CSS. In WordPress the styles are in the style.css file and in Blogger just right before the closing tag:

]]></b:skin>

Suggestions for the email subscription

• Put the icon or form in a visible and accessible place.
• Make sure to mention the subscription is free of charge, and users can unsubscribe whenever they want.
• Confirm and reinvite the subscribers who never activated their subscriptions.
• If you have a category that stands out among others, make sure to offer a subscription only for it.

Subscribe to BTemplates Blog

Speaking of subscriptions, are you subscribed to our content? no? Well, now its the time to do so, you can choose between the RSS Feed or email subscription

1. Go to the “Layout” tab, also called “Design” from the desktop, and then go to “Edit HTML”. After this, check the “Expand widgets template” box.

Dashboard → Layout → Edit HTML → Expand widgets template

2. Search for the following code:

<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>

And replace it with the following:

<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 == 0'> Leave your comment </b:if> <b:if cond='data:post.numComments == 1'> 1 Comment </b:if> <b:if cond='data:post.numComments > 1'> <data:post.numComments/> Comments </b:if> </a> </b:if>

3. Now search for the following code:

<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</h4>

And replace it with this:

<b:if cond='data:post.allowComments'> <h4> <b:if cond='data:post.numComments == 0'> Leave your comment </b:if> <b:if cond='data:post.numComments == 1'> 1 Comment: </b:if> <b:if cond='data:post.numComments > 1'> <data:post.numComments/> Comments: </b:if> </h4>

Both of the replacements are because of the link will show up twice: on main page and on each post’s page. The bold text can be changed for anythig you want tho show.

Vía: blogandweb.com

Most of us, when we start a blog we do it with Blogger, a simple interface and it is very easy to start a new blog, but trouble starts to appear once we try to manipulate the blog’s layout, CSS and XML of the template might seem a bit complex right from the start, however, they aren’t that much after fighting a bit with it and looking at the general structure. And precisely as a helping hand to understand the Blogger templates’ general structure, we’ve created a Blogger Cheat Sheet specially focused on classes and identifiers that most of blogger templates use.

What’s the point?

Essentially this:

• Change elements in an existent template.
• Adequate a layout from another platform.
• Create a new Blogger layout.

Download

• Blogger Cheat Sheet (PDF, english)
• Chuleta Blogger (PDF, español)

How to use it?

Using this guide requires at least basic knowledge on CSS and according to it you’ll be able to modify certain things.

Changing elements.

You just need to look for the class or ID in the cheat sheet related to the part we wish to modify and change the CSS attributes on the template.

Example: Change the blog’s title color.

Looking up in the cheat sheet, the class related to the blog’s title is h1.title, look for the class in the CSS code, if it does exist just modify the color code, otherwise add a new class:

h1.title {
color:#000;
/* other attributes */
}

Adequate a layout from another platform.

Here the cheat sheet helps us finding the Blogger equivalent for each element. Example: In a WordPress theme the entry title has a class called .tit, just copy the class and attributes and rename in Blogger as .post-title.

This is a very basic example, obviously adapting a whole template requires a bit more knowledge on CSS, because not always you do have an equivalent and the structure has to be changed.

Create a new layout.

Based on this cheat sheet you might create a CSS and HTML structure which allows to code without working directly on Blogger, or maybe just the CSS structure and doing the work online.

Help and corrections

This cheat sheet is basic, and because of that we think it might be very useful for a lot of people, if you think so we will be really thankful if you help us spreading it, on your blog, digg or anyway you can think of. And in case you have corrections to make or just an opinion, then have your say on the comments.