Documentation Template Igniplex

Documentation Template Igniplex

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://1.bp.blogspot.com/-KqjnXlwZmlw/XeytBdD9mbI/AAAAAAAAIMQ/HzkSNtRb2ek4hgVkyNp4O-HVrxTBbHfogCPcBGAYYCw/s1600/Igniplex-Documentation.png' property='og:image'/>
    <meta content='https://1.bp.blogspot.com/-KqjnXlwZmlw/XeytBdD9mbI/AAAAAAAAIMQ/HzkSNtRb2ek4hgVkyNp4O-HVrxTBbHfogCPcBGAYYCw/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).
    Customize
  2. Pilih Advanced (Lanjutan) dan Atur semua bagian sesuai keinginan. Setelah selesai, klik tombol Apply to Blog.
    Ganti Warna

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.

Aktifkan Dark Mode

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.

Widget Iklan

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://1.bp.blogspot.com/-1eSzIPykBbA/W7TEES3n5PI/AAAAAAAAGeA/NWfEPstRSFspDaGDP6_VBjxTa38mVAHlwCPcBGAYYCw/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://1.bp.blogspot.com/-1eSzIPykBbA/W7TEES3n5PI/AAAAAAAAGeA/NWfEPstRSFspDaGDP6_VBjxTa38mVAHlwCPcBGAYYCw/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.

Gambar Noimage
  • Khusus versi 2.6 (kode ada 4 buah)
    https://1.bp.blogspot.com/-msLPy2sUgRs/XsaanLh7hdI/AAAAAAAAIjQ/sMfL_VE-30MWP5PI9at8dzKtZW0igRHDgCK4BGAsYHg/s1600/igniplex-noimage.png

  • Khusus versi 2.5 (kode ada 4 buah)
    https://1.bp.blogspot.com/-PVJS-O_HWI4/XeCQCsYdF2I/AAAAAAAAIL0/m7lJ8e68_OkMiRwowKFA-UsdcGTpzN2fwCLcBGAsYHQ/s1600/igniplex-no-image.png

  • Khusus versi 2.4 (kode ada 5 buah dengan URL berbeda)
    https://1.bp.blogspot.com/-aTtBK4N3Zi4/XBjti30MYbI/AAAAAAAAHAE/m2-dDbiVVEICgZ_E59Veb5ahuXf2aimmgCLcBGAs/s50/igniplex-no-image.png (ada 1 buah)
    
        https://1.bp.blogspot.com/-aTtBK4N3Zi4/XBjti30MYbI/AAAAAAAAHAE/m2-dDbiVVEICgZ_E59Veb5ahuXf2aimmgCLcBGAs/s1600/igniplex-no-image.png (ada 4 buah)

10. Menampilkan Deskripsi (Snippet) di Homepage

Menampilkan Snippet

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.
Menghilangkan Slider

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.

