A Year With the Contempo Template...
In 2017, the first change I made was to disable the featured post feature as in the case of my content, since the cover art that I use is not high resolution, the featured post image often appeared fuzzy. Among the other changes over the past year, were the addition of eight new gadgets which are explained briefly in this post and in greater detail in separate posts:
- Contempo in a Two-Column Format
- Pretty Dates for Contempo
- Display Newer Post Links in Contempo
- Provide the Missing Hamburger for Contempo
- Popular Posts in a Compact Format
- Random Posts in a Compact Format
- Surviving the Move from Post to Snippet
- Linking Snippet Text to Posts
The Contempo template presents posts as a series of snippets and originally, the snippets were presented one per row. What I wanted was a way to display more snippets in less space. At one point, I had managed to do most of the heavy lifting using a complicated style sheet, but, the CSS proved to be a bit flaky and occasionally, a post snippet would either disappear or would be misaligned in some horribly noticeable way. So, I created a gadget to display Contempo in a Two-Column Format. The character art for this segment is Junko Enoshima from Danganronpa.
After the dust settled following the release of the new Blogger templates, I took the opportunity to consider making some improvements to my site. I had seen some pretty dates on other sites and I thought that I might want to look into this for my own site. With Blogger, you have some control over the general format of the dates on your site, but, in the end the dates are just plain, boring text. So, after some research and a bit of coding, I came up with a mechanism to make Pretty Dates for Contempo. The character art for this segment is Vocaloid Hatsune Miku.
A few months after the launch of the new templates, it became clear that there were some issues with the navigation. The new themes allow one to navigate to older posts and to the home page, but, once you've moved past the first few pages of post snippets, there is no way to get back to a previous set of post snippets, except by returning to the home page and navigating through the older post snippets again. This would be fine if there were only a few posts, but, since I have hundreds of posts, this was a concern. I came up with a solution to Display Newer Post Links in Contempo. By the way, in case you were wondering, the character art for this segment is a modified version of the "more deban" aka "more screen time" illustration that originally appeared on the back cover of the tenth manga volume of Sword Art Online.
When Blogger rolled out new templates last year, the navigation scheme for the new templates was a bit different. Those of us who happened to have the screen width set below a given width, discovered that the sidebar menu was not visible on the home page unless you selected a "hamburger" icon on the top-left corner of the page. And, if you navigated to a post, the hamburger icon disappeared entirely, so, those of us with screen widths below a given width could not access the sidebar menu at all from post pages. I came up with a gadget to Provide the Missing Hamburger for Contempo. The character art for this segment is Mimi Pearlbaten from Re:Zero.
The popular posts gadget is a new feature of the Contempo template which displays a handful of snippets for the most popular posts. For the popular posts, I didn't necessarily want full blown snippets, but, rather just a handful of links. So, I adapted a custom Related Posts gadget to create a gadget for Popular Posts in a Compact Format. The character art for the related posts article is the Internet Explorer mascot, Inori Aizawa. And, the character art for the popular posts article is Dokuro-Chan from Bludgeoning Angel.
After setting up Popular Posts in a Compact Format, I wanted something extra, so, based upon code I came across on the Blogger Help Forum, I created a gadget for Random Posts in a Compact Format to work in conjunction with the popular post gadget to display posts in the same container as the popular posts. By the way, the character art for this segment is Misaka from A Certain Scientific Railgun.
Another interesting project involved the rating overlays that appear on many of my post snippets. I wanted visitors to be able to see, at a glance, my rating for a particular anime, TV show or movie without having to view the full post. But, the snippets do not contain the full text of the post and some HTML content is automatically stripped out of the snippet. So, having information that Survives the Move from Post to Snippet, proved an interesting challenge. The character art for this segment is Yuno from Future Diary.
In the Contempo template, visitors wishing to access the underlying post can select the snippet title or a "read more" link under the snippet text, but, the snippet text itself and the snippet image are not linked to the underlying post. I wanted a means of linking the contents of the snippet to the underlying post, so, after some trial and error, I made a gadget to enable Linking Snippet Text to Posts. Last, but, not least, the character art for this segment is Gilbert Nightray from Pandora Hearts. I wanted something that featured links in a chain and, in my humble opinion, the image fits in quite nicely.
There were a few other tweaks like using CSS animation to change the background colors and to animate the header background image. I may have gone way overboard with the colors and the animation, but, I couldn't resist the temptation. It took quite a bit longer than I would have imagined -- eight years, but, I've finally moved ALL of the content from the legacy AARG site onto the Blogger platform. And, below, Internet Explorer mascot, Inori Aizawa, a girl who lives in a post-apocalyptic wasteland that is the Internet, appears in a video... Enjoy.
Very useful posts for all Bloggers using the contempo theme, can you write a post about the large margin between the side bar and content and if it is possible to properly remove this maargin.
ReplyDeleteWidths are generally controlled in the Widths menu, but, there are some limitations with the Contempo theme on wider screens that result in a lot of empty space. A bit of CSS can be used to close the gaps and make better use of the available space. See: Sidebar And The Nuclear Option.
DeleteIs it possible to add breadcrumbs in these themes.
ReplyDeleteThe short answer is Yes.
DeleteCan you explain how to make make h1 title tags for posts for this theme, like in wordpress.
ReplyDeleteThis is a known issue with the Contempo template, but, it's not something that I needed to address with my own site. This issue appears to have been mentioned in a question on StackOverflow.
DeleteIt looks like you'll need to edit the HTML for your site and you'll likely need some custom CSS to compliment the HTML changes. Happy coding. I hope this helps.
Hi, is it possible to display the blogger link list gadget links as drop down like the labels and archives gadgets
ReplyDeleteThis question has been asked and answered before. So, the short answer is Yes.
DeleteIf on the other hand, you're asking about re-creating the sliding animation effect used on the archive and label lists and somehow wrapping that effect around a link list gadget. While you can't actually do that. You could simulate it with a script that reads a link list and re-creates a new list with the appropriate wrapper. The script would then need to hide the original link list. Of course, as far as I am aware, such a script hasn't been written yet.
What I've done with the about me section in the sidebar, is copy the contents of the details tag from my own archive and paste that into a new HTML/JavaScript gadget, hand craft my own list of links using ul and li tags. Then, a short script to change the class name on the parent node of the detail tag within the HTML/JavaScript gadget to widget BlogArchive.
Something like the following, assuming that the detail tag has id="detail_obj":
var dtobj=document.getElementById("detail_obj");
dtobj.parentNode.className="widget BlogArchive";
Someday I might write a post on the subject, but, in its current form, this is a pretty bad hack and could cause more problems than it solves.
I've written a post on Reusing the Expanding/Collapsing Functionality from the Archive. And, I've included a proof-of-concept for an expanding/collapsing link list. I'm still not happy with it, but, feel free to use it as you see fit.
DeleteThere has been some discussion on changing the social media sharing icons in the Contempo template.
ReplyDeleteTo hide an icon add a bit of CSS:
.share-buttons li:nth-child(x) {display:none !important;}
Where x is the index of the icon that needs hiding (i.e.: first is 1, second is 2, etc...).
To change or add an icon, is a lot more complicated and will require some sophisticated engineering to make that happen. Sadly, I don't have a clue how to do that, so, you're out of luck.
Just to expand upon this subject a bit. The social media sharing icons are assembled into a list, so, adding a new entry *should* be as simple as adding a new list item, but, things get complicated after that.
DeleteEach list item contains two spans -- one for the icon and the other for the text. In the first span, it appears that a script or a link URL can be placed in the data-href attribute to complete a social media request. By the way, it appears that the icons need to be 24x24. I'm not sure if you can substitute SVG format for some other type like PNG.
The default social media icons pass the blog ID and post ID to a Blogger applet called share-post.g. Instead of using the default Blogger applet, you'll need to supply your own functionality that delivers some relevant details about your selected post to your newly added social media icon.
Many Thanks for the help.
DeleteHi
ReplyDeleteHow to show pagelist on all posts and pages in contempo, presently it is shown on on home and static pages.
I add a second page list as follows: Show Pages On Posts In Contempo.
DeleteI am confused about content width and content margins in the designer, I want my margin and sidebar to look like yours, can you tell me how to adjust the same.
ReplyDeleteI'm using the default values for the widths for the out-of-the-box Contempo template designed by Blogger (284, 922 and 117). Assuming that you don't already have custom CSS applied to your theme, you can reset the widths using: Theme > Customize > Advanced > Widths > Clear Advanced Changes To Widths.
DeleteCan you tell me how to add a widget in the middle of blogger posts and make it visible only on mobile devices. Thanks in advance.
ReplyDeleteIf you're wanting to split a post in half and inject some content in between the two halves, then, unfortunately, Blogger isn't configured to allow you to do that.
DeleteYou could use a script to achieve what you want, but, you'll need a fair amount of technical knowledge to write a script to inject your content.
However, if you're not so technically inclined, from the layout, you can add a gadget either before or after a post.
As for selecting only mobile devices, you could use the screen width as a selector or you could try to see if the CSS media selector for mobile works for you.