Tutorials

4 replies to this thread. Most Recent

FeebleEagle

13 Apr 2008, 9:09 pm

Your First Blogger Template

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)

  1. 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.

  2. 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.

  3. Leave all other fields blank in the Upload tab.

  4. 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.”

  5. 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.

  6. 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)

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

  8. 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.

  9. 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.

  10. You can also (once done with the customizing) view your page in preview to see how it looks as your working.

  11. Rinse and repeat for the other “Blogger Action” sections until you have it all laid out the way you want to.

  12. 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.

  13. All this should have been done on the master page only.

  14. 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.”

  15. 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.

  16. 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:

  1. 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.

  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.

  3. 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.

  4. 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.

quote

Gray Owl

13 Apr 2008, 9:20 pm

Thanks for posting the tutorial, Mitchell. I’ll give it a go and let you know how I got on.

Regards Lee

quote

One Man with out his Webster

MacMini - iPhone 6 - Tab 3 - MacBook Pro

FeebleEagle

13 Apr 2008, 10:25 pm

TUTORIAL: Part 2…some FAQ’s ahead of time.

First, I’ve updated the template now available on Mediafire. The first link above is the tutorial posted, the second link here is for a more advanced rendition and definition of what I was talking about.

So the second files:

http://www.mediafire.com/?cfljy3mnjfp

I’ve taken the liberty to create a bit more advanced template involving some Blogger padding and a flexible footer. Two things I’ve seen discussed on the forums. I’ve also added two colors to show the flexibility.

I’ve also added a folder called, “advanced” which has a coded version, just plain HTML that can be used as the code extracted (Blogger ready) from the template using the “Copy to Clipboard” button which in turn you’d copy into blogger if you were to use this template. The second folder under “advanced” is “look for these” which contains a simple TextEdit ready version of the coded site with bolded and emphasized things to look for when you finally paste your code into blogger. Things include the BASE HREF location and the IE6 compatibility link that might need to be changed to a absolute link if you’ve set your options to have external style-sheets (which this template doesn’t for ease of use, but I changed it anyway)

FAQ’s.

Q: Why did you make an HTML item first and then put the blogger action in there?

A: By making the HTML item first you can apply padding to the html item to “pad” the blogger action, instead of trying to apply extended attributes to the blogger action. You see the results right away, rather than having to publish and refresh. Plus box-model-theory is easier to see this way.

Q: Why do I have to apply an absolute address to my external CSS file?

A: I don’t know if it’s a bug or something, but blogger never read my external CSS even though I set the BASE HREF right to it. I had to change it manually on the paste into Blogger for it to work.

Q: Does Javascript work for Blogger?

A: Much like Wordpress, certain things work and other’s don’t. Most of the Javascript stuff that works has to be written internally into the code and not loaded off a hosted server. So, I couldn’t get the Transition Effect to work, but I know things like Lightbox works. So trial and error there.

Q: Can I use Flash on my Blogspot?

A: I was able to load Slideshow Pro on my BlogSpot just fine. If you use the plugin for Lightroom, it won’t load because it doesn’t allow the SWF Loader to load up an external SWF file. So, a direct SWF file works and remember if it’s above Flash 8 to edit your crossdomain.xml file for it to work on BlogSpot.

Any other questions or comments let me know? If you want me to look at something and tell you what’s up with it, just let me know.

Enjoy Part 2!

quote

FeebleEagle

18 Apr 2008, 9:23 am

I moved the tutorial to my updated blogspot page.

danjasker.blogspot.com

It’ll still be here, but just for kicks.

quote

Back to Top

FeebleEagle

19 Jun 2008, 8:03 am

Sorry about the files being down. I’m working on a Screencast that will be part one of my blogger template 2-3 part series.

I’ll post that when it’s ready.

(Over 80 downloads so far!)

quote