etsy

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 class='insta-user'>
<a href='INSTAGRAM-URL' target='_blank'>
@melodic.mondays
<a/>
</div>

<script>//<![CDATA[
(function($){
$(window).on('load', function(){
$.instagramFeed({
'username': 'your-username',
'container': "#instagram-feed1",
'display_profile': false,
'display_biography': false,
'display_gallery': true,
'display_igtv': false,
'callback': null,
'styling': false,
'items': 5,
'margin': 0
});
});
})(jQuery);
//]]></script>

<div id='instagram-feed1'/></div>
Replace the blue text with your username. Be careful to not delete any quotation marks. Don't use @ on your username.
Replace the purple text with your instagram link account. Use https://
Replace the orange text with your username. Do use @ on your username.

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 these steps or any theme setup (:

Contact Form