Rosemary Blogger Template Documentation

By | August 17, 2016

Rosemary Blogger Template Installation Documentation, a step to step guide to help you out to set up your blog easy way.

First of all, Thank you for Downloading our template if you haven’t done yet you can get it from here : Rosemary Blogger Template . You check the live demo through the button below and also Please Read this documentation carefully in order to set up your blog and please note that there’s no support for free users.

We also Provide Blogger Template Installation Service. Our Installation service gives you a simple, quick and secure way of getting your template setup without hassle. We have created a service package that gives you everything you need to have your theme and your content setup in no time.

Live Demo   Installation service

Blogger Template Installation Steps:-

1. Backup & Uploading

  1. Unzip the Template.zip file.
  2. On Blogger Dashboard Click Template.
  3. Click on Download Full Template to keep your old template.
  4. Click Browse… button. Find where the “Rosemary-xxxx-version.xml” file location.
  5. Then Click Upload.
  6. Edit mobile Preview. (follow images)

1-768x404

 

2. Blog Setting

After installing the theme, there are minimum settings to make all widgets work fine in this template.

  1. On Blogger Dashboard Click Settings.
  2. Click Other.
  3. In Site Feed > Allow Blog Feed Choose Full.
  4. Then Click Save settings.

 

4-768x481

 

3. Logo Setup

1. In your dashboard Select “Layout”.

2. Upload Your Logo Header : In You Blog (Header), Click on “Edit” and applicate all settings below :

10

 

4. Navigation Menu

  4.1 Top Menu Setup ( navigation-wrapper )

5

  • On Blogger Dashboard Click Layout.
  • Click Edit on Top Navigation Widget.
  • Change it according to your needs. Add name of the link Name and link url then click add Link
  • Click Save.
  • Change the location of menu item using arrow down and arrow up Icon
  • For More Information- Watch Video Below

6

 

4.2 Main Menu/DropDown

Screenshot_1

 

  • On Blogger Dashboard Click Layout.
  • Click Edit on Main Menu Widget.
  • Change it according to your needs. Add name of the link Name and link url then click add Link
  • Click Save.
  • To Add sub menu Item. You have to add “_”(underscore without quotes) before Menu item Link (example :  _Left Sidebar)
  • Change the location of menu item using arrow down and arrow up Icon
  • For More Information- Watch Video Below

6

 

 

5. Top Social  / Follow Us (Sidebar)/ Footer Social

Access your blog Layout > click Edit link on Top Social  Follow Us (Sidebar) /Footer Social widget.
Social Names:   facebook, twitter, gplus, bloglovin, rss, youtube, skype, stumbleupon, tumblr, vine, stack-overflow, linkedin, dribbble, soundcloud, behance, digg, instagram, pinterest, delicious, codepen 

7

 

 Example: 

For Example if you have to add “facebook” icon then just add facebook in name of New site name section and below add url of that particular site.

 

6. Setup the Slider

Slider Works automatically with latest post.

But you need to make sure few things :

  1.  Your Blog Must be public from settings
  2. Your Blog Feed Set to be full from settings -> other -> blog feed.
  3. Your blog post has at least One label in you latest (5) posts.

Atleast one label example : Sport is just an example.

13

7. Widget

7.1 About Me

Screenshot_2

 

1. Go to Blogger Dashboard > Layout > About me widget > click on edit button > Edit Html

2. Now copy the below mention code and paste into widget.

3. Change the image url with author image url, description

4. Save It

 

<center><div class="about-me-widget-wrapper">
<img src="https://2.bp.blogspot.com/-SkODpMAWeUo/V6WY0-6ICDI/AAAAAAAAIpg/fCfORHeWv6IJ677nlLgF0TRv6MeO848tgCLcB/s1600/about-widget.jpg" alt="About [span]me[/span]" /> <br/>
<div class="about-me-title">Hello, my name is Olivia.</div><div class="about-me-text"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec.</p></div> <div class="signature-image"><img src="https://2.bp.blogspot.com/-paRvU5CilK8/V6XNwUQH0jI/AAAAAAAAIqI/moVyDoWKOoE4fm_KYSVNPkEODaQrrOuxQCLcB/s1600/signature.png" /></div>
<div class="clear"></div>
</div></center>

7.2 Pinterest Widget

 

1. Go to Blogger Dashboard > Layout > Pinterest widget > click on edit button > Edit Html

2. Now copy the below mention code and paste into widget.

3. Change the user name and thumbnailCount according to your need

4. Save It

 

<div id="pinterest-gallery"></div><script>var thumbnailCount = 6;var username = 'greyandscout';</script><p></p><div class="clear"></div>

 

7.3 Instagram Widget

Access your blog Layout > click Edit link on Footer Instagram widget

1. Go to Blogger Dashboard > Layout > Instagram widget > click on edit button > Edit Html
2. Now copy the below mention code and paste into widget.


<div id='instafeed' />
<script type='text/javascript'>//<![CDATA[

var feed = new Instafeed({
get: ‘user’,
userId: 3541708255,
limit:8,
sortBy:’random’,
accessToken: ‘3541708255.1677ed0.5e79fa74dcac4a52bea0ebba51eacb88′,
template: ‘<li><a href=”{{link}}” target=”_blank”><img src=”{{image}}” /><div class=”insta-likes”><div style=”display: table; vertical-align: middle; height: 100%; width: 100%;”><span style=”display: table-cell; vertical-align: middle; height: 100%; width: 100%;”>{{likes}} <i class=”fa fa-heart”></i><br/>{{comments}} <i class=”fa fa-comment”></i></span></div></div></a></li>’,
resolution: ‘standard_resolution’
});
feed.run();

//]]>
</script></div>

Generate your Instagram Access token by clicking on button from http://www.jetseotools.com/instagram

16

Now enter the access token here in Layout:

accesstoken

ALSO CHANGE THE USERID with yours to show your INSTAGRAM PHOTOS.

access

 

10. Theme Customization

Access your blog Template > click Customize.

Here you can change the background, and apply pre-defined colors

Clicking Advanced You will see the official option to change the Main Color

GCeJQD2

Leave a Reply

Your email address will not be published. Required fields are marked *