MINIMA COLORED 2.1 DOCUMENTATION

Getting Started

Theme Info

Created: 16/07/2014
Latest Update: 07/10/2014

Minima Colored is a simple free Blogger template with Responsive layout and suited for all blog. It's design with 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 Design
  • SEO
  • Custom Threaded Comment
  • Recent Post Slider
  • 2 Column
  • White Base Theme Color
  • Responsive Ads ready
  • Breadcrumbs
  • Related Posts with Thumb
  • Search Box
  • Share Button
  • Sticky Top Menu
  • Main Dropdown Menu
  • Numbered Page Navigation
  • Top Social Bookmark
  • Recent Comment
  • Custom 404 Page
  • Smooth back To Top Button
  • Better Print Page Layout
  • Author Box
  • Custom Contact Form Design
  • and more..

Installation

  • 1. Log in to your Blogger dashboard and go to Layout > Edit HTML.
  • 2. Please back up your old template in case you decide to use it again. To do this, click on the "download full template" link and save the file.
  • 3. Then, browse the location of XML template that you've just downloaded and press "upload".

    • Customize Theme

    First Go to Blogger > Template > "Edit HTML"

    Find and change all # text with yours.

    Top Navigation : 
    <!-- Main menu -->
            <ul>
              <li class='home1'><a expr:href='data:blog.homepageUrl'><i class='fa fa-home'/> Home</a></li>
              <li><a href='#'><i class='fa fa-trophy'/> Advertise</a></li>
              <li><a href='#'><i class='fa fa-sitemap'/> Sitemap</a></li>
              <li><a href='#'><i class='fa fa-cog fa-spin'/> About</a></li>
<li class='sorting-01 facebook' title='Follow us on Facebook'><a href='#'><i class='fa fa-facebook'/><span class='inv'/></a></li>
<li class='sorting-02 twitter' title='Follow us on Twitter'><a href='#'><i class='fa fa-twitter'/><span class='inv'/></a></li>
<li class='sorting-03 googleplus' title='Follow us on Google+'><a href='#'><i class='fa fa-google-plus'/><span class='inv'/></a></li>
<li class='sorting-06 linkedin' title='Follow us on LinkedIn'><a href='#'><i class='fa fa-linkedin'/><span class='inv'/></a></li>
<li class='sorting-04 youtube' title='Follow us on Youtube'><a href='#'><i class='fa fa-youtube'/><span class='inv'/></a></li>
            </ul>
    Main Navigation : 
    <nav id='menu'>
<input type='checkbox'/>
<label/>
<ul>
  <li class='homers'><a href='/'><i class='fa fa-home fa-2x fa-fw'/></a></li>
<li><a href='#'>Static Page</a></li>
<li><a class='ai' href='#'>Sub Menu</a>
<ul class='menus'>
<li><a href='#'>Menu a</a></li>
<li><a href='#'>Menu b</a></li>
<li><a href='#'>Menu c</a></li>
</ul>
</li>
<li><a href='#'>Button</a></li>
<li><a class='ai' href='#'>Sub Menu</a>
<ul class='menus'>
<li><a href='#'>Menu a</a></li>
<li><a href='#'>Menu b</a></li>
<li><a href='#'>Menu c</a></li>
</ul>
</li>
<li><a href='#'>Error</a></li>
<li class='searchbutton'/>
</ul>
</nav>
    Page Navigation :

    Find and change the value of perPage: 5 and numPages: 5

    <b:includable id='page-navi'>
    <div class='pagenav'>
        <script type='text/javascript'>
        var pageNaviConf = {
            perPage: 5,
            numPages: 5,
            firstText: &quot;First&quot;,
            lastText: &quot;Last&quot;,
            nextText: &quot;Next&quot;,
            prevText: &quot;Prev&quot;
        }
        </script>

    Meta Tag

    First Go to Blogger > Template > "Edit HTML"

    Find and change all Uppercase text with yours. 

    <meta content='YOUR, KEYWORD, PUT, HERE' name='keywords'/></b:if>
