Rosamund Documentation

Documentation for the Rosamund template. This template can be purchased from Etsy.

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 Rosamund.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-PRIMARY, MENU-SECONDARY or FOOTER-MENU sections.
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=9
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-PRIMARY or MENU-SECONDARY sections.
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-PRIMARY or MENU-SECONDARY sections.
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'>
<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-facebook-f'></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>
<a href='LINK' target='_blank'><i class='far fa-envelope'></i></a>
</div>
FontAwesome is used for the icons, so if you need to add more, you can check out the available icons here.

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">
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>
3. If, at some point, you want to go back to displaying recent posts, replace the code in the Slider widget with this one:
<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.

Configure the Subscribe Widget

Activate the Subscribe Widget

1. Go to Layout and open the "Subscribe" widget from the NEWSLETTER 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.

Change the Title & Text

1. Open the "Join in on the adventure!" widget.
2. Change the title in the Title field.
3. Add text to the Content box.

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 caption in the Caption field (optional).
5. Add the link in the Link field.
6. Save the widget.
+ Do this for all four Image widgets.

Configure the About Widget

1. Go to Layout -> open the "About" widget from the ABOUT 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 "learn more about me" 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).

The "Shop My Favorites" Widget

This does not come with the template. You can use ShopStyleCollective to generate gadgets like this (you can also add them to your posts and to the sidebar/footer).

Sidebar Widgets

Keep in mind that only the widgets displayed in the template's demo are customized.

About ("Meet Rosamund") Widget

1. Go to Layout -> open the "Meet Rosamund." gadget from the sidebar.
2. Upload your image.
3. You can change the title from "Meet Rosamund." to something else.
4. To add text about yourself or your blog, add it to the Caption box.
5. If you want the image to be a link to your About page or somewhere else, add the url in the Link box.

Social Icons

The code for the sidebar social icons is the same as the one from the menu social icons - so if you have already added your social links there, just copy the code and replace the one in the sidebar with it.

Activate the Subscribe Widget

1. Go to Layout and open the "Are you in, pal?" widget from the sidebar.
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 Active.
6. Exit the page and save the widget.
The HTML of the widget has been edited. If it's removed and re-added, it will NOT look the same as the widget from the demo. If this happens, you can a) re-upload the template or b), if you have made changes that you don't want to lose, contact me so I can re-add it.

Popular Posts

1. Open the Popular Posts widget (you can change the title, too).
2. Select the amount of posts you want to display from the drop-down (the default is 10, but 3-4 is the best).
3. Save the widget.
The HTML of the widget has been edited. If it's removed and re-added, it will NOT look the same as the widget from the demo. If this happens, you can a) re-upload the template or b), if you have made changes that you don't want to lose, contact me so I can re-add it.

Select a Featured Post

1. Go to Layout and open the Featured Post widget.
2. Select the post you'd like to show.
3. Save the widget.

Search Box

The search box should already be on your blog when you upload the template. However, if you have removed the widget and want to re-add it, here's the code:
<div class='search'>
<form action='/search' class='searchform' method='get'>
<input class='searchbox' name='q' placeholder='' type='text' value='I want to find...' vinput='' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;'/>
<input class="searchsubmit" type="submit" value="Search"/>
<div style='clear: both;'></div>
</form>
</div>

Instagram

1. Make sure you are logged into the Instagram account you want to use and go to instagram.pixelunion.net to generate an access token.
2. Then go to Layout -> open the "Latest Instagrams" widget from the footer.
3. And replace USERID and ACCESSTOKEN in these two fields:
userId: USERID,
accessToken:"ACCESSTOKEN",
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.
If your Instagram widget stops working at some point, generate a new access token from instagram.pixelunion.net and replace the old one. Don't replace the User ID, since it's always the same (if you're using the same account).
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: USERID,
accessToken:"ACCESSTOKEN",
limit: 8,
resolution:"standard_resolution",
template: '<div class="instathumb"><a href="{{link}}" target="_blank"><div class="squarethumb" style="background:url({{image}})"><img src="https://4.bp.blogspot.com/-OtURZJ2BisI/WljDhG4scII/AAAAAAAAHCA/paOMFNStkysnIOTbzo4wVakC-heU0UfRwCLcBGAs/s1600/TransparentInstagram.png" /></div><div class="fcdw"><div class="fcdo"><div class="fcdi"><i class="fas fa-heart"></i>{{likes}} <i class="fas fa-comment"></i>{{comments}}</div></div></div></a></div>'
});
feed.run();
//]]></script>
<div id="instafeed"></div>