Posts

Create a JS-based custom template from scratch

Blogger's templating language is a bit clunky, and as a result there are many template authors out there who are using JS-based solutions to develop custom templates. But, even when you're inspired to do so, it's hard to know where to get started. This article covers creating a very basic custom template, with a few customizable skin settings, based on the  Mustache JS  templating language. To see the sad-looking output that this creates, you can  view the demo . An empty shell First things first, we need to start from a template that is very, very empty, but passes the minimum validation requirements that Blogger has. The below snippet is an example of a very empty starting-point. The main chunk of data that we need in order to produce the posts to be shown for any given view is all found in the Blog Posts gadget. <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html> <html b:css='false' b:defaultwidgetversi...
3 comments
Read more

Add quickedit icons to the new themes in Chrome

The new themes that Blogger recently launched (Contempo, Soho, Emporio and Notable) don't currently support the quickedit icons that administrators used to be able to see on their blogspot page. Several users were asking how to get these back, so I've hacked together a little chrome extension to allow users to add the icons for a user-specified set of URLs. The chrome extension can be found  in the chrome webstore . Setting up the extension Once installed, it's pretty straightforward to enable it for your blogs. Simply click the icon, enter the domains (one per line). NOTE: The string comparison is for window.location.hostname only, which mean you don't want to include the scheme (e.g.  http://). My configuration, for example, is so-how-do-i.blogspot.com.au template-data.blogspot.com.au Hope this helps for you users that love the 2-way navigation. Happy editing!
1 comment
Read more

Add a parallax effect to Soho

Blogger's just launched a bunch of new templates. I put up some instructions for  adding a parallax effect to Contempo  - this article is the exact same effect, but for Soho! If you scroll a little on this blog, you'll notice that I've got a subtle parallax effect going. That effect is just a small JS library by Mark Dalgleish , called Stellar. To add the same parallax effect to your Soho template, just click this button! The content is shown below. Alternatively, you can simply head to your blog's Layout  tab, and add an HTML/Javascript gadget anywhere in the page. Then, add the following content to it: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src='https://cdn.rawgit.com/markdalgleish/stellar.js/master/jquery.stellar.min.js'></script> <script> $('.hero-image').attr('data-stellar-background-ratio', '0.5'); $(window).stellar(...
1 comment
Read more

Change my post timestamps to a custom format

Blogger offers some built-in options for a post timestamp, but if you want to use a format that is custom, you can do so by overriding the postTimestamp   in your template's Blog widget. Head to blogger.com => (Your blog) => Theme => Edit HTML Hit 'Jump to Gadget', select Blog. Inside the <b:widget> tag, add the following snippet. Replace "MMM dd" with the desired format <b:includable id='postTimestamp'> <span class='byline post-timestamp'> <data:byline.label /> <b:if cond='data:post.url'> <meta expr:content='data:post.url.canonical' /> <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'> <time class='published' expr:datetime='data:post.date.iso8601' expr:title='data:post.date.iso8601'> <b:eval expr='data:post.date format "...
1 comment
Read more

Add a background image to Emporio

Emporio currently doesn't have support for a background image, though it does have a background image variable. Very similar to the instructions for  making the Simple theme's background responsive , the following gadget will change that. Click the button below, and add the gadget. Head to Theme => Customize => Background Select a background, apply, view the blog. NOTE: Changes won't show up in the Template designer/customizer, but hitting apply will set the background! The gadget contains the following custom markup. <b:includable id='main'> <style> /* Hide this gadget. */ #<data:widget.instanceId /> { display: none; } </style> <b:if cond='data:skin.vars.body_background.image'> <b:include name='responsiveImageStyle' cond='not data:view.isPreview' data='{ image: data:skin.vars.body_background.image, ...
8 comments
Read more

Add Disqus comments to my blog

Some users prefer the Disqus commenting platform over the Blogger-native one, or its integrated G+ comments. Disqus should be installed as an HTML gadget using their  Blogger installer ! Doing so achieves the same result as this article, only more smoothly, since the Disqus short-name is automatically populated for you! However, it can also be installed by clicking the button below, if you've got the short-name handy. If you don't, follow the link above and fetch it. The HTML gadget provided here is just a small tweak to the  manual instructions  on the Disqus website - namely, it ensures that the div containing the contents isn't rendered (which sometimes results in extra dividers, etc). Content of the HTML gadget is: <script> var disqus_shortname = 'EXAMPLE'; </script> And the custom markup for the HTML gadget is: <b:includable id='main'> <b:include name='super.main' /> <script type='text/...
4 comments
Read more

Add a parallax effect to Contempo

Blogger's just launched a bunch of new templates, one of which, Contempo, I'm currently rocking myself! If you scroll a little, you'll notice that I've got a subtle parallax effect going. That effect is just a small JS library by Mark Dalgleish , called Stellar. To add the parallax effect to your own Contempo template, just click this button! The content is shown below. If you're using Soho, the parallax effect can be added  in the Soho-equivalent article ! Alternatively, you can simply head to your blog's Layout  tab, and add an HTML/Javascript gadget anywhere in the page. Then, add the following content to it: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src='https://cdn.rawgit.com/markdalgleish/stellar.js/master/jquery.stellar.min.js'></script> <script> $('.bg-photo').attr('data-stellar-background-ratio', '0.5'); $(wind...
2 comments
Read more