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