Fiksioner v3 Theme Documentation - Fiksioner v4

INI ADALAH DOKUMENTASI VERSI LAMA. Untuk mendapatkan dokumentasi versi terbaru, silakan buka artikel Dokumentasi Fiksioner v4.

Indonesia English

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. Silakan download template Blogger gratis Fiksioner di bawah ini.

Kamu bebas mengunduh, memakai, dan mengedit tema ini.
Versi gratis: DILARANG menghapus tautan kredit di footer.
Versi premium: tautan kredit di footer boleh diubah atau dihapus.

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. Free download Fiksioner Blogger theme latest version below.

You are free to download, use, and modify this theme.
Free version: DO NOT remove the credit link at footer.
Premium (Paid) Version: credit link at footer can be removed or modified.

Tutorial is in Indonesian only. Please use Google Translate.

Daftar isi

• 1. Cara Install
  • 1.1. Salin HTML
  • 1.2. Unggah XML
• 2. Meta Tag
  • 2.1. Kode Tracking
  • 2.2. Kata Kunci
  • 2.3. Info Penulis
  • 2.4. Gambar Blog
• 3. Lisensi
• 4. Pengaturan Fitur
  • 4.1. Navigasi Bernomor
  • 4.2. Artikel Terkait di Bawah
  • 4.3. Artikel Terkait Berulang Dalam Postingan
• 5. Mengganti Warna dan Font
• 6. Mengganti Gambar No Image di Homepage
• 7. Posisi Iklan
  • 7.1. Iklan Billboard dan Tengah Artikel
  • 7.2. Iklan Atas Artikel (Bawah Judul)
  • 7.3. Iklan Bawah Artikel
  • 7.4. Iklan In-feed
• 8. Menambah Kode CSS Baru
• 9. Menu Navigasi di Header
  • 9.1. Dropdown
• 10. Menu di Footer
  • 10.1. Widget Subscribe
  • 10.2. Menu Halaman
  • 10.3. Media Sosial
• 11. Teks dan Tautan Kredit
  • 11.1. Teks Copyright
  • 11.2. Hapus Tautan (Link) Kredit igniel.com

Dokumentasi dan Tutorial Template Fiksioner

Artikel ini berisi dokumentasi, tutorial, dan penjelasan lengkap seputar tema Blogger (Blogspot) Fiksioner. Jika ingin melihat jenis font yang digunakan, cara membuat tombol, blockquote, table, syntax highlighter, dan atribut lainnya, silakan kunjungi artikel Gaya dan Tipografi Fiksioner.

1. Cara Install

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

1.1. Salin HTML (Direkomendasikan)

Cara ini direkomendasikan karena akan langsung menghasilkan tampilan yang 100% sama dengan versi demo Fiksioner. 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 (Tema) > Edit HTML.
2. Salin semua kode template yang ada di dalam file hasil dowload lalu paste ke text editor yang muncul.
3. Terakhir klik tombol Save theme.

1.2. Unggah 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 (Tema) > 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. Meta Tag

Bagian ini cukup penting sebagai bagian dari SEO dan pelengkap properti saat link dibagikan di media sosial. Ganti kode berikut menggunakan milik kamu sendiri.

2.1 Kode Tracking

Untuk verifikasi Google Search Console dan Bing Webmaster. Jika belum punya, hapus saja semua baris kode ini. Jika sudah ada, silakan ganti yang ditandai.

<!-- Tracking Code -->
<meta content='xxxxxxxxx' name='google-site-verification'/>
<meta content='xxxxxxxxx' name='msvalidate.01'/>

2.2. Kata Kunci

Ganti dengan keyword atau kata kunci pencarian blog. Pisahkan menggunakan tanda koma.

<!-- Keyword -->
<meta content='Keyword 1, keyword 2, keyword 3, keyword 4, keyword 5, etc' name='keywords'/>
<meta content='Keyword 1, keyword 2, keyword 3, keyword 4, keyword 5, etc' property='article:tag'/>

2.3. Info Penulis

<!-- Facebook, Twitter, and Pinterest Meta Tag -->
<meta content='article' property='og:type'/>
<meta content='Your Name' name='author'/>
<meta content='Your Name' property='article:author'/>
<meta content='xxxxxx' property='fb:admins'/>
<meta content='https://www.facebook.com/xxxxxx' property='article:author'/>
<meta content='https://www.facebook.com/xxxxxx' property='article:publisher'/>
<meta content='@YOURusername' name='twitter:site'/>

• Your Name: nama kamu
• xxxxxx: ID dari akun Facebook atau Fanspage (Halaman)
• @YOURusername: Username Twitter

