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');
$(window).stellar({horizontalOffset: 50});
</script>


Make sure it doesn't have a title, hit save, and voila!

Happy Templating

Comments

  1. Ajay Agade23 March 2017 at 10:58

    how to i add sidebar to this theme as u did

    ReplyDelete
  2. mainak12 May 2017 at 04:01

    Hello.. That was great. Thank you so much. I have also been using contempo, and that helped. Can you help me by explaining for to add the right sidebar ?
    Thanks in advance.

    ReplyDelete

Post a Comment

Popular posts from this blog

Rotate my Blogger images

Image
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!
Read more

Remove the header image for posts in Emporio

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!
Read more

Get nicer thumbnails for my Post snippets

I recently received some feedback that my thumbnails are a bit nicer than the standard thumbnails offered by Blogger. This is because I use a custom snippet in my Blog widget, to produce bigger thumbnails, using the new resizeImage operator . Note: This post leverages the techniques described in the article about  Responsive images for Google photos . A note: The resizing behaviour provided on Blogger requires that the image is hosted on a Google platform to work - provided that you add your images by uploading them in the editor, this technique should work. Creating a responsive, resized Thumbnail The resize operator takes 3 parameters - the URL of the image, the width to resize it to, and an optional ratio for a cropped version of the image. <img expr:src=’resizeImage(data:post.firstImageUrl, 300)’ /> In my Blog widget, I've customized the HTML so that on feed views (homepage, search, etc), I display post snippets instead of the full post. As a part of thes...
Read more