Lipstick Template Instructions

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

1. Install the .xml file
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.

<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 code from the file that was sent on the zip file on your contact page.

*I recommend edit this page always on HTML mode.
*To work properly, this form needs that's the contact form widget exist on "Layout" area, but it's will be visible only on contact page.
*This form is the Blogger's native contact form widget. The messages will sent to your google email account.
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 (:

Formulário de contato

Nome

E-mail *

Mensagem *