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

Frêle

  1. Backup
  2. Upload the template
  3. Responsive template
  4. Slider of photos on top of the page
  5. A perfect profile picture
  6. Profile picture
  7. Date Format
  8. Social media icons
  9. Pinterest and Instagram gadgets
  10. Making slider appear only on the landing page
  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. Slider of photos on top of the page

    To add slides, go to Layout page of the dashboard and edit the First Slide and Second Image boxes on top. Add images from your computer, or paste a direct link to an image. You can add a link to any of the images and the image in the slider will work as a link.

    To add more slides, add a new Image gadget in the space above the Header box. Here’s a short video of adding a new slide and changing the order of images.

    add slider image

    Important: Don’t add other gadgets in that space as it may break the slider.

     

     

  5. A perfect profile picture

    In the About me section your Blogger profile picture is displayed. For best results use a square photo. If you don’t know how to make the photo square – use this free online tool: http://www.picresize.com/

    You need to crop your picture. Click anywhere on the uploaded photo and hold shift to make the selected area square. You can choose the size of the photo (this doesn’t really matter as it’s displayed below 200px width but it’s a good idea to keep it around 800px) and click I’m Done, Resize My Picture!

    Download your photo and upload it to Blogger and enjoy your new profile picture!

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

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

     

  8. Social media icons

    To add social media icons to your footer go to Layout page in your dashboard. Look for a LinkList or Follow Me gadget in the sidebar. Click the Edit button.

    linklist1

    In the popup window that will appear add links to your social pages along with names of icons you want to use:

    new social links

    For icons, the template is using Ionicons. Most of the social networks icons have a structure of: ion-social-NAME (for example: ion-social-twitter). Check this page: http://ionicons.com/ for a list of all available icons.

    Here’s a quick list of the most popular ones:
    Facebook: ion-social-facebook
    Twitter: ion-social-twitter
    Instagram: ion-social-instagram
    Pinterst: ion-social-pinterest
    Youtube: ion-social-youtube
    G+: ion-social-googleplus

     

     

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

     

  10. Making slider appear only on the landing page

    If you want to make the slider appear only on the landing page (or home page) of your blog, go to the Blogger Template Designer and select Advanced. There, choose Slider settings and select a different color than black (#000000).

    It’s a very simple setting – if the color is black, the slider will appear on all the pages (except the mobile version on which the slider is never visible) if the color is different – the slider is visible only on the home page.

newsletter_ico

Join our newsletter!

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