I've been asked to share my secret for getting CRON-O-Meter menus and nutritional reports into my blog. The answer probably won't be terribly helpful unless you already have more than a passing familiarity with coding HTML, and also have access to certain software programs. But here's how I do it:
- knowledge of HTML coding
- Excel (spreadsheet software)
- Dreamweaver (website development software; optional if you're willing to do all the html work old-school style in a text editor)
- You are using blogger or some similar blog software that uses its own "templates" (cascading style sheets--CSS--actually) to control the colors and layout of your blog
- Highlight and copy (ctrl-C) the day's menu entries, then paste (ctrl-V) into an Excel spreadsheet (this step is necessary because you can't paste the menu data directly into Dreamweaver; other HTML editors might behave differently). Leave this here for a minute, while you....
- Output an HTML formatted nutrition report (using COM's report function) for the date in question, clicking the little diskette icon to save the report to somewhere you can find it afterward.
- Open a blank HTML document in Dreamweaver, select and copy the menu from Excel, and paste it into the design panel of Dreamweaver (not the code panel!). You are now done with Excel, it was just a means to get the menu into table form for Dreamweaver.
- Looking at the code panel of Dreamweaver (or viewing the raw HTML in a text editor like Notepad), you can see that the tags in the menu table are full of "width" and "height" attributes that are trying to control the way the table looks in a browser window. The beauty--even the purpose--of HTML is that you can let the browser do this work for you. Use less formatting, and your data will be properly viewable for more people, so you're better off omitting these attributes and letting the user's browser layout the table the way that best fits the user's browser window. So, using Dreamweaver's find/replace function (or deleting manually in a text editor), strip out the following:
- "<col width="64" span="4" />" tags (the "64" and "4" might be other values for you); delete the entire tag.
- "width" and "height" attributes from the <td> and <tr> tags; delete ONLY the attributes--not the tags themselves
- Now, open your HTML nutrition report that you created earlier in Dreamweaver.
- Looking at the code panel, you'll see all the <tr> tags have the "bgcolor" attribute. Strip this attribute out (but not the tags themselves!). Then, select and copy all the HTML for this report.
- Create a new blog post, and open the Edit HTML window
- Copy the HTML for the menu table you modified earlier in Dreamweaver and paste to the HTML editor in Blogger
- Back in Dreamweaver, select and copy the HTML for the nutrition report, and paste this into the HTML editor in Blogger.
- Switch to "Compose" view in Blogger, and you'll see your two tables there. Dress them up with whatever titles you want, and you can do some final formatting here if you like, before you....
- ...submit your information for posting to your blog!