Almost every template has an element that, if changed, can modify the way it looks: images. We can find as headers, backgrounds, margins, icons, text, and so on. And can be added to the template in two different ways:

1. As a background: at present time, it’s the most common way to add any image to a template, and it’s usually located in a section or file named CSS.
2. Direct: the image is added directly in the code of the template.

So, the easiest way to modify a template is changing these images, and is not difficult at all.

1. The old image.

First of all, you have to know the name of the image you have to change. To do this, you can save the image, or you can, in firefox, make right-click and go to “See Image”, or “See Background Image”, where you’ll have the full address, and the name of the image.



Something else, you need to know the size of the image in pixels, so you have to right-click on the image and go to “Element Properties”, where you can see the image’s size.



2. The new image.

The only requirement for the new image is that it should be the same size as the original. You can create a new one if you know how to use some image editing program, make changes to the original as a single change of tones or use the cutting of a picture that you already have.

3. Host the new image.

If you have a hosting account, upload the image. If you use a free service (blogger, wordpress) you can use a free hosting like imageshack.us o photobucket.com. In both cases you will need the direct link to the image.

4. Replace the code.

For systems where the css is with the rest of the code of the template, like Blogger, look for the image’s addres from the old name and replace with the new direction of the image.

For systems where the css code is in an external file (like wordpress), go to this file (ends with .css) and make the replacement. If you can’t find the old image’s address, maybe it’s in another css file.

Usually, by changing the background image, and the header is enough to make a big difference, and set the personal touch you wanna give to your blog.

Read this article in spanish.

Then we show you a list of 10 recommendations that can help improve your experience when you type in Blogger:

1. Use the HTML editor.


If you know the basics of HTML, use this editor, wich creates less chaos in code, is more effective using spell checker, makes your articles less heavy and is easier to read by search engines and feed readers.



2. Use the spell checker.

If you have bad spelling, Blogger’s spell checker can avoid many errors (or horrors). If you write a long article, divide it in two or three parts, so you have no problem using the spell ckecker, or use an external software to check it.


3. Don’t use the line break.

By default, whe you hit “Enter” in the editor, it generates a
label to make a line break, which can cause major problems when we introduce javascript, the code of a video or other application. To disable the line break, go to Settings > Formatting, and select “No” in the “Convert line breaks” box. Now the line breaks will be done with the <p> and </p> labels, wich are more appropriate and less trouble maker.



4. Don’t align images on upload, but until they’re on the editor.

This way you avoid “fighting” with the image-text alignment and you can change it any time from the editor.


5. Don’t use large images if it’s not necessary.

When uploading a picture on Blogger use “Image Size: Medium” to avoid warpping your template and keep a good image size and quality.


6. Save drafts continuously.

Even when Blogger automatically saves drafts, it’s better not to rely. The safest way is to be clicking the “Save Now” button every major breakthrough.



7. Avoid changing edit mode repeatedly.

Changing between “Compose” and “Edit HTML” repeatedly brings chaos in the code of the article, so try to work in a single mode.


8. Use preview.

Before posting an entry, use the preview to read and detect errors in spelling or grammar, and finding the best location for the images. Read your article as many times as you need to find it coherent and understandable.


9. Use a Post Template

If you repeat any code in all your posts, for example, to use the hack for “read more” or to put a message at the end of them, use the Post Template. Go to Settings > Formatting and you’ll find it at the end. You’ll save valuable time in each entry.


10. Use shortcuts.
    • Ctrl + B = bold
    • Ctrl + I = italic
    • Ctrl + L = blockquote (HTML mode only)
    • Ctrl + Z = undo
    • Ctrl + Y = re
    • Ctrl + Shift + A = link
    • Ctrl + Shift + P = Preview
    • Ctrl + D = save draft
    • Ctrl + S = publish entry

Blogger has some commands to make faster to publish and format, these are:

These recommendations have saved me some problems on blogger but are just that, recommendations. If you have one, feel free to leave it in the comments.

Read this article in spanish.

1. Go to “Layout” tab.



2. Add a “HTML/Javascript” element in the section you wanna have the button.
3. Set the title as “Add us”, or any text you want for the button. You can leave it blank too, it will add some default text.
4. Paste the following code in the “Content” field:

