Little Gal Template Instructions

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


1. Install the .xml file
2. Menu
To create the dropdown levels, we use the underscore method on tabs's titles:
1 underscore for the second level (first dropdown). Ex.: _category
2 underscores for the third level (second dropdown). Ex.: __travel
See the images below for better explanation.

Don't forget that you need pages already created before adding any link on your menu. If you don't have any page yet, go to "Pages" and click on "New page" to create one.
It's the same for labels: if you don't have any, create a draft post with all the labels you want to add on menu. The link for label looks like this: /search/label/Travel
If you want to determine how many posts will be displayed on label page, use a link like this: /search/label/Travel?max-results=9 (you can change the 9 for other number multiple of 3).
Be careful with labels names because Blogger labels are case sensitive: "travel" is different from "Travel" which is also different from "TRAVEL".
If you have any trouble with this set up, send me a message.
3.Social Media Icons and Slide
<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>
</div>
Replace the blue text your links. Be careful to not delete any quotation marks.

SLIDE

Code to display posts of one specific label:
<div class='cycle-slideshow' data-cycle-fx='scrollHorz' data-cycle-manual-speed='800' data-cycle-pause-on-hover='true' data-cycle-slides='li' data-cycle-swipe='true' data-cycle-timeout='2000'>
    <script src="/feeds/posts/default/-/little gal?orderby=published&amp;alt=json-in-script&amp;callback=showgalleryposts&amp;max-results=80"></script>
<div class="cycle-prev"></div>
<div class="cycle-next"></div>
</div>

Replace the blue text with the exactly label name. You can create one label specifically to select the posts displayed on slide. Can be anything like "featured" or "special". Remember: Blogger labels are care sensitive so "fashion" and "Fashion" are two different labels.


Code to display recent posts:
<div class='cycle-slideshow' data-cycle-fx='scrollHorz' data-cycle-manual-speed='800' data-cycle-pause-on-hover='true' data-cycle-slides='li' data-cycle-swipe='true' data-cycle-timeout='2000'>
    <script src="/feeds/posts/default/?orderby=published&amp;alt=json-in-script&amp;callback=showgalleryposts&amp;max-results=80"></script>
<div class="cycle-prev"></div>
<div class="cycle-next"></div>
</div>
4. Posts

You will notice that are 2 widgets for Blog Posts. They are the same and they are duplicate for better association between "Layout" page and the theme design.
5. Profile
6. Social Media Icons (profile) 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 links. Be careful to not delete any quotation marks.

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='search' value=''/>
<button alt='search' class='search-form-btn' type='submit'>
<i aria-hidden='true' class='fa fa-search'/>
</i></button>
</form>
</div>
Copy and paste the above code on search widget.
7. Discover Categories

Please check the item 2. Menu for explanations about labels links.
8. 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 < 9; 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 blue text with your pinterest username.
Replace the red number with other number multiple of 3, if you to want change the number of pins displayed.
9. Blog Archive
10. Contact Form

Copy and paste the below code on your contact page (html tab):
<div style="text-align: center;">
Send me  a hello :)
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.
11. Popular Posts
12. Instagram Photos

<div id='instafeed'/>
<script type='text/javascript'>
//<![CDATA[
var userFeed = new Instafeed({
    userId: "5825919349",
    accessToken: "5825919349.1677ed0.ae766d7574854758bde3fc9f8f5789c8",
    get: "user",
    limit: "12",
    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-o" aria-hidden="true"></i></span></a></div>'
});
userFeed.run();
//]]>
</script>
</div>
Replace the green number from 6 if you want to display only one row of photos.
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:
13. Template Designer
You can change colors and fonts with no need to edit CSS. Go for Theme > Customize > Advanced


Formulário de contato

Nome

E-mail *

Mensagem *