Monday, January 10, 2005

PSA : Blog xtra's

Public Service Announcement - Blog to the Max

Here's a few handy tips that should enhance your Blogging experience ;) I'm not laying down the law here but I think we ought to try and "sing the same tune" whilst Blog'ing which should help to ensure that the blog content is fairly consistent and legible.

Please don't be afraid of using the Blog, any Posting or Comment entries can be either re-edited or removed if the need arises. A preview option is also available to assit you whilst editing, practice makes perfect... Please feel free to contact me if you have any queries.

Note; It is advisible to get into the habit of refreshing your browser after loading a page, typically the F5 key. This will ensure that the latest copy fromthe internet is shown rather than an old, cached copy from your local drive. Getting the latest copy from the web doesn't affect many pages, but is relevant to those that are regularly updated - like say the Calendar.

Posts:

Are chronologically ordered entries to the blog which might be a bike or review, a ride or organising a ride, etc. Within Bloggers own Post editor you are able to add text, pictures and links to other Posts or webpages. It also allows you to preview your Post before Publishing it to be visible on the worldwide web. If you haven't finished your Post, you may Save it as a Draft, in which case it doesn't become visibile until it is finally Published.

Posts can be re-edited or even deleted by only the original creator and/or the webmaster. If you have access to a Post then a pencil and trash can icon will appear at the end allowing you to easily edit or remove the Post in question.

If you've a long list or perhaps a component specification associated with a Post, try adding it as the first Comment. Thereby reducing scrolling on the main Blog page as the Comments are now collapsable and only visible when selected. Click here for an example.

Title: Please try and keep Post titles brief as they are used to create a web address that can be "easily" referenced in the future. Altering a Post title is not advisible as any links to the Post will be broken and require mucho fiddling to correct.

Date: When creating (or editing) a Post it is possible to adjust the date/time to correspond with the actual event, be it a ride or when some gear was purchased or tested. This will help to order Post's in chronological order, especially within the Archive list (right hand sidebar). To do this, you should expand the "Post and Comment Options" at the bottom right of the Blogger editor.

Pictures: When Post-ing (not commenting) you can add pictures either by selecting them from your local drive and uploading to Blogger or by referencing another website via the URL section. Brumster has kindly opened us a gallery on his server where we can upload ride pic's, etc. Although only he and I are currently allowed to add snaps, email them thru to us if you've any to upload.

When adding pictures to a post, it's advisible to select the "small" option so as not to need too much scrolling on the blog. If readers are then interested in a particular picture, they can click on it and it'll resize to full size.

Once you've confirmed a successful picture upload, you can then adjust them within your post to get it looking pretty ;) Personally, I find the "Edit Html" rather than the "Compose" editor to be most useful for this although it does require some understand of the tags. If you'd like to understand more about Html then have a look at HtmlDog and their "tag reference". Meanwhile here's some basic's. The example below shows the Html code behind displaying an image that has been uploaded to blogger from a local directory (this is not a Url reference).

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://photos1.blogger.com/blogger/7519/1896/1600/Woburn_060531_rhododendron2.jpg">margin: 0px 10px 0px 0px; text-align: left; cursor: pointer; width: 112px; height: 150px;" src="http://photos1.blogger.com/blogger/7519/1896/200/Woburn_060531_rhododendron2.jpg" alt="" border="0"/></a>

Note; images uploaded via the Url option have similar code and the points below still apply.

If you want to move a particular image elsewhere within your text then cut and paste the entire text from upto and including the closing tag .

In the example, notice that the "text-align:" value is "left;" - valid entries are "right" and "center". When altering the alignment you should also consider adjusting the "margin:" values as this provides the border to separate one image from another. You'll notice four "px" values in the example which relate to the top, right, bottom and left hand borders, measured in pixels. All four values are not necessary if the right most entries are all zero.

If you uploaded the pictures with say a central position and you want to reposition to the left hand side, you may need to remove the "block:" entry and it's value, including the trailing semi colon.

To resize a picture, in my opinion you're better off leaving the "width:" and "height:" within the "Edit Html" editor and using the "Compose" option instead. Clicking the picture and dragging the corner of the picture - this way you'll retain the proportions of the image.

Picasa: Through Blogger/Google I've found a pretty cool, freeware picture handler called Picasa. Some of the functions are neat (go play) but the picture enhancement options are some of the easiest that I've used. It allows you to select a picture and easily blog it to tinterweb.Posted by Picasa

Comments:

Are added to specific Post(s) by anyone granted access to the Blog and cannot be amended. The Comment editor is much more basic that the Post editor e.g. pictures cannot be added.

Only the original commenter or webmaster has access to delete Comments. If you have access to a Comment, then a trash can icon will appear at the end allowing you to remove the Comment in question.

Comment URL's / weblinks ? If you are creating a Comment and you'd like to add a link over to another page/picture/etc then insert the following HTML below and replace the two portions of italic text with; your webpage link as seen in your browsers navigation bar and an appropriate link name that will be shown within the Comment;
http://www.google.co.uk">Google
Once you publish your Comment it'll automatically parse the URL and look/work like this;

Google

Comment Issues ? Have you lost the new Comments highlight at the end of a Post, along with the peek-a-boo style expansion and access to the post a Comment link ? If so, then firstly try reloading the Blog with your browsers Refresh icon, press F5 or even use Ctrl F5 to fully reload the page. If this doesn't help then you'll need to remove the Cookies for this page within your browser and refresh the Blog. Why does this happen ? - it appears to manifest itself when removing Comments permanently from a Post.

