Artikel ini merupakan tindak lanjut dari banyak sekali undangan pengguna yang mereka tambahkan pada artikel ini yang membahas wacana bagaimana caranya semoga gambar-gambar di dalam komik web sanggup dimuat secara bergantian untuk mengurangi beban muat halaman. Setelah sekian usang karenanya Saya punya waktu juga untuk menciptakan widget yang lebih baik dengan beberapa fitur tambahan, dan yang paling penting yaitu widget ini tidak lagi tergantung pada jQuery.
Integrasi Widget ke Blogger
Untuk menambahkan fitur komik di blog, pertama-tama buka editor HTML tema Anda lalu temukan instruksi yang tampak kurang lebih menyerupai ini:
<b:widget id='Blog1' type='Blog'>
Pada bab bawah instruksi tersebut, sisipkan instruksi 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 instruksi ini:
<data:post.body/>
Pada setiap instruksi yang Anda temukan, sisipkan instruksi ini di bawahnya:
<b:include data='post' name='postTypeComic'/>Klik Simpan Tema. Fitur komik kini sudah siap untuk digunakan! Yang perlu Anda lakukan berikutnya yaitu menciptakan artikel-artikel gres berisi gambar-gambar, sehabis itu cukup tambahkan label Komik atau Comic untuk mengaktifkan tampilan komik.
Widget ini akan mencari semua elemen <a> dan <img> di dalam artikel yang mempunyai 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 mempunyai 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 alasannya yaitu dengan hanya mengandalkan elemen <img>, sama saja dengan meminta peramban untuk memuat semua gambar yang ada ketika artikel sedang memuat. Meskipun nantinya ketika komik ditampilkan, gambar-gambar yang ada akan muncul secara bergantian, namun di balik layar sebetulnya peramban akan memuat semua gambar yang ada.
Oleh alasannya yaitu itu Saya sarankan untuk menciptakan artikel bertipe komik yang terdiri dari satu gambar saja yaitu gambar sampul komik. Sedangkan gambar-gambar yang lainnya sanggup Anda tampilkan sebagai tautan biasa menyerupai 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="Artikel ini merupakan tindak lanjut dari banyak sekali undangan pengguna yang mereka tambahka Menambahkan Fitur Komik di Blog" title="Menambahkan Fitur Komik di Blog" 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 sanggup menghapus semua gambar yang ada dan menggantinya dengan elemen <a>, namun kekurangannya yaitu nanti Anda tidak akan mempunyai elemen <data:post.thumbnailUrl/> untuk ditampilkan sebagai keluku artikel.
Pengaturan
| Opsi | Keterangan |
|---|---|
hash | Merupakan format fragmen URL untuk menandai pergantian halaman. Pola %i% pada !page=%i% akan diubah menjadi nomor halaman. [demo] |
save | Pilihan 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. |
image | Resolusi maksimal gambar komik yang Anda simpan di Google berupa angka. [demo] |
chunk | Pilihan untuk menampilkan beberapa gambar sekaligus dalam satu lompatan halaman. Nilai bawaan yaitu 1. Jika Anda mengubah nilainya menjadi 2, maka setiap halaman komik akan menampilkan dua gambar. [demo] |
kin | Digunakan untuk memilih banyaknya kerabat tombol angka halaman yang akan ditampilkan sebelum dan sehabis tombol angka halaman yang aktif. |
top | Jarak perhentian pelengkap antara bab atas layar halaman dengan bab atas area komik setiap kali halaman berganti. [demo] |
text | Label-label yang diharapkan 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 sanggup Anda tambahkan sebagai parameter URL sehabis nama berkas comic.min.js:
<script src="comic.min.js?save=false&chunk=2&text[enter]=Read%20More"></script>Beberapa tema menyerupai 000000.min.css dan ffffff.min.css sanggup Anda tambahkan menyerupai ini:
… … <link href='//dte-project.github.io/blogger/comic/000000.min.css' rel='stylesheet'/> </head>