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

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

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

Add snippets to the Emporio theme

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