Home  ›  Info

Documentation and Element Igniplex

7 Comments
Daftar isi

1. Cara Install

Berikut adalah cara memasang template Igniplex. 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 (Tema) » 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.

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 Igniplex. 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 Download theme.
  3. Setelah itu langsung upload template Igniplex 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. Dalam Igniplex terdapat beberapa meta tag, namun yang dituliskan di bawah ini adalah yang perlu diganti. Selain yang tercantum di bawah berarti tidak usah diganti.

2.1. 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/AVvXsEg5MQeYdlCKku7n-cUoHQyFFXjGG07gfuqUOxR_gPXXvNytwXMevrLuXjcMuA8j5DmXiNpImnIIFFifLIvuQn2Wl6gsV8L1r0k0Ngnwjs5bUu6ClQ8Yc96YJKU3z5jLvIyWsYEdpjb7jHCt/s1600/Igniplex-Documentation.png' property='og:image'/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5MQeYdlCKku7n-cUoHQyFFXjGG07gfuqUOxR_gPXXvNytwXMevrLuXjcMuA8j5DmXiNpImnIIFFifLIvuQn2Wl6gsV8L1r0k0Ngnwjs5bUu6ClQ8Yc96YJKU3z5jLvIyWsYEdpjb7jHCt/s1600/Igniplex-Documentation.png' name='twitter:image'/>

2.2. Keyword

Ganti dengan keyword atau kata kunci pencarian blog. Pisahkan menggunakan tanda koma.
<b:comment>KEYWORD</b:comment>
<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 Author

<b:comment>AUTHOR</b:comment>
<meta content='Your Name' name='author'/>
<meta content='Your Name' property='article:author'/>
<link href='https://www.blogger.com/profile/xxxxxxxxxx' rel='me'/>
<link href='https://www.blogger.com/profile/xxxxxxxxxx' rel='author'/>
<link href='https://www.blogger.com/profile/xxxxxxxxxx' rel='publisher'/>
<meta content='xxxxxxxxxx' property='fb:admins'/>
<meta content='https://www.facebook.com/xxxxxxxxxx' property='article:author'/>
<meta content='https://www.facebook.com/xxxxxxxxxx' property='article:publisher'/>
<meta content='@username' name='twitter:site'/>
<meta content='@username' name='twitter:creator'/>
  • Your Name: nama kamu
  • xxxxxxxxxx: ID dari akun Facebook atau Fanspage (Halaman)
  • @username: Username Twitter

2.4. Kode Tracking

Untuk verifikasi Google Search Console, Bing Webmaster. Jika belum punya, hapus saja semua baris kode ini. Jika sudah ada, silakan ganti yang ditandai. Jika ada kode verifikasi dari situs lain pun tempatkan di sini.
<b:comment>TRACKING CODE</b:comment>
<meta content='xxxxxxxxx' name='google-site-verification'/>
<meta content='xxxxxxxx' name='msvalidate.01'/>

3. Mengganti Warna

Skema warna Light dan Dark bisa langsung dilakukan di Theme Designer.
  1. Masuk ke Theme (Tema) » Customize (Sesuaikan).
  2. Pilih Advanced (Lanjutan) dan Atur semua bagian sesuai keinginan. Setelah selesai, klik tombol Apply to Blog.

3.1. Mengganti Warna Dark Mode

Warna dark mode bisa langsung diganti melalui Theme Designer. Tidak perlu pusing edit CSS sendiri!
Aktifkan dulu dark mode di menu yang tersedia lalu pilih bagian Igniplex Color Dark dan Single Post Dark. Setelah selesai, klik tombol Apply to Blog.

4. Pasang Kode Iklan

JANGAN masukkan script <script async src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'></script> karena kode tersebut sudah ada di dalam template. Memasukkannya berulang hanya akan menambah beban loading. Cukup ditulis mulai dari <ins Contoh:
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="xxxxxxxxxx"
data-ad-format="auto"
data-full-width-responsive="true"></ins>

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

5. Posisi Iklan

Beberapa posisi iklan bisa dipasang langsung melalui widget yang ditandai dengan kotak berwarna merah pada Layout (Tata Letak). Klik ikon pensil, masukkan kode iklan (ingat, ikuti aturan penulisan pada nomor 4 di atas agar loading halaman tetap cepat), centang Visible, lalu tekan tombol Save.

5.1. Iklan Atas Artikel (Bawah Judul)

Cari kode berikut dan ganti dengan kode iklan.
<!-- Ads code below title / Kode iklan bawah judul -->

5.2. Iklan Bawah Artikel

Cari kode berikut dan ganti dengan kode iklan.
<!-- Ads code below article / Kode iklan bawah artikel -->

5.3. Iklan Tengah Artikel Berulang

Satu slot iklan tengah artikel telah tersedia di widget. Namun jika tidak cukup satu dan ingin menempatkan banyak iklan sekaligus, ikuti langkah berikut.
  1. Pada HTML blog, cari kode ini: 
    <data:post.body/>
  2. Tambahkan kode HTML ini DI BAWAH kode yang tadi ditemukan. 
    <<b:if cond='data:view.isPost'>
  <div class='igniplexTengah'>
    Masukkan kode iklan di sini.
  </div>
</b:if>
  3. Jika ingin lebih banyak slot iklan lagi, tinggal lakukan pengulangan pada elemen HTML dengan class igniplexTengah. Jumlah pengulangan sesuai dengan jumlah iklan yang ingin ditampilkan. Contohya sebagai berikut: iklan tengah akan tampil sebanyak 3 kali. 
    <<b:if cond='data:view.isPost'>
  <div class='igniplexTengah'>
    Masukkan kode iklan di sini.
  </div>
  <div class='igniplexTengah'>
    Masukkan kode iklan di sini.
  </div>
  <div class='igniplexTengah'>
    Masukkan kode iklan di sini.
  </div>
</b:if>
Tidak hanya iklan, setiap elemen HTML yang diberi nama class igniplexTengah akan otomatis ditempatkan di tengah artikel.

5.4. Ganti Related Post dengan Iklan Matched Content

Cari kode ini di HTML blog:
<b:include cond='data:view.isPost and !data:view.isPreview' name='igniplexRelated'/>
HAPUS kode tersebut dan ganti dengan kode ini:
<b:if cond='data:view.isPost and !data:view.isPreview'>
  <div class='matched'>
    <h3 class='title'>Related Posts</h3>
    <div class='widget-content'>
      Masukkan kode iklan matched content di sini.
    </div>
  </div>
</b:if>

6. Menambah Script Lain

Letakkan script tambahan lain di dalam fungsi otherScript().
function otherScript() {
  //-----START -----//      
  Tulis script di sini.
  //-----STOP -----//
}
Langsung tuliskan isi script. Tidak perlu menuliskan tag pembuka <script> terlebih dulu.
  1. Contoh yang BENAR. 
    function otherScript() {
  //-----START -----//      
    $(function(){$('#comments p').find('a').contents().unwrap();});
  //-----STOP -----//
}
  2. Contoh yang SALAH. 
    function otherScript() {
  //-----START -----//   
    <script>
      $(function(){$('#comments p').find('a').contents().unwrap();});
    </script>
  //-----STOP -----//
}
  1. Cari kata kunci 'MenuList' (gunakan simbol apostrophe agar lebih mudah mencari).
  2. Tepat di bawah kode <ul> terdapat kumpulan kode HTML untuk menu.
  3. Menu dimulai dari tag <li> sampai </li>. Cukup ganti kode dalam tag <a> saja. Contoh: 
    <li><a href="#" title="Judul Menu">Judul Menu</a></li>

<!-- Ganti Menjadi Seperti Ini -->

<li><a href="https://www.igniel.com" title="Igniel">Igniel</a>
  4. Jika ingin menambah dropdown, pastikan menulis dan menempatkan posisinya sesuai contoh bawaan pada tema.
  1. Cari kata kunci 'NavMenu' (gunakan simbol apostrophe agar lebih mudah mencari).
  2. Pada area tersebut terdapat kode seperti ini. Ganti dan sesuaikan. 
    <div class='ava'>
  <img class='lazy' src='data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' data-src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggLK3uInOeVB3UGdQ9It1xzsr04dPGUMBhGOzUyTdfUGIimZEKWuI0OapEYm9EcaLfk95W3Gmn1JvUbWIjNC05P4A8Zd8AGS7q61Ica3rOnshGuBxyk25ohBxyMt3L_5MFKDiQLg6oVG9n/s75/Lain.jpg' title='Author' alt='Author' width='75' height='75'/>
    <svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path class='stroke' d='M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z'/><path d='M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z'/></svg>
