I see some people are having trouble with the Softpress.com version of Blogger instructions and not getting them to work. I have gotten mine working (ex: http://danjasker.blogspot.com) and am in the middle of adding to it. Here’s a little tutorial to get your started in creating a Flexible layout Blogger Template. This tutorial is based on the “box model theory” and is not the conventional drag-n-drop mentality most people who have Freeway sites use. Think of box-model-theory as a storage space and you need to stack a bunch of “boxes” into a confined space and they all stack on top of each other, you just have to figure out how to stack (aka “float”) them around. This is how you get a Flexible layout by using the box model.
(Also, this is a tutorial for the free blogger account version that’s hosted by blogspot.com, not instructions for your own server edition because I haven’t done that.)
I have also posted a file as an example. It was built in Freeway 5.0.1)
(http://www.mediafire.com/?mil0qot2boa)
As far as the Softpress version, here’s my altered version as to how I got it working: (Again Freeway 5 Pro)
-
Create a new document, set it to XHTML 1.0 Transitional. I set my page width between 900-1000px and left the height as is. Click Ok.
-
Open the Document Setup dialog box and click on the Upload tab and under Web Address put the address of the location of your Resources and CSS folders, not your blogger address like the Softpress site says. Any images or external CSS files must be stored somewhere else on like a hosted server. So in my instance I have Comcast web-storage so in my web address spot I put “http://home.comcast.net/~username/blogspot/” (Make sure you put the “/” at the end) I created a folder on my Comcast space called “Blogspot” just to keep things organized from my other site that exists on there. This is called the BASE HREF and directs the blogger template as to where the Resources and CSS folders are located in your code.
-
Leave all other fields blank in the Upload tab.
-
On the Master page, draw an HTML item, layered, and set it to the width of your page, so in my file example it’d be 900px, labelled “Container.”
-
Double click on “Container” (so you get the text cursor) and goto “Insert” and click HTML Item. Repeat again so you have two boxes. When asked for an undefined height for “container” select OK.
-
Now set the box on top to “float” left in the inspector palette (labelled “Blog”.) Set the clear to left as well and the other box should pop-up next to it. Select the second box (labelled “About”) and set the “float” to right and the clear to right. (In my example I gave these boxes margins of 25px on the left and right, just for kicks)
-
Now double click again (text cursor) in the first box (“Blog”) and goto “Insert” and select “Blogger Posts.” Now stretch “Blog” and the now inserted Blogger Actions to their “designed size” for instance mine is set to 450px.
-
Now I’ve added a spacer box (15px height) below the top boxes because of a problem I run into with IE6 and such. This also makes it easier to add new HTML items within the container without fighting the margin aspect. It’s up to you.
-
Now on your open Actions palette you can now change how the date header, post title, etc will look by clicking on the various blogger actions. The options are limited, but I can show you how to edit somethings if need be.
-
You can also (once done with the customizing) view your page in preview to see how it looks as your working.
-
Rinse and repeat for the other “Blogger Action” sections until you have it all laid out the way you want to.
-
It’s important to remember that you don’t have to use all the blogger actions for blogger to accept it. For example mine doesn’t use the About Me or the Archive or the Header, it just uses the Blogger Posts and the rest is stuff I’ve added in there. You just need to use one to be able to copy the code to the clipboard.
-
All this should have been done on the master page only.
-
Once you’re done with laying things out, select the non-master page and click once on any of your laid out blogger actions. In the actions palette (after you’ve published your files to a site folder like a normal Freeway site) you’ll see a button that says, “Copy To Clipboard.” Click that and it will say, “The template code has been copied to the clipboard. You now need to paste the code into the Edit HTML section of your blogger account.”
-
Follow the steps on the Softpress site for 11 and 12 which is essentially paste the code into your Blogger Account by selecting the layout tab, selecting edit HTML, pasting the code in there, and then hit preview to see the results.
-
Go back into Freeway and I just saved my file as a normal Freeway document, not this “Save Template” because I saw no reason to.
OPTIONAL / SNAGS:
-
When you copy your code to the clipboard, I pasted mine in a text editor like Text Wrangler first. You want to make sure that in your code that the line involving “BASE HREF” is the address to your Resources folder. So for instance mine has my Comcast address set previously in the upload tab in step 2.
-
However, if you use external CSS checked in the Document Setup, I had to create a Direct Link (called in the web world as an absolute address) to my CSS file so in the code I had to add my full Comcast address manually. For some reason the BASE HREF I set previously worked only for the images not the CSS file. You’ll have to change that for both the external file and the IE6 file if you have IE6/IE7 compatibility checked.
-
If you’re a CSS nut, all you need in the blogspot CSS section is just a “body” tag (which you make default anyways to control the fonts for the site) and any link styles (a:hover, a, a:active, a:visited) and the rest can be copied (even the CSS Menu’s from Freeway) to say CSSEdit or any CSS editor and can be manipulated further there.
-
There are some serious limitations to these blogger actions by Softpress, so here are a few CSS edits that might help your site out. These cannot be done in Freeway 5 and therefore require some CSS knowledge and/or courage.
(h3.post-title) - This is the style name of your post title and the options are pretty straight forward in your Actions palette. If you want to decrease the amount of space between your post title and where the content actually begins, you’d want to adjust the margin-bottom. On my site for instance the CSS added was “margin-bottom: 5px;” This decreases the amount of space between the title and the content.
(h2.date.header) - This is the style name for the date above the post. I removed the date from mine and you can do so in the Blogger options. You could also add a tag of “display: none;” and it wouldn’t show up, but it’s easier to just uncheck the date box on Blogger.
(.post-body, .comment-body) - This is the style for your post body and the comment body. This means like what font you want to use for the content of your blog posts, color, etc. The only thing I did was adjust the leading. So, I added the tag of “line-height: 18px;”. Some CSS programs will combine the font size, font, and line-height into one “shorthanded” edition so mine would be, “font: 11px/18px Verdana;”
If you go through your site you’ll see the CSS tags are pretty obvious they just require some editing outside of Freeway until the Actions get a little more advanced.
Always remember, build your site like a normal Freeway website. There’s no special Blogger way you have to build your site and not all the Blogger actions are required or necessary.
Any questions or comments please leave here and I check this site every day, so the turn-around time should be fast.
Good luck and happy building.
tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options