MINIMA COLORED 3 - REVOLTIFY

Getting Started

Theme Info

Created: 16/07/2014
Latest Update: 13/01/2015
Header image by http://www.amadeus.com/nablog/

MC3 Revoltify 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
  • Adsense Ready
  • Custom Threaded Comment
  • 2 Column
  • White Base Theme Color
  • Responsive Ad
  • Breadcrumbs
  • Related Posts with Subscribe Box
  • Overlay Search Box
  • Share Button
  • Responsive Dropdown Menu
  • Numbered Page Navigation
  • Sidebar Social Bookmark
  • Custom 404 Page
  • Smooth back To Top Button
  • Better Print Page Layout
  • Custom Contact Form Design
  • Subscribe Box
  • 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 below code and change all # text with yours.

    Main Navigation : 
    <nav>
<a class='responsive-menu' href='#' id='resp-menu'><i class='fa fa-reorder'/> Menu</a>    
<ul class='menu'>
.....
.....
.....
</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 xxxxx text with yours. 

    <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='geo.placename'/>
<meta content='xxxxx' name='Author'/>
<meta content='xxxxx' name='geo.country'/>
<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

    Adsense Ready [Ads Inside Post]

    In this Template you will be able to add ads inside articles easily top or the middle or the bottom of the article as you like only follow the steps below :

    Go to your dashboard, and click on layout

    Click edit in Ads Inside Post widget and add your ad code inside the box content

    Now just inside your post between text add [post_ad]

    . Related Post Sobscribe Box

    Find

     <div id='subscribe-css'>
<div class='subscribe-wrapper'>
...
...
...
</div>
</div>

    And change Revoltify with your Subscribe blog name.

     <div id='subscribe-css'>
<div class='subscribe-wrapper'>
<p>Sign up here with your email</p>
<div class='subscribe-form'>
<form action='http://feedburner.google.com/fb/a/mailverify?uri=Revoltify' class='subscribe-form' method='post' onsubmit='window.open (&apos;http://feedburner.google.com/fb/a/mailverify?uri=Revoltify&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='Revoltify'/><input name='loc' type='hidden' value='en_US'/><input autocomplete='off' class='subscribe-css-email-field' name='email' placeholder='Enter your email address '/><input class='subscribe-css-email-button' title='' type='submit' value='Subscribe Now'/></form>
</div>
</div>
</div>

    Widgets

    To add Recent Posts and Recent Comments.

    Recent Posts 
    recentposts
    Recent Comments 
    recentcomments
    Contact Form

    Add New Page for Static Page > Copy and paste all below code in it (HTML Mode). FYI : After adding this code, make sure you do not move to Compose mode.

    <form name="contact-form">
<span style="font-family: 'Open Sans', Arial, Helvetica, sans-serif;font-weight: 700;"><i class="fa fa-user"></i> Name </span>
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />  
<span style="font-family: 'Open Sans', Arial, Helvetica, sans-serif;font-weight: 700;"><i class="fa fa-envelope"></i> Email Adress <span style="color: red; font-weight: bolder;">*</span></span> 
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />  
<span style="font-family: 'Open Sans', Arial, Helvetica, sans-serif;font-weight: 700;"><i class="fa fa-pencil"></i> Content <span style="color: red; font-weight: bolder;">*</span></span>
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea> 
<input id="ContactForm1_contact-form-submit" type="button" value="Send" />  
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
    Sitemap

    Add New Page for Static Page > Copy and paste all below code in it (HTML Mode), replace http://www.revoltify.co.vu/ with your blog url.

    <div id="tabbed-toc">