</div>
<div class='info'>
  <div class='name'>Your Name</div>
  <div class='follow'><a expr:href='"https://www.blogger.com/follow-blog.g?blogID=" + data:blog.blogId' title='Follow' target='_blank' rel='nofollow noopener'>FOLLOW</a></div>
</div>
    • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggLK3uInOeVB3UGdQ9It1xzsr04dPGUMBhGOzUyTdfUGIimZEKWuI0OapEYm9EcaLfk95W3Gmn1JvUbWIjNC05P4A8Zd8AGS7q61Ica3rOnshGuBxyk25ohBxyMt3L_5MFKDiQLg6oVG9n/s75/Lain.jpg: ganti dengan URL foto kamu.
    • Your Name: nama kamu
    PENTING: pada versi 2.4 dan 2.5, ID blog harus diganti manual. Ganti yang ditandai dengan ID blog kamu. TIDAK perlu dilakukan jika sudah pakai versi 2.6.
    <li class='follow'><a href='https://www.blogger.com/follow-blog.g?blogID=6398971660957230974' title='Follow' target='_blank' rel='nofollow noopener'>FOLLOW</a></li>
  3. Lihat di bagian bawahnya, ada kode kurang lebih seperti ini. Ada 5 buah link yaitu About, Contact, Disclaimer, Privacy Policy, dan Sitemap. Ganti yang ditandai dengan link masing-masing. 
    <li>
  <a href='#' title='About Me' itemprop='url'>
  <svg viewBox='0 0 24 24'><path d='M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,6A2,2 0 0,0 10,8A2,2 0 0,0 12,10A2,2 0 0,0 14,8A2,2 0 0,0 12,6M12,13C14.67,13 20,14.33 20,17V20H4V17C4,14.33 9.33,13 12,13M12,14.9C9.03,14.9 5.9,16.36 5.9,17V18.1H18.1V17C18.1,16.36 14.97,14.9 12,14.9Z'/></svg><span itemprop='name'>About Me</span></a>
</li>
    Lakukan lagi pengubahan pada link yang lain.
  4. Lihat lagi kode di bawahnya untuk link media sosial. Ganti tanda pagar # dengan ID atau username media sosial masing-masing. 
    <a class='facebook' href='https://www.facebook.com/#' rel='nofollow noopener' target='_blank' title='Facebook'><svg viewBox='0 0 24 24'><path d='M17,2V2H17V6H15C14.31,6 14,6.81 14,7.5V10H14L17,10V14H14V22H10V14H7V10H10V6A4,4 0 0,1 14,2H17Z'/></svg></a>
    Lakukan lagi pengubahan pada link media sosial yang lain seperti Twitter, Instagram, dll.

9. Mengganti Gambar Noimage

Setiap artikel yang tidak memiliki gambar akan otomatis digantikan oleh gambar lain. Jika ingin mengubah gambar default yang disediakan Igniplex, cari kode berikut di HTML blog dan ganti dengan URL gambar kamu.

  • Khusus versi 2.6 (kode ada 4 buah) 
    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4XPCv2OIozi62wmxoZDaQbY51EnSNP9wtHvxRbrL3ZXE-JN8NrMGw7l6gxppcc_b0RcHrRBCcCMcldeUvRVsXvHpmG07OH8_mtImSHNpTyUjTWEXtcLLqOx_O3LnYL9iH2rGO25_gZyZR/s1600/igniplex-noimage.png
  • Khusus versi 2.5 (kode ada 4 buah) 
    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho8KNfg4udYIkdsIyh2paGIj-bNYXx6c-4Fa3e_9BrZlRjLsNf9HhKvkomIw94j7_-egQAmTYjFvk0RCjGWB_tYubKYUfPDLIf-jCtssFR989KrQ8BZsNHlFWYV1XZb7rHFxPkf1-bVMHU/s1600/igniplex-no-image.png
  • Khusus versi 2.4 (kode ada 5 buah dengan URL berbeda) 
    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH8MHBVpzUzG9zi0-ovHY1oTI9UyLtjeoblI3QUZjG3ouXa1ULT2hIKxZGvpuDXYRf7Bab9o2clv4U_JWMhaBVA7BNLAAQRGCvMEKo44gE6jPXUf-4Yudl2tjjysexvFW_Bz-ehyUhQKOx/s50/igniplex-no-image.png (ada 1 buah)

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH8MHBVpzUzG9zi0-ovHY1oTI9UyLtjeoblI3QUZjG3ouXa1ULT2hIKxZGvpuDXYRf7Bab9o2clv4U_JWMhaBVA7BNLAAQRGCvMEKo44gE6jPXUf-4Yudl2tjjysexvFW_Bz-ehyUhQKOx/s1600/igniplex-no-image.png (ada 4 buah)

