Ethereal Template Instructions

All these steps are on Layout page (except the xml install).

1. Install the .xml file

Unzip the received file and upload the .xml
2. Menu
To create the dropdown levels, we use the underscore method on tabs's titles:
1 underscore for the second level (first dropdown). Ex.: _categories
2 underscores for the third level (second dropdown). Ex.: __travel
See the images below for better explanation.



Don't forget that you need pages already created before adding any link on your menu. If you don't have any page yet, go to "Pages" and click on "New page" to create one.

It's the same for labels: if you don't have any, create a draft post with all the labels you want to add on menu. The link for label looks like this: /search/label/Travel
If you want to determine how many posts will be displayed on label page, use a link like this: /search/label/Travel?max-results=9 (you can change the 9 for other number multiple of 3).
Be careful with labels names because Blogger labels are case sensitive: "travel" is different from "Travel" which is also different from "TRAVEL".

If you want to add a "blog" tab, use this link: /search?max-results=4 (you are free to change the 4).

If you have any trouble with this set up, send me a message.
3. Search
Copy and paste the following code on search widget:
<div class='gbml-search'>
<form action='/search' class='search-form' method='get'>
<input class='search-form-field' id='search' name='q' type='text' placeholder='search...' value=''/>
</form>
</div>
4. Top Social Media Icons
<div class='social-icons'>
<a href='FACEBOOKLINK' class='facebook-icon' target='_blank'/></a>
<a href='INSTAGRAMLINK' class='instagram-icon' target='_blank'/></a>
<a href='TWITTERLINK' class='twitter-icon' target='_blank'/></a>
</div>

Replace the blue text your links. Be careful to not delete any quotation marks.
5. Header

The header have a 300px max width.
In case of your blog name is a bit long and mess up the design, you can try change the font-size on Blogger Theme Designer > Advanced > Header > Header Font.
If you need some help to adjust your header, you can contact me on Etsy or by email.
Of course, you can upload your own logo with a transparent background.
6. Slide
To display posts on slide, you can choose some posts using a label or display the most recent posts.

Code to display posts of one specific label:
<div class="cycle-slideshow" data-cycle-fx="fade" data-cycle-manual-speed="800" data-cycle-pause-on-hover="true" data-cycle-slides="li" data-cycle-swipe="true" data-cycle-timeout="2000">
<script src="/feeds/posts/default/-/special?orderby=published&amp;alt=json-in-script&amp;callback=showgalleryposts&amp;max-results=80"></script>
<div class="cycle-prev">
</div>
<div class="cycle-next">
</div>
</div>
Replace the blue text with the exactly label name. You can create one label specifically to select the posts displayed on slide. Can be anything like "featured" or "special". Remember: Blogger labels are care sensitive so "fashion" and "Fashion" are two different labels.

Code to display recent posts:
<div class="cycle-slideshow" data-cycle-fx="fade" data-cycle-manual-speed="800" data-cycle-pause-on-hover="true" data-cycle-slides="li" data-cycle-swipe="true" data-cycle-timeout="2000">
<script src="/feeds/posts/default/?orderby=published&amp;alt=json-in-script&amp;callback=showgalleryposts&amp;max-results=80"></script>
<div class="cycle-prev">
</div>
<div class="cycle-next">
</div>
</div>
7. Featured Images with Links

You can make any link featured, like an external site, your instagram account or some categories.
The link for label looks like this: /search/label/Travel
If you want to determine how many posts will be displayed on label page, use a link like this: /search/label/Travel?max-results=12 (you can change the 12 number for another multiple of 3).
Be careful with labels names because Blogger labels are case sensitive: "travel" is different from "Travel" which is also different from "TRAVEL".
8. About Me

Replace all the demo informations with your personal ones.
The photo can be uploaded with any orientation, but will always be cropped in a 4:3 rectangle.

Social Media Icons code:
<div class='social-icons'>
<a href='FACEBOOKLINK' class='facebook-icon' target='_blank'/></a>
<a href='INSTAGRAMLINK' class='instagram-icon' target='_blank'/></a>
<a href='TWITTERLINK' class='twitter-icon' target='_blank'/></a>
<a href='PINTERESTLINK' class='pinterest-icon' target='_blank'/></a>
<a href='TUMBLRLINK' class='tumblr-icon' target='_blank'/></a>
<a href='YOUTUBELINK' class='youtube-icon' target='_blank'/></a>
<a href='mailto:EMAILADDRESS' class='email-icon' target='_blank'/></a>
<a href='RSSFEEDLINK' class='feed-icon' target='_blank'/></a>
<a href='BLOGLOVINLINK' class='bloglovin-icon' target='_blank'/></a>
</div>
Replace the blue text with your links. Be careful to not delete any quotation marks.
Note: Follow the same steps for the Sidebar Profile.
9. Youtube Videos
Code for display the 3 latest videos:
<yt-gallery
  channel="UCdWdrpR_tHH4ZAMMgKNyswQ"
  api-key="AIzaSyBDe9U7_g0XupBgQ6mcAaEfxjWuoj0e26o"
  max-results="3"
  resolution="medium"
  icon-size="2"
  item-width="30%"
