Modifying your Blogger template - e.g., Aspire

You might sometimes find that you need to modify your older Blogger template but don't know how to do it. We'll show ya!

Blogger has upgraded to a new kind of templates that allow very fine-grained modifications of the layout and also an easier way to keep up with the latest additions and improvements. If, however, you would rather stick with the devil you know, here’s how you get to it:

1. Go to your Blog Template.
2. Click Backup/Restore in the upper right corner.
3. Click Download full template and save your existing template to your computer hard drive. Make note of that folder as that is your backup and you will need to re-upload it in case something goes wrong.
4. Click Edit HTML, read the warning and, if you still want to Proceed, click the corresponding button.
5. Check the “Expand Widget Templates” box, as that is required for most modifications.
6. When done, click Preview to see if you have achieved your goal. If you don’t like it or something has gone wrong, you can click “Clear edits”. Unfortunately, the preview window will only show the first page and you won’t be able to see article pages (if that’s where you’ve done your modification). To see that, you will need to “Save template” – but don’t worry, you have your backup from step 2.
7. When done, click “Save template” then “Close”.

You may also perform these modifications through the Old Blogger interface if you are more familiar with it, by clicking the setup wheel in the top right corner and choosing “Old Blogger interface” as this video (not mine) shows below.

Alternatively, you might want to modify your template in a text editor – make sure you make an additional backup copy before so doing. This would allow you to use more advanced tools that your editor provides while your browser does not, such as Search & Replace in Wordpress or Notepad+. When done, you can either upload that file via the “Backup / Restore” button, or, in your text editor, select the entire document, copy the whole document, then paste it into your browser Edit HTML template window; then save it.

As an exercise, let us look at updating the old Aspire Blogger template.

aspire

This is a classy template designed a few years ago. It can still be downloaded from the links in sources below. Depending on what version you download, you might want to perform one of the following modifications, previously shown in the now defunct comfun blog.

1. Show Description (/2009/04/tweak-your-aspire-show-your-blogs.html)
   Search for

     <h1><a expr:href='data:blog.homepageUrl'><data:title/></a></h1>

   
   

   add

     <h2><data:description/></h2>

   
   

   final code:

     <b:includable id='main'>
     <h1><a expr:href='data:blog.homepageUrl'><data:title/></a></h1>
     <h2><data:description/></h2>
     </b:includable>

   
   

   find

     #head {position:relative; width:990px; height:250px;

   
   

   and

     .header {width:627px; height:250px; background: url(../header-bg.jpg) no-repeat;}

   
   

   replace

    height:250px 

   
   

   with

    height:265px.

   moving:

     <h2><marquee><data:description/></marquee></h2>

   
   
2. Fix Date /2009/04/tweak-your-aspire-show-post-date.html (also /2008/07/make-changes-in-aspire-blogger-theme-to.html)
   Find var timestamp = &quot;<data:post.timestamp/>&quot;;
   Code around it should be
   

   <script type='text/javascript'>
     var timestamp = &quot;<data:post.timestamp/>&quot;;
     if (timestamp != &#39;&#39;) {
         var timesplit = timestamp.split(&quot;,&quot;);
         var date_yyyy = timesplit[2];
         var timesplit = timesplit[1].split(&quot; &quot;);
         var date_dd = timesplit[2];
         var date_mmm = timesplit[1].substring(0, 3);
     }
   </script>
   <script type='text/javascript'>document.write(date_dd);</script>
   <div class='month'>

   <script type='text/javascript'>document.write(date_mmm);</script>

   </div>

   Change to var timestamp = &quot;<data:post.dateHeader/>&quot;;
   Final code should be
   
   

   <script type='text/javascript'>
     var timestamp = &quot;<data:post.dateHeader/>&quot;;
     if (timestamp != &#39;&#39;) {
         var timesplit = timestamp.split(&quot;,&quot;);
         var date_yyyy = timesplit[2];
         var timesplit = timesplit[1].split(&quot; &quot;);
         var date_dd = timesplit[2];
         var date_mmm = timesplit[1].substring(0, 3);
     }
   </script>
   <script type='text/javascript'>document.write(date_dd);</script>
   <div class='month'>

   <script type='text/javascript'>document.write(date_mmm);</script>

   </div>

   Change in settings date type to this.

