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. 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
Feel free to contact me if you are having troubles with some these steps or any theme setup (: