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.
Next, choose Download full template and choose where to save your backup file.
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.
Next, click Choose file and point to the .xml template file that you’ve prepared and then click Upload.
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:
And select the option: No. Show desktop template on mobile devices.
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:
When the box with options appears, click on Blogger profile:
On the profile page find, click Edit profile button in the upper right corner of the screen:
And on the next page find a Profile Photo section and remove your image (if you want to change it).
Then, add a new photo by selecting From your computer and clicking Choose File.
When you’re finished, click the Save Profile button on the bottom of the page.
The template requires smaller date format for the date to be properly displayed. To modify it, go to Blogger Dashboard -> Settings -> Language and Formatting:
Then, click on the Date Header Format and choose a smaller format like this one (d/m/yy):
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:
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 ;-)
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:
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.
Code to copy:
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.
Open the editor of the post that you want to edit. This is how it looks in my editor when I started:
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.
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:
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):
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