Creating A Dynamic Flipcard Gallery For Blogger...

Years ago, Blogger Introduced Dynamic Views, but, at the time, I wasn't entirely convinced to take the plunge as an early adopter. Recently, I decided to revisit the subject and create a modest Dynamic Flipcard Gallery by invoking a dynamic view in a frame.

To get started, add the following HTML using the HTML view in the editor to the post or page where the Dynamic Flipcard Gallery should appear. Substitute the highlighted text with your blog URL (i.e.: https://www.example.com or https://example.blogspot.com):

<iframe frameborder="0" height="780" src="[YOUR BLOG URL GOES HERE]/view/flipcard" width="100%"></iframe>

Dynamic views come with a variety of features out-of-the-box like a header and filter controls, but, as these features are not really needed for this application, use the following CSS code to hide elements that are not needed for the gallery:

.flipcard #header, .flipcard #controls, .flipcard #header-container, .flipcard .overview-controls-left, .flipcard .article-footer, .flipcard .comments {
display:none !important;
height:0px;
}
.flipcard #main {
margin:0px;
}
.flipcard h1 {
background: none;
}
.flipcard .article .article-content img:not(.deferred) {
padding: 0px !important;
}
.flipcard .article .article-content ing {
margin: 0px !important;
}
.flipcard .article .article-content {
padding-bottom: 40px !important;
}
.flipcard .card .back .overlay .bubble {
display:none !important;
}

The CSS code above should be added using Theme > Customize > Advanced > Add CSS. Make sure to select Apply To Blog, when finished. In general, for dynamic views to function correctly, the feed settings need to be set to FULL using Settings > Other > Allow Blog Feed > Full. Be advised, despite assurances from Blogger to the contrary, dynamic views are NOT mobile friendly.

By the way, the secret image for this post is the unfortunate side-effect of taking an Angel's halo as visualized in Bludgeoning Angel. Enjoy.