Blogger layout problems in FireFox

I've recently decided to make the switch from MS Internet Explorer to Mozilla Firefox, and have noticed problems when viewing the layouts screen (in Blogger dashboard) of my three column templates.

Unlike in IE, where the frame adjusts to match the width of the template, in Firefox, the right sidebars seem "cut off".

Luckily, the sidebar (and occasionally, other elements) are not cut off in the layouts view. In order to see and edit these elements, you need to scroll down to the bottom of the page and slide the scroller in the frame to the right. You'll then see the full span of your blog, and will be able to edit your right hand sidebar elements.

However, I have found a solution which allows you to see your blog elements laid out in good view from this:

To this:

To do this, you will need to edit the "body#layout" section in your blog template (this is found just before the closing </b:skin> tag). This section of your stylesheet affect how your layout looks in the layout editor of your Blogger dashboard. By default, this will be defined something like this:

/** Page structure tweaks for layout editor wireframe */
body#layout #main-wrap,

body#layout #sidebar-wrap,

body#layout #header-wrapper {

margin-top: 0;
}

In order to make your blog appear differently in the layouts section, you will need to define how you would like your elements to be displayed. This can be different from the actual dimensions of your blog elements, as it will not affect the actual layout of your blog! Here is an example of how you can define the layout properties:

/** Page structure tweaks for layout editor wireframe */
body#layout #outer-wrapper {

width: 770px;

margin-left: auto;

margin-right: auto;

}

body#layout #header-wrapper {

margin-left: 0px;

margin-right: 0px;

width: 600px;

height: 279px;

}

body#layout #main-wrapper {

width: 400px;

padding: 30px 0 0 0;

}

body#layout #sidebar-wrapper {

width: 150px;

padding: 0 0 5px 0;

}

body#layout #left-sidebar-wrapper {

width: 150px;

margin-right: 5px;

padding: 0 0 5px 0;

}

body#layout #footer {

width:600px;

margin:0 auto;

padding-top:15px;

}

You could use these dimensions as the basis for editing the layout of your wireframe, just be sure that the sections referred to all match the names of those defined in your blog (eg: "main-wrapper" may be called "main-wrap-1" in your blog).

I hope this helps resolve any problems you may have had in using 3 column Blogger templates!

Technorati Tags: firefox | blogger | layouts | problems | layout | editor | wireframe |

A digital clock widget for your blog (with installer)

Yesterday I posted the code for a date and time widget you can install in your blog. However, I wasn't particularly happy with the time element of this, and so have created two new digital clocks instead: one for pale backgrounds (the clock displays in black) and another for dark backgrounds (where the numbers are displayed in white). You can preview the clocks in action here and here.

You can easily install these clock widgets into your blog using the forms below:

For blogs with pale backgrounds:

For blogs with dark backgrounds:

I will be developing more widgets in the future, so be sure to check back for updates. If you do have any problems installing these widgets, feel free to get in touch.

Technorati Tags: blogger | widgets | digital | clock | time | real+time

Add a realtime clock and date widget to your blog

While creating a new template, I've been experimenting with a real time clock/date javascript code to add as a blog widget. You can see an example of this at the top of the Sunset blog here.

The time continuously updates like a real digital clock, and should appear in the same color scheme as used in your blog template. You can further customize this widget by adding <div > style tags around the code.

As yet, I haven't integrated the code into a widget installer, but if you would like to use this widget in your own blog, simply copy and paste the code below into a Javascript/HTML element. For those using classic Blogger templates, you can paste the code where you would like it to appear in your blog's template:

I do plan to make a widget installer and further customizations to this javascript, which I will post about as soon as it is ready.

Technorati Tags: blogger | widget | date | time | realtime | clock

Mobile blogging with Flickr

Blogger's mobile blogging service is a great idea, but unfortunately not all mobile phone networks are yet supported (see here for information about which networks currently are). You could still post by email using your mobile phone, but image attachments are not supported by Blogger. So what's the alternative? Use Flickr's mobile blogging service instead!

I often post by camera phone on one of my other blogs, and have found Flickr's mobile blogging service to be ideal for my needs. To start mobile blogging with Flickr, you'll need to take the following steps:

1. Create your free Flickr account (if you haven't already done so). Flickr also provides a paid service, but you don't need to pay extra charges to use the mobile blogging service.


2. Set up your blog by going to Your Account>Blogs in your Flickr dashboard. Click on "Add New Blog" and follow the steps to verify you are the owner of your blog.


3. Next, you need to set up your email address which you will use to post your photos to. Go to Your Account>Upload by email to do this. You will be given two different email addresses to use: the first is to email your photos to Flickr, the second (and the one we are most interested in) will post your photos to your blog. This address will look something like this:

   uniqueemail2blog@photos.flickr.com

   . Enter this email address as a contact in your handset.


4. You can then modify your layout preferences to change how your photo posts will appear in your blog. This can be done from the Your Account>Upload by Email page in your flickr dashboard (look for the link beneath your mobile-to-blog email address). You can alter the size and position of your photos, and also the template which is used to post to your blog.


5. Once you've set your preferences, you can now begin blogging photo posts using your mobile phone!

You can post to Flickr either by sending an email from your handset using your photos as attachments, or by sending an MMS message to your Flickr address. The subject line of your message will be used as the title of your post. Usually, Flickr blog posts appear within a few seconds of being sent, but from experience I can say that on occasion this can take a couple of hours.

I've found this technique to be a very useful alternative to Blogger's service, at least until all mobile phone networks support it!

Technorati Tags: blogger | mobile+blogging | photo+blog | flickr

A "popular posts" widget for Blogger

After some searching for a "Popular Posts" widget for Blogger, I discovered AffiliateBrand's widget (thanks to Blogger Tricks). This widget is free to use, and displays your most popular posts based on tracking of page impressions.

You can see an example of how this works in my sidebar, however please note that I have customised the overall appearance of this widget to suit my blog (which I will post about later, once I've ironed out the kinks). The default widget provided by AffiliateBrand looks something like this:

The widget is very simple to install, and now you don't even need to sign up to AffiliateBrand membership to be able to use it! You will need to register your blog's address though, in order to ensure that your most popular posts are tracked. Here's how to get this widget for your own blog:

1. Visit AffiliateBrand.com and click on "Blog Window-Create/Edit" in the left sidebar.


2. Add your blog URL into the box provided, and click "Add Blog". Your blog's URL will then appear in the window beneath.


3. In order to get the javascript code you need to create your widget, you will need to click on the "edit" link beside your blog's URL. You will then be directed to the page from which you can copy the code. Paste this into Notepad or something similar.


4. It may be a good idea to configure the width and height of the widget before you install it into your blog's template (if you decide to register with AffiliateBrand, you can do this later). To do this, click on "Customize" and choose your specifications for the widget's width, height, how many posts to display, etc. You can also specify a stylesheet for the widget, which I shall explain later. Then click "Save changes.


5. Now, go to Template>Layout and add a new HTML/Javascript element to your sidebar. Paste the javascript code from AffiliateBrand and save your widget. Now when you view your blog, you will see the "popular posts" widget appear in your sidebar. At first, it will display a message rather than any posts as it takes a short time to begin collecting data of your most popular posts. To speed this up, click on a few of your post pages and you should soon see the results begin to appear.

As mentioned, if you create an AffiliateBrand account, you will easily be able to edit your widget later, as the javascript code is dynamically updated from the remote server. Also, you will be able to receive detailed analytics reports of your blog activity.

If you prefer, you can also specify a style-sheet to alter the appearance of your widget, which is explained most fully in the Stylesheet FAQ.

Another advantage of using this widget is that you can associate your Amazon Associated publisher ID and display relevant ads beneath your widget to help you earn money from your blog. To do this, click on "edit" beside your blog's URL, and then on "Advertising". On the following page, you should enter your Amazon Associates ID.

For a great tutorial of how you could customise this widget to better suit your blog's style, take a look at this post by Webweaver, which offers excellent advice.

As yet, I'm still learning about the configuration and usability of this widget, and will probably post again in a couple of days regarding my customisations and experience. In the meantime, feel free to leave your comments and opinions or email me if you prefer.

Technorati Tags: blogger | widgets | popular+posts | widget | most+read | affiliatebrand | amazon+associates

Adjust padding in Blogger templates

"Padding defines the space which surrounds the content within an element, unlike margins, which define the space around the element itself. This is most noticable in blog templates whose elements (eg: sidebars, main posts section) have coloured backgrounds or borders. In similarity to margins, padding can be defined within the style section of your blog's template using CSS definitions. Here I will explain how padding can be defined, giving examples and images to help you alter the padding of elements in your own blog.

As I have mentioned, padding determines the space surrounding the content of an element. To explain what I mean by this, here are two examples of a table cell, the first has no padding defined while the second is padded by 10px on all sides:

A table cell with no padding

A table cell with padding

In blogs which feature borders around it's element, or differing background colours, defining the padding of each elements may be crucial in achieving a user friendly template design.

The padding definition for a particular blog element can be defined in the style section of your blog. Here is an example from my template which defines the padding used for the main posts section:

#main-wrapper {

margin-left: 14px;

width: 430px;

float: left;

border-left: 1px solid $borderColor;

border-right: 1px solid $borderColor;

background-color: $mainBgColor;

padding: 0 10px 0 10px;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

}

The line highlighted in red defines the padding in pixels for all four sides of this element in a clockwise direction beginning with the top:

1. Top-side: 0


2. Right side: 10px


3. Bottom side: 0


4. Left side: 10px

This ensures that the text (or any images) within the main posts section is distanced from the borders on either side.

Using this method, you can define padding for up to four different sides of an element, as in the following example:

sidebar {padding: 10px 12px 10px 12px;}

This defines 12 pixels of padding between the upper and lower borders of the sidebar and the sidebar content, and 10 pixels between the sides.

It is also possible to define equal padding for all sides of an element using a single statement, for example:

Sidebar {padding: 10px;}

This would ensure there is 10pixels of padding on all sides of the sidebar element.

You can also define padding for each side individually, as in the following examples:

padding-top: 1opx;

padding-right: 12px;

padding-bottom: 15px;

padding-left: 20px;

.

If you would like to experiment with values for padding, you can use the "Try it Editor" over at W3 Schools, which allows you to experiment with CSS styling for padding in the left window, and see the results in the right hand window.

If you prefer to experiment with your Blogger template, be sure to make a back-up of your template before saving any changes, in case you'd prefer to revert back to the way it looked before.

Related posts:

• Adjust margins in Blogger templates


• Create a 3 column Blogger template

Technorati Tags: blogger | template | design | padding | css | style

Adjust margins in Blogger templates

In Blogger templates, margins define the space between elements of the blog, such as the space between the main posts section and the sidebar. If you have added a second sidebar, or simply wish to alter the layout of your blog, you may wish to change some of the margin specifications for elements of your template. In this post, I'll explain how this can be achieved, with examples to help you understand what can be done.

The margins of each blog element (ie: header, sidebar, main-section) are specified in the "Style" section of your Blogger template:

• In the "new" Blogger layouts templates, the style is specified between the <b:skin> and </b:skin> tags


• In "Classic" Blogger templates, the styles are specified between the <style> and </style> tags

For both types of Blogger templates, margins can be defined in the same ways.

The best way for me to explain how margins work is by using an example; here is the style element for my right sidebar as it appears in my blog template:

#sidebar-wrapper {

margin: 0 14px 0 10px;

width: 240px;

float: right;

background-color: $mainBgColor;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

}

