Posts

Showing posts with the label Contempo

Add Whatsapp sharing to the new templates

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

Offset the HTML anchor to adjust for the sticky header

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!

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