## Getting Started

### Theme Info

Created: 13/08/2015

Vikka is a Blogger template with Responsive layout and suited for all blog. It's design with simple color combination, clean and modern look, Fast, SEO Optimized, Valid HTML5, Valid CSS3, and has been built by using some of the most popular current design trends.

### Features

- Responsive
- SEO Friendly
- Google Testing Tool Validator
- Dynamic Heading
- Mobile Friendly
- Valid HTML5
- Valid CSS3
- High CTR
- Responsive Ad Slot
- Personal Blog
- 2 Column
- Light Base Theme Color
- Breadcrumbs
- Related Posts with Thumb
- Search Box
- Social Share Button
- Responsive Dropdown Menu
- Custom Subscribe Box Widget
- Smooth Back to Top
- Shortcodes

### Beberapa artikel yang mungkin dapat membantu Anda.

- Mengatasi Thumbnail Share Post Facebook
- Tag Kondisional
- Permalink Blog
- Feedburner
- Membatasi Jumlah Posting

### 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

### Navigation

Silakan buka Blogger > Template > "Edit HTML"

Cari dan ganti semua kode ini # dengan tulisan Anda.

Main Navigation :

      <nav id='navi-arlina' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'>
      <input type='checkbox'/>
      <label>MENU</label>
      <ul>
      <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
      <li><a href='#' itemprop='url'><span itemprop='name'>Blog</span></a>
        <ul>
          <li><a href='#' itemprop='url'><span itemprop='name'>About</span></a></li>
          <li><a href='#' itemprop='url'><span itemprop='name'>Advertise</span></a></li>
          <li><a href='#' itemprop='url'><span itemprop='name'>Portfolio</span></a></li>
        </ul>
      </li>
      <li><a href='#' itemprop='url'><span itemprop='name'>Technology</span></a></li>
      <li><a href='#' itemprop='url'><span itemprop='name'>Bussiness</span></a></li>
      <li><a href='#' itemprop='url'><span itemprop='name'>Healthy</span></a></li>
      <li><a href='#' itemprop='url'><span itemprop='name'>Gallery</span></a></li>
      <li><a href='#' itemprop='url'><span itemprop='name'>Lifestyle</span></a></li>
      <li><a href='#' itemprop='url'><span itemprop='name'>Music</span></a></li>
      <li><a href='#' itemprop='url'><span itemprop='name'>Dropdown</span></a>
        <ul>
          <li><a href='#' itemprop='url'><span itemprop='name'>Science</span></a></li>
          <li><a href='#' itemprop='url'><span itemprop='name'>Healthy</span></a></li>
          <li><a href='#' itemprop='url'><span itemprop='name'>Video</span></a></li>
          <li><a href='#' itemprop='url'><span itemprop='name'>Music</span></a></li>
        </ul>
      </li>
      <li><a href='#' itemprop='url'><span itemprop='name'>Dropdown</span></a>
        <ul>
          <li><a href='#' itemprop='url'><span itemprop='name'>Science</span></a></li>
          <li><a href='#' itemprop='url'><span itemprop='name'>Healthy</span></a></li>
          <li><a href='#' itemprop='url'><span itemprop='name'>Video</span></a></li>
          <li><a href='#' itemprop='url'><span itemprop='name'>Music</span></a></li>
        </ul>
      </li>
      </ul>
      </nav>

### SEO Meta Tag

Buka Blogger, Template, "Edit HTML"

Cari dan ganti semua tulisan xxxxx dengan keterangan blog Anda (Jika tidak diperlukan, hapus saja).

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

Cari dan ganti http://arlinafix.blogspot.com/ dengan URL blog Anda.

    <script type='application/ld+json'>{ &quot;@context&quot;: &quot;http://schema.org&quot;, &quot;@type&quot;: &quot;WebSite&quot;, &quot;url&quot;: &quot;http://arlinafix.blogspot.com/&quot;, &quot;potentialAction&quot;: { &quot;@type&quot;: &quot;SearchAction&quot;, &quot;target&quot;: &quot;http://arlinafix.blogspot.com/?q={search_term}&quot;, &quot;query-input&quot;: &quot;required name=search_term&quot; } }</script>

### Post Page

Iklan di Postingan

Cari dan ganti tulisan ini dengan skrip kode iklan Anda :

Anda bisa memparse kode iklan disini Ad Converter.

    &lt;div style=&quot;display:block;text-align:center;margin:15px auto;&quot;&gt;
    <!-- Kode Banner/Iklan Anda Di sini -->
    &lt;/div&gt;

### Widgets

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 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

Drop Caps

    <span class="first-letter">Your First Letter here</span>

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>

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

Nonaktifkan versi mobile pada template ini, 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.

#### vikka - www.arlinadzgn.com

Top