></yt-gallery
>
Replace the pink text with your Youtube channelID.
Tip: How to find your channelID.
10. Featured Category
Code for featured category:
<script type="text/javascript">
var posts_no = 2;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = false;
var posts_date = true;
var post_summary = true;
var summary_chars = 70;
</script>
<script src="/feeds/posts/default/-/photography?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
Replace the purple text with the label you prefer. Remember that the labels are case sensitive: "photography" is different from "Photography" or "PHOTOGRAPHY".
11. Blog Posts

Number of posts recommended to display (because of the homepage design): 4 or multiples of 4.
The post author signature was personalized, so if you want change the "xoxo", it have to be done directly on html code.
12. Instagram
<div id='instagram-wrapper' class='clearfix'>
<div id='instafeed' class="instafeed-w clearfix"></div>
<script type='text/javascript'>
//<![CDATA[
var userFeed = new Instafeed({
    userId: "5825919349",
    accessToken: "5825919349.1677ed0.ae766d7574854758bde3fc9f8f5789c8",
    get: "user",
    limit: "6",
    resolution: "standard_resolution",
    template: '<div class="insta-widget" href="{{link}}" target="_blank"><img src="https://4.bp.blogspot.com/-AAm8PY3cXo0/VuhmwWgl8qI/AAAAAAAAWc8/30NCuYaT2B4ssffctToAJIAHL4_mnS9vQ/s1600/187tdf.png"/><a href="{{link}}" target="_blank" style="background-image: url({{image}});"><span class="insta-likes">{{likes}}<i class="fa fa-heart-o" aria-hidden="true"></i></span></a></div>'
});
userFeed.run();
//]]>
</script>
</div>
Replace the blue text (userId) and the orange text (accessToken) with your Instagram’s permission token. Each token is unique for each Instagram user.
To get your token, follow these steps:

1. Access: http://instagram.pixelunion.net/
2. Click: “Generate Access Token”

Your accessToken is the returned code. Your userId is the number before the first dot.
Example:

13. Pinterest
<script>//<![CDATA[
$.ajax({
dataType: 'jsonp',
type: 'GET',
url: 'https://widgets.pinterest.com/v3/pidgets/users/melodicmondays/pins'
}).done(function(response) {
var pins = response.data.pins;
var html = '';
for (var i = 0; i < 6; i++) {
var description = pins[i].description;
var dominantColor = pins[i].dominant_color;
var imageUrl = pins[i].images['237x'].url;
var url = pins[i].id;
html += '<div class="pinterest-gallery"><a href="https://www.pinterest.com/pin/' + url + '/" target="_blank"><div class="pinterest-thumbnail" style="background-image: url(' + imageUrl + ')"><div class="pinterest-icon"><span><p><i class="fa fa-pinterest"></i></p></span></div></div></a></div>';
}
$('.pinterest').html(html);
}).fail(function() {
console.log('erro');
});
//]]></script>
<div class='pinterest clearfix'></div>
Replace the yellow text with your pinterest username.
14. Archive Widget
15. Contact Form

Copy and paste the following code on your Contact Page (HTML tab):
<div style="text-align: center;">
Send me  a hello :)</div>
<div style="text-align: center;">
Write to</div>
<div style="text-align: center;">
<b><span style="font-size: large;">email@email.com</span></b></div>
<div style="text-align: center;">
or use the form bellow:</div>
<html><br /><head><br /><div class="widget ContactForm" id="custom_ContactForm100">
<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
<input class="contact-form-name" id="ContactForm100_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" /><br /><input class="contact-form-email" id="ContactForm100_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" /><br /><textarea class="contact-form-email-message" cols="25" id="ContactForm100_contact-form-email-message" name="email-message" placeholder="Your Message" rows="5"></textarea><br /><input class="contact-form-button contact-form-button-submit" id="ContactForm100_contact-form-submit" type="button" value="Send" /><br /><div style="text-align: center; width: 100%;">
<div class="contact-form-error-message" id="ContactForm100_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm100_contact-form-success-message">
</div>
</div>
</form>
</div>
</div>
</div>
</head></html>
You are totally free to change the lilac text.
16. Template Designer
You can change colors and fonts with no need to edit CSS. Go for Theme > Customize > Advanced


Send a message by Etsy or email if you are having troubles with install or if you have other questions (:

Formulário de contato

Nome

E-mail *

Mensagem *