MASIHTERJAGA Template

Artikel ini berisi beberapa dokumentasi contoh kode yang sering digunakan sebagai pelengkap konten.

Fitur MASIHTERJAGA Template

Fitur Ketersediaan Keterangan
SEO Friendly Ya - Masih terjaga menggunakan schema data terstruktur yang valid pada semua halaman*. Bahkan, bagian artikel dan komentar sudah menggunakan Script JSON-LD, struktur data yang direkomendasikan Google. Baca Disini.
Responsive Ya Masihterjaga Template didesain agar kompatibel untuk semua perangkat (Desktop, Tablet, dan Mobile). Namun lebih mementingkan desain pada perangkat mobile. (Akan terus diupdate, terlebih jika masih terdapat bagian yang belum flexible.)
Loading Cepat Ya Design dibuat tanpa memakai library JS ataupun CSS eksternal, sehingga proses rendering kodenya pun menjadi lebih cepat**.
Desainer Tema Ya Anda bebas mengatur/mengubah warna sesuai selera melalui desainer tema Blogger. (Saat ini masih sebatas mengganti warna, kedepannya diusahakan agar bisa mengatur ukuran, margin, padding, dll pada setiap element.)
Widget Ya Sudah mendukung widget penting dengan desain simpel namun tidak kuno (Featured Post, Popular Post, Label, Archive, dan Form Berlangganan).
Iklan Ya Pada halaman artikel template ini terdapat 5 buah slot iklan yang dapat diatur visibilitas dan posisinya.
Menu Profil Ya Terdapat menu profil yang dapat memudahkan pengunjung blog atau pemasang iklan untuk menghubungi Anda.
Fitur Unggulan Ya - Daftar Isi Otomatis.
Widget ini berfungsi untuk memudahkan pengunjung blog anda memahami poin penting artikel. Bahkan robot pun akan lebih mudah melakukan crawling konten Anda. Jika relevan, artikel Anda akan mendapatkan sitelink di SERP Google berkat adanya fitur ini.
- Internal Link Otomatis ( Bisa Diatur Jumlahnya).
Keberadaannya sangat cocok untuk meningkatkan pageview, posisinya yang menyebar juga membuatnya menjadi lebih user friendly.
- Related Post Multi Label Ringan Dengan Thumbnail.
Sama seperti internal link otomatis. Namun disertai dengan thumbnail dan terletak di akhir artikel.
Fitur Lainnya Ya 8 Gaya kotak catatan berbeda,
Pilihan 11 tombol dengan gaya berbeda (cocok untuk niche download),
Stylus Syntax Highlighter (cocok untuk niche blogger/tutorial coding),
More...
Fitur Tambahan Ya Sebagai pengguna template Masih Terjaga, Anda bebas meminta tambahan atau penghapusan fitur tertentu. Jika memungkinkan, saya akan melakukannya.
Dukungan Ya Jika sudah membeli template ini, Anda akan mendapat dukungan penuh dari saya selaku pembuat Masihterjaga Template terkait instalasi template atau masalah lain yang berhubungan dengan blogger***.

* : Ada beberapa item yang harus disesuaikan agar bisa valid di semua halaman, dengan menggunakan template ini juga tidak menjamin SEO blog Anda meningkat atau artikel mudah memasuki halaman pertama hasil pencarian google. Setidaknya menjadi lebih baik karena sudah menggunakan Structured Data Yang direkomendasikan Google. Harus Anda imbangi dengan konten berkualitas.

** : Cepat lambatnya loading template Masihterjaga juga tergantung pada Anda (Redesign, Iklan, dan Media Yang Dipakai) serta User (Koneksi, Browser, Gadget).

*** : Masalah atau pertanyaan akan saya bantu semaksimal mungkin sesuai pengetahuan dan pengalaman atau memberikan rujukan terbaik terkait masalah yang dihadapi.

Beli Masihterjaga Template

Segera hubungi saya, lewat sini. Alasan keamanan? Beli via P-STORE, Template Blogger Terbaik 2019.

Contoh Dan Cara Memasang Gambar Di Template Masih Terjaga

MASIHTERJAGA Template

Gambar (2)
Gambar (3)
Judul Alternatif Gambar
<!-- 
Cara Memunculkan First Image Dibawah Judul Artikel (Recommended), Letakan di Awal Artikel
-->
<noscript>
  <img title='Judul Gambar' alt='Judul Alternatif Gambar' src='URL Gambar' width='Lebar Gambar' height='Panjang Gambar'/>
</noscript>

<!-- Cara Menampilkan Efek Watermark di Pojok Kanan Bawah Gambar -->
<figure>
  <img title="Judul Gambar" alt="Judul Alternatif Gambar" src="URL Gambar" width="Lebar Gambar" height="Panjang Gambar"/>
</figure>

<!-- Kode Untuk Menerapkan Gambar (2) -->
<table class="tr-caption-container">
  <tbody>
    <tr>
      <td>
        <img title="Judul Gambar" alt="Judul Alternatif Gambar" src="URL Gambar" width="Lebar Gambar" height="Panjang Gambar"/>
      </td>
    </tr>
    <tr>
      <td class="tr-caption"&gt
        Caption/Keterangan Lebih Lengkap
      </td> 
    </tr>
  </tbody>
</table>

<!-- Kode Untuk Menerapkan Gambar (3) -->
<table class="tr-caption-container">
  <tbody>
    <tr>
      <td>
        <a href="URL Gambar" title="Judul Gambar">
          <img title="Judul Gambar" alt="Judul Alternatif Gambar" src="URL Gambar" width="Lebar Gambar" height="Panjang Gambar"/>
        </a>
      </td>
    </tr>
    <tr>
      <td class="tr-caption"&gt
        Caption/Keterangan Lebih Lengkap
      </td> 
    </tr>
  </tbody>