2.4. Gambar Blog

Gambar ini akan muncul saat membagikan link utama (homepage) di media sosial. Ganti yang ditandai menggunakan URL dari gambar banner atau logo blog kamu sendiri.

<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiufxNJzeU4rUW3ctXHO7nZ8orNz_jxeKisvTKm1PUvcU5Vm-T52xIeN1BKd4QYseP8hMdoZJDWInhoqozSnmd43N1gjAT4hWVlz9XbQMdtg_tvP6UBds-P6LPFnQy2MBCD-amxw4bayYpK/s1600/Fiksioner-Thumbnail-v3.png' property='og:image'/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiufxNJzeU4rUW3ctXHO7nZ8orNz_jxeKisvTKm1PUvcU5Vm-T52xIeN1BKd4QYseP8hMdoZJDWInhoqozSnmd43N1gjAT4hWVlz9XbQMdtg_tvP6UBds-P6LPFnQy2MBCD-amxw4bayYpK/s1600/Fiksioner-Thumbnail-v3.png' name='twitter:image'/>

3. Lisensi

Berada di Layout (Tata Letak) > LICENSE. Bagian ini hanya diisi jika kamu telah membeli versi berbayar. Jika memakai versi gratis, maka kosongkan saja. Widget lisensi tidak boleh dihapus karena akan membuat sebagian script tidak bekerja. Jadi cukup dikosongkan, tapi tidak dihapus.

4. Pengaturan Fitur

Berada di Layout (Tata Letak) > Theme Settings. Di dalamnya berisi kode sebagai pengaturan dari beberapa fitur.

4.1. Navigasi Bernomor

Ditandai dengan navigation. Navigasi bernomor hanya muncul di halaman indeks. TIDAK termasuk di halaman indeks (arsip, pencarian, label) dan postingan.

1. postpage: jumlah halaman yang tampil pada setiap halaman. Jumlahnya HARUS SAMA dengan jumlah halaman yang ditetapkan di pengaturan Blogger. Jika tidak, maka pembagian halamannya akan berantakan.
   

   

2. numpage: jumlah tombol yang muncul.
3. prev: teks untuk penunjuk halaman sebelumnya.
4. next: teks untuk penunjuk halaman berikutnya.
5. totalpage: teks untuk menunjukkan total halaman. Misalnya 1 – 5 / 12, jika diganti bisa menjadi 1 – 5 dari jumlah 12 atau 1 – 5 of 12.

4.2. Artikel Terkait di Bawah

Ditandai dengan relatedpost. Adalah kumpulan artikel terkait (related post) yang ada di bawah setelah isi artikel utama.

1. image: memilih untuk menampilkan gambar atau tidak. true artinya pakai gambar, false artinya TIDAK pakai gambar.
2. num: jumlah artikel terkait.
3. noimage: gambar yang muncul sebagai pengganti jika artikel terkait tidak memiliki gambar.

Jika ingin menghapus artikel terkait di bawah, cari kode ini dan hapus:

<b:include cond='data:view.isPost and !data:view.isPreview' data='post' name='fiksionerRelated'/>

4.3. Artikel Terkait Berulang Dalam Postingan

Ditandai dengan relatedpostMiddlePost. Adalah artikel terkait yang muncul berulang di dalam artikel utama dan disebar secara merata sesuai jumlah paragraf.

1. num: jumlah artikel terkait.
2. text: teks sebagai judul penanda dari artikel terkait.

Jika ingin menghapus artikel terkait berulang, tentukan nilai num menjadi 0.

5. Mengganti Warna dan Font

Bisa langsung dilakukan di Blogger Theme Designer.

1. Masuk ke Theme (Tema) > Customize.
2. Pilih Advanced.
3. Atur semua bagian sesuai keinginan.
4. Setelah selesai, klik ikon simpan di pojok kanan bawah.

6. Mengganti Gambar No Image di Homepage

Gambar "noimage" ini muncul pada halaman utama (homepage) dan indeks (arsip, pencarian, label). Jika artikel tidak memiliki satupun gambar di dalamnya, maka gambar "noimage" ini yang akan muncul. Untuk menggantinya, cari URL ini (semuanya) dan ganti dengan URL gambar milik kamu sendiri.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmNMq3Yogz1cxUluTQaT-tK_8xpPAkhNKcJwn1YihuXWwL2Kw4FkfAkRe7iHeZYKobqWjUKv8J2sPXdO3do3oMwwya_sa5yBLaKrBQTTwAVeSoP-If-Sj363y0bbFQMb5vvfCA95UIye93/s1600/fiksioner-no-image.png

