29 June 2013

Blogger Template Experiment 2: Easy Minimalist Blogger Template

29 June 2013
I'm sharing another one of my favorite simple Blogger templates. I'm using a slightly different version of this right now on the main blog.



Demo | XML

I basically split the header on this template to add a place for a gadget next to it. You'll see it in the Layout page and you can place a rectangular ad, images or whatever you want.

For the demo of this template I uploaded an image for the header. You can download the image background here and just add your blog name to it using any photo editor.

To move the header to the right, you can edit the following code in HTML. Change the code in blue to switch the header-widgets. To fix the height and width, change the code in orange.

.header-left {
display: inline-block;
height: 120px;
width: 290px;
float: left;
}
.header-right {
display:inline-block;
float:right;
}
 .header-right {
display:inline-block;
float:right;
width:800px;
}

You can customize this template further using the Blogger Template Designer.

Don't forget to back up your templates first before uploading a new one!

Let me know if you need help with installation! ;)


9/10/2013 IMPORTANT: I uploaded an updated version of the XML file. I realized the old version had third party codes that are not supposed to be there. If you downloaded the old version, you'll need to use this new one! Sorry about that.

6 comments:

  1. I love this design and would like to add a gadget to my header area. How did you split the header in two? What code did you use to do that?

    ReplyDelete
    Replies
    1. Thanks! I used this tutorial to add a gadget in my header:

      http://helplogger.blogspot.com/2012/03/how-to-add-gadgetwidget-inside-your.html

      Good luck with your blog design! :)

      Delete
  2. Hi, I would love to use this template for my blog but I only have one problem. I don't want to split my header into two. How can I remove the header place on the upper left corner of the sidebar?

    ReplyDelete
    Replies
    1. Hi Ellaine! You'll have to edit the HTML.

      I used this tutorial to create the split header: http://helplogger.blogspot.com/2012/03/how-to-add-gadgetwidget-inside-your.html. You can use that as a guide and work back to create a single header.

      Or you can go the easy way and just increase the header-left width and decrease the header-right width. Say, your blog is 1000px wide. You can change the header-left width to 999px and the right to 1px. (see the code for the header in the grey box above) :)

      If you need more help with your template, you can email me at leah(at)whiteskyproject.com and I'll try to help you any way I can. :)

      Delete
  3. Thank you so much.. been looking this template for years in my life... very helpful.

    ReplyDelete
  4. Hello! I absolutely love this template! I do have a question: I seemed to struggle to get the social media share buttons to show up at the bottom of each post. I even tried adding the buttons via html code but with no success. Eventually, I found a code that I could use by adding an HTML gadget. If ever I wanted to add my own custom "share it" social media buttons, would I be able to do that with this particular template? Is there perhaps something in the template that blocks adding the social media share buttons? Any advice would be great! Thanks again :)

    ReplyDelete
© 2014 Color It YOU - Blog Design and Tips. Powered by Blogger.
Legal terms and disclaimers here.