Add a Section to my Template

Note: This does not apply to Dynamic Views blogs!

In the 'Layouts' tab, you can drag and drop widgets into sections.


The sections that you can see are defined in your blog's template.


To add your own section, you can simply add a b:section element to your template wherever you want it to sit.

Note: The element will not be visible since it will be empty, but you can still drop a widget onto it. If you want to make it easier to find after you've added it, move an existing widget from another section into your new section.

<b:section class='my-section' id='my-section'></b:section>

 Let's say I want the section to be a footer section, above the attribution section.



I can easily find the attribution section by jumping to the attribution widget. Then, above the section, I add the code:


Save the template, and navigate to the Layouts tab. You will now see an extra section!


Comments

  1. Sam Nordberg9 July 2016 at 02:10

    A little unrelated, but I love this blog template. How did you get such great post snippets and thumbnails to show in the main blog page? Blogger's native post.snippets and post.thumbnails are both just too small. I like the larger sizes of both you have here.

    ReplyDelete
    Replies
    1. Luke13 July 2016 at 20:43

      Wrote you this, hopefully it's what you were after?

      https://so-how-do-i.blogspot.com/2016/07/get-nicer-thumbnails-for-my-post.html

      Delete

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