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.

1-2-3 the simplest way to push weird stuff into Blogger.com

Sorry for that sensational post title. But I just tried to paste a simple CSS code into Blogger.com and i always returned HTML errors and didn't want to publish the post, even when I selected the post option to "interpret HTM literally".

So I googled quite a bit, tried a couple of tricks, but none seemed to work and i begin to think it might be a bug. Google is changing a lot of it's services recently, so maybe it's temporarily.

I remembered an old trick: when the web based editors don't seem to work, try emailing the stuff. And bingo, I wrote the post in Gmail and sent it to the email-post addresses defined in the Settings - Email & Mobile:

And bingo. Email to Blogger is a simple and effective parser. Now that Gmail has these nice media features, I guess that Gmail will become my future Blogger Editor. And that also allows me easily cross-post the same article on different blogs. 

One item on my todo list: check, if tags (or labels as Google calls them), can be defined in an email.

Oh and dear Google, will you bring back the "publish to blog" feature in Google Documents? Please.

1-2-3 the simplest way to turn Blogger.com into a normal Website CMS

Go to your blogger.com dashboard and  click on "design" below your blog.

1. Design Section - Page Elements: get rid of all typical blog gadgets, like "followers", "About Me" etc (in the right column for most blog templates)
2. Design Section - Page Elements: unselect all typical blog feature when editing the "Blog Posts" section 
3. Design Section - Template Designer - Advanced - Add CSS: insert the following code...

.navbar {display: none;}

.Attribution {display:none;}

.blog-pager {display:none;}

.blog-feeds {display:none;}

.post-footer {display:none;}

Et voilà. If you then create the page gadget below your title header, you'll have a horizontal navigation menu.  regarding the .Attribution, we recommend to add a text gadget as footer and include the copyright and also mention what template you are using and maybe your modifications. We often do it with an archived post, to which we link fron the footer. ie

CC 2006-2010 qompute.net | Impressum & Disclaimer | Attributions

Of course it is always useful to get a backup XML when you have configured and finalised your template-designer modifications by downloading the entire code (Design Section - Edit HTML).

Here is a recent example of a site I did for a friend http://www.exbuero.com. The site is published, but will probably change a lot over time.

have fun

This is a cross-post with qompute.net

Using the new template designer for Blogger as a CMS

Blogger.com is undergoing significant design and feature upgrades. The new template designer is fantastic and promises even more great improvements to be released soon. Those incremental releases are to be found when switching to the "blogger in draft" mode and may only be available in English US.
Time for us to test the CMS capabilities and our project is a classic corporate website, which until recently had been hosted as a typical set of static html pages.

As the original hosting service ceased to exist, we retrieved the original design and content from archive.org. The mission was to re-create the original site faithfully, though practical changes and alterations to adapt the design to Blogger were permitted.

Rather than our own BeeCMS template, we used the new "Simple" template by Josh Peterson (an option in the new template designer) as the source for the CSS tweaks on our testsite SELLDO ARTIFACTS .

check out selldoartifacts.blogspot.com

We made a few design and colour changes to the template using the new and very nice graphical interface of the blogger template designer. We copied all the texts from the original site. Because it is clear that the template designer will get a few more options and functionalities, we decided if possible to avoid all manipulation of the HTML source. And we succeeded. Whereas with BeeCMS we heavily modified the Blogger template html , this time we limited our tweaks to CSS declarations in the designer and a few tricks.

check out seldomartifacts.blogspot.com

So here is what we have declared in the free form CSS field:

.navbar {
display: none;
}


.header-inner .widget {
text-align: center;
}


.fauxborder-left {
position:center;
}




.tabs-inner .widget ul {
border-bottom:0px;
}


.tabs-inner .section:first-child ul {
border-top:0px;
}


./ .content-inner {
padding: 0px;
}
/.


.feed-links {
display:none;
}
.blog-pager {
display:none;
}
.Attribution {
display:none;
}


.foot {
text-align: center;
font-size: 80%;
}

By just copying and pasting the any of the above CSS declarations in the template designer, you immediately see the changes they cause.  So test them. If you find other interesting declararations, please fell free to leave them in the comments :-)

Here are some examples we played with:

selldoartifacts.blogspot.com
seldomartifacts.blogspot.com
moritzschroedercom.blogspot.com

1-2-3 | Google Analytics for Blogger.com (via blog.dirkeinecke.de)

--------

important UPDATE

Since Spring 2010 Blogger has introduced "Stats" on the Admin interface for blogs. Google Analytics of course offers far more data and in-depth analysis, but for most users, the basic "Stats" information may be sufficient. The nice workaround by Dirk Einecke though is still working if you want to paste the Google Analytics code into you websites HTML...

--------

via blog.dirkeinecke.de

Best practice for Bloggers to paste the Google Analytics Code into your blogspot site.

1. Open the blogger admin 
2. got to Layout - Site Elements 
3. Create a new gadget, best at the bottom of the site elements 
4. Select HTML/Javascript as the type of widget 
5. DO NOT give a title because then visitors will see nothing of your gadget containing your Google Analytics code. Repeat, leave the title EMPTY!

That should be it, Google usually takes a bit of time to start tracking. Wait a day or so.
Happy go lucky.

Posted via web from BloggerCMS

Growmedia.ca's stunning and inspiring website

...with a fixed background image. Well I don't want to go into details, here is the link to their website explaining what they did, and how to do it including the full javascript. Just open it and scroll.  We at tickerTXT / Cidentigo will certainly try the suggested code in combination with blogger templates. This is also the kind of inspiration for the website relaunch of tickerTXT (now quite overdue) we have been looking for. 

BeeCMS template, version 0.98g is basically ready for production and download, with that kind of background handling described by Growmedia.ca, we can turn BeeCMS into something like QueenBeeCMS :-)

BTW Canadian Growmedia has also other great articles describing other very useful javascripts such as their Gallery code mix and some great tips for website projects. Have a look and enjoy. And thanks to Grow. for 

Posted via email from BloggerCMS

YES - Startpage / HompageURL filtered by Label for Blogger.com

As Blake Matheny remarked in his post in 2007, most Blogger Help Forum entries and responses for requests to filter the default hompage list of posts by a Label state it there is no solution. But Blake has found and described a solution, which we applied line-by-line, with a little twist: we just left the original Google code section about the rendering of posts as it is, including the now standard lines for the eventual inclusion of Google ads. And it works, we haven't found an issue yet, cross fingers :-)

Our new revised code including our version of Blake's hack: the main difference is as mentioned above the tags for Google Ads, and the positioning of the "includable", Although we intially pasted it somewhere else Google / Blogger, seemed to re-adjust the location of that code.

So here is the new code:

First the Includable 'printPosts' which can be found between the "post-feed links" section and the includable "feedLinksBody". The formel within the includable printposts is the default Google call to list posts and individual posts (items) with or without comments.

<b:includable id='printPosts' var='post'>

    <li><article class='hentry'>

      <b:include data='post' name='post'/>

      <b:if cond='data:blog.pageType == &quot;static_page&quot;'>

        <b:include data='post' name='comments'/>

      </b:if>

      <b:if cond='data:blog.pageType == &quot;item&quot;'>

      <section>

        <b:include data='post' name='comments'/>

      </section>

      </b:if>

      <b:if cond='data:post.includeAd'>

        <b:if cond='data:post.isFirstPost'>

          <data:defaultAdEnd/>

        <b:else/>

          <data:adEnd/>

        </b:if>

        <div class='inline-ad'>

          <data:adCode/>

        </div>

        <data:adStart/>

      </b:if>

      <b:if cond='data:post.trackLatency'>

        <data:post.latencyJs/>

      </b:if>

    </article></li>

</b:includable>

And here is the original hack by Blake:

<b:includable id='main' var='top'>

  <!-- posts -->

    <!-- <b:include data='top' name='status-message'/> -->

    <b:include data='posts' name='breadcrumb'/>

    <data:defaultAdStart/>

   

    <ol class='hfeed' id='posts-list'>

    <b:loop values='data:posts' var='post'>

   <b:if cond='data:blog.url == data:blog.homepageUrl'>

     <b:if cond='data:post.labels'>

          <b:loop values='data:post.labels' var='label'>

                <b:if cond='data:label.name == &quot;home&quot;'>

                    <b:include data='post' name='printPosts'/>

                </b:if>

          </b:loop>

     </b:if>

 <b:else/>

     <b:include data='post' name='printPosts'/>

 </b:if>

     </b:loop>

    </ol>

    <data:adEnd/>

...

And here is the former BeeCMS code for comparison (which had already been modified from the original code, see previous posts).

<b:includable id='main' var='top'>

  <!-- posts -->

    <!-- <b:include data='top' name='status-message'/> -->

    <b:include data='posts' name='breadcrumb'/>

    <data:defaultAdStart/>

    <ol class='hfeed' id='posts-list'>

    <b:loop values='data:posts' var='post'>

    <li><article class='hentry'>

      <b:include data='post' name='post'/>

      <b:if cond='data:blog.pageType == &quot;static_page&quot;'>

        <b:include data='post' name='comments'/>

      </b:if>

      <b:if cond='data:blog.pageType == &quot;item&quot;'>

      <section>

        <b:include data='post' name='comments'/>

      </section>

      </b:if>

      <b:if cond='data:post.includeAd'>

        <b:if cond='data:post.isFirstPost'>

          <data:defaultAdEnd/>

        <b:else/>

          <data:adEnd/>

        </b:if>

        <div class='inline-ad'>

          <data:adCode/>

        </div>

        <data:adStart/>

      </b:if>

      <b:if cond='data:post.trackLatency'>

        <data:post.latencyJs/>

      </b:if>

    </article></li>

    </b:loop>

    </ol>

    <data:adEnd/>

It worked: the default 'homepage' is now filtering the posts using the label "home" (I hope after posting this article, the 'home' in the code remains bold and red :-) ). Thanks Blake.

If you want to publish an article on the first page / start page, just add the label "home" to that post. And don't forget, Blogger doesn't display the post, if you spelled the tag "Home" or "HOME" instead of "home". Yeah, it is a bit nick-picking of Blogger to make such a distinction for labels...

So all remained for us was now to remove the #featured section, the Javascripts etc, which had become obsolete. Also we don't need the original hack anylonger, which wrapped an "if else /if" around "featured" and the "main" sections of the template.

So only major todo which remains is the bottom of the page, where we would like to update the "bio" section to make it expandable / collapsible . Don't know whether to use AJAX / Javascript, maybe using an invisible tabbed box (where the initial tab is empty, thereby "collapsed", or whether to us DHTML...  We'll see, for now the biggest roadworks to adapt Nexus 5 to a more classic website style use with CMS-like publishing capabilities. Stay tuned :-)

Posted via email from BloggerCMS

Download now or preview on posterous

BeeCMS -095e-templateforbloggercom.xml (46 KB)

Switching from "Featured" to "homeurl" filtered by a Label

As described in a previous post, we want to have a "homepage" or "startpage" which lists only selected posts. 

In our current version, we use the #featured functionality of Amanda's Nexus 5. We have modified it a little bit and removed all the text length limitations and therefore we have suppressed the "continue reading" link. But the layout limitations remain.

We then have the If else hack, which basically says, if it's the "homeURL", then show the #featured section, else show main.

It is of course possible to get rid of all the layout limitations - by using the normal "posts" call of blogger. And we found Blake Matheny's way to include labels as filters for the homeURL.

So in this part we want to prepare BeeCMS code to be able to then integrate Blake's hack. 

Revisiting the Nexus code we found that Amanda merged the Smashing Magazine suggestions with Blogger.com calls by introducing a new "if". Smashing's Enrique Ramirez suggest using the "ol" tag when listing the posts. 