We need to focus on the red line, which specifies the margins (the space surrounding) the sidebar element. As you can see, there are four margins specified in this one line; these are defined in the following order:

1. Top margin: 0


2. Right margin: 14px


3. Bottom margin: 0


4. Left margin: 10px

I can increase or decrease these margins by altering the number associated with each margin. For example, if I wanted to define a space of 10 pixels between the header section and the top of the sidebar, I would change this line as follows:

margin: 10px 14px 0 10px;

Sides which do not have a margion should be specified as "0"; those for which you would like a margin can have this specified in pixels (eg: 10px), or in other CSS units (which you can read about here). In most Blogger templates, margins are specified as pixels.

If you prefer all margins surrounding an element to be equal, you can define this using only one statement, eg:

margin: 15px;

This ensures that the margins of the top, right, bottom and left of an element are all 15 pixels wide.

One final method of defining margins is to specify the margin in the description, eg:

margin-top: 15px;
margin-right: 10px;
margin-bottom: 5px;
margin-left: 0;

Here are some examples of the spaces which can be created using margins in the style of a template:



Header section has margins defined as "15px 15px 10px 15px.





Now the main-element has a margin-left definition of 15px...





... and finally, the "sidebar" element has margins defined as: 20px 0 0 40px; (in addition to the margins of the other elements).

A great way to experiment with margins is to use the "Try it Editor" featured over at W3 Schools. Here you can adjust the margins in the left hand pane and see the results imedietly in the right section:

By default, the code does not feature DIV elements as you would find in Blogger templates, so you may like to copy and paste the following code into the left window in order to experiment in the same way I have described:

<html>

<head>

<style type="text/css">

.outer-wrapper {width:400px; height:200px; border:2px solid; border-color:#f00;}

.header {width:300; border:1px solid; margin: 15px 15px 10px 15px; float: left;}

.main {float:left; width:150; height:100px; border:1px solid; margin-left: 15px;}

.right {float:left; width:100; height:100px; border:1px solid; margin: 20px 0 0 40px;}

</style>

</head>


<body>

<div class="outer-wrapper">

<div class="header">Header section</div>

<div id="main-wrapper">

<div class="main">Main section</div>

<div class="right">Sidebar section</div>

</div>

</div>

</body>


</html>

Have fun experimenting with the margins of your Blogger template! Don't forget, you can always play around with the margins and preview the changes before saving. To be on the safe side, it's always good practise to make a backup of your template before altering it.

Technorati Tags: blogger | template | margins | css | style