General:

Access: The Blog has restricted access to users that are registered Blogger users who have been granted access to the Knobblies blog. Those granted access are regular riders or friends amongst our riding fraternity.

Lost an update ? If you have updated a post and upon returning to the blog the old text is still showing, it may be necessary to refresh your browser, typically the F5 key. This will ensure that the latest copy fromthe internet is shown rather than an old, cached copy from your local drive.

Emoticons are fun and now available on't'blog. For more info, clicky.

Searching: Now that our Blog has grown, to find something might use the "Search this Blog" function within the Blogger toolbar at the of the main page.

If you know the month in which the Post resides, then used the Achive section within the sidebar on the right hand side.

Alternatively, links to all the gear/kit review are now all listed within a single Review Post directly linked to at the top right of the sidebar. This also has similar handy links to single Posts for the Ride Calendar and Bike Doctor.

BlogThis! is a handy pop-up that Blogger.com have provided that allows you to highlight text on a webpage anywhere on tinterweb, hit the BlogThis! bookmark and it'll create you a Post to Blog pop-up for posting the info back to the Blog. A quick and easy way to Post something useful that you spotted whilst surfing. For more info search the Blogger Help.

Tweaks: Folks, I've been twiddlin with the blog and though I'd list the gen so that you get the most out of it. Here goes;
  • "Add a new Post" link placed at the top of the Sidebar
  • Post's can now be edited directly, provided you created it (pencil icon)
  • Post's can now be emailed directly (email icon)
  • New Comments are highlighted after the initial Post in bold / blinking, with how many (if you experience prob's then you may need to enable Cookies for this page)
  • Comments are now hidden by default. Expandable upon request, Peek-a-boo style
  • Once main page Comments are expanded, "Post a Comment" link is then available
  • Recent Comments drop-down list in Sidebar (I'm not happy with this, sorting isn't perfect - by post order on page, by increasing time. Perhaps the other comment notifications are sufficient ?)
  • "Home" link added to end of Sidebar
  • Post Email, Edit & Comment Trashcan icon's aligned (to save space)
  • Formatting, Sidebar nesting, alignment issues
  • Links to Posse bikes (now a drop-down), contributors, retailers, etc
  • Pic's of the Month links added
  • Misc external links added - gps, maintenance, classifieds, etc - now with hints/titles
  • MTB Blogring(s) added
  • Blog main & sidebar widths increased slightly
  • Reviews & Ride Calendar Blog-lists added (with sidebar links for easy reference)
  • StatCounter included
  • Post dividor added, Comment dividor removed
  • Trails link added to the sidebar
  • Tidied sidebar footer when showing a specific Post
  • Bike Doctor Post-list added (with sidebar link for easy reference)
  • Hit Counter added
  • BikeBlogs.com link added to sidebar
  • Sidebar horizontal rule's added
  • URL & Name changed, see post
  • Sidebar expandable headers i.e. click "Bloggers" for a posse list and their bikes
  • Atom feed link added to the bottom of the sidebar
  • Sidebar bullets replaced with icon's (also for bloggers)
  • Comments indented
  • Navigation icons/buttons added (posts, comments & sidebar)
  • Icons/buttons added for handy links and e-mail
  • Emails to all da posse when Blogs and/or Comments added
  • Blog resource page added for routes, etc; http://knobblies.googlepages.com (was http://lpriestland.googlepages.com - content moved)
  • Keyboard shortcuts added for typical functions e.g.
    • Alt+t to goto top of the current page
    • Alt+b goto bottom of the current page
    • Alt+h reload front page / home
    • Alt+c show Calendar post
    • Alt+d show Bike Doctor post
    • Alt+g show Gear / Kit Review list
    • Alt+r show Routes / Maps
    • Alt+a create a new Post
    • Alt+e send an e-mail to the webmaster
Future Enhancements ?
  • Links to all previous Rides
  • Calendar - possibly with events highlighted
Fixes:
  • Internet Explorer formatting issue (drop downs were too wide, use Firefox folks !)
Bugs:
  • Internet Explorer struggles to correctly display the list of Bloggers, shucks - get Firefox !
Suggestions please, if there's anything else that you'd like to see...

7 Comments:


Farqui said...

Ok, I've modified the Blog template and widened the page a little.

I know that some of you had prob's with the page initialy when using IE, so can everyone still see it ok ?


Farqui said...

Ok, I didn't get any adverse responses to my previous adjustment so I've stretched the width slightly.

This time I've also boosted the 85% font to 100%, increased the width of both the main and sidebar panes.

You many need to refresh the pages with Shift + F5 for the mod's to fully take.

Let me know if you have any trouble.


Farqui said...

It looks like I over extended da Blog a little as some of the posse have reported prob's. Therefore, I've slimmed it down a little - a shift + f5 might be needed to fully witness the change.

What'd'ya think to the sidebar now then folks ?


Farqui said...

Emoticons added ;)


Farqui said...

Freshened up the Blog background and fonts to be a little easier on the eye balls.


Farqui said...

Toons recently discovered that IE showed the blogs sidebar at the end of all the posts, with some posts having a large font.

After some head scratching it appears that a couple of posts contained dodgy html tags which caused the fonts to gradually increase. These misplaced tags seem to caused by Bloggers post editor and can be identified as multiple font or span labels. Removing them resolves the issue.


Farqui said...

Enhance your posts, checkout the Emoticons thread.