Tutorial Cara Membuat Navigasi Halaman Kolom Tabel Chapter Untuk Cerita/Novel/Komik Online Pada Blog

Putuokane Mei 24, 2024

Jika kamu memiliki blog cerita seperti cerpen maupun novel, tentu saja kamu membutuhkan navigasi halaman yang baik agar para pembaca bisa dengan mudah mencari kisah lanjutannya, nah tentu saja navigasi halaman tersebut bisa seperti sebuah kolom tabel chapter, dimana kolom tabel chapter ini bisa kamu gunakan untuk menjadikan halaman navigasi bagi para pembaca seberapa jauh ia telah membaca halaman yang ia sedang baca.

Misalnya jika ia ingin mencari chapter selanjutnya, ia tidak perlu mengetikkan halaman tertentu untuk membacanya kembali, ia bisa membaca chapter lanjutannya dengan menekan tombol navigasi halaman yang disediakan.

Nah jadi tentu saja pada kesempatan kali ini, aku akan memberikan sebuah tutorial bagaimana cara membuat kotak kolom tabel chapter untuk sebuah cerita atau komik online, nah bagaimanakah tutorialnya ? langsung saja ikuti tutorialnya kali ini :

Tutorial:

Pada langkah pertama pastikan kamu telah login apda akun blogger milikmu.
Jika sudah maka pergilah ke menu "Theme" atau tema.
Disini click symbol segitiga mengarah kebawah tepat disamping tombol "SESUAIKAN" tersebut.
Jika sudah maka harusnya akan ada menu yang muncul, disini pilih "Edit HTML"
Nah harusnya kamu sudah masuk ke halaman code templatenya.
Disini carilah code </style> atau ]]></b:skin>
Jika sudah ketemu maka tempatkan code dibawah ini tepat diatas salah satu code tersebut :

/* Tabel Blogger Responsive */ 
table.scroll {width:700px;border:2px #fdfcff solid;font:12px inherit;color:#333333;font-weight:700;}
table.scroll thead {display:table;width:100%}
table.scroll tbody {display:block;height:300px;overflow:auto;float:left;width:100%}
table.scroll tbody tr {display:table;width:100%}
table.scroll th, td {width:33%;padding:8px}
table.scroll td {border-left:1px solid #e4e4e4;margin-left:-3px}
table.scroll th {background-color:#0be76d;color:#ffffff;text-align:center;font-weight:700}
table.scroll tr:hover td {background:#fff;color:#222;}
table.scroll tr:nth-child(odd) {background-color:transparent;}
table.scroll tr:nth-child(even) {background-color:transparent;}

Setelah itu save atau simpan perubahan yang kamu lakukan dengan cara click tombol berlogo disket yang aku tandai tepat pada gambar dibawah ini.

Nah jika sudah maka bukalah postingan yang ingin kamu tambahkan code tabel chapternya.
Copy seluruh code dibawah ini dan pastekan tepat pada mode HTML postingan :

<table class="scroll">
<thead>
<tr><th>Title</th><th>Chapter</th></tr>
</thead>
<tbody>
  <tr><td>Edwin Dark Continent </td><td><a href="https://putuokane.com/" rel="nofollow">Chapter 1</a></td></tr>
  <tr><td>Edwin Dark Continent </td><td><a href="https://putuokane.com/" rel="nofollow">Chapter 2</a></td></tr>
  <tr><td>Edwin Dark Continent </td><td><a href="https://putuokane.com/" rel="nofollow">Chapter 3</a></td></tr>
  <tr><td>Edwin Dark Continent </td><td><a href="https://putuokane.com/" rel="nofollow">Chapter 4</a></td></tr>
  <tr><td>Edwin Dark Continent </td><td><a href="https://putuokane.com/" rel="nofollow">Chapter 5</a></td></tr>
  <tr><td>Edwin Dark Continent </td><td><a href="https://putuokane.com/" rel="nofollow">Chapter 6</a></td></tr>
  <tr><td>Edwin Dark Continent </td><td><a href="https://putuokane.com/" rel="nofollow">Chapter 7</a></td></tr>
  <tr><td>Edwin Dark Continent </td><td><a href="https://putuokane.com/" rel="nofollow">Chapter 8</a></td></tr>
  <tr><td>Edwin Dark Continent </td><td><a href="https://putuokane.com/" rel="nofollow">Chapter 9</a></td></tr>
  <tr><td>Edwin Dark Continent </td><td><a href="https://putuokane.com/" rel="nofollow">Chapter 10</a></td></tr>
  <tr><td>Edwin Dark Continent </td><td><a href="https://putuokane.com/" rel="nofollow">Chapter 11</a></td></tr>
  <tr><td>Edwin Dark Continent </td><td><a href="https://putuokane.com/" rel="nofollow">Chapter 12</a></td></tr>
  <tr><td>Edwin Dark Continent </td><td><a href="https://putuokane.com/" rel="nofollow">Chapter 13</a></td></tr>
  <tr><td>Edwin Dark Continent </td><td><a href="https://putuokane.com/" rel="nofollow">Chapter 14</a></td></tr>
  <tr><td>Edwin Dark Continent </td><td><a href="https://putuokane.com/" rel="nofollow">Chapter 15</a></td></tr>
  <tr><td>Edwin Dark Continent </td><td><a href="https://putuokane.com/" rel="nofollow">Chapter 16</a></td></tr>
  <tr><td>Edwin Dark Continent </td><td><a href="https://putuokane.com/" rel="nofollow">Chapter 17</a></td></tr>
  <tr><td>Edwin Dark Continent </td><td><a href="https://putuokane.com/" rel="nofollow">Chapter 18</a></td></tr>
  <tr><td>Edwin Dark Continent </td><td><a href="https://putuokane.com/" rel="nofollow">Chapter 19</a></td></tr>
  <tr><td>Edwin Dark Continent </td><td><a href="https://putuokane.com/" rel="nofollow">Chapter 20</a></td></tr>
</tbody>
</table>

Nah jika sudah maka kamu bisa ubah Edwin Dark Continent dengan judul chaptermu lalu ganti putuokane.com tersebut dengan url chapter yang telah kamu buat sesuai dengan chapter yang ingin kamu masukan
Nah jika sudah maka enjoy.

Nah mungkin itu saja tutorial tabel yang bisa aku berikan kali ini, oh iya, sayangnya tutorial kali ini memang harus kamu lakukan manual, dimana kamu harus memasukan satu persatu part yang telah kamu buat tersebut, jadi memang ini tidak didesain untuk chapter yang lebih dari 100 halaman karena mungkin kamu akan pusing dibuatnya, nah untuk demonya kamu bisa melihatnya dibawah ini :

Title	Chapter
Edwin Dark Continent	Chapter 1
Edwin Dark Continent	Chapter 2
Edwin Dark Continent	Chapter 3
Edwin Dark Continent	Chapter 4
Edwin Dark Continent	Chapter 5
Edwin Dark Continent	Chapter 6
Edwin Dark Continent	Chapter 7
Edwin Dark Continent	Chapter 8
Edwin Dark Continent	Chapter 9
Edwin Dark Continent	Chapter 10
Edwin Dark Continent	Chapter 11
Edwin Dark Continent	Chapter 12
Edwin Dark Continent	Chapter 13
Edwin Dark Continent	Chapter 14
Edwin Dark Continent	Chapter 15
Edwin Dark Continent	Chapter 16
Edwin Dark Continent	Chapter 17
Edwin Dark Continent	Chapter 18
Edwin Dark Continent	Chapter 19
Edwin Dark Continent	Chapter 20