Menambahkan Fitur Komik di Blog dengan JavaScript

Tabel Konten
  1. Integrasi Widget ke Blogger 
    1. Pengaturan 
Fitur Komik di Blogger
Fitur komik di blog.

Artikel ini merupakan tindak lanjut dari berbagai permintaan pengguna yang mereka tambahkan pada artikel ini yang membahas tentang bagaimana caranya agar gambar-gambar di dalam komik web dapat dimuat secara bergantian untuk mengurangi beban muat halaman. Setelah sekian lama akhirnya Saya punya waktu juga untuk membuat widget yang lebih baik dengan beberapa fitur tambahan, dan yang paling penting adalah widget ini tidak lagi tergantung pada .

Lihat Demo


Integrasi Widget ke Blogger 

Untuk menambahkan fitur komik di blog, pertama-tama buka editor HTML tema Anda kemudian temukan kode yang tampak kurang lebih seperti ini:

<b:widget id='Blog1' type='Blog'>

Pada bagian bawah kode tersebut, sisipkan kode ini:

<b:includable id='postTypeComic' var='post'>
  <b:if cond='data:view.isSingleItem and data:post.labels any (i => i.name in ["Comic", "Komik", "type:comic"])'>
    <b:class name='type:comic'/>
    <script src='//dte-project.github.io/blogger/comic.min.js?save=false'></script>
  </b:if>
</b:includable>

Kemudian cari kode ini:

<data:post.body/>

Pada setiap kode yang Anda temukan, sisipkan kode ini di bawahnya:

<b:include data='post' name='postTypeComic'/>

Klik Simpan Tema. Fitur komik sekarang sudah siap untuk digunakan! Yang perlu Anda lakukan berikutnya adalah membuat artikel-artikel baru berisi gambar-gambar, setelah itu cukup tambahkan label Komik atau Comic untuk mengaktifkan tampilan komik.

Widget ini akan mencari semua elemen <a> dan <img> di dalam artikel yang memiliki label Komik atau Comic dan akan mengambil nilai atribut href dan src pada elemen tersebut untuk dijadikan sebagai daftar antrean gambar. Khusus pada nilai atribut href pada elemen <a>, widget ini hanya akan mengambil tautan yang tampak sebagai tautan gambar, yaitu yang memiliki akhiran berupa ekstensi GIF, JPEG, JPG dan PNG.

Selain dari itu akan dianggap sebagai sinopsis atau ringkasan mengenai isi komik.

Saya perlu menambahkan alternatif berupa elemen <a> sebagai penyimpan tautan gambar karena dengan hanya mengandalkan elemen <img>, sama saja dengan meminta peramban untuk memuat semua gambar yang ada saat artikel sedang memuat. Meskipun nantinya ketika komik ditampilkan, gambar-gambar yang ada akan muncul secara bergantian, namun di balik layar sebenarnya peramban akan memuat semua gambar yang ada.

Oleh karena itu Saya sarankan untuk membuat artikel bertipe komik yang terdiri dari satu gambar saja yaitu gambar sampul komik. Sedangkan gambar-gambar yang lainnya dapat Anda tampilkan sebagai tautan biasa seperti ini:

<p>In every class, it’s not usual for there to be one or two people who seem a little strange. In Oda’s class, there is Hototogi.</p>
<p><img alt="Cover" title="Page 1" src="/path/to/image/1.png"></p>
<p><a href="/path/to/image/2.png">Page 2</a></p>
<p><a href="/path/to/image/3.png">Page 3</a></p>
<p><a href="/path/to/image/4.png">Page 4</a></p>
<p><a href="/path/to/image/5.png">Page 5</a></p>
<p><a href="/path/to/image/6.png">Page 6</a></p>
<p><a href="/path/to/image/7.png">Page 7</a></p>

Untuk memperoleh waktu muat komik yang paling cepat, Anda bisa menghapus semua gambar yang ada dan menggantinya dengan elemen <a>, namun kekurangannya adalah nanti Anda tidak akan memiliki elemen <data:post.thumbnailUrl/> untuk ditampilkan sebagai keluku artikel.

Pengaturan 

OpsiKeterangan
hashMerupakan format fragmen URL untuk menandai pergantian halaman. Pola %i% pada !page=%i% akan diubah menjadi nomor halaman. [demo]
savePilihan untuk memungkinkan para pembaca menyimpan gambar komik Anda dengan cara klik kanan pada gambar. Ganti nilainya menjadi false untuk melarang pembaca menyimpan gambar-gambar komik Anda.
imageResolusi maksimal gambar komik yang Anda simpan di Google berupa angka. [demo]
chunkPilihan untuk menampilkan beberapa gambar sekaligus dalam satu lompatan halaman. Nilai bawaan adalah 1. Jika Anda mengubah nilainya menjadi 2, maka setiap halaman komik akan menampilkan dua gambar. [demo]
kinDigunakan untuk menentukan banyaknya kerabat tombol angka halaman yang akan ditampilkan sebelum dan setelah tombol angka halaman yang aktif.
topJarak perhentian tambahan antara bagian atas layar halaman dengan bagian atas area komik setiap kali halaman berganti. [demo]
textLabel-label yang diperlukan pada komik. text[first] untuk menampilkan teks First, text[previous] untuk menampilkan teks Previous, text[next] untuk menampilkan teks Next, text[last] untuk menampilkan teks Last, text[current] untuk menampilkan teks Page 1 of 20, dan text[enter] untuk menampilkan teks Read on….

Parameter-parameter di atas dapat Anda tambahkan sebagai parameter URL setelah nama berkas comic.min.js:

<script src="comic.min.js?save=false&amp;chunk=2&amp;text[enter]=Read%20More"></script>

Beberapa tema seperti 000000.min.css dan ffffff.min.css dapat Anda tambahkan seperti ini:

  …
  …
  <link href='//dte-project.github.io/blogger/comic/000000.min.css' rel='stylesheet'/>
</head>

4 Komentar

  • Beben Koben

    :bd

  • Addict Covers

    hi, i'm having an issue, i hope you help me.

    there is any way to show thumbnails in blogger from external url?

    i've try change this

    from this

    but nothing happen in my template.

  • hari satiman

    Mantap, tapi gimana gimana cara membuang link iklan dari dte bos

    • Taufik Nurrohman

      Tambahkan parameter ad dengan nilai false:

      https://dte-project.github.io/blogger/comic.min.js?save=false&ad=false






Semua kode HTML akan dihapus kecuali kode-kode HTML yang dituliskan sebagai contoh. Gunakan sintaks Markdown untuk memberi gaya pada komentar.


Batal