<span class="loading">Loading...</span></div>
<script type="text/javascript">
var tabbedTOC = {
    blogUrl: "http://www.revoltify.co.vu/", // Blog URL
    containerId: "tabbed-toc", // Container ID
    activeTab: 1, // The default active tab index (default: the first tab)
    showDates: false, // `true` to show the post date
    showSummaries: false, // `true` to show the posts summaries
    numChars: 200, // Number of summary chars
    showThumbnails: false, // `true` to show the posts thumbnails (Not recommended)
    thumbSize: 40, // Thumbnail size
    noThumb: "http://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png", // A "no thumbnail" URL
    monthNames: [ // Array of month names
        "January",
        "February",
        "March",
        "April",
        "May",
        "June",
        "July",
        "August",
        "September",
        "October",
        "November",
        "December"
    ],
    newTabLink: true, // Open link in new window?
    maxResults: 99999, // Maximum post results
    preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload")
    sortAlphabetically: true, // `false` to sort posts by published date
    showNew: 7, // `false` to hide the "New!" mark in most recent posts, or define how many recent posts are to be marked
    newText: " - <em style='color:red;'>New!</em>" // HTML for the "New!" text
};
</script>
<script src="https://arlina-design.googlecode.com/svn/trunk/javascript/tabbed-toc.js" type="text/javascript"></script>
    Statistics

    Edit HTML > Find and replace http://yourblogurlx.blogspot.com/ with your blog url.

          <script src='http://yourblogurlx.blogspot.com/feeds/posts/default?alt=json-in-script&amp;amp;max-results=0&amp;amp;callback=postCount' type='text/javascript'/>
    Ad Banner HTML

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

    Banner 728x90.

    <div class='kotak_iklan3'>
<a href='#' target='_blank' title='ADS-DESCRIPTION'><img alt='iklan banner' height='90' src='IMAGE-URL' title='ADS-DESCRIPTION' width='728'/></a>
</div>

    Banner 125x125.

    <div class="kotak_iklan">
<a href="#" title="judul iklan"><img style="border: none;" src="IMAGE-URL" alt="text gambar" width="125" height="125" /></a>
<a href="#" title="judul iklan"><img style="border: none;" src="IMAGE-URL" alt="text gambar" width="125" height="125" /></a>
<a href="#" title="judul iklan"><img style="border: none;" src="IMAGE-URL" alt="text gambar" width="125" height="125" /></a> 
<a href="#" title="judul iklan"><img style="border: none;" src="IMAGE-URL" alt="text gambar" width="125" height="125" /></a> 
</div>
    Subscribe Box

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

    Change Revoltify with your Subscribe blog name.

    <div id='subscribe-box'>
                 <p>Sign up here with your email</p>
             <div class='emailfield'>
              <form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=Revoltify&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
               <input type='text' name='name' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Your Name&quot;;}' onfocus='if (this.value == &quot;Your Name&quot;) {this.value = &quot;&quot;;}' value='Your Name'/>
               <input type='text' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Your Email&quot;;}' onfocus='if (this.value == &quot;Your Email&quot;) {this.value = &quot;&quot;;}' value='Your Email'/>
<input name='uri' type='hidden' value='Revoltify'/>
<input name='loc' type='hidden' value='en_US'/>
                <input class='submitbutton' type='submit' value='Subscribe Here'/>

              </form>
             </div>
</div>

    ShortCodes

    Drop Caps 
    <span class="first-letter">Your First Letter here</span>
    Alert Box 
    /*----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>
    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 demo and download button.

      <div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="YOUR-LINK-HERE" target="_blank">DEMO</a></li>
<li><a class="download" href=" YOUR-LINK-HERE" target="_blank">DOWNLOAD</a></li>
</ul>
</div>
<div class="clear"></div>
    Pre Code 
    <pre title="HTML" data-codetype ="HTMLku"><code class="language-markup"> ... Your HTML (already escaped) put here ... </code></pre>
<pre title="CSS" data-codetype ="CSSku"><code class="language-css"> ... Your CSS put here ... </code></pre>
<pre title="Javascript" data-codetype ="JavaScriptku"><code class="language-javascript"> ... Your JavaScript put here ... </code></pre>
<pre title="jQuery" data-codetype ="JQueryku"><code class="language-javascript"> ... Your jQuery put here ... </code></pre>
    Spoiler 
    <div id="flippy"><button>Spoiler</button></div>
<div id="flippanel">
--- YOUR CONTENT GOES HERE ---
</div>

    Fixed

    Mobile Responsive

    To provide responsive look better on a mobile device, please click Template > Gear > Select None. Show mobile template on mobile devices.

    Video Thumbnail

    When you copy youtube embed code to html of the post it will be in this form

    <iframe allowfullscreen="" frameborder="0" height="315" src="//www.youtube.com/embed/HLCasyAh7ic" width="100%"></iframe>

    But in blogger youtube thumbnail will not appear, so to fix it you just need to add https in the youtube embed codes and it will look like this.

    <iframe allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/HLCasyAh7ic" width="100%"></iframe>

    Okay thats it, have fun and enjoy.


    www.arlinacode.com

    Top