Wednesday, June 13, 2012

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!

20120613-004-screencapBlogger 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,



6 comments:

  1. Hello, there. I tried to use this template, and after several trial-and-errors, I managed to make the description appears and fix the date. However, the post's title in my blog doesn't have any hyperlink, and that "Read More" option doesn't work either. I tried to fix the code, but they always crashed in the end. I searched for another blog that used the same template, but it looks like they also have this kind of problem.

    Though, there's a blog where this template seems to works perfectly : http://21stcenturyberean.blogspot.com/ (not mine), and you can see, the link of each post's title also works there. I've tried to make mine like that, but no matter how I fix it, I still encounter the same thing over and over again. I'm already out of idea about this.

    Could you help me? I love this beautiful template, and I really want to use it in my blog, so any help would be greatly appreciated. Thank you.

    ReplyDelete
  2. There are many that work, such as http://asa.zamo.ca

    Version 1.2 of Aspire BlogIdol (linked above) fixes many of the problems you mentioned (and others) but does not display comments properly - though it accepts them. This shouldn't be a problem if you use another commenting service such as Disqus. You could also try fixing it yourself - if you do, let us know.

    The first post title in the front-page list is never linked, this seems to be a problem with all the blogs that use this template - I don't know how to fix it. However, the subsequent titles are linked.

    ReplyDelete
  3. I cannot download the aspire template, it automatically being deleted by my computer.

    ReplyDelete
  4. How do I make my blog description appear under the header, using the Aspire template? I see this is addressed above, but it appears that the HTML code has changed recently.

    ReplyDelete
  5. The blog description should scroll once, automatically, under the title - see asa.zamo.ca

    ReplyDelete
  6. I understand, but my description is not appearing at all.

    ReplyDelete

Thank you for commenting and rest assured that any and all comments are welcome, whether positive or negative, constructive or distructive. Unfortunately, if you comment in this view I might not know about - please use the regular (Desktop) view.
I am using Disqus for commenting, but Blogger is not showing it so your comments may end up not being displayed - tell Google about it!