Showing posts with label new template designer. Show all posts
Showing posts with label new template designer. Show all posts

Sunday, October 31, 2010

Blogger.com wishlist - common requests categorised and described

Blogger.com is an essential tool for us. Therefore I took the time to read all current 750 plus ideas and requests. And I found many recurring themes often using different words and ways to describe very similar functions or features. This post tries to filter and describe the most common requests and ideas.

The following list is not a thorough aggregation of topics. Some categories might better be embedded in others. The list is not "in order" or implies a ranking. The numbers are for reference only...

BTW if you like my Ideas for Blogger.com compilation please don't forget to vote here!
  1. favicon - possibility to upload / create / link to different favicon (the tiny icon to the left of the URL address field in the browser. The favicon is also used for browser tabs and RSS readers)
  2. Comment features 
    1. threaded comments / reply to comment
    2. integration with other "social" commenting services like Facebook, Twitter, Disqus
    3. some would like a discreet comment function which allows readers to use the comment as contact form
    4. Look and Feel - ability to place form above comments, ability to change the display format
    5. Integration of Google Groups as a forum (and vice versa why not use blogger as the Google Groups front-end for appearance. Also why not syndicate posts as well, IE offer the possibility in a Google Thread to publish contents as a blog post)
    6. rating of comments - similar to youtube?
    7. avoid accidental duplication by commenter (happens to everyone, hitting submit twice :-))
    8. allow editing of comments (maybe transparently to user/visitor with email notification for typos, links etc)
    9. email notification for commenter when reply has been posted
  3. My Profile
    1. adapting it to blog content and purpose, for example personal and business or theme of blog.
    2. Optionally combine the Blogger Profile with the Google Profile
  4. Handling and Appearance of Photos
    1. more size and placement options
    2. incl shadow and border independantly of template scheme. 
    3. Uploading and management of pics with less restrictions, better photo URLs and tighter integration with Picasa. 
    4. Handling of links to zoom the image as well as link to related content (external URL)
    5. some would like to disable downloading (we do not agree, at least this shouldn't be a priority, as photos in a blog are public, so workarounds of downloading prevention measures are easy to do)
  5. Social Following / Linking 
    1. Make it possible to add other service icons to the bottom of the blog
    2. stats of links
    3. Friend Connect and Followers
    4. better integration with Feedburner and RSS tools, visible backlinks etc...
    5. more visitor (social) participation -  for tags, thumbs up or down, grading and rating....
  6. Post dashboard / post editor
    1. dashboard for management of posts should be centralised / aggregated for all blogs of a user (and among blogger communities)
    2. integration with Google Docs / Google Apps for contributors (who won't need the blogger dashboard) that would allow for photo handling, tables, word count, mathematical formulas, table of contents / anchor links within the post etc
    3. some would like a Latex integration (more requests, than one would assume :-)) 
  7. Sharing labels / tags
    1. across blogs, twitter, Facebook, Google Docs / Apps (posting docs as blogger articles with labels)
    2. Email labels, so that Mail2Blogger can include tags, myabe in the posterous way with double-brackets in the subject line ((tags: news, fun))
  8. Additional Access Level - add authors to a post which would be similar to an additional generic "editor" access. 
  9. Better blog syndication - many bloggers have more than one blog, many blogs have more than one author. Many bloggers would like easier and better handling
    1. such as cross-posting - allow simultaneous posting to more than one blog with ONE post. That kind of cross-posting is frequent for official Google blogs. 
    2. Optionally set one blog as the main post, the other posts are referring posts with link.
    3. Commenting should be syndicated as well (see comments above). 
    4. Very important - the cross-post should be editable as ONE post, no need to edit all posts individually.
    5. Posting management -  central management incl integration with Google Apps / Doc would allow easier access for contributors who don't need . And of course it would be nice to include at least a generic editor level (per post as well as per blog, see above)
    6. Style management for corporate blogs - again a case for a Google Apps integration
    7. Syndication / forwarding with external services - Ping.fm functionality, Twitter, Facebook, Flickr posting, Apple Apps Store, Android appstore
    8. Multi-lingual support for posts published in different languages (again Google Docs plus sticky label for each language used)
    9. Google Wave-like features (again, best through Google Docs/ Apps integration)
    10. Google Sites - integrate wiki functionality into Blogger (maybe Google Docs Wiki) , and Blogger into Google Sites regarding blog capabilities
    11. PubSubHubbub feature
    12. being able to mix private and public posts in a blog
  10. more font options (editor, CSS)
  11. CSS and template designer
    1. make templates "savable" , so that additional 3rd party templates or the users customisations don't get lost
    2. background image handling not just for upload images, including URL for external hosting
    3. saving customisations without having to apply them to the blog
    4. improve template header options for fonts and photos, size, position, width...
    5. CSS options like transparency and colour options for ALL page elements
    6. reusable color schemes for different templates, applying pre-configured color scheme to a template
    7. possibility to add background images to share with others
    8. possibility to share designs / layouts / templates
  12. additional mobile templates
    1. each template has a separate simpler mobile look
    2. mobile CSS settings / handling
  13. table handling
    1. maybe button for adding tables, a table wizard (though a tighter integration with Google Docs / Apps would solve that issue)
  14. Search Engine Optimisation SEO
    1. maybe through META gadget
    2. label integration as keywords
    3. better page rank features (ironically a common remarkt is that Google's blogger is less SEO friendly than Wordpress.com, therefore Blogger.com blogs are less well indexed and ranked in searches)
  15. Navbar features - Blogger's navbar (not the menu navigation for pages)
    1. more options for themes of blogs regarding next blog etc
    2. some would like to make it disappear (there are easy hacks, but...)
    3. some would like to have a mouse-over slide in
  16. Better backup
    1. automated download
    2. download posts in text format (not as xml)
  17. Print, PDF, ebook features for visitors - most commonly requested are PDF / ebook feature as a button to either load the entire blog into PDF or ebook format, or the post.
  18. Link management 
    1. Open URL in new page - often asked and simple (though not on the list of my top requests)
    2. Add direct link to posts / pages within the editor
    3. Permalink option
    4. Links from images
  19. mobile blogger apps for iPhone, iPhone and Android (fewer requests for Blackberry)
  20. Sticky post, featured article, recommended posts, my favorite posts, homepage and pages - we believe that this would be best provided using a gadget "selected posts" where the user can select pages and posts displayed in that gadget. Also page elements and gadgets should include a "display" condition (read this post)
    1. manual selection
    2. selection based on label
    3. display options for number of posts, thumbnail, date, author, snippet length, full length of post...
    4. slideshow option
    5. conditional gadgets for page elements and within gadgets
  21. Calendar gadget - there are a few, but usually pre-2010, undistinguishable (seemingly similar gadgets) and unusable
    1. Google Calendar (allowing for Blogger adaption in theme colours, size etc)
    2. Google Calendar to post (for example public calendar entries as event blog posts for example)
    3. Use the Calendar layout for blog archive display option
  22. Gadget handling
    1. community rating (also to flag dodgy ones)
    2. better selection interface
    3. more options for photos, gallery (better selection options) and video gadgets (for example load playlist of youtube user) 
  23. Google Maps Gadget for imrpoved mapping features within posts as well as page element
  24. Navigation menu bar (see my additional post)
    1. dropdown features
    2. more customisation by combining link list and pages..)
  25. Labels and categories
    1. second level labels like wordpress categories
    2. clustering of labels by theme
    3. let visitors add tags (for example by aggregating backlink tags, or tagging from public bookmark shares)
    4. adding stackoverflow.com type tag features / rating and weighting tags
  26. Gadgets within posts/ pages
    1. would allow for sitemap on a page, or pages with label clouds, 
    2. maybe even mindmap like sitemap
    3. Mostly useful for pages, but gallery, Google calendar (for events and bookings) and poll gadgets for posts are very useful as well.
A few notes on the new editor
Interestingly, the request section dedicated to the updated editor lists many requests which basically say, that the new editor is not as good as the old one. I disagree with those comments. My different experience is maybe due to the old editor's browser and OS dependence. I am using Ubuntu and mainly Chrome. Yes, the image options are a little less flexible, but I am sure that this will soon be fixed.

Other than the copy paste annoyance, the editor seems far more stable.

If you copy and paste within the post, the "past" includes a META tag which the editor doesn't like and complains about. Currently, the only way to fix that is to switch to the HTML mode and delete the meta tag(s). For longer texts, I use the "find and replace" of the browser.

My little bug fix wish is that default paste is parsed to plain text. Only as an option should "paste" include rich formatting.

Please check out all my idea contributions for blogger.com :-)

Tuesday, October 5, 2010

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.

    Thursday, September 23, 2010

    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.netImpressum & 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

    Friday, April 30, 2010

    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: