Created: 16/07/2014
Latest Update: 19/12/2014
Minima Colored 3 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.
First Go to Blogger > Template > "Edit HTML"
Find below code and change all # text with yours.
Top Navigation :<nav class='main-nav'> ..... ..... ..... </nav>Main Navigation :
<nav id='menu-wrap'> ..... ..... ..... </nav>Page Navigation :
Find and change the value of perPage: 6 and numPages: 5
<b:includable id='page-navi'> <div class='pagenav'> <script type='text/javascript'> var pageNaviConf = { perPage: 6, numPages: 5, firstText: "First", lastText: "Last", nextText: "Next", prevText: "Prev" } </script>
First Go to Blogger > Template > "Edit HTML"
Find and change all Uppercase text with yours.
<meta content='YOUR, KEYWORD, PUT, HERE' name='keywords'/> <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='en_US' property='og:locale'/> <meta content='en_GB' property='og:locale:alternate'/> <meta content='id_ID' property='og:locale:alternate'/> <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'/>
Note : in Mag Top / Bottom Section don't try add any widget oyher than HTML one, follow this
Mag Section Type : pmag2, pgallery , pvid
To add Mag Section Type just simply follow this method by change Box Type and your Label
[Your Label Here][Box Type]Example :
[Gallery][pgallery]
To add Recent Posts and Recent Comments.
Recent PostsrecentpostsRecent Comments
recentcommentsFirst Widget
To bring up the layout of the widgets on the First Widget Section, simply add a new widget and then fill with recent or random.
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='"adsmiddle1" + data:post.id'/> <div style='clear:both; margin:10px 0'> <!-- Place Your Ads Here (Already Parsed) --> </div> <div expr:id='"adsmiddle2" + data:post.id'> <data:post.body/> </div> <script type='text/javascript'> var obj0=document.getElementById("adsmiddle1<data:post.id/>"); var obj1=document.getElementById("adsmiddle2<data:post.id/>"); var s=obj1.innerHTML; var r=s.search(/\x3C!-- adsense --\x3E/igm); if(r>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.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]
. Author BoxFirst Go to Blogger > Template > "Edit HTML"
Find below code.
<div class='articleAuthor'> ..... ..... ..... </div>
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: Helvetica Neue, Arial, Helvetica, sans-serif;"><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: Helvetica Neue, Arial, Helvetica, sans-serif;"><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: Helvetica Neue, Arial, Helvetica, sans-serif;"><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 1
Add New Page for Static Page > Copy and paste all below code in it (HTML Mode).
<div id="tabbed-toc"> <span class="loading">Loading...</span></div> <script type="text/javascript"> var tabbedTOC = { blogUrl: "http://afusions.blogspot.com/", // 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>Sitemap 2
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://arlina-design.googlecode.com/svn/tocs.js" type="text/javascript"></script> <style scoped="" type="text/css"> #comments {display:none;} </style>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 AFusion to your Subscribe blog.
<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('http://feedburner.google.com/fb/a/mailverify?uri=AFusion', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'> <input type='text' name='name' onblur='if (this.value == "") {this.value = "Your Name";}' onfocus='if (this.value == "Your Name") {this.value = "";}' value='Your Name'/> <input type='text' name='email' onblur='if (this.value == "") {this.value = "Your Email";}' onfocus='if (this.value == "Your Email") {this.value = "";}' value='Your Email'/> <input name='uri' type='hidden' value='AFusion'/> <input name='loc' type='hidden' value='en_US'/> <input class='submitbutton' type='submit' value='Subscribe Now!'/> </form> </div> </div>Flickr Widget
Add New widget > Copy and paste all below code in it.
Change 44532761@N02 to your flickr stream album code.
<div class="flickr_plugin"> <script src="http://www.flickr.com/badge_code_v2.gne?count=8&display=latest&size=s&layout=x&&source=user&user=44532761@N02" type="text/javascript"> </script> </div>
<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 ListTo 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.
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>
To provide responsive look better on a mobile device, please click Template > Gear > Select None. Show mobile template on mobile devices.
Video ThumbnailWhen 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.