Trying to make a Blogger layout - a journey of pain

As of late I keep coming up with posts I want to make for my music blog and then realising I made it on neocities and is therefore an absolute pain to get it to work the way I want. Also the layout is a bit weird. So I have decided to make a music blog on Blogger! Compared to this blog which I couldn't be bothered to make a layout for I want to make a cool 2000s style blog layout for my new blog. And so we begin.. the journey of pain.

After considering stealing someone's layout and just adding my own pictures, I just could not get anything to look right at all and did not really understand the code at all. So why not start from nothing... right? As most of my layouts start, this idea also began from a picture. I love this pic of one of my favourite bands Twothirtyeight - just look at those colours! 

Twothirtyeight but make it amish

From here I trawled through createblog trying to work out just how a Blogger layout is constructed. I learnt that there are two types of layout - widget and classic. Widget layouts are the new Blogger layout and what this blog uses. Widget layouts are constructed of these premade widgets that you can change around with the Blogger layout editior. This makes things easier to edit but the HTML itself is such a pain and quite complex on the surface. The classic blogger layout looks like this - most of these have a classic two column layout and the header is not usually "stuck" to the top of the main section, however, on modern browsers many elements like comments and blog archive don't work anymore. This is annoying because widget layouts are more difficult to customise but if you want your blog to work right you have to use them!

Before confusing myself with the widget layout, I first constructed one by adapting a classic layout - this one - with my own design. This wasn't too difficult as the code is familiar to me but if you are completely new to it begin by using the inspect tool on the demo layout and take note of which div tags relate to which section of the layout. 

Stage 1

I then set this layout aside when I was reasonably happy with it and started to look for some basic widget layouts to get me started. Rather that begin with a more overly styled layout I wanted one which would give be a good starting base without confusing me with any crazy styles. I chose this one because of its simpleness and also because it's called pink diva LOL. I then uploaded this template by clicking recover from the customise dropdown menu - this was on widget layout btw. 

For reference I will go through the code of this layout but others could look different. At the start of the  code is a list of variable definitions, this is essentially a colour palette for the layout so that you can change the colours of areas easily without having to go through the whole code. For example: 

<Variable name="bgcolor" description="Page Background Color"

             type="color" default="#fff" value="#FAA2BF"> 

Refers to the short cut  $bgcolor so everytime that appears in the code whatever colour you wrote under value will appear.  I'm sure this is very helpful but I kept forgetting about it and just wrote in the hex codes myself lol.

The first bits of css are quite self explanatory until we reach the wrappers. Each area of the layout is designated a wrapper, for example header-wrapper for the top of the page, sidebar-wrapper for the sidebar and so on. For my layout I wanted to delete the header content so I removed the entire content of the tag: <div id='header-wrapper'> and inserted my header image. I then removed all the header css
tags and replaced it with this:

#header-wrapper img {

  height: auto;

  width: 810px;

  display: block;

  margin: -20px 0px 400px -250px;

}

This code is for a header that fits snuggly in the left corner of the page. I had to the move the main and sidebar wrappers down using margins. I cannot for the life of me work out how to position elements for a blog layout, I also tried using flex to have all the elements fit in a column but kept breaking the code trying to make it work lol. 

All of the wrappers are all in one container called the outer-wrapper, this wrapper establishes the width of the whole blog content. This can have it's own background if you would like to place your sidebar and main content next to each other or it can be transparent. This wrapper can be used to change the closeness of the sidebar and main blog and the position of the blog on the page. As I mentioned the outer-wrapper contains 2 main sections (more if you are looking at a 2+ column layout): main-wrapper and sidebar-wrapper. To create a uneven side-bar, e.g higher than the main content, you just have to change the margin-top to a minus number.

An illustration lol

Past the wrapper section of the css you can find lots of different tags which relate to more specific areas of the layout. These divs have quite self explanatory names but incase you are wondering which thing relates to what you can either search for the id using ctrl+F or inspect. Sidenote, so that the divs wont start moving up the page when you open a comment make sure to position your divs :)

Once you have finished styling the tags with css you can add widgets to the page using the layout section on the Blogger home page. Sidenote, if you have changed the margins of your layout you may not be able to view it on this page, or it may look cut off. In that case, just inspect the page and change the margin of  outer-wrapper so that the add widget button is visible. 

Here is a guide to different widgets I have used

For the HTML/JS widget you will have to add in all your code through the layout editor and not the HTML editor or it will be deleted, idk why. It is at this point I realised my sidebar was a bit large so I needed to add another sidebar. After looking at a 3 column layout I took this left sidebar code and placed it in my code. 

<div id='sidewrapper-left'>

<b:section class='sidebar' id='sidebar-left' preferred='yes'/>

      </div>

 Because the class is the same as my other sidebar the styling of the links and titles should carry over without me having to write more code. Now because I've added another sidebar this new sidebar will appear in the layout editor allowing me to copy my widgets over! How cool is that?

Finally. We are done. It was not as horrible as I had imagined thanks to my avid use of inspect and moral support (ty finny). This has made me possibly want to make some Blogger layouts for people to use?? Let me know if your interested or if this helped anyone at all lol. Check out the finished blog here and let me know if the whole thing breaks and explodes your computer :)

 

now live! no posts yet though lol