So, How do I...

A lot of people love the image-focused look of the newer Emporio template. This article explains how to tweak your template's XML to add a short snippet to the Emporio posts - unfortunately, there's no easy way to add in snippets for Emporio, without customizing the markup. But, if you're feeling brave, head to: Theme -> Edit HTML -> Jump to Widget -> Blog 1 If you search for 'snippet-container', you'll come across: <div class='snippet-container r-snippet-container'> <div class='r-snippetized'> <data:post.title /> </div> <b:if cond='data:post.title != ""'> <div class='snippet-fade r-snippet-fade hidden'></div> </b:if> </div> Notice that it's just got the title. You could change it to add something like: <div class='snippet-container r-snippet-container'> <div class='r-snippetized'> <data:post....

The new Emporio template features a large, blurred-out copy of the featured image for a post as the header image. Some like this feature, some don't - here's how to remove it if you're not a fan! Head to Theme => Edit HTML Search for ' data:view.isSingleItem ' The code that you see should look something like this:  <b:if cond='data:view.isSingleItem'> <b:if cond='data:widgets.Blog.first.posts.first.featuredImage'> <b:include data='{ image: data:widgets.Blog.first.posts.first.featuredImage, selector: &quot;.bg-photo&quot; }' name='responsiveImageStyle'/> <div class='bg-photo-container'> <div class='bg-photo'/> </div> </b:if> </b:if> Delete the XML including the <b:if> tag code. Happy Emporio'ing!

The Dynamic Views template uses a different rendering engine than other templates, handled on the client. For people using Contempo, Soho, Emporio or Notable, you can follow the instructions for the new templates  - this article covers Dynamic Views. Adding whatsapp for Dynamic views involves overriding the template used for sharing. Head to Theme -> Edit HTML Go to the very bottom of the page Copy and add the following script, above the existing one. Update the existing initialization script to include compliation of the sharing script's template contents. Sharing template override <script id='sharing' type='text/json'> {template:Sharing} <div class='share-controls {block:defer}defer{/block:defer} {block:delay}delay{/block:delay}' data-defer='{defer}' data-delay='{delay}'> {block:IfNotdisable-plusone}{SharePlusOne}{/block:IfNotdisable-plusone} {block:IfNotdisable-twitter}{ShareTwitter}{/block:IfN...

There was an  interesting question  posted in the forums recently by a user named Gayathri, where he was hoping to shuffle the order in which his posts appear. This is achievable, so far as I can see, one of two ways - custom markup (server-side shuffling) or JS (client-side shuffling). However, because the output of any given server-side render might be cached, for the next viewer, the shuffled output order would persist, and each viewer would only see the same (random) order. JS Shuffling We can shuffle the content once the page has loaded on the client, which would produce a different result for each view. Note that this does have the downside of potentially causing content jankyness, but should execute fast enough not to be noticed by the reader. We shuffle the order of posts by removing and re-inserting sibling posts in a random postion. See the  MDN general sibling selector  documentation for more detail. var posts = document.querySelectorAll( '.po...

Blogger-uploaded images can be rotated by modifying the url to include '-r90' (or 180, or 270). Take, for example, the image below. URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWVgBklYsvkxN7xwRlHuU8XWHdJTW7kpjJcEzMo2lD65tV4vwXuwHnPa3eiXZqUfpkdAYJMaTaPXO9RiEl1XY_tEfHWBEmBmnppNqP6_SovKyOe8gLd9-09TimKKdDZpIuMrjiPvg5hrOI/ s200 /IMG_2358.JPG If we switch the s200 to s200-r90 , we get the following image instead. URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcVtM8EBB40qw43B0tA7X6wiErlfRxG3YDKqPPKluXQzFSghY5bjSw312509fa6BHCQjcUDevY4L194LL7n5lImmia7zBVfYohxezEJq1bdxRx_CCOyL06w0rQS9Rb2RkjpLVpIx3PjnGy/ s200-r90 /IMG_2358.JPG Happy rotating!

To install a  Facebook like plugin , it's best to use an HTML gadget, rather than customizing your template. This article provides a simple one-click button for installing the required HTML gadget on your blog. There are two options for how to install the like button plugin below - adding it as a byline, or as an HTML gadget. Both require the JS SDK (JavaScript Software Development Kit). The markup First, the Facebook SDK is needed. <div id='fb-root'></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = '//connect.facebook.net/en_US/sdk.js#xfbml=1&amp;version=v2.9'; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script> Then, the fb-like markup. <div class='fb-like' expr:data-href='data:view.url.canonical.escaped' data-layout=...

This articles describes some JS that will automatically append a link SVG icon for headers in post content that have an id attribute. SVG Elements and namespacing The SVG namespace is not naturally entwined with HTML, so if you've ever tried to create an SVG element, you might have noticed it doesn't work using the standard document.createElement  DOM API method. SVG elements are namespaced under http://www.w3.org/2000/svg , so creating them needs to be done with the document.createElementNS  DOM API. document.createElementNS('http://www.w3.org/2000/svg', 'svg') Similarly, the use elements for re-using an SVG definition defined using the xlink namespace. var use = document.createElementNS('http://www.w3.org/2000/svg', 'use'); use.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink'); use.setAttributeNS( 'http://www.w3.org/1999/xlink', 'xlink:href', '/responsive/sprite_v1_6.css.svg#i...

Blogger's sharing options include Facebook, Twitter, and Pinterest - some of the more popular platforms - but Whatsapp is missing from the list. This article describes how you can customize the markup of your Blog gadget, to include Whatsapp in the sharing buttons list to include Whatsapp. Note: Though the concepts in this article are re-usable elsewhere, it is written assuming that you are using one of the new Themes - Contempo, Soho, Emporio or Notable. For Dynamic views, visit the  Dynamic views whatsapp instructions . Head to Theme => Edit HTML , and use the Jump to gadget  helper to jump to Blog1 . Update the sharingButtonsMenu includable The sharing buttons for a post are defined in the sharingButtonsMenu  includable, which is called as part of the stack from the postShareButtons includable, which can be toggled on and off in the Blog Posts settings (under the 'Share Buttons' byline). To add Whatsapp in the mix, we want an extra line item ( <li...

Blogger does not support Facebook comments natively, but they can be installed by adding the required HTML to your blog. To install a  Facebook page plugin , it's best to use an HTML gadget, rather than customizing your template. This article provides a simple one-click button for installing the required HTML gadget on your blog. Facebook comments rely on the Facebook JS SDK (JavaScript Software Development Kit). <div id='fb-root'></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = '//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.9'; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script> Then, they need  fb-comments markup. Note that, in this gadget, this is done in custom HTML, since we need the canonical URL of the current page. In addition, w...

Many blogs are like this one, where they contain a few code snippets that readers might want to copy to their clipboard to re-use somewhere else. This article describes a custom HTML gadget that will automatically add the material design icon as a copy-to-clipboard link, for any <code> tags in the content. Note:  This gadget assumes that all the code tags have a relatively-positioned container. In this blog, all the <code> tags are nested in <pre> tags, which are relatively positioned. Material Design font While Blogger's new templates feature a range of the material design icons, they don't offer all of them - the  Material icons guide  notes that you can massively reduce the size of the SVG by only using the ones you need. The web-font does weigh in at ~56KB, but you user will benefit from it being cached by any other website they have visited that also uses the font. <link href='https://fonts.googleapis.com/icon?family=Material+Ic...

For many Bloggers, their Blog is a complement to a more extensive online presense, which often includes a facebook page. To install a  Facebook page plugin , it's best to use an HTML gadget, rather than customizing your template. This article provides a simple one-click button for installing the required HTML gadget on your blog. There are two options for how to install the page plugin below - an iframe, or using the JS SDK (JavaScript Software Development Kit). To install the gadget: Click the  Add the Facebook page plugin to my blog!  button Select the blog to add the plugin to Expand the Edit Template  region Replace [Put your Facebook page url here] with your Facebook page url Hit Add widget JS SDK First, the Facebook SDK is needed. <div id='fb-root'></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = '//...

In the new Blogger templates, they heavily feature a sticky header , or a fixed header, which follows you down the page once you're past the title page. This header can get in the way when linking to anchors (fragments) in your pages, since the browser will use the anchor's position in the page when it jumps down to the content. To counter this issue, we can add a little negative-margin, positive padding CSS hack to the : target anchor. Example header If you click the get link icon (the icon) above, you'll see how it jumps a little above the header. *:target:before { display: block; content: " "; height: 65px; margin-top: -65px; visibility: hidden; } To apply this style to your blog, head to: blogger.com  => (Your blog) => Theme => Customize => Advanced => Add CSS and add it to the text area, and save. Happy anchoring!

In an  earlier post , I covered the correct way of adding Google Analytics to your blog without ending up with a 'custom' template. With some blogs, there might be user interactions that you want to track. For example, in so-how-do-i.blogspot.com, some articles like  parallax for Contempo  or  AddThis sharing icons  have a custom HTML gadget that users can one-click install on their blogs. So, I wanted to track how often that is happening. Note: Blogger uses 'blogger' as the namespace for their analytics - ensure that you use 'blogger.send' , rather than the default 'send' when logging. Custom events in Universal Analytics Blogger's Google Analytics snippet uses the analytics.js  Universal Analytics snippet. Their  event tracking documentation  does a great job of covering the basics for tracking an event on the client. ga('blogger.send', 'event', [eventCategory], [eventAction], [eventLabel], [eventValue], [fieldsObjec...

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...

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!

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(...

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 "...

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, ...

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/...

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...

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...

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...

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=...

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...