Getting Started

Theme Info

Created: 05/07/2016

Thank you for Downloading my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my contact page. Thanks so much!

If you have any problem about this template then please visit ThemeXpose.com

Note : Premium and lifetime support only delivered to Full version buyers.

But this is only free version (Free Template Will Contain Non Removable Credits and limited features).

It is forbidden to remove the credit link due to the elimination of the credit links will make your blog to redirect ThemeXpose Official site. For those who want to remove can pay $ 9.95.

Buy our Full Version and get:

1.Remove Footer credits

2.One time payment

3.For Unlimited Domains

4.Lifetime Premium Support

5.No Encrypted Scripts

6.Lifetime Template Updates

7.And Much More....

Buy now from ThemeXpose.com

Sugar is a clean and responsive Blogger template with Responsive layout and suited for all blog. It's design with minimalist and simple color combination, clean and modern look, SEO Optimized, and has been built by using some of the most popular current design trends.

Features

  • Responsive
  • SEO
  • Dynamic Heading
  • 2 Column Style
  • Clean Typography
  • Minimalist
  • Homepage Share Button
  • Responsive Dropdown Navigation
  • Light Base Theme Color
  • Related Posts with Thumb
  • Search Box
  • Social Share Button
  • Numbered Page Navigation
  • Custom 404 Page
  • Smooth Scroll back To Top
  • Custom Subscribe Box Widget
  • Multi Author Box
  • And more..

Installation

When you are ready to install a theme, you must first upload the theme file. The theme files can be uploaded in two ways:

  • Blogger Upload : Go to your dashboard > Template > Backup / Restore > Upload the .xml.
  • Copy And Paste : By open your template by Notepad and copy the entire text and paste it into Template in your dashboard.

Now click on "Browse" and select from your drive Sugar-Blogger-Template.xml
After click on "Upload" and wait to finish upload.

Or click on "Edit HTML"

And open .xml file by Notepad and select all "Ctrl+A", and copy entire text and paste it here :


Customize Theme

To these phase we will customize the template and install some widgets and add some Html.

Header Options

Logo Settings :

In your dashboard Select "Layout".

Upload Your Logo Header : In You Blog (Header), Click on "Edit" and applicate all settings below :

To Edit Top Menu in this theme you can follow this step:

1. Go to -> Blogger Dashboard- >layout -> Pages - > press edit button.

Main Navigation :

2. Now choose ( check mark ) those pages you want to show on menu and press save. You can also add the external link just press ADD external Link and add you link then save it..


SEO Meta Tag

Go to Blogger Dashboard > Template > "Edit HTML"

Now Search the below mention code ( ctrl + f ), then replace the xxxxx width your Meta tags.

<meta content='xxxxx' name='keywords'/>
<link href='https://plus.google.com/xxxxx/posts' rel='publisher'/>
<link href='https://plus.google.com/xxxxx/about' rel='author'/>
<link href='https://plus.google.com/xxxxx' rel='me'/>
<meta content='xxxxx' name='google-site-verification'/>
<meta content='xxxxx' name='msvalidate.01'/>
<meta content='xxxxx' name='alexaVerifyID'/>
<meta content='xxxxx' name='Author'/>
<meta content='xxxxx' property='fb:app_id'/>
<meta content='xxxxx' property='fb:admins'/>
<meta content='xxxxx' name='twitter:site'/>
<meta content='xxxxx' name='twitter:creator'/>

Post Page

How to Set Date On Post

Go to Blogger Dashboard > Settings > Language and Formatting > Formatting > Timestamp Format > set it to date instead of time

Save it


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.


Widget

About Me

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

<div class="textwidget">
    <p>
        <img max-width="300" src="http://4.bp.blogspot.com/-9gn_LBV602M/VbNkAXM7TGI/AAAAAAAAGUs/1Ts7hsw2iqw/s1600/travel04.jpg" style="margin-bottom: 10px;" / />
    </p>
    <p>I'm 
        <strong>Rabeca</strong> - I'm a Sneakeraholic. I'm passionate at Beauty, Travel, Fashion. This blog is a place where I want to share all the things I love to you! Keep
    </p>
    <center>
        <p></p>
    </center>
</div>

Pinterest Widget

If right pane doesn't have a searchbar then you can add it by yourself:

Step 1: Goto Layout section, click on the edit button of Pinterest widget.

Step 2: Select HTML/Javascript widget.

Step 3: Paste the below code.

<p style='text-align:center'><a href='https://www.pinterest.com/#' target='_blank'>Follow @Beauty Templates</a><div id='pinterest-gallery'></div><script>var thumbnailCount = 6;var username = 'greyandscout';</script></p><div class="clear"/></div>

