Template Documentation

Template Documentation Jarwo HydroMagz

Berikut panduan pemasangan dan pengaturan untuk template Jarwo HydroMagz premium blogger template versi 1.5. Bila masih kurang paham, silakan tanyakan ke saya melalui kontak WA atau melalui kolom komentar yang tersedia di bawah ini.

Pertama, silakan anda download terlebih dahulu file template premiumnya yang sudah saya kirim melalui email setelah anda melakukan pembelian. Nanti anda akan mendapatkan sebuah filenya, lalu silakan unzip atau ekstrak file tersebut menggunakan WinRAR atau sejenisnya.

Lalu, buka folder templatenya, dan pilih versi template yang anda ingin pasang untuk blog anda. Saya sarankan menggunakan template versi terbaru karena lebih stabil dan tentunya lebih banyak fiturnya.

Pastikan anda menemukan sebuah file yang berekstensi .xml, contohnya Jarwo HydroMagz Premium Blogger Template.xml.

Sekarang, masuk ke Blogger > Tema > Cadangkan / Pemulihan.

Silakan anda download tema terlebih dahulu agar mendapatkan backup dari template yang lama. Lalu tekan Pilih file, kemudian cari file yang berekstensi xml tadi, dan teken upload. Tunggu beberapa saat hingga template sudah berhasil terpasang di blog anda.

Anda juga dapat melakukan modifikasi atau perubahan pada template ini, mulai dari lebarnya, warna header, font tulisan, warna footer, dan masih banyak lagi tanpa melakukan koding. Yaitu caranya dengan masuk ke Blogger > Tema > Sesuaikan > Lanjutan. Silakan ubah tampilan templatenya sesuka hati anda agar terlihat lebih unik.

Silakan buka Blogger > Tata Letak, lalu tekan edit pada salah satu slot yang anda inginkan. Terdapat 5 slot iklan yang telah sediakan.

Leaderboard : 728 x 90
Iklan Infeed : Infeed
Iklan Atas Post : InArticle / Responsif
Iklan Tengah Post : InArticle / Responsif
Iklan Bawah Post : InArticle / Responsif
Iklan Sidebar : 300 x 250

Semua iklan di atas dapat anda edit melalui Tata Letak (tanpa harus koding melalui Edit HTML), kecuali iklan infeed. Untuk pemasangan iklan infeed harus melalui Tema > Edit HTML. Lalu, cari tulisan berikut:

<!-- Kode Iklan InFeed -->

Tempatkan kode iklan infeed anda di bawah tulisan tersebut (sudah saya sediakan space kosong di bawahnya).

Cari LOGO BLOG, ganti dengan link gambar logo blog anda, contoh:
https://1.bp.blogspot.com/-y1qoM4mjJXY/Xjv-y_xghfI/AAAAAAAAAM8/dRCvgCZIVg80a9f_Tw4n4UX5Ot-96mEawCPcBGAYYCw/w300/KJ%2BTemplate%2BLogo%2BOctagon.png.
Cari DESKRIPSI BLOG, ganti dengan deskripsi blog anda.
Cari LOGO BLOG 600x60, ganti dengan link gambar logo blog ukuran 600 x 60 piksel, contoh:
https://2.bp.blogspot.com/-ATabndVVEEQ/Xmk-tFbvKMI/AAAAAAAAARg/sKyvqm7dk2ErIXWtCfn7X1kGqbOef7AcwCLcBGAsYHQ/s1600/KJ%2BTemplate%2B600x60.png
Cari LOGO BLOG 1280x720, ganti dengan link gambar logo blog ukuran 1280 x 720 piksel, contoh:
https://4.bp.blogspot.com/-DCP0jMhmrWY/XmlF8S_JC7I/AAAAAAAAARs/31GnIADE-vgk72y6Xk8GA2wZTeFF8NZfQCLcBGAsYHQ/s1600/KJ%2BTemplate%2BLogo%2BRectangle.png

Silakan cari kode berikut di dalam Edit HTML:

<nav id='cssmenu'>
  <div id='head-mobile'/>
  <div class='button'><p>Menu</p></div>
  <ul class='menu' id='menu-menu-1'>
    <li class='menu-item'>
      <a href='/'>Home</a>
    </li>
    <li class='menu-item'>
      <a href='#'>Menu 1</a>
    </li>
    <li class='menu-item'>
      <a href='#'>Menu 2</a>
    </li>
    <li class='menu-item'>
      <a href='#'>Menu 3</a>
    </li>
    <li class='menu-item'>
      <a href='#'>Sub-menu 1</a>
      <ul class='sub-menu'>
        <li class='menu-item'>
          <a href='#'>Sub-menu 1.1</a>
        </li>
        <li class='menu-item'>
          <a href='#'>Sub-menu 1.2</a>
        </li>
        <li class='menu-item'>
          <a href='#'>Sub-menu 1.3</a>
        </li>
      </ul>
    </li>
    <li class='menu-item'>
      <a href='#'>Sub-menu 2</a>
      <ul class='sub-menu'>
        <li class='menu-item'>
          <a href='#'>Sub-menu 2.1</a>
        </li>
        <li class='menu-item'>
          <a href='#'>Sub-menu 2.2</a>
        </li>
        <li class='menu-item'>
          <a href='#'>Sub-menu 2.3</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

Ganti tulisan yang saya stabilo biru dengan URL tujuan dan stabilo kuning dengan nama menunya.

Untuk menambah menu baru, silakan gunakan kode berikut:

    <li class='menu-item'>
      <a href='#'>Menu 3</a>
    </li>

Sedangkan untuk menambah menu dengan sub, gunakan kode berikut:

    <li class='menu-item'>
      <a href='#'>Sub-menu 1</a>
      <ul class='sub-menu'>
        <li class='menu-item'>
          <a href='#'>Sub-menu 1.1</a>
        </li>
        <li class='menu-item'>
          <a href='#'>Sub-menu 1.2</a>
        </li>
        <li class='menu-item'>
          <a href='#'>Sub-menu 1.3</a>
        </li>
      </ul>
    </li>

Pada tata letak, anda bisa menemukan panel tema yang berfungsi untuk mengubah beberapa pengaturan dan tampilan tema blog tanpa harus mengeditnya melalui HTML. Caranya adalah pilih pada salah satu panel, tekan edit, lalu tekan edit lagi pada salah satu pengaturan yang tersedia. Kemudian ubah isi pada kolom URL untuk mengubah pengaturannya.

Variable

Sistem_Komentar
Isi dengan salah satu atau beberapa dari 3 fitur komentar yang tersedia, yaitu blogger, disqus, dan facebook. Contoh pengisian (tanpa tanda kutip): "blogger" "disqus facebook" "facebook blogger" dan lain sebagainya menyesuaikan kebutuhan anda.
ID_Disqus
Isi dengan ID Disqus anda. Untuk mendapatkannya anda harus punya akun Disqus terlebih dahulu dan mendaftarkan blog anda di sana. (opsional, hanya untuk yang mengaktifkan komentar Disqus)
fb:admins
Isi dengan kode admin Facebook anda (opsional, hanya untuk yang mengaktifkan komentar Facebook)
fb:app_id
Isi dengan kode ID aplikasi Facebook anda (opsional, hanya untuk yang mengaktifkan komentar Facebook)
Related_Post
Isi dengan jumlah postingan yang ingin ditampilkan pada widget related bawah post. Default adalah 10.

Tampilan

Headerboard
Ubah menjadi false untuk menghilangkan slot kosong di sebelah header karena adanya iklan headerboard sekaligus mengubah tampilan header menjadi full-width. Untuk mengaktifkannya kembali, isi dengan true.
Leaderboard
Ubah menjadi false untuk menghilangkan slot kosong di atas postingan karena adanya iklan leaderboard. Ubah isinya menjadi true kalau ingin menampilkan iklan leaderboard lagi.
Infeed
Ubah menjadi false untuk menghilangkan slot kosong di daftar artikel karena adanya iklan infeed. Tapi kalau ingin menampilkan iklan infeed, ubah menjadi true.
Dark Mode
true = Mengaktifkan mode dark pada template
false = Menonaktifkan mode dark pada template / mengaktifkan mode light
Sidebar
true = Menampilkan sidebar
false = Menyembunyikan sidebar
Thumbnail
true = Menampilkan gambar thumbnail pada postingan
false = Menyembunyikan gambar thumbnail pada postingan

Masih ada yang bingung? Atau ada saran pengaturan lain? Silakan tanyakan ke saya melalui kolom komentar di bawah...

Oleh Kode Jarwo Template Pada November 30, 2019

Template Documentation

Jadilah orang pertama yang berkomentar! .comment-form {padding:10px}

Jadilah orang pertama yang berkomentar!