Blogger theme

Noir Blank

Noir Blank is a modern, magazine-style theme inspired with editorial publications. 3-column layout gives pleasing browsing experience. Plenty of white space combined with high fashion black results in unique character of editorial aesthetic with a subtle elegant touch. This theme is preferred by photographers, fashion bloggers and artists.

_

Thank you for choosing Noir Blank template!
Please use the left menu to navigate the manual.

Backup your template

The installation is pretty straightforward, but if you encounter any problems, or simply would rather have us do it for you, contact us here.

 

It is important to start with a backup. In case anything goes wrong – you’ll be able to quickly go back to the starting point.

Go to your blog’s Template settings and click the Backup/Restore button on the top right corner of the screen.

Blogger backup

Next, choose Download full template and choose where to save your backup file.

blogger backup button

Whenever you need to restore your backup, simply follow the instructions for uploading the template, but use your backup file instead of your backup file.

Upload new template

First, prepare the template file. You should receive a .zip package with your template. Unzip it (or simply open the zip file) and look for the file with .xml ending. That’s your template file. This is the file that you need to upload to Blogger.

Go to your Blogger dashboard and open Template settings page. Click the Backup/Restore button on the top right corner of the screen.

Blogger backup

Next, click Choose file and point to the .xml template file that you’ve prepared and then click Upload.

Blogger upload button

 

That’s it! If everything went fine and the correct file has been uploaded there should not be any message and a new preview of the template should appear in the Live on Blog box.

Responsive template set up

The template is responsive, but to make sure that Blogger is not spoiling it up with some mobile view you need to set it up first.

To do that, go to Template page in your dashboard and click the cog icon below the mobile view:

1

And select the option: No. Show desktop template on mobile devices.

2

Click Save and you’re done here!

Circle shaped profile picture

The About Me section of your template takes the photo from your Blogger profile.That means that to change or add your photo you need to go to your Blogger profile. If you’re using a Google+ profile, it will look a bit differently. In that case just edit your profile on Google+.

To do that click on your name in the upper right corner:profile_1

 

When the box with options appears, click on Blogger profile:

profile_2

On the profile page find, click Edit profile button in the upper right corner of the screen:

profile_3

And on the next page find a Profile Photo section and remove your image (if you want to change it).

profile_4 

Then, add a new photo by selecting From your computer and clicking Choose File.

profile_5

When you’re finished, click the Save Profile button on the bottom of the page.

 

Date format

The template requires smaller date format for the date to be properly displayed. To modify it, go to Blogger Dashboard -> Settings -> Language and Formatting:

date_format

Then, click on the Date Header Format and choose a smaller format like this one (d/m/yy):

date_format_2

That’s it. Click Save settings and you’re done here.

Setting number of posts to display on the home page

By default, Blogger will show 7 posts on the home page. Noir Blank looks best when the number of posts on the index pages is set to a multiple of 3 (e.g. 3, 6, 9, 12…) as the template looks best this way.

Go to Blogger Dashboard -> Settings -> Posts and Comments:

post_count_1

There you’ll find the number of posts to display. Change it to a multiple of 3 and click Save settings. We recommend 6 or 9, but you can always get a bit crazy if you want ;-)

post_count_2

Creating a perfect post snippet

When you write a post it will be displayed on the home page as a snippet. That means some part of it will be displayed. Usually is around 100 chars.

This is not something that we usually want, but it’s super easy to decide where should the snippet end.

Simply find an icon called Insert jump break and click it with a cursor placed where you want the snippet to end:

more_link

And that’s it!

Also, the photo displayed as the post thumbnail is always the first photo from your post content.

Pinterest and Instagram gadgets

If you want to use a Pinterest gadget that was shown in the template example, use this generator to create the code and then copy and paste the code to the HTML gadget in the sidebar that is called Latest Pins.

Pinterest board:
(You can leave this blank if you want to show the latest pins from all boards.)

To create an Instagram gadget in your sidebar, please use this method that we described in a blog post: Blogger Instagram Feed.

Different thumbnail image than in the post content

It is possible to use a different post thumbnail on home page than in the post itself. This is a bit of advanced trick.

As the index pages display the first photo, we want to choose a photo for the home page first and add it on top of the post content as we’d normally do.

STEP 1

Open the editor of the post that you want to edit. This is how it looks in my editor when I started:

start

This is the image that I want to be visible as a thumbnail of the post, but not visible in the post content. I want a different image there.

STEP 2

Switch to HTML editor and find the HTML code that is displaying the image. I got this:

<div class=”separator” style=”clear: both; text-align: center;”> <a href=”http://1.bp.blogspot.com/-A4AiAHal9j0/U-Yi6U3zIDI/AAAAAAAAAZ8/cc55y6VvdzY/s1600/landing_1.jpg” imageanchor=”1″ style=”margin-left: 1em; margin-right: 1em;”><img border=”0″ src=”http://1.bp.blogspot.com/-A4AiAHal9j0/U-Yi6U3zIDI/AAAAAAAAAZ8/cc55y6VvdzY/s1600/landing_1.jpg” /></a> </div>

We want to make this whole code not appear on the website at all, so find the <img tag and add this right behind it: style=”display: none;”. The whole block looks like this now:

<div class=”separator” style=”clear: both; text-align: center;”> <a href=”http://1.bp.blogspot.com/-A4AiAHal9j0/U-Yi6U3zIDI/AAAAAAAAAZ8/cc55y6VvdzY/s1600/landing_1.jpg” imageanchor=”1″ style=”margin-left: 1em; margin-right: 1em;”><img style=”display: none;” border=”0″ src=”http://1.bp.blogspot.com/-A4AiAHal9j0/U-Yi6U3zIDI/AAAAAAAAAZ8/cc55y6VvdzY/s1600/landing_1.jpg” /></a> </div>

Make sure you make a space before and after that added part. You can switch to the Visual editor and you’ll see that the photo is already gone, but it will be visible on the home page. Here’s my visual editor now:

after

STEP 3

Now, you can add your new photo as you’d normally do. But just make sure that the new photo won’t appear ABOVE the one we just modified. If it does, you can move it around by editing the HTML code of the post. I usually do it by adding the new image while being in the HTML editor. This way I’m sure where the new image is added.

This is a great way to add a different photo for the index pages. We used it to make all photos on the blog home page appear in the same size, then on the post pages we used wider photos that filled the whole post width. Try it!

Here’s my final code for the post (I marked the code for the post image):

ready code

You can see the results here: Blog view, First post (or click the first image on the left).

Final notes

Now you should have everything set up. Again, if you have any problems, or simply would rather have us do the installation for you, contact us here.

If you think that this manual is incomplete or would like to know how to do something that’s not covered by it, then leave us a comment here, drop us a line in our contact form or shoot us a message through Facebook, Twitter, or Etsy.

Thank you ♥︎
Kat & Luk

Leave a Reply