Change the Account URL and Username with your details




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: 10008029,
  limit:16,
  sortBy:'random',
accessToken: '1531863919.1677ed0.23d238bc564249e799095d060c750218',
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 Access Token

you need access token for instagram widget to work Go to this url-> http://instagram.pixelunion.net/ Generate access token

Sign In and Follow the steps

Then You'll be given an access token like this 1531863919.1677ed0.23d238bc564249e799095d060c750218

Follow The next step

Add Instagram User ID:


Top Social widget

To Edit Top Social icons in this theme you can follow these steps:
  1. On Blogger Dashbord Click Layout
  2. Top Social Widget Click Edit button
  3. Add your social media name and link >> ADD LINK >> Once you added all the links SAVE.

Use http:// or https:// where applicable.

AVAILABLE ICONS: Behance Facebook Twitter Bloglovin Dribbble Flickr GooglePlus Instagram Linkedin Pinterest Vimeo Youtube Vine Soundcloud Goodreads Deviantart Foursquare Reddit Tumblr Spotify Twitch Vk Mailto shop Rss Etsy


Sidebar Social widget

To Edit Sidebar Social icons in this theme you can follow these steps:
  1. On Blogger Dashbord Click Layout
  2. Sidebar Social Widget Click Edit button
  3. Add your social media name and link >> ADD LINK >> Once you added all the links SAVE.

Use http:// or https:// where applicable.

AVAILABLE ICONS: Behance Facebook Twitter Bloglovin Dribbble Flickr GooglePlus Instagram Linkedin Pinterest Vimeo Youtube Vine Soundcloud Goodreads Deviantart Foursquare Reddit Tumblr Spotify Twitch Vk Mailto shop Rss Etsy


Footer Social icons widget

Add top Social Links

You Can See that header area have Social Icons Collection. To Edit Social Icon in this theme you can follow this step:

1. Go to -> Blogger Dashboard- >layout -> top social- > press edit button.

2. NOw copy and paste of below mention code, replace the "#" with your link to your social network accounts.

<a href='' target='_blank'>
<i class='fa fa-facebook'> </i>
<span>Facebook</span>
</a>		
<a href='' target='_blank'>
<i class='fa fa-twitter'></i>
 <span>Twitter</span>
 </a>		
 <a href='' target='_blank'>
 <i class='fa fa-instagram'></i>
 <span>Instagram</span>
 </a>		
 <a href='' target='_blank'>
 <i class='fa fa-pinterest'></i>
 <span>Pinterest</span>
 </a>	
 <a href='' target='_blank'>
 <i class='fa fa-heart'></i>
 <span>Bloglovin</span>
 </a>	
 <a href='' target='_blank'>
 <i class='fa fa-google-plus'></i> 
 <span>Google Plus</span>
 </a>		
 <a href='' target='_blank'>
 <i class='fa fa-tumblr'></i>
 <span>Tumblr</span>
 </a>

Subscribe widget

How to add Subscribe widget in footer

1. Go to -> Blogger Dashboard- >layout -> Subscribe- > press edit button.

Copy paste the below mention code and save it
<div class='subscribe-box'>
   <div>
      <div class='block'>
         <div class='caption'>
            <img src='http://3.bp.blogspot.com/-tRlqsjMVnOU/VUERoOpwWDI/AAAAAAAAFBQ/F6w9X-uf07M/s1600/sketch-subscribe.png'/>
         </div>
         <div class='form'>
            <form action='https://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('https://feedburner.google.com/fb/a/mailverify?uri=feedburner_id', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
               <input class='email' name='email' placeholder='Your Email Address' type='text'/>
               <input name='uri' type='hidden' value='feedburner_id'/>
               <input name='loc' type='hidden' value='en_US'/>
               <input class='btn' type='submit' value='Subscribe'/>
            </form>
         </div>
         <!--block-->
      </div>
   </div>
</div>

4. Change '

feedburner_id
' word with your feedburner id


Change the Main Color of the Template

Go to Blogger Dashboard > Template > Customize

Now Click on Advance > Main color -> change color according to your need and then press apply button.


Mobile Version ( Responsive Design Option )

Mobile Responsive

After you apply mobile version for this template, Color changing option will not work. This is official bug of Blogger. So, please make sure, you used Color changing option before do this step.

As default, Blogger will use its own template for you blog on mobile. So if you want to use Fashion template on mobile devices, please enable it first.

Access your Template menu and click on Gear button of Mobile template.

In Choose mobile template window, check "No. Show desktop template on mobile devices." option, then click Save button.


Jet SEO tools

Free SEO tools

Check out these Free SEO tool service and get more traffic on your website - click here

Sugar free version - Themexpose.com

Top