Jumlah Post

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://1.bp.blogspot.com/-BnF8RzggirY/XreXoegTO0I/AAAAAAAAIb4/TPkQJBEoEOQ18fCeu6p5cYYdyz5V7J20QCLcBGAsYHQ/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://1.bp.blogspot.com/-msLPy2sUgRs/XsaanLh7hdI/AAAAAAAAIjQ/sMfL_VE-30MWP5PI9at8dzKtZW0igRHDgCK4BGAsYHg/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://1.bp.blogspot.com/-msLPy2sUgRs/XsaanLh7hdI/AAAAAAAAIjQ/sMfL_VE-30MWP5PI9at8dzKtZW0igRHDgCK4BGAsYHg/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.
    Mengubah Jumlah Grid

    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.

    Byline Label Tanggal

    Pada versi 2.5 bisa diubah byline label tanggal dan label.

    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.

    Hapus Tanggal di SERP

    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.


    Cari kode ini dan HAPUS atau ganti tulisan yang ditandai sesuai keinginan:

    <div class='attribution'>
          Copyright © <span id='cpr'/> -  Theme by <a href='https://www.igniel.com' title='Igniel' target='_blank' rel='noopener'>Igniel</a>
        </div>

    Kode <span id='cpr'/> akan memanggil tahun saat ini (contoh: 2020) secara otomatis.


    26. Formulir Kontak di Halaman Statis

    • Buat PAGE / HALAMAN baru. Pilih mode HTML (bukan Compose), simpan semua script di bawah ke dalamnya.
    • Ganti angka 4444xxxxxxxxxx4444 (ada 4 buah) dengan ID blog kamu.
    • 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>

    27. Sitemap di Halaman Statis

    • Buat PAGE / HALAMAN baru. Pilih mode HTML (bukan Compose), simpan semua script di bawah ke dalamnya.
    • PENTING: jika terjadi error atau sitemap tidak muncul, hapus semua isi postingan, simpan, lalu copy ulang dan langsung terbitkan lagi.
    <div id="sitemap2">Loading....</div>
        <script> //<![CDATA[
        /* Blogger Sitemap with Title, Label, and Date */
        var postTitle = postUrl = postDate = postSum = postLabels = new Array(), sortBy = 'datenewest', tocLoaded = false, numChars = 250, postFilter = '', tocdiv = document.getElementById('sitemap2'), totalEntires = 0, totalPosts = 0;
        function sitemap2(t){function e(){if("entry"in t.feed){var e=t.feed.entry.length;if(totalEntires+=e,totalPosts=t.feed.openSearch$totalResults.$t,totalPosts>totalEntires){var s=document.createElement("script");s.type="text/javascript",startindex=totalEntires+1,s.setAttribute("src","/feeds/posts/summary?start-index="+startindex+"&max-results=9999&alt=json-in-script&callback=sitemap2"),tocdiv.appendChild(s)}for(var o=0;e>o;o++){for(var a,l=t.feed.entry[o],r=l.title.$t,i=l.published.$t.substring(0,10),n=0;n<l.link.length;n++)if("alternate"==l.link[n].rel){a=l.link[n].href;break}if("content"in l)var p=l.content.$t;else if("summary"in l)var p=l.summary.$t;else var p="";var c=/<\S[^>]*>/g;if(p=p.replace(c,""),p.length>numChars){p=p.substring(0,numChars);var d=p.lastIndexOf(" ");p=p.substring(0,d)+"..."}var f="";if("category"in l){for(var n=0;n<l.category.length;n++)f+="<a href=\"javascript:filterPosts('"+l.category[n].term+"');\" title=\"Click here to select all posts with label '"+l.category[n].term+"'\">"+l.category[n].term+"</a>,  ";var u=f.lastIndexOf(",");-1!=u&&(f=f.substring(0,u))}postTitle.push(r),postDate.push(i),postUrl.push(a),postSum.push(p),postLabels.push(f)}}totalEntires==totalPosts&&(tocLoaded=!0,showToc())}e(),sortPosts(sortBy),tocLoaded=!0}function filterPosts(t){postFilter=t,displayToc(postFilter)}function allPosts(){postFilter="",displayToc(postFilter)}function sortPosts(t){function e(t,e){var s=postTitle[t];postTitle[t]=postTitle[e],postTitle[e]=s;var s=postDate[t];postDate[t]=postDate[e],postDate[e]=s;var s=postUrl[t];postUrl[t]=postUrl[e],postUrl[e]=s;var s=postSum[t];postSum[t]=postSum[e],postSum[e]=s;var s=postLabels[t];postLabels[t]=postLabels[e],postLabels[e]=s}for(var s=0;s<postTitle.length-1;s++)for(var o=s+1;o<postTitle.length;o++)"titleasc"==t&&postTitle[s]>postTitle[o]&&e(s,o),"titledesc"==t&&postTitle[s]<postTitle[o]&&e(s,o),"dateoldest"==t&&postDate[s]>postDate[o]&&e(s,o),"datenewest"==t&&postDate[s]<postDate[o]&&e(s,o)}function displayToc(t){var e=0,s="",o="Judul",a="Klik untuk mengurutkan berdasarkan judul",l="Tanggal",r="Klik untuk mengurutkan berdasarkan tanggal",i="Label",n="";"titleasc"==sortBy&&(a+=" (descending)",r+=" (newest first)"),"titledesc"==sortBy&&(a+=" (ascending)",r+=" (newest first)"),"dateoldest"==sortBy&&(a+=" (ascending)",r+=" (newest first)"),"datenewest"==sortBy&&(a+=" (ascending)",r+=" (oldest first)"),""!=postFilter&&(n="Klik untuk melihat semua postingan"),s+='<table>',s+="<thead>",s+="<tr>",s+="<th>",s+='<a href="javascript:toggleTitleSort();" title="'+a+'">'+o+"</a>",s+="</th>",s+="<th>",s+='<a href="javascript:toggleDateSort();" title="'+r+'">'+l+"</a>",s+="</th>",s+="<th>",s+='<a href="javascript:allPosts();" title="'+n+'">'+i+"</a>",s+="</th>",s+="</tr>",s+="</thead>",s+="<tbody>";for(var p=0;p<postTitle.length;p++)""==t?(s+='<tr><td><a href="'+postUrl[p]+'" title="'+postSum[p]+'">'+postTitle[p]+"</a></td><td>"+postDate[p]+"</td><td>"+postLabels[p]+"</td></tr>",e++):(z=postLabels[p].lastIndexOf(t),-1!=z&&(s+='<tr><td><a href="'+postUrl[p]+'" title="'+postSum[p]+'">'+postTitle[p]+"</a></td><td>"+postDate[p]+"</td><td>"+postLabels[p]+"</td></tr>",e++));if(s+="</tbody>",s+="</table>",e==postTitle.length)var c='<div class="judul">Total Post: '+postTitle.length+"</div>";else{var c='<div class="judul">Menampilkan '+e+" post berlabel '";c+=postFilter+"' dari "+postTitle.length+" total post.</div>"}tocdiv.innerHTML=c+s}function toggleTitleSort(){sortBy="titleasc"==sortBy?"titledesc":"titleasc",sortPosts(sortBy),displayToc(postFilter)} function toggleDateSort(){sortBy="datenewest"==sortBy?"dateoldest":"datenewest",sortPosts(sortBy),displayToc(postFilter)}function showToc(){if(tocLoaded){displayToc(postFilter);document.getElementById("toclink")}else alert("Just wait. Sitemap is loading....")} function hideToc(){var t=document.getElementById("toc");t.innerHTML="";var e=document.getElementById("toclink");e.innerHTML='<a href="#" onclick="scroll(0,0); showToc(); Effect.toggle(\'toc-result\',\'blind\');">» Show Sitemap</a>'}var postTitle=new Array,postUrl=new Array,postDate=new Array,postSum=new Array,postLabels=new Array,sortBy="datenewest",tocLoaded=!1,numChars=250,postFilter="",tocdiv=document.getElementById("sitemap2"),totalEntires=0,totalPosts=0;
        //]]> </script> <script src="/feeds/posts/summary?alt=json-in-script&max-results=9999&callback=sitemap2"></script>

    2 komentar

    1. Biasanya ada menu "Home" di sebuah blog, kalau di template Igniplex 2.6 ini "Home"-nya dimana ya?

      BalasHapus
      Balasan
      1. Bisa di tambahkan sendiri pada menu dan tulisan blog/ judul blog/mana blog itu kalau di klik akan menuju ke home

        Hapus