<form action="http://beta.blogger.com/add-widget" method="post" target="_blank">
<input value="" name="widget.title" type="hidden" />
<textarea style="display: none;" name="widget.content">
<!-- Link's code -->
<a href="http://YOURBLOG.blogspot.com">YOUR BLOG</a>

</textarea>
<input value="Add YOURBLOG to you Blogroll" name="go" type="submit">
<input type="hidden" name="infoUrl" value="http://blog.btemplates.com/create-a-widge…k-to-your-blogcreate-a-widget-to-add-a-link-to-your-blog"/>
</form>

Here you have to make some changes:

http://YOURBLOG.blogspot.com – Your blog’s address.
YOUR BLOG – Your blog’s name or an image’s code. It willl be shown in the Blogroll of the one who’s adding you.
Add YOURBLOG to the Blogroll – The message you wanna show on the button.

This code work for another CMS or webs, but it only can be added by Blogger’s users.

5. Save the changes an it’s done.

Read this article in spanish.

1. Go to “Layout” tab, and then to “Edit HTML”.



2. Search for the following code:

]]></b:skin>

3. Just before, write the following:

.feed-links {
display: none;
visibility: hiden;
}

4. Save the changes, and that’s it.

It’s good to keep the link, because it’s the only way users can suscribe our feed, but sometimes it’s better not to show it. By the way, if you wanna subscribe our feed, just click here.

Lee este artículo en español: Ocultar el link a suscribirse en las entradas (atom) en Blogger.

1. Go to “Layout” tab, and then to “Edit HTML”. Check “Expand widget template” box.



2. Search the following code:

 <b:loop values='data:links' var='f'>

   <a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>

</b:loop>

3. Replace it with the following:

<b:if cond='data:blog.pageType == "item"'>

  <b:loop values='data:links' var='f'>
     <a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
  </b:loop>

<b:else/>

  <b:loop values='data:links' var='f'>
     <a class='feed-link' expr:href='"http://feeds.feedburner.com/YOURFEED"' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
  </b:loop>

</b:if>

4. In that code, replace “http://feeds.feedburner.com/YOURFEED” for your feed’s address on Feedburner. Is important to keep the quotes as shown in the code.
5. Save the changes and it’s done.

Now the link will be more usefull. Anyway, if you wish to subscribe our feed and get everything shown in here, just follow the link:
http://feeds.feedburner.com/BtemplatesBlog

Lee este artículo en español: Cambiar el feed de Blogger por el de Feedburner.

1. Go to “Layout” tab, and then to “Edit HTML”.



2. Search for the following code:

]]></b:skin>

Just before that code you’ll find the CCS styles, and there’s where we have to place the classes for our icons.

3. Now we’ll show you codes for diferent template’s places. You just have to select one and paste the code where we tell you to.

Place: post’s date.
Icon:

.date-header {
padding-left: 20px;
padding-top: 5px;
background: url(http://bp2.blogger.com/_Zuzii37VUO4/Rkn-DuMBU_I/AAAAAAAABN0/CNp5q8l_KY8/s1600/time.png) center left no-repeat;
}

Place: post’s labels.
Icon:

.post-labels {
padding-left: 20px;
padding-top: 5px;
background: url(http://bp2.blogger.com/_Zuzii37VUO4/RfI1_yAns8I/AAAAAAAAAYI/5m8K2kkqYRw/s1600/etiqueta_naranja.gif) center left no-repeat;
}

Place: post’s author.
Icon:

.post-author {
padding-left: 20px;
padding-top: 5px;
background: url(http://bp1.blogger.com/_Zuzii37VUO4/RfebZS0300I/AAAAAAAAAcw/dBZjEJ39hDE/s1600/autor.gif) center left no-repeat;
}

Place: post’s comments.
Icon:

.comment-link {
padding-left: 20px;
padding-top: 5px;
background: url(http://bp1.blogger.com/_Zuzii37VUO4/Rkqpd5yax8I/AAAAAAAABQg/tu-ANuj9tvo/s1600/icono-comentarios.gif) center left no-repeat;
}

Place: footer’s feed.
Icon:

.feed-links {
padding-left: 20px;
padding-top: 5px;
background: url(http://bp0.blogger.com/_Zuzii37VUO4/Rj7ME-MBRJI/AAAAAAAAAwM/IOo-YUYR5aM/s1600/icono-feed.gif) center left no-repeat;
}

Place: label’s widget.
Icon:

#Label1 ul, #Label2 ul {
list-style-type:none;
}

#Label1 li, #Label2 li {
padding-left: 20px;
padding-top: 5px;
background: url(http://bp1.blogger.com/_Zuzii37VUO4/Rkqpd5yax-I/AAAAAAAABQw/GgkWpItuen4/s1600/icono-etiqueta-azul.gif) center left no-repeat;
}

Place: post’s title.
Icon:

.post-title {
padding-left: 20px;
padding-top: 5px;
background: url(http://bp3.blogger.com/_Zuzii37VUO4/RkqqPZyayBI/AAAAAAAABRI/nNwfNreK6xM/s1600/icono-documento.gif) center left no-repeat;
}

Place: comment’s date.
Icon:

.comment-timestamp {
padding-left: 20px;
padding-top: 5px;
background: url(http://bp0.blogger.com/_Zuzii37VUO4/Rkqpdpyax7I/AAAAAAAABQY/lPj-wAcTrRM/s1600/icono-calendario.gif) center left no-repeat;
}

Place: backlinks.
Icon:

#backlinks-container h4 {
padding-left: 20px;
padding-top: 5px;
background: url(http://bp0.blogger.com/_Zuzii37VUO4/Rkqpdpyax6I/AAAAAAAABQQ/g0c6ItO8SaQ/s1600/icono-backlinks.gif) center left no-repeat;
}

Place: links list.
Icon:

#LinkList1 ul, #LinkList2 ul {
list-style-type:none;
}

#LinkList1 li, #LinkList2 li {
padding-left: 20px;
padding-top: 5px;
background: url(http://bp3.blogger.com/_Zuzii37VUO4/RkqqDZyayAI/AAAAAAAABRA/Dils27GC_tU/s1600/icono-links.gif) center left no-repeat;
}

4. Once you have pasted everything you need, save the changes and that’s it.

Remeber that you can change the icon by changing it’s route for the one you can use. Here you can find a lot of icons to use on your blog. The icons used here are from famfamfam.

Lee este artículo en español: Poner iconos en Blogger.

The menu we’re talking about is very popular on blogs, and will see like this:

1. Go to “Layout” tab, and then to “Edit HTML”.
2. Search for the following code:

]]></b:skin>

For other CMS or web system, find the place for styles or your CCS file.

3. Just before that write the following:

#sidemenu{
   position:fixed;
   text-align:left;

/*If the menu location is not ok, modify the next values */
         margin-top:100px;
   margin-left:-28px;
}

* html #sidemenu{  /*for IE*/
 position:absolute;
 }

#sidemenu a img{
 opacity:1;
 -moz-opacity:1;
 filter:alpha(Opacity=100);
}

#sidemenu a:hover img{
 opacity:0.8;
 -moz-opacity:0.8;
 filter:alpha(Opacity=80);
 position:relative;top:0px;left:2px;
}

* html #sidemenu a img{
 filter:alpha(Opacity=100);
 }

#sidemenu img{
 margin-bottom: -5px;
 }

* html .sidemenu{
 margin-bottom: -3px;
}

4. Now search for the following code:

<div id='content-wrapper'>

For other templates coul be better to find “<div id=’outer-wrapper’><div id=’wrap2′>”. Fo other CMS find the main div.

5. Right after that code write the following:

<div id='menulateral'>
 <span>
 <a href='http://YOURBLOG.blogspot.com/' style='border:0;' title='Beggining'><img alt='Beggining' class='sidemenu' src='http://bp3.blogger.com/_Zuzii37VUO4/RlpT2Zya1AI/AAAAAAAABoI/6EXVwJ-0xxc/s1600/menu-lateral-inicio.png'/></a>
 <br/><a href='#BlogArchive1' style='border:0;' title='File'><img alt='File' src='http://bp2.blogger.com/_Zuzii37VUO4/RlpT2Jya08I/AAAAAAAABno/fEetH56Ftgw/s1600/menu-lateral-archivo.png'/></a>
 <br/><a href='mailto:YOUR-MAIL@server.com' style='border:0;' title='Contact'><img alt='Contact' class='sidemenu' src='http://bp3.blogger.com/_Zuzii37VUO4/RlpT2Zya0-I/AAAAAAAABn4/F5Ax7A_8rLA/s1600/menu-lateral-contacto.png'/></a>
 <br/><a href='http://YOURBLOG.blogspot.com/feeds/posts/default' style='border:0;' title='Subscribe our Feed'><img alt='Subscribe our Feed' class='sidemenu' src='http://bp3.blogger.com/_Zuzii37VUO4/RlpT2Zya0_I/AAAAAAAABoA/HgSHFryV6kc/s1600/menu-lateral-feed.png'/></a>
 <br/><a href='#' style='border:0;' title='Up'><img alt='Up"' class='sidemenu' src='http://bp3.blogger.com/_Zuzii37VUO4/RlpT2Zya09I/AAAAAAAABnw/38HqImjH21E/s1600/menu-lateral-arriba.png'/></a>
 </span>
</div>

In that code, make the next substitutions:

“http://YOURBLOG.blogspot.com/” – Your blog’s address.
“YOUR-MAIL@servidor.com” – Your e-mail address.
“http://YOURBLOG.blogspot.com/feeds/posts/default” – Replace “YOURBLOG” for that part of your blog’s address.

6. Save the changes, and that’s it.

Lee este artículo en español: Menú lateral fijo en Blogger.

One of the most neglected parts in Blogger are precisely the metatags, because they don’t think the proper indexing of your page is important enough. Well, in this article we’ll show you how to place the most important in the home and in the pages of the labels.

1. Go to “Layout”, and then to “Edit HTML”.



2. Search for the following code:

<title><data:blog.pageTitle/></title>

3. Under this code will be conditions to show the metatags in their own pages, according to the following code scheme:

<!-- Home Metatags -->
<b:if cond='data:blog.pageType == "index"'>
<meta content='here the keywords, separated by commmas' name='keywords'/>
<meta content='description of the general website content' name='description'/>
</b:if>

<!-- Labels Pages Metatags -->
<b:if cond='"http://label-address" == data:blog.url'>
<meta content='here the words taht describe this label' name='keywords'/>
<meta content='description of the content of this label' name='description'/>
</b:if>

As you can see, there is a code for the home and one for labels and will be repeated for each label you want to describe their contents.

Read this article in spanish.

1. Go to your blog, and select the “Layout” tab.
2. Choose the place where you wanna put the comments, and click “Add a Gadget”.
3. Select the “Feed” element, and click “Add to blog”.



4. The next step is to add the feed’s URL, in this case is the one that has the comments of our own blog. This address is like this:

http://YOURBLOG.blogspot.com/feeds/comments/default

Where YOURBLOG is that part of your blog’s address.

5. The next step is to configure:

Title: the title to show on top of comments.
Number of items: in this case it’s the number of comments.
Item date: show comment’s date.
Item sources/authors: show comment’s author.

6. Save the changes and that’s it.

This will be enough to show the last comments. The look will depend of the place you insert them into. With this method you can add any content with feed format, doesn’t matter if it’s not from Blogger.

Read this article in spanish.

One way to do this is as follows:

1. Go to “Layout” tab, and then to “Edit HTML”.



2. Now search for the following code:

body {

3. According to your Blogger version, just before this, paste one of the following codes:

New Blogger:

#navbar-iframe {
opacity:0.0;
filter:alpha(Opacity=0)
}
#navbar-iframe:hover {
opacity:1.0;
filter:alpha(Opacity=100,FinishedOpacity=100)
}

Classic Blogger:

#b-navbar {
opacity:0.0;
filter:alpha(Opacity=0)
}
#b-navbar:hover {
opacity:1.0;
filter:alpha(Opacity=100,FinishedOpacity=100)
}

4. Now save the changes, and that’s it.

It works welll in Firefox, Opera, Safari and IE7.

Lee este artículo en español: Ocultar la barra Blogger (navbar) automaticamente.