- Add Social Links - top
You Can See that Header area have Social Icons Collection. To Edit Social Icon in this theme you can follow this step:
1. On Blogger Dashbord Click layout
2. Click Edit social icons widget
3. Now copy the below code and paste into widget :
<ul class="social">
<li><a href="#" target="_blank">
<i class="fa fa-pinterest"></i>
</a>
</li>
<li><a href="#" target="_blank">
<i class="fa fa-instagram"></i>
</a>
</li>
<li><a href="#" target="_blank">
<i class="fa fa-twitter"></i>
</a>
</li>
<li><a href="#" target="_blank">
<i class="fa fa-facebook"></i>
</a>
</li>
<li><a href="#" target="_blank">
<i class="fa fa-flickr"></i>
</a>
</li>
<li><a href="#" target="_blank">
<i class="fa fa-dribbble"></i>
</a>
</li>
<li><a href="#" target="_blank">
<i class="fa fa-rss"></i>
</a>
</li>
<li><a href="#" target="_blank">
<i class="fa fa-youtube"></i>
</a>
</li>
<li><a href="#" target="_blank">
<i class="fa fa-skype"></i>
</a>
</li>
</ul>
4. Change Links or # with yours Social URL link
- Upload Logo- top
Access your blog Layout > click Edit link on Header widget
In Configure Header window, input you Blog Title and Blog Description. If you want to upload your image logo, make sure checked Instead of title and description, then click Choose File and locate your logo file. And click Save button to finish.
- Setting up the menu - top
To Edit Left Menu in this theme you can follow this step:
- On Blogger Dashbord Click Template
- Click Edit HTML
- (Top Menu) Scroll down and Find this Code :
<nav class='pushmenu pushmenu-left'>
<h3>
Menu
</h3>
<a href='#'>
Fashion
</a>
<a href='#'>
Trendy
</a>
<div id='accordion'>
<ul>
<li>
<h3>
<span/>
Drop Down
</h3>
<ul>
<li>
<a href='#'>
Abstract
</a>
</li>
<li>
<a href='#'>
Model
</a>
</li>
<li>
<a href='#'>
Techo
</a>
</li>
<li>
<a href='#'>
Options
</a>
</li>
</ul>
</li>
<li>
<a href='#'>
Photography
</a>
<a href='#'>
Pictures
</a>
<a href='#'>
Product
</a>
<h3>
<span/>
Drop Menu
</h3>
<ul>
<li>
<a href='#'>
Crystal
</a>
</li>
<li>
<a href='#'>
Digital
</a>
</li>
<li>
<a href='#'>
Graphs
</a>
</li>
<li>
<a href='#'>
Settings
</a>
</li>
</ul>
</li>
<!-- will add more later -->
</ul>
</div>
</nav>
- Change # with yours URL link
To Edit Main Menu in this theme you can follow this step:
- On Blogger Dashbord Click Template
- Click Edit HTML
- (Top Menu) Scroll down and Find this Code :
<div id='menutop' style='float:right'>
<ul>
<li class='active'>
<a href='/'>
<span>
Home
</span>
</a>
</li>
<li class='menu-sub'>
<a href='#'>
<span>
Digital Art
</span>
</a>
<ul>
<li class='menu-sub'>
<a href='#'>
<span>
Pics
</span>
</a>
<ul>
<li>
<a href='#'>
<span>
SEO 1
</span>
</a>
</li>
<li class='last'>
<a href='#'>
<span>
SEO 2
</span>
</a>
</li>
</ul>
</li>
<li class='menu-sub'>
<a href='#'>
<span>
CSS
</span>
</a>
<ul>
<li>
<a href='#'>
<span>
CSS 1
</span>
</a>
</li>
<li>
<a href='#'>
<span>
CSS 2
</span>
</a>
</li>
<li>
<a href='#'>
<span>
CSS 3
</span>
</a>
</li>
<li>
<a href='#'>
<span>
CSS 4
</span>
</a>
</li>
<li class='last'>
<a href='#'>
<span>
CSS 5
</span>
</a>
</li>
</ul>
</li>
<li class='menu-sub'>
<a href='#'>
<span>
Jquery
</span>
</a>
<ul>
<li>
<a href='#'>
<span>
Jquery 1
</span>
</a>
</li>
<li class='last'>
<a href='#'>
<span>
Jquery 2
</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class='menu-sub'>
<a href='#'>
<span>
Fashion
</span>
</a>
<ul>
<li class='menu-sub'>
<a href='#'>
<span>
Product 1
</span>
</a>
<ul>
<li>
<a href='#'>
<span>
Sub Item
</span>
</a>
</li>
<li class='last'>
<a href='#'>
<span>
Sub Item
</span>
</a>
</li>
</ul>
</li>
<li class='menu-sub'>
<a href='#'>
<span>
Product 2
</span>
</a>
<ul>
<li>
<a href='#'>
<span>
Sub Item
</span>
</a>
</li>
<li class='last'>
<a href='#'>
<span>
Sub Item
</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href='#'>
<span>
Photography
</span>
</a>
</li>
<li class='last'>
<a href='#'>
<span>
Design
</span>
</a>
</li>
</ul>
</div>
- Change # with yours URL link
- Enable Mobile Template - top
After you apply mobile version for this template, Advance Editor will be disabled. This is official bug of Blogger. So, please make sure, you used Advance Editor to change all settings you want before do this step.
As default, Blogger will use its own template for you blog on mobile. So if you want to use Fabulous template on mobile devices, please enable it first.
Access your
Template menu and click on
Gear button of Mobile template.
