Sunflower Set Up

Top Menu

Into the top menu, you can add four types of links — pages, label pages, external links or the blog link.

You can create two-level menu — pages, subpages and sub-subpages.

Adding pages

Important: The page must be already created on your blog. If you haven’t created the page yet, go to “Pages” and click on “New Page” to create it.

1. Find the URL link to your page → go to “Pages”, hover your cursor over the page and click on the eye icon, then copy the link from your browser.
2. Go to “Layout” and find the “Pages” gadget in the “Topmenu” section. Click on “Edit”.
3. As “New Site Name” enter the title/name of the page.
4. As “New Site URL” paste the copied URL link.

Adding label pages

Label pages “collect” all posts that fall into the same category (like “Fashion”, “Lifestyle” and so on).

Important: Labels are case sensitive → labels “travel”, “Travel” and “TRAVEL” are three different labels. Always double check if you’re using the same label in your posts and in the top menu.

1. Go to “Layout” and find the “Pages” gadget in the “Topmenu” section. Click on “Edit”.
2. As “New Site Name” enter the title/name of the label page.
3. As “New Site URL” paste the URL link to the page (copy it from your browser).

Adding external links

You can also add links outside your blog — if you have a shop website, you have a portfolio and so on.

1. Go to “Layout” and find the “Pages” gadget in the “Topmenu” section. Click on “Edit”.
2. As “New Site Name” enter a name you want.
3. As “New Site URL” paste the URL link (copy it from your browser).

Adding a blog link

A blog link is good to have if you don’t want to display too many posts on your homepage. It displays the archive with all your published posts.

1. Go to “Layout” and find the “Pages” gadget in the “Topmenu” section. Click on “Edit”.
2. As “New Site Name” enter a name you want (like “blog” or “new posts”).
3. As “New Site URL” paste the following link (you can change the “9” to any number you want):

   /search?max-results=9

Creating a drop-down menu

You can create two-level menu to help you organize your links.

The URL link stays the same, you only need to add underscores before the link’s name → one underscore (_) for first subpages and two underscores (_ _) for sub-subpages.

