 |
| 2016 Responsive Blogger |
2016 Responsive Blogger Template 2019
Author:- ThemexposeDesigner:- Themexpose
2016 Responsive Blogger Template 2019 feature
2016 Responsive Blogger Template 2019 best for fashion, tech, the lifestyle website. Responsive, SEO, Dynamic Heading, 2 Column Style, Clean Typography, Minimalist, Homepage Share Button, Responsive Dropdown Navigation, Light Base Theme Color, Breadcrumbs, 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.
2016 Responsive Blogger Template 2019 Documentation
1.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 2016-Blogger-Template.xml
After click on "Upload" and wait to finish the 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 :
1.Logo Settings :
In your dashboard Select "Layout".
Upload Your Logo Header: In You Blog (Header), Click on "Edit" and applicate all settings below :
2.Settings Your Blog Posts :
In Blog Posts, Click on "Edit" and applicate all settings below :
Go to Blogger Dashboard > Template > "Edit HTML"
Now Search the below mention code ( ctrl + f ), then replace the # with your navigation urls.
- Main Navigation
<nav id='menu'>
<ul class='sf-menu superfish' id='nav'>
<li><a href=''>Home</a>
</li>
<li class='menu-item-has-children'><a href=''>About</a>
<ul class='sub-menu'>
<li><a href=''>Category</a></li>
<li><a href=''>Category</a></li>
<li><a href=''>Category</a></li>
<li><a href=''>Category</a></li>
<li><a href=''>Category</a></li>
</ul>
</li>
<li class='menu-item'><a href=''>Contact</a></li>
<li class='menu-item-has-children'><a href=''>Shop</a></li>
<li class='menu-item-has-children'><a href=''>Advertise</a></li>
</ul>
</nav>
<ul class='sf-menu superfish' id='nav'>
<li><a href=''>Home</a>
</li>
<li class='menu-item-has-children'><a href=''>About</a>
<ul class='sub-menu'>
<li><a href=''>Category</a></li>
<li><a href=''>Category</a></li>
<li><a href=''>Category</a></li>
<li><a href=''>Category</a></li>
<li><a href=''>Category</a></li>
</ul>
</li>
<li class='menu-item'><a href=''>Contact</a></li>
<li class='menu-item-has-children'><a href=''>Shop</a></li>
<li class='menu-item-has-children'><a href=''>Advertise</a></li>
</ul>
</nav>
- Page Navigation
Go to Blogger Dashboard > Template > "Edit HTML"
Now Search the below mention code ( ctrl + f ), then replace the perpage=7;(Post Per page) and numpages=7;( No. of pages in page navigation)
<script type='text/javascript'>
var pageNaviConf = {
perPage: 7,
numPages: 7,
firstText: "",
lastText: "",
nextText: "Next",
prevText: "Previous"
}
</script>
var pageNaviConf = {
perPage: 7,
numPages: 7,
firstText: "",
lastText: "",
nextText: "Next",
prevText: "Previous"
}
</script>
4.Post Page
- About Me
- Go to Blogger Dashboard > Layout > About me widget > click on the edit button
- Now copy the below mention code and paste into the widget.
- Change the image URL with author image URL, description, # with social URL
- Save It
<div class="author-widget custom-widget clearfix"><br />
<div class="author-cover-background clearfix" style="background-size: cover; background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-J5SNXm4QkyUC_szcyb55jJ6QcDWCLJ_apTmSwIS2ryPapW1MKMTue3NWGGwg3dTHCs5LwO7UsaRJdl_GPBKsHGl2fiXBYwDtg7-xXxriA7TaZT7AiiCQ_U0yh6CFroUJSN_giPnx9Bk/s1600/cvr-back.jpg');"><br />
<div class="author-avatar clearfix"><br />
<img alt="" class="img-circle" height="80" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidhtCw9rICIAmQIpQk0gaeedHcCxQ_kki0kl6knf79la2kc0GDrXXTv_24CG8-wtO0ys6M5EtTg8h7Tt-hgO3f3u1a-LKn4ePxGwob6rYYVfDFRNUDoQSEx2_scu4is7kEy7b9W5WH2js/s1600/avatar.jpg" width="80" / /><br />
</div><br />
</div><br />
<div class="author-info pos-center clearfix"><br />
<h2><a href="#">John Doe</a></h2>
<br /> <p>Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
</div><br /></div>
<div class="author-cover-background clearfix" style="background-size: cover; background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-J5SNXm4QkyUC_szcyb55jJ6QcDWCLJ_apTmSwIS2ryPapW1MKMTue3NWGGwg3dTHCs5LwO7UsaRJdl_GPBKsHGl2fiXBYwDtg7-xXxriA7TaZT7AiiCQ_U0yh6CFroUJSN_giPnx9Bk/s1600/cvr-back.jpg');"><br />
<div class="author-avatar clearfix"><br />
<img alt="" class="img-circle" height="80" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidhtCw9rICIAmQIpQk0gaeedHcCxQ_kki0kl6knf79la2kc0GDrXXTv_24CG8-wtO0ys6M5EtTg8h7Tt-hgO3f3u1a-LKn4ePxGwob6rYYVfDFRNUDoQSEx2_scu4is7kEy7b9W5WH2js/s1600/avatar.jpg" width="80" / /><br />
</div><br />
</div><br />
<div class="author-info pos-center clearfix"><br />
<h2><a href="#">John Doe</a></h2>
<br /> <p>Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
</div><br /></div>
- Instagram Widget
Go to Blogger Dashboard > Layout > Instagram widget > click on edit button > Edit Html
Now copy the below mention code and paste into the 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>
<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
Sign In and Follow the steps
you need the access token for an Instagram widget to work Go to this url-> http://instagram.pixelunion.net/ Generate access token
Then You'll be given an access token like this 1531863919.1677ed0.23d238bc564249e799095d060c750218
Follow The next step
Add Instagram User ID:
- Sidebar Social widget
To Edit Sidebar Social icons in this theme you can follow these steps:
- On the Blogger Dashboard Click Layout
- Sidebar Social Widget Click Edit button
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
6. ShortCodes
/*----success message----*/
<div class="alert-message success">
success message : You successfully read this important message. <i class="fa fa-check-circle"></i>
</div>
/*----Alert message-----*/
<div class="alert-message alert">
Alert message : This alert needs your attention. <i class="fa fa-info-circle"></i>
</div>
/*----Warning message-----*/
<div class="alert-message warning">
Warning message : Warning! Best check yo self. <i class="fa fa-exclamation-triangle"></i>
</div>
/*----Error message-----*/
<div class="alert-message error">
Error message : Oh snap! Change a few things up. <i class="fa fa-exclamation-circle"></i>
</div>
<div class="alert-message success">
success message : You successfully read this important message. <i class="fa fa-check-circle"></i>
</div>
/*----Alert message-----*/
<div class="alert-message alert">
Alert message : This alert needs your attention. <i class="fa fa-info-circle"></i>
</div>
/*----Warning message-----*/
<div class="alert-message warning">
Warning message : Warning! Best check yo self. <i class="fa fa-exclamation-triangle"></i>
</div>
/*----Error message-----*/
<div class="alert-message error">
Error message : Oh snap! Change a few things up. <i class="fa fa-exclamation-circle"></i>
</div>
7.Mobile Version ( Responsive Design Option )
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 the default, Blogger will use its own template for your 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.
XEM THÊM
- Basil Portfolio Blogger Template
Basil Portfolio Blogger Template
Blogger Template on KaviTechno
BLOGGER TEMPLATE INFO
Author:
- Averie Blogger Template 2019 Free Download Blogger Templates
Averie Blogger Template
Author:- SoraTemplates
Designer:- SoraTemplates
Demo View Now Download
- Absolute Blogger Template 2019 Free Download Blogger Templates
Absolute Blogger Template 2019
Author:- SoraTemplates
Designer:- SoraTemplates
Demo View Now D
- FlexZine Blogger Template 2019 Free Download Blogger Templates
FlexZine Blogger Template
Author:- SoraTemplates
Designer:- SoraTemplates
Demo View Now Downlo
- uBook Responsive Blogger Template 2019 Free Download Blogger Templates
uBook Responsive Blogger Template
Author:- SoraTemplates
Designer:- SoraTemplates
Demo View N
- 1800 Blogger Template 2019 Free Download Blogger Templates
1800 Blogger Template 2019
1800 Blogger Template 2019 Detail
Author:- veethemes
Designer:- veeth
2016 Responsive Blogger Template 2019 Free Download Blogger Templates
4/
5
Oleh
Kavi
