Documentation - Langkah Materi

Fiksioner is a free Blogger theme that suitable for all niches such as personal blogging, news, education, health, tutorial, and other. Optimized for page speed, SEO, and strategic ads placement. You are free to download, use, and edit this theme. DO NOT remove the credit link on footer.

Fiksioner adalah tema Blogspot gratis yang cocok untuk digunakan oleh blog dengan semua tema seperti personal, berita, pendidikan, kesehatan, tutorial, dan lainnya. Dioptimalkan dari segi kecepatan loading halaman, SEO, dan posisi penempatan iklan yang strategis. Kamu bebas mengunduh, memakai, dan mengedit tema ini. DILARANG menghapus link kredit di footer.

1. Cara Install

Berikut adalah cara memasang template Fiksioner. Ada dua cara yang bisa dipilih:

1.1. Copy HTML (Recommended)

Cara ini direkomendasikan karena akan langsung menghasilkan tampilan yang 100% sama dengan versi live demo. Resikonya adalah semua isi widget seperti kode iklan, kode Histats, dll akan hilang. Jadi pastikan simpan dulu semua kode widget tersebut sebelum melakukan cara ini.

1. Masuk ke menu Theme > klik Edit HTML.
2. Copy semua kode template yang ada di dalam file hasil dowload lalu paste ke text editor yang muncul.
3. Terakhir klik tombol Save theme.

Related:Ordered List (ol) and Unordered List (ul)

1.2. Upload XML

Cara ini aman karena semua widget yang sudah terpasang sebelumnya tidak akan ikut terhapus. Tapi ada kemungkinan letak widget akan berantakan karena tidak sesuai dengan kode HTML template Fiksioner. Cara memperbaikinya mudah, tinggal geser-geser posisinya di menu Layout (Tata Letak).

1. Masuk ke menu Theme > klik Backup / Restore.
2. Jika ingin melakukan backup pada template yang sedang digunakan, klik tombol Dowload theme.
3. Setelah itu langsung upload template Fiksioner dengan klik tombol Choose File dan cari lokasi file .xml berada.
4. Terakhir, klik tombol Upload.

2. Iklan di Dalam Postingan

2.1. Iklan Atas Artikel / Bawah Judul

Cari kode berikut dan ganti dengan kode iklan kamu.

<!-- Ads below title / Ads above post / Iklan bawah judul / Iklan atas artikel -->

2.2. Iklan Bawah Artikel

Cari kode berikut dan ganti dengan kode iklan kamu.

<!-- Ads below article / Iklan bawah post -->

2.3. Iklan Tengah Artikel

Silakan ikuti tutorial Cara Memasang Iklan di Tengah Postingan Blogger.

Related:Table

3. Menambah Script Lain

Fiksioner sudah dilengkapi dengan Javascript bawaan. Agar tampilannya maksimal dan fitur tidak rusak, pastikan untuk TIDAK menghapus script bawaan tersebut. Kamu bisa menambahkan script lain dengan meletakkannya tepat di area yang ditandai.

function fiksioner() {
  // Put all of your scripts here
  //---- DELETE me and REPLACE with your code ----//
}

4. Menu Navigasi

Untuk menambah / mengurangi menu di header atas, cari kode berikut dan ganti, tambahkan, atau kurangi kode yang ditandai.

<div class='fiksionerMenu'>
  <div class='inner'>
    <div class='button'>
      <svg viewBox='0 0 24 24'><path d='M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z'></path></svg>
    </div>
    <ul>
      <li><a href='https://fiksioner.blogspot.com' title='Download Template'>Download Template</a></li>
      <li><a href='#' title='Menu 1'>Menu 1</a></li>
      <li><a href='#' title='Menu 2'>Menu 2</a></li>
      <li><a href='#' title='Menu 3'>Menu 3</a></li>
      <li><a href='#' title='Dropdown'>Dropdown</a>
        <ul>
          <li><a href='#' title='Submenu 1'>Submenu 1</a></li>
          <li><a href='#' title='Submenu 2'>Submenu 2</a></li>
          <li><a href='#' title='Submenu 3'>Submenu 3</a></li>
        </ul>
      </li>
    </ul>

5. Subscribe Box di Footer

Pastikan sudah punya akun di Feedburner terlebih dulu. Pergi ke Edit HTML dan cari 'fiksionerAdditional'. Di sekitar area tersebut, cari dan ganti kata igniel (ada 3 buah) dengan username Feedburner kamu.

6. Menu Link di Footer

Cari kode berikut dan ganti dengan link masing-masing.

<div class='menu'>
  <a href='#' title='About'>About</a>
  <a href='#' title='Contact'>Contact</a>
  <a href='#' title='Disclaimer'>Disclaimer</a>
  <a href='#' title='Privacy Policy'>Privacy Policy</a>
  <a href='#' title='Sitemap'>Sitemap</a>
</div>

Related:Blockquote

7. Media Sosial di Footer

Cari kode <div class='social'> dan ganti link media sosial yang terdapat di sekitarnya dengan milik masing-masing.

8. Drop Caps

Drop caps adalah huruf pertama yang lebih besar dari huruf lainnya agar tulisan terkesan seperti novel. Untuk menggunakannya:

<span class='drop'>L</span>

L orem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique lobortis orci ac lacinia. Fusce eu purus eget diam vehicula auctor nec eu elit. Morbi consequat facilisis orci vel malesuada. Donec ultrices molestie sollicitudin. Aliquam pharetra libero enim. Donec et suscipit massa. Donec dui odio, dignissim non sodales et, tincidunt a sapien. Phasellus elit nibh, adipiscing sed blandit vel, interdum et arcu.

9. Tabel

Kode untuk menampilkan table:

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

Related:Fiksioner Template Documentation

Hasilnya:

Judul 1	Judul 2	Judul 3
Konten 1	Konten 2	Konten 3
Konten 1	Konten 2	Konten 3
Konten 1	Konten 2	Konten 3

10. Blockquote

Kode untuk menampilkan blockqoute:

<blockquote>Maybe somewhere out there even a devil may cry when he loses a loved one. Don't you think? - Devil May Cry 3</blockquote>

Hasilnya:

Maybe somewhere out there even a devil may cry when he loses a loved one. Don't you think? - Devil May Cry 3

11. Gaya Lainnya (Text, Font, Tombol)

Cek di artikel berikut:

1. Heading, Text Size and Font Style
2. Ordered List (ol) and Unordered List (ul)