Posts

Showing posts from March, 2017

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

Easily add sharing icons to my blog

AddThis have a great sign-up flow and configuration, but the instructions for adding the gadget to your page are a little out of date and missing a couple of optimizations. This article provides your one-stop click-and-install shop for adding sharing icons to your blog after you've signed up with AddThis. Register  for an AddThis account Follow the above link, and sign in / sign up.  Click 'Explore Tools' Click 'Share Buttons' Configure your options, and save. You'll be prompted with some instructions. Follow them if you wish - there's a full help article  which is Blogger-specific, and will get the job done, but I'd recommend ignoring them and carrying on with these instructions, of course. The only important piece you'll need is the pubid component from the code it tells you to copy-paste, after you've configured it the way you want. It looks something like this: <!-- Go to www.addthis.com/dashboard to customize your t...
4 comments
Read more

Support multiple languages on my blog

Lots of you Blog authors out there are writing content that spans more than one language, and of course, your readers may only speak one of those languages. To support them better, you can change the language that your blog renders in, using the language-code parameter hl . Note that this will modify the language of the blog for default messages, but not for any custom content (like your blog's posts, title, etc). A workaround for this is explained below. Getting the current URL in a different language Let's say we speak both English (locale code en ) and French (locale code fr ). We can generate a link to 'the other language' with markup like this: <b:if cond='data:blog.locale.language != "en"'>   <a expr:href='data:view.url params { hl: "en" }'> View this blog in English </a> </b:if> <b:if cond='data:blog.locale.language != "fr"'>   <a expr:href='data:view.url par...
Post a Comment
Read more

Make it easy for others to add my custom gadget to their blog

Some of you may have a use-case similar to this blog, where you're suggesting that people add 3rd-party content to their blog. Fleshing out the instructions for Add an HTML gadget, copy-paste the content... can be very tedious. Instead, it's better if you just magically allow the user to do it themselves, with the click of a button! Add Gadget request Blogger hosts an endpoint for third-parties to easily forward the content that users might want to add in an HTML Gadget, at  https://www.blogger.com/add-widget .  This is an easy way to support your users adding the content is to create an HTML form that executes a get request, preloaded with the content - it's a form that lets the user select the blog that they want the gadget for. <form action='https://www.blogger.com/add-widget' target='_blank'>   <input type='hidden' name='widget.title' value='[Your widget title]' />   <input type='hidden' name=...
1 comment
Read more

Add syntax highlighting to my Blog

Many websites like this one feature a bunch of code snippets, which can be a pain when changing the theme, as you might have manually styled the code chunks. To avoid this, you can add the highlightjs library that does it for you - that way, when you change theme, you only need to tweak one gadget (instead of all of your posts and their snippets.) To add the needed JS and CSS, you can click the button below! The content of the gadget is shown below. Alternatively, you can head to the Layout tab for your blog, and add an HTML/Javascript  gadget, with the following in the Content  area. <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/androidstudio.min.css"> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script> <script>hljs.initHighlightingOnLoad();</script> In this example, we're using the androidstudio  style, but there...
1 comment
Read more