10. Menampilkan Deskripsi (Snippet) di Homepage


Pada kode HTML blog, cari kode ini:
.post-snippet{
display:none;
color:var(--igniplexSingleLight);
font-size:.925rem;
margin-top:15px;
transition:all .2s ease;
}
Ubah yang ditandai menjadi block, sehingga kode akhirnya seperti ini:
.post-snippet{
display:block;
color:var(--igniplexSingleLight);
font-size:.925rem;
margin-top:15px;
transition:all .2s ease;
}

11. Mengaktifkan Slider

Secara default, slider tidak akan mucul. Untuk mengaktifkannya pergi ke Pengaturan dan cari kode berikut:
slider: {
  pakai: false,
Ganti nilai false menjadi true

11.1. Hapus Slider

Jika benar-benar ingin menghilangkan slider besar di bawah header:
  1. Masuk ke Layout (Tata Letak), lihat menu igniplexSlider.
  2. Klik edit (ikon pensil) di Popular.
  3. Hapus centang di bagian Visible.
  4. Terakhit tekan tombol Save.

12. Pilih Jenis Navigasi

PENTING: fitur pilih navigasi baru tersedia pada versi 2.6. Pada versi 2.4 hanya ada halaman bernomor, dan versi 2.5 hanya ada infinite scroll.
Untuk memilih, pergi ke Pengaturan dan cari kode berikut:
slider: {
  navigasi: 1,
  • Jika nilai 1: infinite scroll.
  • Jika nilai 2: halaman bernomor.
  • Jika nilai 3: navigasi biasa (nonaktifkan infinite scroll dan halaman bernomor).

13. Pengaturan Infinite Scroll

PENTING: infinite scroll hanya tersedia di versi 2.6 dan 2.5.

13.1. Ganti Tulisan

Cari kode ini dan ganti tulisan yang ditandai.
  • Khusus versi 2.6 
    <div class='inner'>
  <a expr:href='data:olderPageUrl' expr:title='data:messages.older'>Load More</a>
</div>
  • Khusus versi 2.5 
    <a class='blog-pager-older-link ripple' expr:href='data:olderPageUrl' expr:title='data:messages.older'><span>
  Load More
</span></a>

13.2. Ganti Tulisan Saat Loading

Hanya tersedia di versi 2.5. Pada versi 2.6 diganti menjadi gambar ikon loading. Tulisan yang tampil saat halaman baru sedang dimuat. Pergi ke Pengaturan dan cari kode berikut. Ganti tulisan yang ditandai.
infinite_scroll: {
  pakai: true,
  text: 'Loading...'
},

13.3. Nonaktikan Infinite Scroll

Pergi ke Pengaturan dan cari kode berikut.
  • Khusus versi 2.6 Ganti nilai 1 menjadi 3.
    navigasi: 1,

  • Khusus versi 2.5 Ganti nilai true menjadi false.
    infinite_scroll: {
  pakai: true,
  text: 'Loading...'
},

14. Pengaturan Halaman Bernomor

PENTING: halaman bernomor hanya tersedia di versi 2.6 dan 2.4.

14.1. Jumlah Halaman

Pengaturan jumlah tampilan_per_halaman harus SAMA PERSIS dengan jumlah halaman yang ditampilkan di homepage pada pengaturan Blogger. Jumlahnya sendiri diatur di Layout (Tata Letak) » Blog Posts » Number of posts on main page.

Pergi ke Pengaturan dan cari kode berikut. Ganti angka yang ditandai sesuai dengan jumlah pada pengaturan Blogger.
  • Khusus versi 2.6 
    navigasi_nomor: {
  tampilan_per_halaman: 6,
  tampilan_tombol_navigasi: 3,
},
  • Khusus versi 2.5 
    halaman_bernomor: {
  pakai: true,
  tampilan_per_halaman: 6,
  tampilan_nomor_navigasi: 3,
},

14.2. Jumlah Tombol

Ganti angka yang ditandai sesuai dengan jumlah tombol yang ingin ditampilkan.
  • Khusus versi 2.6 
    navigasi_nomor: {
  tampilan_per_halaman: 6,
  tampilan_tombol_navigasi: 3,
},
  • Khusus versi 2.5 
    halaman_bernomor: {
  pakai: true,
  tampilan_per_halaman: 6,
  tampilan_nomor_navigasi: 3,
},

14.3. Nonaktikan Halaman Bernomor

Pergi ke Pengaturan dan cari kode berikut.
  • Khusus versi 2.6 Ganti nilai 1 menjadi 3.
    navigasi: 1,
  • Khusus versi 2.5 Ganti nilai true menjadi false.
    halaman_bernomor: {
  pakai: true,

15. Lazy Load AdSense

Hanya tersedia di versi 2.6 dan 2.5. Fungsinya untuk memuat iklan saat halaman di-scroll agar loading terasa lebih ringan. Jika dinonaktifkan maka iklan akan langsung dimuat tanpa harus ada aktifitas scroll terlebih dulu.
Ada di menu Pengaturan. Jika true maka aktif, jika false maka nonaktif.
lazyads: true

16. Anti AdBlock

Ada di menu Pengaturan. Ganti yang ditandai jika perlu.
adblock: {
  pakai: true,
  text: 'Matikan AdBlock pada browser untuk melihat konten blog ini.'
},
  • pakai: jika true maka aktif, jika false maka nonaktif.
  • text: tulisan pada notifikasi anti adblock.
Hanya tampil di halaman postingan tunggal (post) artikel. Fungsinya untuk mengubah navigasi bawaan Blogger menjadi memiliki judul. Untuk mengaturnya pergi ke Pengaturan. Yang ditandai berarti bisa diganti.
halaman_berjudul: {
  pakai: true,
  next: 'Next',
  prev: 'Previous',
  latest: 'Latest',
  oldest: 'Oldest'
},
  • pakai: jika true maka aktif, jika false maka nonaktif.
  • next: tulisan penunjuk artikel lebih baru.
  • prev: tulisan penunjuk artikel lebih lama.
  • latest: tulisan penunjuk artikel paling baru.
  • oldest: tulisan penunjuk artikel paling lama.

18. Related Post Tengah Artikel

Diatur di Pengaturan. Yang ditandai berarti bisa diganti.
  • Khusus versi 2.6 dan 2.5 
    related_post_tengah: {
  jumlah: 4,
  image: false,
  noimage: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRGmlWl_hJ5Bg2OleTmvkD-56XuHtWO8rtiUOG5kI_ENCym8al322wKQXCvYHVPROCb1Z9U5wk17HcR3hxEVavjNYEJ9joDIPx7EVjhv_UbV7uNl8jtUfe_H5gzxYgal6A1Ji2rDlM8juM/s1600/igniplex-noimage.png'
},
    • jumlah: jumlah related post.
    • image: jika true maka akan disertai gambar, jika false maka hanya teks.
    • noimage: gambar pengganti jika tidak memiliki gambar pada artikel aslinya.
  • Khusus versi 2.4 Hanya bisa diatur jumlahnya saja. Ganti angka yang ditandai sesuai keinginan.
    related_post_tengah: 4

19. Related Post Bawah Artikel

Diatur di Pengaturan. Yang ditandai berarti bisa diganti.
related_post_bawah: {
  jumlah: 6,
  image: false,
  noimage: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4XPCv2OIozi62wmxoZDaQbY51EnSNP9wtHvxRbrL3ZXE-JN8NrMGw7l6gxppcc_b0RcHrRBCcCMcldeUvRVsXvHpmG07OH8_mtImSHNpTyUjTWEXtcLLqOx_O3LnYL9iH2rGO25_gZyZR/w250-h167-p-k-no-nu/igniplex-noimage.png'
},
  • jumlah: jumlah related post.
  • image: jika true maka akan disertai gambar, jika false maka hanya teks.
  • noimage: gambar pengganti jika tidak memiliki gambar pada artikel aslinya.
Khusus versi 2.4 tidak bisa on / off gambar. Semuanya otomatis pakai gambar.

20. Random Post Middlebar

Hanya tersedia di versi 2.6 dan 2.5. Tampil hanya di homepage dan halaman index (bukan halaman postingan). Fungsinya untuk menampilkan artikel secara random. TIDAK PERLU memasukkan kode apapun di widget di Layout (Tata Letak). Random post akan muncul secara otomatis.
Untuk mengatur pergi ke menu Pengaturan.
middlebar: {
  jumlah: 4,
  image: false,
  noimage: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4XPCv2OIozi62wmxoZDaQbY51EnSNP9wtHvxRbrL3ZXE-JN8NrMGw7l6gxppcc_b0RcHrRBCcCMcldeUvRVsXvHpmG07OH8_mtImSHNpTyUjTWEXtcLLqOx_O3LnYL9iH2rGO25_gZyZR/w75-h56-p-k-no-nu/igniplex-noimage.png'
}
  • jumlah: jumlah related post. Pastikan jumlahnya TIDAK LEBIH BANYAK dari jumlah artikel asli agar widget tidak error.
  • image: jika true maka akan disertai gambar, jika false maka hanya teks.
  • noimage: gambar pengganti jika tidak memiliki gambar pada artikel aslinya.

20.1. Hapus Middlebar

Ada dua langkah yang harus dilakukan.
  1. Masuk ke Layout lalu klik ikon pensil pada widget Random. Hapus centang di bagian Visible. Jangan lupa klik tombol Save.
  2. Masuk ke Theme » Customize » Advanced » Middlebar. Geser panel atau ubah angkanya menjadi 0. Terakhir klik tombol Apply to Blog.

21. Paginasi (Page Split)

Fungsinya untuk memecah artikel menjadi beberapa halaman, contohnya seperti artikel ini Split Halaman Blogspot (Seperti WordPress) atau ini Blogger Pagination Demo. Untuk mengaktifkannya, saat menulis artikel pilih mode HTML(bukan Compose). Lalu tulis kode sbb:
<div class="ignielPagination">
Isi artikel di halaman satu.
</div>

<div class="ignielPagination">
Isi artikel di halaman dua.
</div>
Kode bisa diulang sebanyak halaman yang diinginkan. Contoh di atas akan membuat artikel terpecah menjadi 2 halaman. Jika ingin membagi menjadi 5 halaman, tulis kode itu sebanyak 5 kali.

22. Tampilan Grid Dua Kolom di Versi Mobile

PENTING: ini hanya mengubah jumlah kolom dari dua menjadi satu, bukan mengubah tampilannya menjadi model list. Perubahan jumlah kolom hanya muncul di versi mobile saja. Tujuannya agar kolom tidak terlihat kecil saat dibuka di layar yang lebih kecil. Jika dibuka di desktop, jumlah kolom akan tetap sama yaitu 2.
Secara default, grid akan berjumlah dua kolom baik di versi desktop maupun mobile. Untuk menonaktifkan grid di versi mobile (agar ukuran grid hanya satu menjadi besar) cari kode berikut di HTML blog:
body data-grid-mobile='true'
Ganti nilai true menjadi false.

23. Byline Label

Adalah teks tambahan di depan tanggal dan label. Untuk mengubah:
  1. Masuk ke Layout dan klik edit (ikon pensil) di Blog Posts.
  2. Aktifkan centang di bagian tanggal dan label. Ganti teksnya sesuai keinginan lalu klik tombol Save.
Pada versi 2.6 hanya bisa diubah byline label tanggal.

Pada versi 2.5 bisa diubah byline label tanggal dan label.

24. Menghilangkan Tanggal di SERP

Pergi ke Layout (Tata Letak) lalu klik ikon pensil pada kotak Blog Posts. Hilangkan ceklis pada bagian yang terdapat tanggal lalu klik tombol Save.

Memiliki kelebihan yaitu artikel terlihat selalu fresh karena tanggal terbit tidak terlihat. Tanggal tidak akan langsung hilang di SEPR. Butuh waktu yang cukup lama. Tunggu saja sampai blog kamu diindex ulang oleh mesin pencari.
Jika tanggal dihilangkan mungkin akan memunculkan pesan kesalahan di Structure Data Google. Ini terjadi karena tanggal seharusnya ditulis, namun kamu memilih untuk menghilangkannya.

25. Formulir Kontak di Halaman Statis

  1. Buat PAGE / HALAMAN baru. Pilih mode HTML (bukan Compose), simpan semua script di bawah ke dalamnya.
  2. Ganti angka 4444xxxxxxxxxx4444 (ada 4 buah) dengan ID blog kamu.
  3. Ganti domain.blogspot.com dengan alamat blog kamu.
PENTING: agar tidak terjadi error, lakukan proses edit di Notepad. Setelah selesai baru salin ke editor Blogger tanpa mengubah apapun lagi dan langsung terbitkan.
<form id="kontak" name="contact-form"><div class="top">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Nama" size="30" type="text"/>
<input id="ContactForm1_contact-form-email" name="email" size="30" placeholder="Email" type="text"/> 
</div> 
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Isi pesan" rows="5"></textarea> 
<input id="ContactForm1_contact-form-submit" type="button" class="ripple" value="Kirim Pesan"/> 
<div class="bottom"> 
<div id="ContactForm1_contact-form-error-message"></div> 
<div id="ContactForm1_contact-form-success-message"></div> 
</div></form> 
 
<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script> 
<script>//<![CDATA[ 
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '4444xxxxxxxxxx4444';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d4444xxxxxxxxxx4444','//domain.blogspot.com/','4444xxxxxxxxxx4444'); 
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Your message has been sent.', 'contactFormMessageNotSentMsg': 'Message could not be sent. Please try again later.', 'contactFormInvalidEmailMsg': 'A valid email address is required.', 'contactFormEmptyMessageMsg': 'Message field cannot be empty.', 'title': 'Contact Form', 'blogId': '4444xxxxxxxxxx4444', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull')); 
//]]></script>

Elements include formatting styles, fonts, buttons, and other writing attributes related to visuals. On this page, you will see an example of the formatting styles in Igniplex theme, find out how to create and what code is needed to show these elements.
Elemen mencakup formatting style (gaya pemformatan), font, tombol, dan atribut penulisan lainnya yang berhubungan dengan visual. Di halaman ini kamu akan melihat contoh gaya pemformatan tema Igniplex, mengetahui bagaimana cara membuat dan kode apa yang dibutuhkan untuk memunculkan elemen tersebut.

1. Paragraph Break (Dots)

Only available since v2.6. There are three dots that can be used for separate paragraph and give space like this: HOW TO USE
<hr/>

2. Syntax Highlighter

/* SYNTAX HIGHLIGHTER */
pre{
background-color:#333;
border-left:5px solid #009688;
padding:0;
margin:.5em auto;
}
HOW TO USE
<pre><code>Parsed code write here</code></pre>

3. Button

3.1. Fill

3.1.1. Default

HOW TO USE
<button>Button</button>

3.1.2. Download

HOW TO USE
<a href="https://www.google.com"><button class="download">Download</button></a>

3.1.3. Demo

HOW TO USE
<a href="https://www.google.com"><button class="demo">Demo</button></a>

3.2. Outline

Buttons with outline are only available since v2.6
3.2.1. Default

HOW TO USE
<button class="outline">Button</button>

3.2.2. Download

HOW TO USE
<a href="https://www.google.com"><button class="outline download">Download</button></a>

3.2.3. Demo

HOW TO USE
<a href="https://www.google.com"><button class="outline demo">Demo</button></a>

4. Boxes

Box default
Box green
Box blue
Box red
Box yellow

HOW TO USE: Choose one of these codes according to color.
<div class="box">Write text here. The box will be default color.</div>
<div class="box green">Write text here. The box will be green.</div>
<div class="box blue">Write text here. The box will be blue.</div>
<div class="box red">Write text here. The box will be red</div>
<div class="box yellow">Write text here. The box will be yellow.</div>

5. Blockquote

5.1. Normal

Social media marketing, social media optimization, blogger tutorial for beginners. Stimulate your passion! #Nganggurpreneur
HOW TO USE 
<blockquote>Your text</blockquote>

5.2. With Author Name

Blockquote with author only available since v2.6
Karena sesungguhnya sesudah kesulitan itu ada kemudahan.

QS,. Ash-Sharh:5
HOW TO USE 
<blockquote>Your text
  <footer>Author</footer>
</blockquote>

6. Dropcaps

To make the first letter become bigger. Dropcaps only available since v2.6



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.
HOW TO USE 
<span class="drop">L</span> orem ipsum dolor sit amet, consectetur adipiscing elit.

7. Table

No. Nama Kota
1 Igniel Sukabumi
2 Rain Bandung
3 RedSky Jakarta
4 Queen Bekasi
5 Bjita Tangerang
6 Alphabetees Bogor
HOW TO USE 
<table>
  <thead>
    <tr>
      <th>TITLE 1</th>
      <th>TITLE 2</th>
      <th>TITLE 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Entry 1</td>
      <td>Entry 2</td> 
      <td>Entry 3</td>
    </tr>
  </tbody>
</table>

8. Ordered List

Is a list with number.
  1. Satu satu satu
  2. Dua dua dua
  3. Tiga tiga tiga
  4. Empat empat empat
  5. Lima lima lima
  6. Enam enam enam
  7. Tujuh tujuh tujuh
  8. Delapan delapan delapan
  9. Sembilan sembilan sembilan
  10. Sepuluh sepuluh sepuluh
HOW TO USE 
<ol>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ol>

9. Unordered List

Is a list without number.
  • Satu satu satu
  • Dua dua dua
  • Tiga tiga tiga
  • Empat empat empat
  • Lima lima lima
  • Enam enam enam
  • Tujuh tujuh tujuh
  • Delapan delapan delapan
  • Sembilan sembilan sembilan
  • Sepuluh sepuluh sepuluh
HOW TO USE 
<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>

Sumber : member.igniel.com



7 Responses to "Documentation and Element Igniplex"

  1. Wahyu DevelopmentJune 02, 2020

    Terimakasih, senang membantu Anda 😊

    ReplyDelete
  2. FerisSeptember 27, 2020

    Untuk kode slider nya di pengaturan saya kok gk ada ya min

    ReplyDelete
    Replies
    1. Wahyu DevelopmentSeptember 27, 2020

      Apakah situ download template dari google atau beli gan? Klo download sepertinya banyak yg di edit jdi saya sarankan untuk membelinya gan

      Delete
    2. FerisOctober 02, 2020

      Ane dpet dari google gan ? Ane udh coba versi berapa pun tp tetep gk bisa mengganti dari grid ke slider

      Delete
    3. Wahyu DevelopmentOctober 02, 2020

      Lah iya, klo download dari google pastinya sudah bnyk yg di rubah, jdi klo gx bisa wajar gan🙏

      Delete
    4. FerisOctober 02, 2020

      Ane pgn beli template nya gan, tp lg miskin 😁.
      Gmna caranya yh gan ganti slider ke grid tanpa harus beli tnplete

      Delete
  3. TaupikAugust 04, 2022

    Mantap min kebetulan ane pakai igniplex juga.
    Mampir juga ke web ane androidkentang.com

    ReplyDelete

√ Komentar anda adalah motivasi kami!
√ Untuk menyisipkan code gunakan
<i rel="code">Tuliskan Code</i>
√ Untuk menyisipkan gambar gunakan
<i rel="image">URL Gambar</i>
√ Untuk menyisipkan catatan gunakan
<b rel="quote">Tuliskan Catatan Anda</b>
√ Centang Notify me untuk mendapatkan notifikasi balasan komentar melalui Email

Subscribe to: Post Comments (Atom)

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel