VIEW RESPONSIVE GRID - DOCUMENTATION

Getting Started

Theme Info

Created: 25/04/2015

View Responsive Grid is a simple 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.

Features

Responsive
SEO
Dynamic Heading
Grid Style
Clean Typography
Minimalist
Responsive Recent Post Slider
Video / Music Post
Light Base Theme Color
Breadcrumbs
Related Posts with Thumb
Search Box
Social Share Button
Responsive Fixed Dropdown Menu
Numbered Page Navigation
Custom 404 Page
Smooth Scroll back To Top
Custom Subscribe Box Widget
And more..

Beberapa artikel yang mungkin dapat membantu Anda.

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='navigate-top'>
<ul>
<li><a href='/' itemprop='url'><span itemprop='name'>Home</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>About</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Contact</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>404 Page</span></a></li>
                    <li class='top-social'>
                        <a href='#' target='_blank'><i class='fa fa-twitter'/>
                        </a>
                    </li>
                    <li class='top-social'>
                        <a href='#' target='_blank'><i class='fa fa-facebook'/>
                        </a>
                    </li>
                    <li class='top-social'>
                        <a href='#' target='_blank'><i class='fa fa-instagram'/>
                        </a>
                    </li>
                    <li class='top-social'>
                        <a href='#' target='_blank'><i class='fa fa-play'/>
                        </a>
                    </li>
                    <li class='top-social'>
                        <a href='#' target='_blank'><i class='fa fa-pinterest'/>
                        </a>
                    </li>
                    <li class='top-social'>
                        <a href='#' target='_blank'><i class='fa fa-google-plus'/>
                        </a>
                    </li>
</ul>
</nav>

Fixed Main Navigation :

<nav id='arl_nav_wrap'>
                <ul class='mainmenu-nav'>
                    <li class='submenu-link'><a class='arrow' href='/'>Home</a>
                        <!-- Submenu-->
                        <ul>
                            <li><a href='#'>Submenu 1</a></li>
                            <li><a href='#'>Submenu 2</a></li>
                            <li><a href='#'>Submenu 3</a></li>
                        </ul>
                    </li>
                    <li class='submenu-link'><a class='arrow' href='#'>Category</a>
                        <!-- Submenu-->
                        <ul>
                            <li><a href='#'>Default</a></li>
                            <li><a href='#'>Sidebar</a></li>
                            <li><a href='#'>Fullscreen</a></li>
                            <li><a href='#'>Video Post</a></li>
                            <li><a href='#'>Gallery Post</a></li>
                        </ul>
                    </li>
                    <li class='submenu-link'><a class='arrow' href='#'>Features</a>
                        <!-- Submenu-->
                        <ul>
                            <li><a href='#'>Sitemap</a></li>
                            <li><a href='#'>Contact Form</a></li>
                            <li><a href='#'>Tags and Styling</a></li>
                        </ul>
                    </li>
                    <li><a href='#'>About</a></li>
                </ul>
            </nav>

Page Navigation :

Cari dan ubah nilai dari pageCount=12 dan displayPageNum=6

<script type='text/javascript'>
//<![CDATA[
var pageCount=12;
var displayPageNum=6;
var upPageWord ='Prev';
var downPageWord ='Next';
//]]>
</script>

Footer Social Links :

<ul>
        <li>
            <a href='#' target='_blank'><i class='fa fa-facebook'/></a>
        </li>
        <li>
            <a href='#' target='_blank'><i class='fa fa-twitter'/></a>
        </li>
        <li>
            <a href='#' target='_blank'><i class='fa fa-pinterest'/></a>
        </li>
        <li>
            <a href='#' target='_blank'><i class='fa fa-instagram'/></a>
        </li>
        <li>
            <a href='#' target='_blank'><i class='fa fa-reddit-square'/></a>
        </li>
        <li>
            <a href='#' target='_blank'><i class='fa fa-github'/></a>
        </li>
        <li>
            <a href='#' target='_blank'><i class='fa fa-skype'/></a>
        </li>
    </ul>

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='fb:app_id'/>
<meta content='xxxxx' property='fb:admins'/>
<meta content='xxxxx' name='twitter:site'/>
<meta content='xxxxx' name='twitter:creator'/>

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 pada halaman ini.

<form name="contact-form">
<span style="color: #666666; font-family: 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: 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: 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;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:'Karla',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:'Karla';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>

Recent Slider

Cari dan ubah ganti 'Semua' dengan nama label post dan ubah nilai dari numposts1 = 12

// Featured slider
cat1 = 'Semua';
imgr = new Array();
imgr[0] = "http://4.bp.blogspot.com/--mxSeYGUGrM/VODW0yz13KI/AAAAAAAABBY/_vMjhXRcdDo/s700/style1.png";
showRandomImg = true;
aBold = true;
numposts1 = 12;

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

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>

Spoiler

<div id="flippy"><button>Spoiler</button></div>
<div id="flippanel">
--- TAMBAHKAN KONTEN DISINI ---
</div>

Membagi konten post menjadi tiga

<div class="bagitiga">
--- TAMBAHKAN KONTEN DISINI ---
</div>

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 Design. Terima kasih.

VIEW FREE VERSION