SIMPLE GRID - DOCUMENTATION

Getting Started

Theme Info

Created: 26/06/2015
Updated: 2020

Simple Grid is a simple Blogger template with Responsive layout and suited for all blog. It's design with minimalist and simple color combination, grid based layout, clean and modern look, SEO Optimized, and has been built by using some of the most popular current design trends.

Features

Responsive
SEO Friendly
Google Testing Tool Validator
Mobile Friendly
Dynamic Heading
Masonry Plugin
Grid Based Layout
1 Column Style
3 Column Footer
Google Friendly
Custom Threaded Comment
Responsive Ad Slot
Clean Typography
Minimalist
Top Navigation
Fixed Responsive Dropdown Navigation
Light Base Theme Color
Breadcrumbs
Related Posts
Search Box
Social Share Button
Smooth Scroll back To Top
Custom Subscribe Box Widget
Custom Contact Form Widget
Sitemap Widget
Multi Author Box
And more..

Installation

1. Log in ke Blogger dashboard dan buka Template > Edit HTML.

2. Silahkan backup template lama Anda jika Anda memutuskan untuk menggunakannya lagi. Untuk melakukan ini, klik pada "download template lengkap" link dan simpan template.

3. Kemudian, cari lokasi XML template yang baru saja Anda download dan tekan "Upload".

Customize Theme

Silakan buka Blogger > Template > "Edit HTML"

Cari dan ganti semua kode ini # dengan tulisan Anda.

Top Navigation :

<nav class='top-gridnav'>
            <ul>
              <li><a href='#' title='About Us'><i class='fa fa-user'/> About</a></li>
              <li><a href='#' title='Our Sitemap'><i class='fa fa-list'/> Sitemap</a></li>
              <li><a href='#' title='Contact us'><i class='fa fa-envelope'/> Contact</a></li>
              <li><a href='#' title='Disclaimer'><i class='fa fa-check-circle'/> Disclaimer</a></li>
<li class='sosmed pinterest'><a class='simple-tooltip simple-tooltip-left' data-simple-tooltip='Follow us on Pinterest' href='#' rel='nofollow' target='_blank'><i class='fa fa-pinterest'/><span class='inv'/></a></li>
<li class='sosmed'><a class='simple-tooltip simple-tooltip-left' data-simple-tooltip='Follow us on Google+' href='#' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/><span class='inv'/></a></li>
<li class='sosmed'><a class='simple-tooltip simple-tooltip-left' data-simple-tooltip='Follow us on Facebook' href='#' rel='nofollow' target='_blank'><i class='fa fa-facebook'/><span class='inv'/></a></li>
<li class='sosmed'><a class='simple-tooltip simple-tooltip-left' data-simple-tooltip='Follow us on instagram' href='#' rel='nofollow' target='_blank'><i class='fa fa-instagram'/><span class='inv'/></a></li>
<li class='sosmed twitter'><a class='simple-tooltip simple-tooltip-left' data-simple-tooltip='Follow us on Twitter' href='#' rel='nofollow' target='_blank'><i class='fa fa-twitter'/><span class='inv'/></a></li>
            </ul>
            <a href='#' id='pull'>MENU</a>
          </nav>

Main Navigation :

<nav id='nav' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
<a class='menu-trigger' href='#'><i class='fa fa-list'/> Menu</a>
<ul class='shnav simple-mainmenu'>
<li><a class='active' href='/'><span itemprop='name'>Home</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Fitur</span></a>
<ul>
<li><a href='#' itemprop='url'><span itemprop='name'>Sitemap 1</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Sitemap 2</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Tag and Styling</span></a></li>
</ul>
</li>
<li><a href='#' itemprop='url'><span itemprop='name'>Menu 1</span></a>
<ul>
<li><a href='#' itemprop='url'><span itemprop='name'>Submenu 1</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Submenu 2</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Submenu 3</span></a>
<ul>
<li><a href='#' itemprop='url'><span itemprop='name'>Item 1</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Item 2</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Item 3</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Item 4</span></a></li>
</ul>                
</li>
</ul>
</li>
<li><a href='#' itemprop='url'><span itemprop='name'>Menu 2</span></a>
<ul>
<li><a href='#' itemprop='url'><span itemprop='name'>Submenu 1</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Submenu 2</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Submenu 3</span></a>
<ul>
<li><a href='#' itemprop='url'><span itemprop='name'>Item 1</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Item 2</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Item 3</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Item 4</span></a></li>
</ul>                
</li>
</ul>
</li>
<li><a href='#' itemprop='url'><span itemprop='name'>Site Link</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Sitemap</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Error Page</span></a></li>
</ul>
<form action='/search' id='search-form' method='get' style='display: inline;'><table><tbody><tr><td class='search-box'><input id='search-box' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' type='text' value='Search...'/><input id='search-button' type='submit' value=''/></td></tr></tbody></table></form>
</nav>

SEO Meta Tag

Buka Blogger > Template > "Edit HTML"

Cari dan ganti semua tulisan xxxxx dengan tulisan Anda.

<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='Author'/>
<meta content='xxxxx' property='og:description'/>
<meta content='xxxxx' name='twitter:site'/>
<meta content='xxxxx' name='twitter:creator'/>

Post Page

Iklan di Postingan

Cari dan ganti tulisan ini dengan skrip kode iklan Anda :

Anda bisa memparse kode iklan disini Ad Converter.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>
&lt;div style=&quot;display:block;text-align:center;margin:15px auto;&quot;&gt;
<!-- Kode Banner/Iklan Anda Di sini -->
&lt;/div&gt;        
        <data:post.body/>
&lt;div style=&quot;display:block;text-align:center;margin:15px auto;&quot;&gt;
<!-- Kode Banner/Iklan Anda Di sini -->
&lt;/div&gt;
</div>
</b:if>

Author Social Link

<a class='img-circle1' href='#' rel='nofollow' target='_blank'><i class='fa fa-facebook'/></a>
<a class='img-circle2' href='#' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a>
<a class='img-circle3' href='#' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/></a>

Contact Form

Buat post di halaman statis > kemudian terapkan kode di bawah ini pada tab HTML. Catatan : Jika sudah menambahkan kode ini, disarankan untuk tidak menggunakan mode Compose di halaman ini.

<form name="contact-form">
<span style="color: #666666; 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="color: #666666; font-family: Open Sans,Arial,Helvetica,sans-serif; font-weight: 700;"><i class="fa fa-envelope"></i> Email Address <span style="color: #f56954; font-size: x-small; font-weight: bold;">important</span></span> 
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />  

<span style="color: #666666; font-family: Open Sans,Arial,Helvetica,sans-serif; font-weight: 700;"><i class="fa fa-pencil-square-o"></i> Content <span style="color: #f56954; font-size: x-small; font-weight: bold;">important</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>

<style scoped="" type="text/css">
#comments,.post_meta,#blog-pager {display:none;}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{
width:100%;height:auto;margin:5px auto;padding:10px;background:#fff;color:#444;border:1px solid #ddd;border-radius:3px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;transition:all 0.5s ease-out;}
#ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:10px;background:#fff;color:#444;font-family:'Open Sans',sans-serif;border:1px solid #ddd;border-radius:3px;transition:all 0.5s ease-out;}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:rgba(81,203,238,1);box-shadow:0 0 5px rgba(81,203,238,0.7);}
#ContactForm1_contact-form-submit {width:100%;font-family:'Open Sans';float:left;background:#fff;color:#aaa;margin:10px auto;vertical-align:middle;cursor:pointer;padding:10px 18px!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border-radius:3px;background-image: linear-gradient(110deg, #7986cb 0%, #7986cb 50%, transparent 50%, transparent 100%);background-size:200%;background-position:120% 0;background-repeat:no-repeat;border:1px solid #ddd;transition:all .8s ease, background-position .8s ease, color .8s ease;}
#ContactForm1_contact-form-submit:hover {color:#fff;background-position:0 0;border-color:#7986cb;}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{
width:100%;margin-top:35px;}
.contact-form-error-message-with-border {background:#f36c60;border:none;box-shadow:none;color:#fff;padding:5px 0;}
.contact-form-success-message {background:#4fc3f7;border:none;box-shadow:none;color:#fff;}
img.contact-form-cross {line-height:40px;margin-left:5px;}
</style>

Sitemap

Buat post di halaman statis > kemudian terapkan kode di bawah ini pada tab HTML.

<div id="bp_toc">
Loading TOC. Please wait....</div>
<script src="https://cdn.rawgit.com/Arlina-Design/redvision/master/daftar-isi-simple.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script>

Ad Banner HTML

Di Tata Letak tambah widget baru > Kemudian terapkan kode di bawah ini.

Banner 468x60.

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

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>

ShortCodes

Blockquote

Untuk membuat Blockquote cukup pilih semua teks yang Anda ingin menjadi Kutipan dan klik pada icon Kutipan dari posting blog panel editor teks.

Buttons

Menambahkan demo dan 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>

Memasang Table di postingan

<table cellpadding="0" cellspacing="0" style="text-align: left;">
    <tbody>
        <tr>
            <th>Table Header 1</th>
            <th>Table Header 2</th>
            <th>Table Header 3</th>
        </tr>
        <tr>
            <td>Division 1</td>
            <td>Division 2</td>
            <td>Division 3</td>
        </tr>
        <tr>
            <td>Division 1</td>
            <td>Division 2</td>
            <td>Division 3</td>
        </tr>
        <tr>
            <td>Division 1</td>
            <td>Division 2</td>
            <td>Division 3</td>
        </tr>
    </tbody>
</table>

Perbaikan

Mobile Responsive

Silakan klik Template > Tombol Gear > Pilih Tidak.

Oke cukup sekian, jika ada kesulitan lain jangan segan untuk bertanya lewat formulir kontak blog Arlina Code. Terima kasih.

SIMPLE GRID FREE VERSION