Well designed Blogger and WordPress templates, hand drawn clip arts and illustrations. Mlekoshi Design Studio

Noir Blank

  1. Backup
  2. Upload the template
  3. Responsive template
  4. Circle shaped profile picture
  5. Date format
  6. Setting number of posts to display on the home page
  7. How to create a perfect post snippet?
  8. Link List
  9. Pinterest and Instagram gadgets
  10. Different Thumbnail image than in the post content
  1. Backup

    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.

    backup_1

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

    backup_2

    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.

  2. Upload the template

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

    backup_1

     

    Next, click Choose file and point to the .xml template file that you received from Etsy, then click Upload.

    Important! – you may need to unzip the file first, as it’s sent as a .zip file.

    upload

  3. Responsive template

    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!

  4. 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.

    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.

     

  5. 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_2That’s it. Click Save settings and you’re done here.

  6. 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

  7. How to create 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.

  8. 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.

    Here’s a similar generator for Instagram gadget:

    Both generator tools are based on this tutorial: http://www.codeitpretty.com/2012/03/pinterest-gadget-for-blogger.html

     

  9. 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.

    This is the first step in my editor:

    Starting point

    Then, 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:

    Visual editor after hiding the image

    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).

newsletter_ico

Join our newsletter!

Sign up to be the first to know about our new releases,
receive exclusive freebies and promo codes.