</table>

<!-- Kode Untuk Menerapkan Gambar (4) -->
<div class="separator">
  <a href="URL Gambar" title="Judul Gambar">
    <img title="Judul Gambar" alt="Judul Alternatif Gambar" src="URL Gambar" width="Lebar Gambar" height="Panjang Gambar"/>
  </a>
</div>

<!-- Gambar Tanpa Atribut/Efek -->
<img title="Judul Gambar" alt="Judul Alternatif Gambar" src="URL Gambar" width="Lebar Gambar" height="Panjang Gambar"/>

Typography Masih Terjaga

BOLD <b/>, Italic <i/>, Underline <u/>, Strike <s/>, Mark <mark/>, Code/kbd <code/> / <code/>. Link. Link Dengan Atribut class="tautan"

Membuat Kotak Catatan Dengan 8 Gaya Berbeda

<!-- Gaya Biasa (Default) -->
<blockquote>
  Catatan, Informasi, dll.
</blockquote>

<!-- Pilih Value Class, Sesuaikan Dengan Kebutuhan -->
<blockquote class="...">
  Catatan, Informasi, dll.
</blockquote>
Kotak Catatan Biasa
class="note1"
Gaya Kotak Catatan 2
class="note2"
Gaya Kotak Catatan 3
class="note3"
Gaya Kotak Catatan 4
class="alert"
Gaya Kotak Catatan 5
class="nice"
Gaya Kotak Catatan 6
class="note"
Gaya Kotak Catatan 7
class="best"
Gaya Kotak Catatan 8

Membuat List Dan Number

<!-- Membuat List -->
<ul>
  <li>List Pertama</li>
  <li>List Kedua</li>
  <li>List Ketiga, dan Seterusnya...</li>
</ul>

<!-- Membuat List Bertingkat -->
<ul>
  <li>List Pertama</li>
  <li>List Kedua
    <ul>
      <li>List Kedua A</li>
      <li>List Kedua B
        <ul>
          <li>List Kedua B1</li>
        </ul>
      </li>
    </ul>
  &lt/li>
  <li>List Ketiga<li>
</ul>

<!-- Number -->
<ol>
  <li>Item Pertama</li>
  <li>Item Kedua</li>
  <li>Item Ketiga, Dan Seterusnya...</li>
</ol>

<!-- Number Bertingkat -->
<ol>
  <li>Item Pertama</li>
  <li>Item Kedua
    <ol>
      <li>Item Kedua A</li>
      <li>Item Kedua B
        <ol>
          <li>Item Kedua B1</li>
        </ol>
      </li>
    </ol>
  &lt/li>
  <li>Item Ketiga, dan Seterusnya...<li>
</ol>
Blogger Terbaik Dan Terfavorit Indonesia Menurut Calon Publisher:
  1. Blogger 1
  2. Blogger 2
    1. Blogger 2.1
    2. Blogger 2.2
      1. Blogger 2.2A
  3. Blogger 3
  4. Anda!
Template Favorit Yang Dipakai Blogger
  • SEO Friendly
    • Fast Loading
    • Clean Design
      • Gradient
      • Material Design
      • Template Blogger Keren
  • Hight CTR
  • Template Blogger AMP
  • Dan Masih Banyak Lagi

Membuat Syntax Highlighter

<pre>
  <code>
    <!-- Code Manual Selection -->
  </code>
</pre>
<pre class="selectall">
  <code>
    <!-- Code Auto Selection -->
  </code>
</pre>
Element Tidak Bisa Di Block
<... class="noselect">
Artikel/Isi Konten Yang Tidak Boleh Di Block/Di Copas...
</...>
Beberapa browser tidak mendukung fungsi CSS ini. (Select All Dan No Select).

Membuat Tombol Demo / Download Keren Dengan 11 Gradasi Warna Berbeda

<a href="#" class="btn btn1-11">
  BUTTON
</a>
Hasil , berurutan dari btn1 sampai btn11, tombol kecil gunakan class="sbtn btnX":
Download Kumpulan Aplikasi Android Bermanfaat disini
BUTTON
BUTTONBUTTONBUTTONBUTTONBUTTONBUTTONBUTTONBUTTONBUTTONBUTTON

Membuat Table Responsive di Postingan Blogger

<table class="t_responsive">
  <caption>Judul Tabel</caption>
    <tbody>
      <tr>
        <th>Judul Kolom 1</th>
        <th>Judul Kolom 2</th>
      </tr>
      <tr>
        <td>Baris 1 Kolom 1</td>
        <td>Baris 1 Kolom 2</td>
      </tr>
      <tr>
        <td>Baris 2 Kolom 1</td>
        <td>Baris 2 Kolom 2</td>
      </tr>
      <tr>
        <td>Dan Seterusnya</td>
        <td>Dan Seterusnya</td>
      </tr>
    </tbody>
  </table>

Mempercepat Loading Template Masihterjaga

<html *>
  <head>
    ..........
  </head>
  <body>
    ..........
  </body>
</html>
Ubah menjadi seperti ini [1]
<html *>
  <head>
    ..........
  &lt;!--</head>--&gt;&lt;/head&gt;
  <body>
    ..........
  &lt;!--</body>--&gt;&lt;/body&gt;
</html>
Atau ubah menjadi seperti ini [2]
<html * b:js='false'>
  <head>
    ..........
  &lt;!--</head>--&gt;&lt;/head&gt;
  <body>
    ..........
  </body>
</html>
*: Atribut HTML template Masihterjaga, jangan diubah, apalagi dihapus.
Konsekuensi:
  • Beberapa Widget Tidak Aktif. Contohnya Arsip (Hirarki Dan Dropdown) [1,2],
  • Menu Tata Letak Terpotong [2].