Note: As this is a new account I was not allowed to indeally include three images in a post. I needed to use one image with parts labeled A, B, and C.
I host my site on Blogger using a custom .com domain.
I’ve heavily modifed Blogger’s Notable template and tested it on desktops and mobile.
My site uses a series of lists and textblocks to describe objects which are shown within each post via multiple images (not shown).
Part A of the image shows a typical post describing an object.
The site’s home page shows seven post snippets. Each snippet includes a thumbnail of the post’s first image (not shown), post title and the first seven lines of the post’s body.
Blogger strips out most of the tags from the post body to create its snippets.
The first seven lines of text from the above post would appear like part B on the site’s home page by default. This is not very user friendly as Blogger strips out various formatting tags such as list tags when it creates the snippets, making the text harder to read and creating a unprofessional appearance.
Span and div tags are stripped out. Link tags and br are preserved. Tags like <b>, <em>, <i> are preserved.
Blogger replaces any <p> tags in posts with invisible linebreaks.
I’ve been looking for a way to essentially fake any lists and blockquotes within the homepage snippets to make more closely match the actual posts and easier to read. After I export my posts as HTML from a MarkDown editor I use an Applescript to inject some additional tags into the HTML.
Each list item gets two tags:
<li><em class="em1"></em></p>Handle Thickness at Mounts ~ 1/4".<em class="em3"></em></li>
Each block item has a single tag added.
<blockquote>
<em class="em2"></em><p>NATIONAL BASEBALL</p>
<em class="em2"></em><p>HALL OF FAME</p>
<em class="em2"></em><p>COOPERSTOWN, N.Y.</p>
</blockquote>
I then use some CSS on these tags.
em2 is used to indent the blockquotes.
.em2{
margin-left: .5em;
}
em1 is used to inject a list bullet point and space.
em.em1::before {
content: "\25CF\00A0";
}
em3 is used to inject a breakline.
em.em3::after {
content: '\A'; white-space: pre-line;
}
These extra tags are hidden on the actual post pages and only appear in the homepage snippets.
.post-body-container .em1, .post-body-container .em2, .post-body-container .em3{
visibility: hidden;
display: none;
}
This seems to work well as shown in part C of the image.
The fake lists are not quite the same as the lists within each post as the fake lists approximate list-style-position:inside whereas the real lists use outside. I also indent lists on the actual posts. At least its easier to read.
Is there any better way to do this?
One thing off hand I could think of would be to use <i> tags instead of <em> tags as that would save one additional character.
I had also thought about javscript but with Blogger stripping out so many tags I don’t think there would be any type of structure left to work with.