Millennial Template Instructions

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


1. Install the .xml file


2. Social 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>
<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:EMAILADRESS' 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.

3. Search



<div class='gbml-search'>
<form action='/search' class='search-form' method='get'>
<input class='search-form-field' id='search' name='q' type='text' value=''/>
<button alt='search' class='search-form-btn' type='submit'>
<i aria-hidden='true' class='fa fa-search'/>
</i></button>
</form>
</div>
Copy and paste the code above.

4. Menu


5. Categories

6. Profile Photo



7. Profile Bio

    8. Pinterest
    
    <script>
    $.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'></div>

    Replace the blue text with your Pinterest username.

    9. Instagram Code
    
    <div id='instagram-wrapper'>
    <div id='instafeed'/>
    <script type='text/javascript'>
    //<![CDATA[
    var userFeed = new Instafeed({
        userId: "xxxxxxxxxx",
        accessToken: "xxxxxxxxxx.xxxxxxx.xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
        get: "user",
        limit: "6",
        resolution: "low_resolution",
        template: '<div class="insta-widget" href="{{link}}" target="_blank"><a href="{{link}}" target="_blank" style="background-image: url({{image}});"> <img src="https://4.bp.blogspot.com/-AAm8PY3cXo0/VuhmwWgl8qI/AAAAAAAAWc8/30NCuYaT2B4ssffctToAJIAHL4_mnS9vQ/s1600/187tdf.png"></img> <span class="insta-likes"> {{likes}} <i class="fa fa-heart" aria-hidden="true"></i> </span> </a></div>'
    });
    userFeed.run();
    //]]>
    </script>
    </div></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:

    10. Change Colors and Fonts
    Theme > Customize > Advanced



    Do you need help with any of these steps?
    Contact me (:

    Formulário de contato

    Nome

    E-mail *

    Mensagem *