Migrating an "old" blogger.com site to use the new "template designer"

Before starting to change your "old" blogger.com site, test the new blogger templates using especially created blogs. Blogger.com allows up to 100 blogs per user, so you have plenty of potential test-sites to create :-) . Import the texts from your "normal" site and play with colours and backgrounds. It is a "trial and error" -iterative- process. Many template variants are not as different as they seem. Once you apply your future website's intended look and layout, the differences are small but important. For example, the corners of the content "boxes" of the "grey green" Awesome Inc. template are rounded, whereas the pure grey one has edges. The navigation menu for the pages is transparent with some, appears 3-dimensional with other Awesome Inc. templates.

For tickertxt.org we chose the grey-green-menu Awesome Inc Template by Tina Chen as the basic design. We wanted our site to look a little fresher spending as little time as possible. So here is what we did within a couple of hours:

• Select the template - we used the Awesome Inc with the green navigation menu for the blogger pages. Reasons were the nice menu bar and the round border corners of the post section. 
• Background Image - we chose the same image as with our old template and uploaded it to the designer. We like the image to stay "in place" when the blog is scrolled, therefore we un-selected the tickbox "scroll with page" which appears next to the thumbnail of your background image after the successful upload. 
• Layout Section - we chose the single column layout, kept the 2-column footer and adjusted the width to 770px

The Advanced Layout changes are numerous, therefore here is the list of all changes:

• Page - set the font to Verdana 
• Links - colours to #bf9000 only the hover link is lighter #f1c232 
• Blog Title / Blog Description - our logo in the header is set to replace the Blog title and description, we set the font to courier and to the link colours, even though nobody will see that. 
• Tabs Text - Courier 14px bold, text colour #333333, selected text colour #f1c232 
• Tabs Background - #f1c232 inactive / #bf9000 active (current page) / border transparent 
• Date Header - Verdana 10px, #666666, border #bf9000 
• Post Title - Courier, 20px, #bf9000 
• Post Background - #fefdfa (unchanged), border and bevel colour set to #bf9000 
• Gadget Title - set to Courier, else unchanged 
• Gadget Text - verdana, 12 px else unchanged 
• Gadget Links - same as normal links ie colours to #bf9000 only the hover link is lighter #f1c232 
• Gadget Background - colour #333333, other settings transparent 
• Sidebar Background - transparent (unchanged) 
• Images - default / unchanged 
• Feeds - default / unchanged 
• Feed Links - same as normal links ie colours to #bf9000 only the hover link is lighter #f1c232 
• Pager - #cac4a9 
• Footer - background #333333 text #cabf88 

Further changes

• Added Page Link gadget 
• Added Pages (about / contact / ...) 
• Edited the previously linked pages for "about" and "contacts" which were normal blog posts. Changed them to draft versions as the new pages replace those posts. 
• Added a HTML gadget with the Google Presentation code. The trick is to move it to the top of the "posts-section" in the Design Layout by dragging and dropping it with the mouse. That way the slides are always positioned on top of the post list, as if we used a "featured" gadget (which does not yet exist)

Planned changes using the Advanced CSS (see this post for a how to)

• The bottom attribution gadget will be replaced by a more generic footer text and links. Of course the credits of the attribution will be included. 
• The footer background might be transformed into dark grey transparent. maybe the gadget background as well. 
• The Blogger navbar might be changed to a "hover-in" stle rather than the "always-on" state. 

History of the site and reasons for the migration
Early 2010 we re-designed tickerTXT.org for a more "corporate" look and feel. To do that we heavily modified a blogger template called Nexus-5. We published those mods as the free-bee-template. We learned a lot about blogger.com.
Then Google released the new template designer to draft.blogger.com users in spring and to normal users in the summer 2010. And overnight our template was outdated and incompatible with the new designer. But we are not complaining, the new features are great. We left our design as it was until we needed to turn a bit more blog style. So it was time to "re-create" an improved version of the design using a new blogger template.

This article is a qompute.net cross-post.

tickerTXT site re-design: the "featured article" slide show (1)

So far so good.  Check out our prototype number 5.  Looks pretty good. What we now want for tickerTXT is a better "feature" section. This section should be pleasing to the eye, informative for the casual viewer and teasing the interested reader for more information. So we went looking for a so called "featured article" code for blogspot which teases selected posts.

The slider should include:

• an image as slide background
• a title or header
• a teaser or summary
• a link for further reading
• ... and if possible a code, that pulls all data from articles with a common "label" (solution at the end of the post)

Our prototype number 8 shows a slider we have copied from the driftwood magazine blogger template by be-insight. There are similar sliders in the following templates: MagzStyle Slider, and on RevolutionChurch, Alpha, Chucky, Hybrid News, and so on...  Most of these blogger templates have been "migrated" or "ported" from Wordpress Theme designers. If you check out the links, you will usually find a reference to the original designers.

Unfortunately, though the sliders were quite nice, we weren't really happy, because all of the templates mentioned above "hardcode" the content into CSS-html blogger script. So for non-designers or developers, changing the content is a no-no. So we abandoned that code and didn't even bother to smoothen the CSS details of our prototype 8.

I had found some other code before, "lost it" and then finally found this gem called Simplex Darkness.  You can see it in action here. And best of all, the designer described the slider code in two articles (first, second). The javascript pulls all content of the most recent articles by simply reading the explicit home URL. So rather than using http://www.tickerTXT.org/ we will use http://www.tickertxt.org/search/label/featured et voilà - only posts with that tag (or in blogger speak "label" will be pulled into that preview section.)

Of course we need to change the CSS and layout of that Featured Section, as we want the list of articles on the right side look more like a "1 2 3 4 ... menu" above or below slides. A bit like the magazine1 template described in this tutorial.

Re-design of a site: tickerTXT.org

tickerTXT is a Berlin-based startup which develops micro-trade-exchange services.  the website initially covered the early days of tickerTXT.  The blog-style site was chosen as it really has started as a journal.    After the initial going public phase where the team had been received several awards, the project went on behind the scenes.  Networking, negotiations, business planning, coding...  All of which is not easy to document publicly:  what do we state publicly?  how do we publish success when normal visitors can't try out what you claim to have built...?

After months of un-documented progress, the team decided that it's time for a re-launch.  The site should explain what tickerTXT is about, offer pictures and graphics and easy navigation.   Simplicity, stunning and intriguing style was also high on the wish-list. Therefore the classic blogger style should be replaced with a classic navigation based content.  Though blogger.com should remain the platform.  Sounds familar?