Created: 10/09/2015
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 $ 6.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
Personal 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.
When you are ready to install a theme, you must first upload the theme file. The theme files can be uploaded in two ways:
Now click on "Browse" and select from your drive Personal-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 :
To these phase we will customize the template and install some widgets and add some Html.
In your dashboard Select "Layout".
Upload Your Logo Header : In You Blog (Header), Click on "Edit" and applicate all settings below :
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 class='pi-navigation' data-menu-responsive='992'>
<div class='container'>
<div class='open-menu'>
<span class='item item-1'/>
<span class='item item-2'/>
<span class='item item-3'/>
</div>
<div class='close-menu'/>
<ul class='navlist'>
<li><a href='/'>Home</a></li>
<li><a href='/p/about.html'>About us</a></li>
<li><a href='#'>Drop Down</a>
<ul class='sub-menu'>
<li><a href='/search/label/Shooter'>Minimal</a></li>
<li><a href='#'>Sub Menu with Subs</a>
<ul class='sub-menu'>
<li><a href='#'>Feminist</a></li>
<li><a href='#'>Persona</a></li>
<li><a href='#'>Expose</a></li>
</ul>
</li>
<li><a href='#'>Powergame</a></li>
<li><a href='#'>Fashion</a></li>
</ul>
</li>
<li><a href='#'>Restaurant</a></li>
<li class='megamenu col-5'><a href='#'>Mega menu</a>
<script class='java' type='text/javascript'>//<![CDATA[
var numposts = 5;
var outerclass = "sub-menu";
var starttag = "<li>";
var endtag = "</li>";
var intag = "div";
//]]>
</script>
<script class='java' src='/feeds/posts/default?alt=json-in-script&callback=labelthumbs' type='text/javascript'/>
</li>
<li><a href='#'>Download</a></li>
</ul>
<div class='search-box'>
<span class='icon-search'>
<i class='fa fa-search'/>
</span>
<form action='/search' method='get'>
<input name='q' type='search' value='Search and hit enter'/>
</form>
</div>
</div>
</nav>
In above you will see this below mention code , that is for MEGA MENU
<script class='java' type='text/javascript'>//<![CDATA[ var numposts = 5; var outerclass = "sub-menu"; var starttag = "<li>"; var endtag = "</li>"; var intag = "div"; //]]></script> <script class='java' src='/feeds/posts/default/-/LABEL?alt=json-in-script&callback=labelthumbs' type='text/javascript'/>
1. Change the word LABEL with your label for posts
2. Change the number "5" inside numposts = 5; with your needed number of posts
Page Navigation :
Go to Blogger Dashboard > Template > "Edit HTML"
Now Search the below mention code ( ctrl + f ), then replace the pageCount=9;(Post Per page) and displayPageNum=3;( No. of pages in page navigation)
var pageCount=9; var displayPageNum=3; var upPageWord ="<i class='fa fa-angle-left'></i>"; var downPageWord ="<i class='fa fa-angle-right'></i>";
1. Go to Blogger Dashboard > Layout > About me widget > click on edit button
2. Now copy the below mention code and paste into widget.
3. Change the image url with author image url, description, # with social url
4. Save It
<img src="http://1.bp.blogspot.com/-zpDNZacsDcI/VfBSCr_qORI/AAAAAAAAG6U/gHTIJ6z5_Sg/s1600/profile.jpg"/><h3>Jessica Jackson</h3><p> A short description about yourself goes here. Lorem ipsum dolor sit amet. Adipisicing elit, sed do eiusmod tempor.</p>
Go to Blogger Dashboard > Template > "Edit HTML"
Now Search the below mention code ( ctrl + f ), then replace the # with your socail urls.
<div class='share-box'> <a class='social-facebook' href='#' target='_blank'><i class='fa fa-facebook'/></a> <a class='social-twitter' href='#' target='_blank'><i class='fa fa-twitter'/></a> <a class='social-gplus' href='#' target='_blank'><i class='fa fa-google-plus'/></a> <a class='social-pinterest' href='#' target='_blank'><i class='fa fa-pinterest'/></a> <a class='social-youtube' href='#' target='_blank'><i class='fa fa-youtube'/></a> <a class='social-vimeo' href='#' target='_blank'><i class='fa fa-vimeo-square'/></a> <a class='social-instagram' href='#' target='_blank'><i class='fa fa-instagram'/></a>
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>
| Note | just change the # with your instagram url |
| 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: |
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.