<link href='https://plus.google.com/YOURGPLUS/posts' rel='publisher'/>
<link href='https://plus.google.com/YOURGPLUS/about' rel='author'/>
<link href='https://plus.google.com/YOURGPLUS' rel='me'/>
<meta content='YOUR VERIFICATION GOOGLE CODE' name='google-site-verification'/>
<meta content='YOUR VERIFICATION BING CODE' name='msvalidate.01'/>
<meta content='YOUR VERIFICATION ALEXA CODE' name='alexaVerifyID'/>
<meta content='INDONESIA' name='geo.placename'/>
<meta content='YOUR NAME' name='Author'/>
<meta content='general' name='rating'/>
<meta content='ID' name='geo.country'/>
<meta content='YOURFBAPPSID' property='fb:app_id'/>
<meta content='YOURFBUSERID' property='fb:admins'/>
<meta content='@USERNAME' name='twitter:site'/>
<meta content='@USERNAME' name='twitter:creator'/>

    Post Page

    Adsense

    First Go to Blogger > Template > "Edit HTML"

    Find below code and change Place Your Ads Here (Already Parsed) with your Ads code which already parsed.

    <div expr:id='&quot;adsmiddle1&quot; + data:post.id'/>
<div style='clear:both; margin:10px 0'>
<!-- Place Your Ads Here (Already Parsed) -->
</div>
<div expr:id='&quot;adsmiddle2&quot; + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>
var obj0=document.getElementById(&quot;adsmiddle1<data:post.id/>&quot;);
var obj1=document.getElementById(&quot;adsmiddle2<data:post.id/>&quot;);
var s=obj1.innerHTML;
var r=s.search(/\x3C!-- adsense --\x3E/igm);
if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+16);}
</script>

    Next step, when you write the post. Put below code in post editor.

    <!-- adsense -->

    Example : 

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce fringilla venenatis odio, a consequat massa blandit ac.
Mauris ornare sapien in neque venenatis, ac fermentum tortor scelerisque. Integer sed ultricies magna, vitae gravida eros.
<!-- adsense -->
Etiam sapien massa, facilisis et semper in, sollicitudin ut turpis.Donec ac mauris dignissim, pretium enim non, vulputate est. Aliquam ut elementum enim, a vestibulum ipsum. Sed fringilla ac erat ut vulputate. Curabitur scelerisque, ligula non pretium venenatis, diam tortor sagittis mi, at malesuada risus leo nec est. Phasellus eleifend, purus a porttitor egestas, orci est porttitor ligula, et consequat diam tellus sed dolor. Aenean eu semper mauris, ut egestas nibh.
    Author Box

    First Go to Blogger > Template > "Edit HTML"

    Find below code.

    <div class='authorContent'>
<div class='authorLeft'>
<div class='authorAvatar'>
<img alt='' class='avatar avatar-120 photo dontshowit showit' height='120' src='http://1.bp.blogspot.com/-pZeZcLgWar4/VDK4F8Cuc1I/AAAAAAAAG7U/_J13G5uHOhc/s1600/Minima%2BLogo2.png' width='120'/>
</div>
</div>
<div class='authorDetails'>
<h2>About <a href='#' rel='author' title='Posts by Admin'>Admin</a></h2>
</div>
<p>This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.</p>
</div>
</div>

    Widgets

    Sitemap

    Add New Page for Static Page > Copy and paste all below code in it (HTML Mode).

    <div id="table-outer">
<table><tbody>
<tr><td><label>Sort posts by : </label></td><td><select id="orderFeedBy"><option selected="" value="published">New post</option><option value="updated">Post updated</option></select></td></tr>
<tr><td><label>Filter posts by category : </label></td><td><span id="labelSorter"><select disabled=""><option selected="">Loading...</option></select></span></td></tr>
<tr><td><label>Search by keyword : </label></td><td><form id="postSearcher">
<input type="text" /></form>
</td></tr>
</tbody></table>
</div>

<header id="resultDesc"></header>
<ul id="feedContainer"></ul>
<div id="feedNav">
Loading...</div>
<script src="https://googledrive.com/host/0B5NxkB895DDIMDB3YnM0ZkFUVDg" type="text/javascript"></script>
    Recent Comments

    Add New Gadget > Copy and paste all below code in it.

    <style type="text/css" scoped> 
ul.kangismet_recent{list-style:none;margin:0;padding:0;} 
.kangismet_recent li{background:transparent;margin:0 0 6px!important;padding:3px  
!important;display:block;clear:both;overflow:hidden;list-style:none; border: 1px solid transparent;
border-radius:9px; max-height: 100px;} 
.kangismet_recent li:hover{background:#fff;border: 1px solid #e9e9e9;}
.kangismet_recent a {text-decoration:none;}
.avatarImage{padding:3px;background:#fefefe;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;} 
.avatarRound{border-radius:100px;width:35px;height:35px} 
.kangismet_recent li span{margin-top:4px;color: #444;display: block;font-size: 12px;line-height: 1.4;} 
</style>
<script type="text/javascript">
//<![CDATA[
    var
 numComments  = 5,
 showAvatar  = true,
 avatarSize  = 35,
 roundAvatar = true,
 characters  = 40,
 defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
 hideCredits = true;
 maxfeeds=50,
 adminBlog='Lina';
//]]>
</script>
<script type="text/javascript" src="https://arlina-design.googlecode.com/svn/recent.js"></script>
<script type="text/javascript" src="/feeds/comments/default?alt=json&amp;callback=kangismet_recent&amp;&amp;max-results=50">
</script>
    Recent Post Slider

    Add New Gadget > Copy and paste all below code in it > Replace YOUR-BLOG-URL with your blog url.

    <style>
/* CSS Responsive Slider Recent Post */
#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}
#slides ul{height:320px}
#slides li{width:50%;height:100%;position:absolute;display:none}
#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4), #slides li:nth-child(5){display:block}
#slides li:nth-child(1){left:0;top:0}
#slides li:nth-child(2){left:50%;width:25%;height:50%}
#slides li:nth-child(3){left:75%;width:25%;height:50%}
#slides li:nth-child(4){left:50%;top:50%;width:25%;height:50%}
#slides li:nth-child(5){left:75%;top:50%;width:25%;height:50%}
#slides li:nth-child(1) h4 {overflow:hidden;font-size:25px;bottom:0;color:#fafafa;width:100%;
padding:10px 10px 10px 90px;text-align:left;text-transform:uppercase;background:rgba(0,0,0,0.3);
height:90px;font-family:'Oswald';text-shadow:2px 2px 0 rgba(0,0,0,0.2);line-height:32px;left:0;}
#slides li:nth-child(1) .label_text {font-size:30px;display:block;bottom:10px;left:10px;
padding:0;font-family:'Oswald';box-shadow:5px 3px 0 rgba(0,0,0,0.2);}
#slides li:nth-child(1) span.dd {display:block;font-size:30px;padding:12px 15px;
background:#ff6553;margin:0;}
#slides li:nth-child(1) span.dm {display:block;font-size:14px;background:#333;color:#fff;
padding:5px 21px;text-transform:uppercase;margin:0;}
#slides li:nth-child(1) span.dy, #slides li:nth-child(1) span.autname{display:none;}
#slides a{display:block;width:100%;height:100%;overflow:hidden}
#slides img{display:block;width:100%;height:auto;border:0;padding:0;background-color:#333;-moz-transform:scale(1.0) rotate(0);-webkit-transform:scale(1.0) rotate(0);-ms-transform:scale(1.0) rotate(0);transform:scale(1.0) rotate(0);transition:all 0.6s linear;}
#slides li a:hover img {-moz-transform:scale(1.1) rotate(1deg);-webkit-transform:scale(1.1) rotate(1deg);-ms-transform:scale(1.1) rotate(1deg);transform:scale(1.1) rotate(1deg);transition:all 0.3s linear;}
#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(http://2.bp.blogspot.com/-0haO2Mfkjjk/VDgZww2tfEI/AAAAAAAAHAk/zhu3INYSkHA/s1600/fade.png);background-position:50% 40%;background-repeat:repeat-x;}
#slides h4{position:absolute;bottom:40px;margin:0;font-size:13px;font-family:'Oswald';
left:10px;padding:5px 10px;color:#f9f9f9;z-index:3;line-height:20px;font-weight:normal;
background:rgba(41,41,41,0.7);text-align:left;text-transform:uppercase;margin-right:10px;}
#slides .label_text{font-size:12px;color:#fff;bottom:10px;z-index:3;left:10px;
position:absolute;background:rgba(255,101,83,0.8);padding:3px 6px;font-family:'Oswald';
text-transform:uppercase;}
#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname,#slides li:nth-child(4) .autname,#slides li:nth-child(5) .autname{display:none;}
#slides .overlayx,#slides li{transition:all .4s ease-in-out}
#slides li:nth-child(1) .overlayx{display:none;}
#slides li:hover .overlayx{opacity:0.1}

@media only screen and (max-width:800px){
#slides li:nth-child(1) h4 {font-size:18px;line-height:24px;}}

@media only screen and (max-width:600px){
  #slides ul{height:600px}
  #slides li:nth-child(1){width:100%;height:50%}
  #slides li:nth-child(2){top:50%;height:25%;left:0;width:50%}
  #slides li:nth-child(3){left:50%;top:50%;width:50%;height:25%}
  #slides li:nth-child(4){left:0;top:75%;height:25%;width:100%}
  #slides li:nth-child(5){display:none;}}

@media only screen and (max-width:480px){
#slides li:nth-child(1) h4 {font-size:13px;line-height:16px;}}
</style>
<div id="featuredpost"></div>
<script type="text/javascript" src="https://arlina-design.googlecode.com/svn/slider-post.js"></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"YOUR-BLOG-URL",
MaxPost:8,
idcontaint:"#featuredpost",
ImageSize:500,
interval:10000,
autoplay:true,
tagName:false

});
});
//]]>
</script>

    ShortCodes

    Drop Caps 
    <span class="awal">K</span>
    Blockquote

    To create a Blockquote simply select all text you want to be a Quote and click on Quote icon from blog post text editor panel.

    Bullet and List

    To create a Bullet simply select all text you want to be a Bullet and click on Bullet List icon from blog post text editor panel.
    To create a Ordered List simply select all text you want to be a Ordered List and click on Numbered List icon from blog post text editor panel.

    Buttons

    Add the button you want by size and color.

      /*----Small Buttons-----*/
  <a href='/' class="button small red">Button Text</a>
  <a href='/' class="button small pink">Button Text</a>
  <a href='/' class="button small orange">Button Text</a>
  <a href='/' class="button small yellow">Button Text</a>
  <a href='/' class="button small green">Button Text</a>
  <a href='/' class="button small turquoise">Button Text</a>
  <a href='/' class="button small blue">Button Text</a>
  <a href='/' class="button small purple">Button Text</a>
  <a href='/' class="button small midnight">Button Text</a>
  <a href='/' class="button small grey">Button Text</a>
  <a href='/' class="button small asbestos">Button Text</a>
  <a href='/' class="button small dark">Button Text</a>

  /*----Medium Buttons-----*/
  <a href='/' class="button medium red">Button Text</a>
  <a href='/' class="button medium pink">Button Text</a>
  <a href='/' class="button medium orange">Button Text</a>
  <a href='/' class="button medium yellow">Button Text</a>
  <a href='/' class="button medium green">Button Text</a>
  <a href='/' class="button medium turquoise">Button Text</a>
  <a href='/' class="button medium blue">Button Text</a>
  <a href='/' class="button medium purple">Button Text</a>
  <a href='/' class="button medium midnight">Button Text</a>
  <a href='/' class="button medium grey">Button Text</a>
  <a href='/' class="button medium asbestos">Button Text</a>
  <a href='/' class="button medium dark">Button Text</a>
  
  /*----Large Buttons-----*/
  <a href='/' class="button large red">Button Text</a>
  <a href='/' class="button large pink">Button Text</a>
  <a href='/' class="button large orange">Button Text</a>
  <a href='/' class="button large yellow">Button Text</a>
  <a href='/' class="button large green">Button Text</a>
  <a href='/' class="button large turquoise">Button Text</a>
  <a href='/' class="button large blue">Button Text</a>
  <a href='/' class="button large purple">Button Text</a>
  <a href='/' class="button large midnight">Button Text</a>
  <a href='/' class="button large grey">Button Text</a>
  <a href='/' class="button large asbestos">Button Text</a>
  <a href='/' class="button large dark">Button Text</a>
    Pre Code 
    <pre title="HTML"><code class="language-markup"> ... HTML CODE (already `escape`) HERE ... </code></pre>
<pre title="CSS"><code class="language-css"> ... CSS CODE HERE ... </code></pre>
<pre title="Javascript"><code class="language-javascript"> ... JAVASCRIPT CODE HERE ... </code></pre>

    Happy Blogging!