Noon 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 past the search code.

3. 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.
4. Popular Posts


5. Blog posts



6. Follow by Email


7. About Me


To add the "read more" link below your text bio, use the following code:
<div class="about-more"><a href="/p/about-me.html">read more</a></div>
Replace the blue text with your about page link.

8. Instagram
<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-o" aria-hidden="true"></i></span></a></div>'
});
userFeed.run();
//]]>
</script>
</div>
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:
2. Click: “Generate Access Token”
Your accessToken is the returned code. Your userId is the number before the first dot.
Example:
9. Contact Form
<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>

Copy and paste the above code on your Contact Page (HTML tab). Your are free to change the lilac text.
*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.
10. Change colors and fonts on Blogger Template Designer
Theme > Customize > Advanced
11. Show/hide a widget
Feel free to contact me if you have any trouble with any step.

Formulário de contato

Nome

E-mail *

Mensagem *