So, How do 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+Icon

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 = '//con

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