The blogger call for listing posts is however wrapped in a "Includable". in Nexus 5 Amanda simply used the default Blogger code by wrapping it in an if script, which basically says, if the page is not an "item", then use we use the default html code with an "ol"-tag, if it is a single post then use the normal div-tag.

The only difference is that in the CSS the ol tag has a few definitions for margins, so for now we decided to simplify things.

We just use the ol-tag whether it is the type "item" (or single post) or not.

Once everything is ok, we'll try to integrate Blake's code.

So here's the Nexus original code:

<b:includable id='main' var='top'>

  <!-- posts -->

    <!-- <b:include data='top' name='status-message'/> -->

    <b:include data='posts' name='breadcrumb'/>

    <data:defaultAdStart/>

    <b:if cond='data:blog.pageType != &quot;item&quot;'>

    

    <ol class='hfeed' id='posts-list'>

    <b:loop values='data:posts' var='post'>

    <li><article class='hentry'>

      <b:include data='post' name='post'/>

      <b:if cond='data:blog.pageType == &quot;static_page&quot;'>

        <b:include data='post' name='comments'/>

      </b:if>

      <b:if cond='data:blog.pageType == &quot;item&quot;'>

      <section>

        <b:include data='post' name='comments'/>

      </section>

      </b:if>

      <b:if cond='data:post.includeAd'>

        <b:if cond='data:post.isFirstPost'>

          <data:defaultAdEnd/>

        <b:else/>

          <data:adEnd/>

        </b:if>

        <div class='inline-ad'>

          <data:adCode/>

        </div>

        <data:adStart/>

      </b:if>

      <b:if cond='data:post.trackLatency'>

        <data:post.latencyJs/>

      </b:if>

    </article></li>

    </b:loop>

    </ol>

<b:else/>

<div class='hfeed' id='posts-list-item'>

    <b:loop values='data:posts' var='post'>

    <article class='hentry'>

      <b:include data='post' name='post'/>

      <b:if cond='data:blog.pageType == &quot;static_page&quot;'>

        <b:include data='post' name='comments'/>

      </b:if>

      <b:if cond='data:blog.pageType == &quot;item&quot;'>

        <b:include data='post' name='comments'/>

      </b:if>

      <b:if cond='data:post.includeAd'>

        <b:if cond='data:post.isFirstPost'>

          <data:defaultAdEnd/>

        <b:else/>

          <data:adEnd/>

        </b:if>

        <div class='inline-ad'>

          <data:adCode/>

        </div>

        <data:adStart/>

      </b:if>

      <b:if cond='data:post.trackLatency'>

        <data:post.latencyJs/>

      </b:if>

    </article>

    </b:loop>

</div>

</b:if>

And here is our new (old) replacement, whereby we simply always use the ol-tag:

<b:includable id='main' var='top'>

  <!-- posts -->

    <!-- <b:include data='top' name='status-message'/> -->

    <b:include data='posts' name='breadcrumb'/>

    <data:defaultAdStart/>

   

    <ol class='hfeed' id='posts-list'>

    <b:loop values='data:posts' var='post'>

    <li><article class='hentry'>

      <b:include data='post' name='post'/>

      <b:if cond='data:blog.pageType == &quot;static_page&quot;'>

        <b:include data='post' name='comments'/>

      </b:if>

      <b:if cond='data:blog.pageType == &quot;item&quot;'>

      <section>

        <b:include data='post' name='comments'/>

      </section>

      </b:if>

      <b:if cond='data:post.includeAd'>

        <b:if cond='data:post.isFirstPost'>

          <data:defaultAdEnd/>

        <b:else/>

          <data:adEnd/>

        </b:if>

        <div class='inline-ad'>

          <data:adCode/>

        </div>

        <data:adStart/>

      </b:if>

      <b:if cond='data:post.trackLatency'>

        <data:post.latencyJs/>

      </b:if>

    </article></li>

    </b:loop>

    </ol>

    <data:adEnd/>

 

We have subsequently removed all "posts-list-item" CSS declarations. the less declarations, the better :-)

Now remains the last part, the merging with Blake's code... can't wait, but I have to :-( 

Posted via email from BloggerCMS