Although integrating Blogger into your Freeway-created website seems easy at first, there are lots of small nuances that go unmentioned in the official documentary. Here, I will attempt to provide a single, complete, go-to resource for using those Blogger actions.
This article is a work in progress, so if you have any questions please comment and I'll place the answer in the article. This tutorial assumes you are using Freeway Pro 5.5, and have a basic knowledge of the Freeway workflow. Now, let's get started!
What the Blogger Actions Do
As the subtitle above says, we're going to start by talking about what the Blogger Actions do, and what they don't do, as this tends to cause a lot of the confusion.- They DO create a template for Blogger.
- They DON'T put a Blogger blog on your website (Softpress puts it well: The Blogger Templates suite of Freeway Actions makes it very simple to "brand" a page hosted on Blogger.com's servers so it looks like all the other pages in your site.)
Note: You still have to upload the files from Freeway to your web server, as that is where all the images and other resources will be stored. The Blogger template will just point to them, much like a HTML email.
- They DON'T style everything (meaning that if you want the blog really custom you'll have to add some custom CSS, see the bottom of this post.)
Building the Template
Initial Configuration
Before we get down to the actual construction, we have to get everything all set up.In Freeway
- Set the page to XHTML strict. To do this, click on the page title in the sidebar, and in the HTML generation settings pane (3rd from the left) change the output to "XHTML Strict".
- In the "File" menu, click on "Document Setup". In the upload tab, you should enter the web address and FTP details of where you are going to upload the files, NOT the something.blogspot.com address that Blogger gives you. This will depend on wether your blog is stand-alone, of if it is part of a larger website.
- If it is standalone, then this address should directly reflect where you want the resources to be stored. For example, let's say that you want to have these files stored in a folder named "blog" that you created with a FTP application, then this address will look like
example.com/blog/. - If the blog is part of a larger website, and therefor a Freeway document with other pages, then create a new folder in Freeway's page listing pane, title it "blog", and place the template page inside it. Set the URL to
example.com.
- If it is standalone, then this address should directly reflect where you want the resources to be stored. For example, let's say that you want to have these files stored in a folder named "blog" that you created with a FTP application, then this address will look like
- Create a new blog and chose one of the "Simple" templates.
Construction
Now that we understand what the actions do, it's time to build the template from within Freeway. This is trickier than just sketching in the elements for one simple reason: the page must grow and shrink with the blog content. Otherwise, the blog text will overflow its containers and really create a mess. There are two methods to creating a page that will grow from within Freeway.The first is to use the RPL (Relative Page Layout) action that comes bundled with Freeway 5.5. The other is to build the page inline (aka box-model). Which you chose will depend on your own personal preference/inclination. Here's a breakdown of the pros/cons of each system, and how they work:
Inline: This method of construction is the most bullet-proof system available right now. What you're doing is inserting all of the page elements in a text-flow. The page will grow just like a document of text grows as you add more content.
Pros:
- Bulletproof
- Higher level of control
- Difficult to master
- More time to create
RPL: What the RPL action does is take a page created in the typical Freeway method (sketching in the elements and dragging them around) and attempt to intelligently make it inline. The problem with this is that the action won't always know how you wanted the page to grow, which can have some harmful side-effects. Most of these can be avoided by applying the "Remove from Relative Page Layout" action to the troublesome elements, but use this sparingly as it might break the page as it grows.
Pros:
- Easy to add to a pre-existing page
- Build in the usual Freeway manner
- Less control over how the page grows
- Adjust the "Overlap" slider in the action interface. First, bring it up to 50 and preview. If that fixes the issue, bring it down by 10 and preview again. Keep doing this until the page breaks again. Then move the slider up 10 to the last working configuration. If 50 doesn't fix it, move it up by 10 and preview. If you get to 100 and the page is still working, it's time to go to the second method:
- Apply the "Remove from Relative Page Layout" action to the element that is causing the trouble. To figure out which element it is will require some trial and error. Apply the action to an item, preview. If that doesn't fix it, apply to a different item. Keep doing this until you fix the problem. Make sure that you aren't applying the Remove from RPL action to a container of the Blogger actions themselves though, as that will defeat the purpose of using the RPL action. If none of these work, then you're stuck building it with the Inline method outlined above.
Adding More Widgets
This is all fine and dandy, but what if you want to use some of the Blogger widgets that don't have their own action? It's actually quite simple, you just have to have the Blogger Profile and/or the Blogger Archive action(s) placed inline into a sidebar.- Draw a HTML element (if you're using the RPL method) or insert it into the text flow for an inline model. Name it "sidebar".
- Double-click on just as if you wanted to type some text into it. An I-bar should appear.
- In the top bar, navigate to Insert>Action Item>Blogger Profile or Blogger Archive.
- Stretch the element to use the entire width of the "sidebar" HTML item.
- Select the "Sidebar" HTML item and deselect it's height. To do this, go into the inspector and click on the icon right next to the height field.
Using the Template
Now that you've got an uber-awesome template built in Freeway, you have to get that to your blog. The most important thing to understand is that you still have to upload the site files to a web server somewhere as all that Freeway hands to Blogger is the code, not the resources.Publishing Workflow
- Upload from Freeway to your web server (Command-U)
- Open the Actions window (Topbar>Window>Actions).
- Select any of the Blogger actions on the page and click on the "Copy to Clipboard" button.
- Go to Blogger and choose your blog from the listing.
- Click on the "Template" tab in the sidebar.
- Press the "Edit HTMl" button just under the little preview of the blog. A warning will pop-up, dismiss it.
- Delete everything from the editing window, and hit Command-V to paste the code from Freeway in.
- Click the "Save" button. Another dialog will pop-up informing you that there are widgets on your blog that aren't included in the template. Choose to delete them.
- View your blog!
Custom Domain
You've now got a really awesome looking blog, that really looks just like part of your website! However, once glance at the URL will show that it really isn't. What to do? Set up Blogger to work with your own domain! To do this, start by going to the blog's settings page. Under "Publishing" you will see an option to add a custom domain. Click on it, then click on the "Switch to Advanced Settings" link. Follow the directions!Note: You'll have to use a subdomain like blog.something.com instead of something.com/blog.
Tips and Tricks
Web Fonts
If you are using Google Web Fonts on your blog, you'll have to add a/ (forward-slash) just before the >. For example, <link href='http://fonts.googleapis.com/blah' rel='stylesheet' type='text/css'> becomes <link href='http://fonts.googleapis.com/blah' rel='stylesheet' type='text/css'/>Custom CSS
Unfortunately, the Blogger actions are pretty lightweight and don't include a lot of styling as they should. This means that you will have to add some of your own CSS to really get it to "fit". To add your own styles, I recommend you use Firebug in Firefox.Pick your element, style it until you're happy, then add it to Freeway's styles. Enter the class in the "Tag" field of the style editor, tab into the "Name" field, hit the delete key, then tab out of that. You want that "Name" field empty! Click on the extended button and add your styling.
With that said, here are a few selectors I found particularly helpful:
.post-title- This will style the post titles. I use it to tweak the bottom-margin..date.header- Much like the above, but this one is for the dates..comments- For some odd reason Blogger's default here is Times. Use this to override that and choose your own font.[class^="widget"]- This selector will style all the Blogger widgets on the page. This is useful if you are adding widgets through Blogger and want to give them a margin or font..body- I use this tag to apply a font to all the unstyled text on the blog (of which there is a lot of!) for a more uniform appearance..date-outer- This is actually the wrapper of each blog post. Using this you can add space between each post, outline them, or give them a background and drop-shadow (like this blog!).
Wow! By now you should have a really awesome Blogger blog that really looks the part!
As I said at the beginning of the article this post will grow and evolve so if you have any questions or suggestions, please leave me a comment!
No comments:
Post a Comment