7. Posisi Iklan

Beberapa iklan bisa langsung dimasukkan melalui Layout (Tata Letak) yang ditandak dengan kotak berwarna biru. Pastikan untuk centang tulisan Show HTML/Javascript agar iklan tampil.

7.1. Iklan Billboard dan Tengah Artikel

Perhatikan gambar di atas. Kedua iklan ini bisa langsung diisi melalui kotak widget berwarna biru.

Ada beberapa posisi iklan yang harus dipasang melalui HTML. Diantaranya adalah sebagai berikut:

7.2. Iklan Atas Artikel (Bawah Judul)

Cari kode berikut dan ganti dengan kode iklan.

<!-- Ad code below title / Kode iklan bawah judul -->

7.3. Iklan Bawah Artikel

Cari kode berikut dan ganti dengan kode iklan.

<!-- Ad code below article post / Kode iklan bawah post artikel -->

7.4. Iklan In-feed

Iklan yang muncul di antara feed / daftar artikel di homepage. Cari kode berikut:

<b:if cond='data:infeed == 3'>

Artinya iklan akan muncul setelah artikel ke tiga. Ganti angka yang ditandai sesuai keinginan. Lalu cari kode berikut dan ganti dengan kode iklan.

<!-- Ad code InFeed / Kode iklan InFeed -->

8. Menambah Kode CSS Baru

Menambahkan kode CSS baru tidak perlu ribet melalui HTML. Bisa langsung melalui pengaturan berikut agar lebih mudah.

1. Masuk ke Theme (Tema) > Customize.
2. Pilih Advanced.
3. Pada menu dropdown yang muncul, pilih Add CSS.
4. Masukkan kode CSS pada tempat yang tersedia. Setelah selesai, klik ikon simpan di pojok kanan bawah.

9. Menu Navigasi di Header

Pada Layout (Tata Letak), lihat bagian berjudul HEADER. Edit yang widget bernama Menu. Ubah menu sesuai keinginan.

9.1. Dropdown

Jika ingin menambahkan dropdown, pada <li> induk pastikan untuk menambahkan class dropdown. Lalu pada <a> pertama tambahkan kode yang ditandai:

<a href='#' onclick='return false;' title='Dropdown'>Dropdown</a>

Fungsinya agar halaman tidak loncat ke atas saat induk dari dropdown di-klik. Sehingga kode lengkap khusus dropdown kurang lebih seperti ini:

<li class='dropdown'>
  <a href='#' onclick='return false;' title='Dropdown'>Dropdown</a>
  <ul>
    <li><a href='https://www.alamat.com' title='Sub 1'>Sub 1</a></li>
    <li><a href='https://www.alamat.com' title='Sub 2'>Sub 2</a></li>
  </ul>
</li>

10. Menu di Footer

Pada Layout (Tata Letak), lihat bagian berjudul FOOTERTOP. Ada 3 widget yang bisa diatur, yaitu sebagai berikut:

10.1. Widget Subscribe

Pastikan sudah punya akun di Feedburner terlebih dulu. Edit widget yang bernama Follow By Email dan masukkan URL FeedBurner kamu.

10.2. Menu Halaman

Berisi tautan yang menuju ke halaman statis (page) namun bisa juga diisi dengan tautan eksternal yang mengarah ke alamat blog lain. Edit widget yang bernama Page Links. Untuk mengurutkan posisi tautan, pada pengaturannya bisa digeser ke atas atau bawah.

10.3. Media Sosial

Edit widget yang bernama Social Media. Ganti simbol tanda pagar # dengan ID atau username media sosial kamu.

11. Teks dan Tautan Kredit

Pada Layout (Tata Letak), lihat bagian berjudul FOOTERBOTTOM. Berisi dua widget, yaitu teks copyright dan tautan kredit (link credit)

11.1. Teks Copyright

Edit widget yang bernama Copyright. Itu adalah tulisan untuk footer di bagian kiri. Ubah teksnya sesuai keinginan.

11.1. Hapus Tautan (Link) Kredit igniel.com

Khusus bagian ini hanya bisa diubah atau dihapus jika kamu sudah membeli versi premium. Pelajari perbedaan versi gratis dan berbayar di artikel yang berjudul Perbedaan Tema Fiksioner Versi Free dan Premium.

Sekian isi dari dokumentasi resmi dan tutorial lengkap dari tema Blogger gratis Fiksioner. Jika ada yang kurang atau terlewat silakan komentar di bawah agar bisa segera ditambahkan.