imgprblm

I also discovered a lot of dead blogs based on Aspire – i.e., they’re no longer updated and most have not bothered to change the pic references, even though they might continue to update it. There is even an up-to-date (2012/05/18) blog with it own custom domain, upfrontafrica.com, operating without template pix. More findings, together with date of last modification:

w/ pix

1. http://www.oanamonicanae.com/ – also up-to-date & looking good
   
2. dexa-danarta.blogspot.com abandoned since 2008
   
3. boticselli.blogspot.com abandoned since 2011
   
4. ibisclub.blogspot.com – 2012/04/08 – looking good
   
5. fastfirefish.blogspot.com 2008/10/11

no pix

• topdogblog1.blogspot.com 2012/06/09 – seems up  to date
  
• changeandrevolution.blogspot.com – 2012/01/10
  
• rawmilkunderground.blogspot.com – 2012/06 but rarely
  
• i-am-cybil.blogspot.com (also cybilized~) – 2012/01/20
  
• elmsleyrose.blogspot.com 2012/05/25
  
• upulgamage.blogspot.com 2012/04/04
  
• laconsultadeldoctorperring.blogspot.com – 2011/04/20
  
• backpackbistro.blogspot.com – 2010/01/29
  
• dream-of-genea.blogspot.com – 2011/04
  
• tobeentitled.blogspot.com – 2011/12
  
• comp04.blogspot.com 2009/09/20
  
• h-hafizal-aboutme.blogspot.com 1 post only
  
• marriothdiscoteka.blogspot.com 2008/11/21
  
• lapakmaya.blogspot.com 2009/10/17
  
• sinematografik.blogspot.com 2009/10/20
  
• aseannibale.blogspot.com 2008/11/26
  
• conjurosypocimas.blogspot.com 2008/07/02
  
• fythra.blogspot.com 2010/03/06
  
• afdal23.blogspot.com 2008/12/01
  
• thechubbyartist.blogspot.com 2009/12/20
  
• jaininaveen.blogspot.com 2011/12/09
  
• phoenix-ani.blogspot.com 2010/05/18

imgfix

When you have an older template such as this one, if the original pic hosting was deleted, you should consider upgrading to one of the latest Blogger layouts. If you want to keep Aspire, you will have to do one of the following:

1. Steal the images from someone else.
   This involves going to a blog that correctly loads all the images, then peek into the Source (or page “properties”) via your browser to discover the URL of all the loaded images. You can look into your own template code first, identify the images, then search for each occurrence in the “correct” blog, copy its location, then replace in your blog. While this may seem simple at first, it is not entirely ethical, and secondly, if that person deletes their account you will lose your images as well.
   
2. Host the images yourself.
   Though this requires more work and resources, it is your best bet. You need to start by downloading the images in full – see link below. Once downloaded, unzip the archive to a folder of your choice. If you have a webhosting service, you might want to upload the images there. However, most people publishing on Blogger don’t, in which case you might want to upload to a free service such as flickr or Picasaweb. Note however that both these services have limits: flickr limits the number of images one can upload to 200, if memory serves me well, while Picasaweb limits storage to 1 or 2 GB and may also shrink images it finds too long, such as sidebarbottom.jpg. Hosting images on Google Sites or other similar Google services may hit a traffic limit (currently unknown), most likely to be around 1GB/day or 56MB/min.

Once you have the images you need and their full URL, you can open your template in a text editor and do a search and replace for each image, save, then upload it back to Blogger, as explained above.

If you encounter difficulties, feel free to ask for help in comments.

Sources / More info: AspireBIro, asire-demo1, aspire-demo2, original, full (with images), ebt, btb, google-limit, gmaps-limit, gapps-limit,

BlogIdol, template, sablon, layout, design, code, html, css, blogger, blogspot (Tags)