Blog to HTML allows you to export your blog into an HTML document that can be easily converted into an ebook. All blog posts and pictures are exported in oldest-to-newest date order. Only post content is exported; pages, widget areas, headers, footers, etc., are not exported. You can optionally select multiple categories to export.
When the file is generated, you can view it with your browser, or save it to your local computer for later use. Or you can specify an email address and the generated file will be sent via email as a compressed attachment. Each file has a unique name, so you can have multiple versions of the output. HTML elements get a unique CSS class to allow you to further style the output. Any HTML elements embedded in your post output is retained. All posts are exported; there are no watermarks or limited features.
This plugin’s main purpose is to easily output your blog (with pictures) in a format to easily convert to an ebook. For instance, Amazon’s Kindle Direct Publishing will accept an HTML file, to which you add additional meta (cover image, etc). Each post has an H1 for the title, and H2 for the publish date, so those tags can be used for a table of contents. You may need to add any additional CSS rules for your site’s unique formatting.
You can import the HTML file into Calibre or any HTML editor to further format and create your ebook. Or submit the HTML file directly to your ebook publisher.
The generated HTML file includes some CSS for various HTML tags, and are defined at the top of the HTML file.
- body {color:#000 !important;background-color:#fff !important; } /* to make sure the text is visible */
- .blog2html_h1 {} /* H1 class */
- .blog2html_h2 {} /* H2 class */
- .blog2html_div {} /* DIV class */
- .blog2html_p {} /* P class */
- .blog2html_img {} /* IMG class */
- .blog2html_caption {} /* CAPTION class */
- .blog2html_image_div {} /* DIV around multiple IMG */
- .blog2html_a {} /* A class */
- This next block is to help images position next to each other
figure.blog2html_figure {
/* To correctly align image, regardless of content height: /
vertical-align: top;
display: inline-block;
/ To horizontally center images and caption /
text-align: center;
/ The width of the container also implies margin around the images. */
width: 120px;
}
You can set those CSS values according to your needs. Images are set to a max-width of 400px, although you can override that with custom CSS.
