Lipstick Template Instructions

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

1. Install the .xml file
1. Unzip the file received
2. Go to Theme > Backup/Restore > Choose file


3. Upload the .xml named like the theme you bought.
2. Social Media Icons and Search

<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 social media links. Be careful to not delete any quotation marks.
Tip: Always add the https:// on your links, otherwise they will be broken and your blog will show a "404" (error)  page.

<div class='gbml-search'>
<form action='/search' class='search-form' method='get'>
<input class='search-form-field' id='search' name='q' type='text' placeholder='type + enter' value=''/>
</form>
</div>
Copy and paste the search code.

3. Menu and Categories


4. Popular Posts

5. Blog Posts



6. Instagram Feed


<div id='instagram-wrapper' class='clearfix'>
<div class='insta-user'>
<a href='INSTAGRAMLINK' target='_blank'>
@melodic.mondays<a/></div>
<div id='instafeed'/>
<script type='text/javascript'>
//<![CDATA[
var userFeed = new Instafeed({
    userId: "5825919349",
    accessToken: "5825919349.1677ed0.ae766d7574854758bde3fc9f8f5789c8",
    get: "user",
    limit: "5",
    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" aria-hidden="true"></i></span></a></div>'
});
userFeed.run();
//]]>
</script>
</div></div>

Replace the lilac text with your username.
Replace the yellow text with your instagram URL.
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:

7. 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 < 5; 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-p"></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.

8. 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>
<head>
<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="" />
<input class="contact-form-email" id="ContactForm100_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" />
<textarea class="contact-form-email-message" cols="25" id="ContactForm100_contact-form-email-message" name="email-message" placeholder="Your Message" rows="5"></textarea>
<input class="contact-form-button contact-form-button-submit" id="ContactForm100_contact-form-submit" type="button" value="Send" />
<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.
9. Change colors and fonts with Blogger Template Designer
Theme > Customize > Advanced

Feel free to contact me if you are having troubles with some this steps or any theme setup (:

Contact Form