All this steps are on Layout page (except .xml file installation).
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
<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.
Tip: Always add the https:// on your links, otherwise they will be broken and your blog will show a "404" (error) page.
Tip: Always add the https:// on your links, otherwise they will be broken and your blog will show a "404" (error) page.
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' placeholder='type + enter' value=''/>
</form>
</div>
4. Post Date Format
5. Instagram
<script>//<![CDATA[Replace the blue text with your username. Be careful to not delete any quotation marks. Don't use @ on your username.
(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'/>
6. Pinterest
<script>//<![CDATA[
$.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 clearfix'></div>
Replace the red number with the number of pins that you prefer.
7. Blog Archive
8. Popular Posts
9. Change colors and fonts
Do you need help with any of these steps?
Contact me on the link below.