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

Josephine

  1. Backup
  2. Upload the template
  3. Responsive template
  4. Editing Blog Title
  5. Circle shaped profile picture
  6. Link List
  7. Pinterest and Instagram gadgets
  8. Removing the line on the left side of the header
  9. Widgets background
  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. Editing Blog Title

    To edit how your Blog Title looks like go to Layout page in your dashboard and click Edit button on the Header gadget:

    blog_title_1

     

    You can use Blog Title and Description fields to create your blog title. The font used in the template will be used automatically.

    blog_title_2

    If you choose that, but would like to use a different font than the one originally used in the template or would like to change the size of the title or description – you can do that in the template Customize area. To get there, go to Layout page and click the Customize button.

    blog_title_3

     

    There in the Template Designer Window choose an Advanced tab and click Blog Title:

    blog_title_4

     

    You can choose a different font, modify font settings like font weight (bold) or font style (italics) and choose font’s size and color.

    If at any time you want to bring back the default settings – simply click the blue link saying: Clear advanced changes to the blog title.

    But maybe you want to use your own image for the blog title? That’s even easier! Come back to the Layout page of the dashboard and click Edit on the Header gadget. Below the blog title and description you will find options to upload your own image.

    blog_title_5

     

    If the image should serve as a background to the title choose Behind title and description. If on the other hand you have a complete header ready and want to use it instead of the default setting, choose Instead of title and description.

     

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

     

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

     

  7. Removing the line on the left side of the header

    If you applied your own logo and the black line on the left side of the header doesn’t make sense any more, you can remove it by adding this custom CSS code:

    #header-inner { padding: 0px; border: none;}

    In case you don’t know how to set it up: go to your blog admin panel, then to Template section and click the Customize button below your blog image.
    In the Blogger Template Designer that will appear, click Advanced and then scroll the list down till the Add CSS will show up. Click it and in the text box on the right copy and paste the CSS code. After that click Apply changes button.

  8. Widgets background

    The template is set to display no background for the first 4 gadgets in the sidebar.

    To remove it for a certain widget – use this custom CSS. ( We set no background for the 5th gadget in this example):

    .sidebar .widget:nth-child(5)
    {
    background: none;
    padding: 0;
    margin: 20px 0 30px;
    }

    You can add more if you like. It can be done this way:

    .sidebar .widget:nth-child(5),
    .sidebar .widget:nth-child(6)
    {
    background: none;
    padding: 0;
    margin: 20px 0 30px;
    }

    Notice the comma between the first two lines!

newsletter_ico

Join our newsletter!

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