27 February 2014

Blogger Template Experiment 5: Black & White Minimalist Simple Template

27 February 2014
Hey, we have a new template! This one's just really simple. Very toned down. You know how I love minimalist designs.

For this one you'll need to create your own header (I used this font for the demo) and add your own social media icons, as well as the search bar (instructions at the bottom of this post).

You will have to manually add your profile photo, too, if you want to do it like the demo. You just need to adjust the width of the profile pic to 255px.

This template is also customizable using the Blogger Template Designer.




Demo | Download XML File | Download HTML File

You know the drill. Back up your template first, then upload the XML or HTML file of the template above.

Add the search bar

The formatting for the search bar is already embedded in the XML file, but you will have to manually add the search bar in your layout. Go to LAYOUT, select HTML/Javascript, and then copy and paste the code below.
<div align="left">
<form action="http://YOUR BLOG URL/search/" id="searchform" method="get">
<input class="field" id="searchinput" name="q" placeholder="Search" type="text" />
<input class="submit" id="searchsubmit" name="submit" type="submit" value="Search" />
</form>
</div>
Preview and then SAVE!

Change or remove set image size

The images are set to a default size. If you want to change or remove this, go to Edit HTML and look for this code:
.post-body img {
width: 635px;
height: auto;
float: left;
}
.post table.tr-caption-container img {
width: 635px;
height: auto;
float: left;
}
You can change the width or remove the entire code. If you remove the entire code, it will just revert back to the usual options for images (original size, small, medium, large, x-large).

Preview and then SAVE!


24 comments:

  1. Thank you for sharing this! I definitely would like to use it. It's very simple and elegant.

    ReplyDelete
    Replies
    1. Thanks! Let me know how it works out for you. :)

      Delete
  2. hiya! the pictures have a set size in this template, is there any way to change this?

    ReplyDelete
    Replies
    1. Hi Jo!

      Yes, you can change/remove the set size by editing the HTML template.

      Look for this code:

      .post-body img {
      width: 635px;
      height: auto;
      float: left;
      }
      .post table.tr-caption-container img {
      width: 635px;
      height: auto;
      float: left;
      }

      You can change the width or remove the entire code.

      Hope this helps! :)

      Delete
  3. hey! i was wondering where you put the image link in the sidebar?

    ReplyDelete
    Replies
    1. Hi! I just added a widget to the Layout and added an image. :)

      Delete
  4. omg ive been finding the "perfect" template for my blog and i think that this is it :) thank you so much for this

    ReplyDelete
  5. Awesome!! I wold love to use this. Thanks for sharing! :)

    ReplyDelete
  6. Could you give the html code for this template, please?
    I can't use this for my blog. I don't know why. But, everytime my blog wanted to import the xml files. It got so much time to load. I'm crying :'(

    ReplyDelete
  7. hi just want to know how to change the width of widget search?xoxo
    persanesblogspot.com

    ReplyDelete
  8. great template, i really like this

    ReplyDelete
  9. I can't find the set image code! Where abouts is it roughly?

    ReplyDelete
    Replies
    1. Hi Elody! Make sure you click on the little black arrowheads on the left side of the HTML then try searching for the code above. :)

      Delete
  10. Thanks for the nice template! I'm now making it perfect for me and when my header is done, it will be uploaded to ilumuoti.nl ! :)

    ReplyDelete
  11. Hi there!

    I wanted to display my images in a bigger size, but then the text outlining and is not good anymore and the title won't be in the centre anymore... How can I change that?

    ReplyDelete
  12. Hi , any change that u can send me a example of this Blogger Template buy pictures ?
    Cuz im quiet new in this area LOL :$

    ReplyDelete
  13. Thank you for an amazing template....just my blogger doesnt seem to upload it. has been two hours already :[

    ReplyDelete
  14. You are awesome for sharing this blogger template! =)

    ReplyDelete
  15. So beautiful, I'll use on my blog okay ?!

    ReplyDelete
  16. i'm using this for blog and i mentioned you in a post! i love your templates. <3

    http://lifewithantlers.blogspot.com

    ReplyDelete
  17. I used the template in my blog: paperboulevard.blogspot.com

    Thank you so much! I really need it and searching over it for yours. The simplicity is so perfect :)

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