If you don’t have a link and you only want to trigger to open the menu, you can add the hashtag symbol (#).

Your final menu should look like this:

Header

As header, you can display the title of your blog or upload your logo. The blog description features is inactive for this template.

1. Go to “Layout” and find the “Header” gadget in the “Header” section. Click on “Edit”.
2. Optional: Upload your logo. Do not click on “Shrink to fit”. Select the option “Instead of title and description”.
3. Save!

Social Media

Here you can add links to your social media handles. In the template are already pre-written links to Instagram, Faceboook, Pinterest, Tiktok and Email.

1. Go to “Layout” and find the “Social Media” gadget in the “Socialmedia” section. Click on “Edit”.
2. If you want to add your link to pre-written icon, replace LINK with the link. Do not delete any the quotation marks. Tip: Copy it from your browser and make sure it starts with https://.
3. If you want to add your email address, replace ADDRESS with your email address. Do not add any spaces or quotation marks.
4. If you want to add more icons, follow this tutorial.
5. If you want to delete some icons, delete the whole line – starting with <a href… and ending with </a>.

Slider

The slider widget displays your most recent or selected posts. If your images (or at least the first one) in the posts are not uploaded on Blogger, it may not work. You can choose how many posts you want to show.

Showing most recent posts

1. Go to “Layout” and find the “Slider” gadget in the “Slider” section. Click on “Edit”.
2. At the end of the code – before </script> you should see …max-results=5">. You can change the “5” into any number you want.
3. Save!

Showing featured/selected posts

1. Go to “Layout” and find the “Slider” gadget in the “Slider” section. Click on “Edit”.
2. Replace the last two lines with:

   <script src="/feeds/posts/default/-/Featured?orderby=published&alt=json-in-script&callback=autoslide"></script>
   

3. Save the gadget.
4. Open any post you want to display in the slider. Add “Featured” as one of the labels and save the post.
5. If you will want to remove the post from the slider, simply remove the “Featured” label.

Introduction

The section below the slider allows you to briefly introduce your website/brand to your new readers and visitors. We recommend adding an eye-catching heading that explains what your brand is about, what is your main focus and niche. On the right side, you have some space to introduce your brand or even yourself in more detail. But keep it short and straight-forward.

1. Go to “Layout” and find the “Introduction” gadget in the “Intro” section. Click on “Edit”.
2. Change the content in the “Title” and the “Content” fields. The “Title” is in the smaller monospace font, the “Content” is displayed as the larger heading.
3. Save!
4. Now go to the “Bio” gadget in the same “Intro” section and click on “Edit”.
5. As “Content”, you can add a short description. Tip: For the best look, do not go over 350 characters.
6. Save!

Blog Posts

You can change the number of posts per page as well as the post date style.

1. Go to “Layout” and find the “Blog Posts” gadget in the “Main” section. Click on “Edit”.
2. If you want to display more or less posts on homepage, you can change the number in “Number of posts on main page”.
3. Select the post date style in the first drop-down in “Post Page Options”.
4. Make sure the option “Show Share Buttons” is checked as well.
5. And save!

Popular Posts

Here you & your readers will find the most read posts.

1. Go to “Layout” and find the “Most Loved On The Blog” gadget in the “Popular Posts” section. Click on “Edit”.
2. In “Most viewed” you can select the period of time from which the popular posts will be selected.
3. In “Show” select “image thumbnail”.
4. In “Display up until… post(s)” you can choose how many posts you want to display. Tip: Choose 5 to achieve the same result as on the demo blog.
5. Save!

Disclaimer: The “Popular Posts” section also includes the Contact Form gadget — do not delete this or the form on the Contact Page will not work.

Featured Post

Above the footer of the homepage is a Featured Post. You can choose if you want to highlight the most recent post on your blog or you can select any post from the archive.

1. Go to “Layout” and find the “Featured” gadget in the “Featured” section. Click on “Edit”.
2. In “Post Snippet” make sure “Show post title” and “Show image” are checked.
3. If you want to display the latest post, in “Featured post” choose “Use the most recently published post”.
4. If you want to display a specific post, in “Featured post” choose “Select a featured post” and find the post which you want to include.
5. Save!

Instagram

This template supports SnapWidget as Instagram widget. Do not worry, you do not need to have a premium account or pay for the service. The widget will work for free.

Important: Your Instagram account must be public, otherwise the widget will not be visible.

Creating the widget on SnapWidget.com

1. Go to Snapwidget.com and create an account by clicking on “Sign Up” in top right corner.
2. Go to your dashboard and click on the button “CREATE A NEW WIDGET”. From the secection, we recommend using the “Free Instagram Grid” widget.
3. Add your Instagram account and desired settings. We recommend changing the following:
   • Thumbnail size — 250 px
   • Layout (Columns X Rows) — 5 X 1
   • Photo Padding — 5 px
   • Hover Effect — Fade Out
   • Sharing Buttons — No
   • Responsive — Yes
4. Click on “Get Widget” and copy the HTML code.

Adding the code to your blog

1. Go to “Layout” and find the “Instagram” gadget in the “Instagram” section. Click on “Edit”.
2. Into “Content” add the copied code.
3. Save!
4. You can also add your username to the heading section — find the “Keep In Touch” gadget in the “Instagram” section and click on “Edit”. Then simply change the USERNAME to your Instagram username.
5. Save again!

Newsletter

This template supports MailChimp as the default mailing service.

If you’re using MailChimp for the first time, follow this tutorial → link.

You can also change the text that’s displayed above the newsletter form → open the “Join our newsletter” gadget and change the title and content.

1. Get the embed code on your MailChimp account.
2. Copy the part of the code that’s highlighted.

3. Open your Blogger, go to “Layout” and find the “Newsletter” gadget in the “Newsletter” section. Click on “Edit”.
4. Replace YOUR MAILCHIMP CODE with the link you copied.
5. Save the widget.

Footer Links

Here you can add more links — like Disclaimer, Privacy Policy and so on; or link your About and Contact page again.

Unlike the top navigation, here you can add only first-level type links — meaning that this section does not allow creating a drop-down menu.

To set up your links in the Footer Right section, please follow the same tutorial as for the “Topmenu — Pages” section.

You can also change the “Title” — which is displayed as the heading above the links.

Customization

You can easily customize all colours in the template and pick any colours you want.

1. Go to “Theme” and click on “Customize”.
2. Click on “Advanced” in the left menu.
3. Click on “Body” to open the drop-down menu, then go section by section and pick your colours.
4. Save by clicking on the save icon in bottom right corner.

Contact Page

This template comes with a styled contact page — which you can view at the demo blog. The contact page matches the rest of the website and you do not need to bother with adding it and styling it yourself. However, you will need to set up the Contact Page on your blog.

Creating a Contact Page

1. Open your Blogger dashboard and select “Pages” from the left side menu.
2. Click on the button “New Page”.
3. Add the title of the page (we recommend only “Contact” or “Contact Page”).
4. Add your content — you can link your social media account, add your address, email and so on. When you are ready, click on the angle brackets in the top formatting menu — this changes your view to HTML.
5. Below the content that you added, copy and paste the following code:

   <div class="contactpage"><div style="text-align: center;">Let's stay in touch</div>
   <br />
   <html>
   <head>
   <div class="widget ContactForm" id="custom_ContactForm1">
   <div class="contact-form-widget">
   <div class="form">
   <form name="contact-form">
   <label>Your Name</label>
   <input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" placeholder="" size="30" type="text" value="" />
   <label>Email Address</label>
   <input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" placeholder="" size="30" type="text" value="" />
   <label>Message</label>
   <textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Your message" rows="5"></textarea><br />
   <input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Submit" /><br />
   <div style="text-align: center; width: 100%;">
   <div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
   </div>
   <div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
   </div>
   </div>
   </form>
   </div>
   </div>
   </div>
   </head>
   </html>
   </div>
   

6. Feel free to change the text in the tan colour. You can also turn off the comments for the contact page.
7. Save the page and do not forget to add it in the top menu or/and the footer section.