If there are any problems with the template or the instructions, feel free to contact me anytime.
When you download the zip of the template, you have to extract the files that are inside. You cannot upload a zip file to Blogger.
Theme Installation
1. Go to Theme -> click on "Backup/Restore" (top right corner of the page).2. Click on "Choose File" and select the Ariadne.xml file.
3. Click on "Upload".
Enable Responsiveness
1. Go to Theme -> click on the Settings icon on Mobile.2. Select "No. Show desktop template on mobile devices."
3. Save the changes.
Upload a Logo
1. Go to Layout -> open the Header widget -> click on "Choose File".2. Upload your image, but do not click on "Shrink to fit".
3. Select "Instead of title and description" from the placement options.
4. If you want to add a description under your blog title, add it to the Description box and select "Have description placed after the image" from the placement options.
Configure the Menus
How to Create a Static Page
A static page is a page where you can add information manually.1. Go to your blog dashboard -> Pages -> click on "New page".
2. Give it a title and publish it (you can add content later).
3. If you want to disable comments on the page, click on "Options" from the right and select "Don't allow, hide existing" from the Reader comments options.
How to Create a Label Page
A label page is a page where all posts with a specific label will appear. Example: all the posts with the label Personal, will appear in the label page Personal.1. Open one of your posts in the editor and click on Labels on the right.
2. Add the label you want to the box and click on "Done".
How to Add Single Tabs to the Menus
1. Go to Layout -> open the Pages widget from the MENU section.2. If you want to add a static page as a single tab, select it from the left.
3. If you want to add a label page as a single tab, click on "+add external link" and fill out the fields:
3.1 Add the title of the tab in the Page Title field.
3.2 Add this as the link of the tab in the Web address (URL) field: /search/label/LabelName?max-results=8
Replace LabelName with the name of your label, but make sure it's written exactly the same way as the label in your post(s). For example, if the label in your posts is written with lowercase letters (personal) and the label in the menu is written differently (ex.: PERSONAL or Personal), Blogger will consider them two different label pages and no posts will appear in the label page from the menu.
How to Add Subpages to the Menus
1. Go to Layout -> open the Pages widget from the MENU section.2. Click on "+add external link" and fill out the fields:
2.1 Add the title of the tab in the Page Title field and add one underscore in front: _Subpage
2.1 Add the link to the Web address (URL) field (it can be the link to a static page, a label page or another blog/website).
Don't add any underscores to your labels or the titles of your static pages. Add the underscore only in the Page Title field in the Pages widget.
How to Add Subpages to Subpages
1. Go to Layout -> open the Pages widget from the MENU section.2. Click on "+add external link" and fill out the fields:
2.1 Add the title of the tab in the Page Title field and add two underscores in front: __Subpage
2.1 Add the link to the Web address (URL) field (it can be the link to a static page, a label page or another blog/website).
Add Your Links to the Social Icons
1. Go to Layout -> open the "Social Icons" widget from the SOCIAL section.2. Replace LINK with your social links - copy them directly from the browser (don't write them), otherwise the links will be broken.
3. You can remove the icons you don't need (remove the entire link from <a href=...> to </a>).
If you accidentally delete the code or the widget, here is the original code from the demo (add it to a HTML/JavaScript widget in the SOCIAL section):
<div class='socials'>FontAwesome is used for the icons, so if you need to add more, you can check out the available icons here.
<a href='LINK' target='_blank'><i class='fab fa-twitter'></i></a>
<a href='LINK' target='_blank'><i class='fab fa-pinterest'></i></a>
<a href='LINK' target='_blank'><i class='fab fa-instagram'></i></a>
<a href='LINK' target='_blank'><i class='fas fa-heart'></i></a>
<!-- Search Box | Do Not Remove -->
<div id="pop"><i class='fas fa-search'></i></div>
<div id="popup" style="display: none;">
<div class="button b-close"><i class='fas fa-times'></i></div>
<div class='search'>
<form action='/search' class='searchform' method='get'>
<input class='searchbox' name='q' placeholder='' type='text' value='Search...' vinput='' onblur='if(this.value=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value='';'/>
<button class="searchsubmit" type="submit" value=""><i class="fas fa-search"></i></button>
<div style='clear: both;'></div>
</form>
</div>
</div>
<!-- Search Box | Do Not Remove -->
</div>
The Slider
By default, the slider displays your most recent posts. Do this, if you want to select specific posts to be displayed:1. Add the label Featured (written exactly like this - only first letter should be capital) to the 2-5 posts you want to display in the slider.
2. Then go to Layout -> open the Slider widget -> replace the code that's inside now with this one:
<script type="text/javascript">3. If, at some point, you want to go back to displaying recent posts, replace the code in the Slider widget with this one:
var numposts = 5;
var displaymore = false;
var showpostdate = true;
var showpostsummary = false;
var numchars = 1;
</script>
<script type="text/javascript" src="/feeds/posts/default/-/Featured?published&alt=json-in-script&callback=autoslide"></script>
<script type="text/javascript">
var numposts = 5;
var displaymore = false;
var showpostdate = true;
var showpostsummary = false;
var numchars = 1;
</script>
<script type="text/javascript" src="/feeds/posts/default/?published&alt=json-in-script&callback=autoslide"></script>
If the slider doesn't work, do this:
1. Go to Settings -> Basic and scroll down to see if your blog is set to Public. If it's not, set it to Public. When the blog is private, the feed is inactive and the slider (and related posts widget) uses the feed to display posts.2. If the blog is public, but the slider is still not working, go to Settings -> Other -> check if Allow Blog Feed is set to Full. If it's not, set it to Full.
If, after trying the two options above, the slider is still not working, contact me (and include your blog link) and I'll check what's causing the problem.
Activate the Subscribe Widget
1. Go to Layout and open the "Subscribe to the blog" widget from the footer section.2. Click on "View stats and learn more.".
3. Click on your feed.
4. Go to Publicize (on top) -> Email subscriptions (on the left).
5. If it's not activated, click on "Activate" (or "Save").
6. Exit the page and save the widget.
Configure the Category Boxes
1. Go to Layout -> open the first Image widget from the CATEGORIES section.2. Upload your image (don't click on "Shrink to fit").
3. Add the title in the Title field.
4. Add the link in the Link field.
5. Save the widget.
+ Do this for all three Image widgets.
Configure the About Widget
1. Go to Layout -> open the "about me" widget from the footer section.2. Upload your image (don't click on "Shrink to fit").
3. Add the title in the Title field.
4. Add the caption in the Caption field (optional).
5. Add the link in the Link field (if you don't add a link, the "find out more" button will not appear).
6. Save the widget.
Change the Number of Posts Per Page & Change the Post Date Style
1. Go to Layout -> open the Blog Posts widget from the MAIN section.2. Change the number in the box in front of "Number of posts on main page" (4, 8, 12, etc).
3. Pick a post date style from the drop-down under "Post Page Options".
What to do if less posts than the number you've selected are displaying.
First, why is this happening? Blogger has a fixed size for index pages, so if your posts are too big, Blogger will display less posts per page than what is selected.How to fix it? Adding a jump break button to your posts will reduce their size on index pages. Open a post in the editor, click after the first image or the first image + some text (the second option is better) and click on the jump break button (screenshot).
2. Then go to Layout -> open the "the 'gram" widget from the footer.
3. And replace USERID and ACCESSTOKEN in these two fields:
userId: USERID,Your USERID is not your Instagram username. The USERID are the first characters before the first full stop of the access token. See the attached screenshot below for reference.
accessToken:"ACCESSTOKEN",
If you accidentally delete the code or the widget, here it is (add it to a HTML/JavaScript widget in the FULL section):
<script type='text/javascript'>//<![CDATA[
var feed = new Instafeed({
get:"user",
userId: 3886525122,
accessToken:"3886525122.1677ed0.876e60e889074c02966a59f4fd63bab1",
limit: 8,
resolution:"standard_resolution",
template: '<div id="instathumb"><a href="{{link}}" target="_blank"><div class="squarethumb" style="background:url({{image}})"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifUCrI3-lSHvDdQiW667LRC8cs3LxzBCYvMoR_7fVpAeV1r52xfGIgGJYWrLWOd30R4fo7x1LkiVTfbCd-nf2vNpW1l6KUW2KrMkLf0hAh5d397iPvBtfBf7z5Xd6b5piQwQZzJ9RDBEgg/s1600/TransparentInstagram.png" /></div><div class="fcdw"><div class="fcdo"><div class="fcdi"><i class="fab fa-instagram"></i></div></div></div></a></div>'
});
feed.run();
//]]></script>
<div id="instafeed"></div>
Add Contact Form to Contact Page
1. Go to your blog dashboard -> Pages -> click on "New page" -> create a contact page and publish it.2. Then open the contact page in the editor and click on "HTML" (next to "Compose").
3. Paste this in the HTML field:
<div class="widget ContactForm" id="ContactForm1">4. Save the changes.
<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" size="30" type="text" value="Name" vinput="" /><input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" size="30" type="text" value="Email" vinput="" /><textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea><input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Submit" /><br />
<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>
</form>
</div>
</div>
</div>