Cara Membuat daftar isi blog Responsive (postingan)

Blogger, merupakan platform blogging yang sangat ramai peminat dan blogger merupakan situs pembuat blog yang dikelola langsung oleh pihak goo*le dan perlu kalian tau bahwa blogger situs pembuat blog manual sehingga anda harus mengetahui teknik html terlebih dahulu, lain halnya dengan wordpress yang kebanyakan dapat dilakukan secara otomatis yaitu hanya dengan mendownload plugin saja anda sudah dapat melakukan yang anda inginkan, namun jika anda berfikir bahwa platform blogger dan wordpress memiliki cara kerja yang sama maka anda salah, karena lain halnya dengan wordpress untuk menggunakan blogger sesuai dengan keinginan anda maka anda harus menguasai teknik html terlebih dahulu. Pasalnya untuk mengunakan blogger anda terlebih dahulu harus mengotak Atik template yang bisa dibilang didominasi oleh html sehingga ini menyulitkan para blogger terutama blogger pemula untuk menjalankan blognya sendiri, 

Daftar Isi, Wordpress pengguna wordpress jika ingin memasangi dengan widget ataupun fitur anda tinggal download plugin, contohnya saja daftar isi didalam postingan hanya dengan beberapa kali klik daftar isi pun sudah selesai namun jika anda ingin membuat daftar isi didalam blogger itu perlu mengedit html terlebih dahulu,

Blogger, dalam artikel kali ini kita akan membahas tentang cara membuat daftar isi pada postingan blogger, pasti diantara Anda semuanya ada yang sadar bahwa artikel ini pada bagian atas gak nyambung emang cuman buat artikel ini panjang panjang doang supaya baik Dimata goo*le.

Daftar isi

  1. Apa itu daftar isi??
  2. Apakah fungsi daftar isi??
  3. Cara Pemasangan / Penerapan daftar isi
  4. Ubah mode menulis menjadi mode html
  5. Bemberian id heading untuk daftar isi
  6. Ubah Kode heading
  7. Tahap penyelesaian
  8. Tips
  9. Kesimpulan

Apa itu daftar isi??

Daftar isi merupakan daftar dari isi yang terkandung ada banyak sekali arti dari daftar isi contohnya adalah daftar isi buku dan situs, jika diartikan daftar isi buku merupakan daftar dari isi buku tersebut yang akan mengarahkan anda kehalaman lain pada bagian buku tersebut dengan cara mencantumkan nomer halaman dari buku tersebut.

Versi situs daftar isi merupakan link (tautan) yang dapat diklik dan apabila dilklik akan mengarahkan anda kehalaman atau kebagian lain pada halaman yang sama seperti yang ada diatas

Apakah fungsi daftar isi??

Fungsi dari daftar isi salah satunya ialah untuk memudahkan pembaca untuk menentukan halaman yang sulit atau tak dilihat oleh pembaca, selain itu menggunakan daftar isi juga dapat membantu para pembaca untuk menemukan poin poin penting yang terkandung didalam artikel tersebut tanpa perlu susah payah untuk menscoll.

Pastinya dengan menambahkan daftar isi pada postingan blog ini dapat menambah minat pembaca untuk membaca diblog anda kerena berkat kemudahan penggunaan blog anda, dan dengan menambahkan daftar isi pada postingan anda ini akan menambah bobot dari artikel anda.

Cara Pemasangan / Penerapan daftar isi

Penerapan daftar isi pada blog apalagi blogger bisa dibilang gampang gampang susah namun bagi anda yang sudah terbiasa dalam mengedit atau paham coding pastinya untuk penerapannya sangat mudah. Seperti yang sudah kita bahas diatas bahwa daftar isi merupakan yang dapat diklik dan akan mengarahkan anda kebagian lain pada halaman yang sama, caranya dengan memberikan id disetiap poin yang ingin anda tuju.

Ubah mode menulis menjadi mode html

Setelah mengubah kemode html pastekan kode dibawah ini pada bagian agar link terlihat seperti daftar isi diatas anda harus memberikan kode <ul> ataupun dengan kode <ol> seperti yang dibawah ini.

<ol>1536
<li><a href='#daftarisi-1'>Text</a></li>
<li><a href='#daftarisi-2'>Text</a></li>
<li><a href='#daftarisi-3'>Text</a></li>
<li><a href='#daftarisi-4'>Text</a></li>
<li><a href='#daftarisi-5'>Text</a></li>
<li><a href='#daftarisi-6'>Text</a></li>
<li><a href='#daftarisi-7'>Text</a></li>
<li><a href='#daftarisi-8'>Text</a></li>
</ol>

Itu merupakan contoh dari kerangka daftar isi anda dapat mengubah kata text diatas sesuai dengan judul dan subjudul sesuaikan dengan artikel anda masing masing.

Jika dalam daftar isi hilangkan saja nomer (angka) yang ada didalam kode teks contohnya seperti 2. Bemberian id heading untuk daftar isi ganti menjadi Bemberian id heading untuk daftar isi karena apabila ada nomer nanti apabila dilihat dari daftar isi akan terlihat seperti ini.

Bemberian id heading untuk daftar isi

Langkah kedua yang perlu dilakukan untuk membuat daftar isi adalah memberikan id pada heading contohnya.

  • h1 : untuk teks judul utama
  • h2 : untuk teks judul 
  • h3 : untuk teks subjudul
  • h4 : untuk teks judul kecil

Itu merupakan contoh heading yang ada diblogger anda dapat menyesuaikan sesuai dengan kebutuhan anda, selanjutnya mengubah heading yang biasa Anda gunakan dengan id seperti dibawah ini.

heading tanpa id

<h4 style="text-align: left;">Apa itu daftar isi??</h4>
<h4 style="text-align: left;">Apakah fungsi daftar isi??</h4>
<h4 style="text-align: left;">Cara Pemasangan / Penerapan daftar isi</h4>
<h4 style="text-align: left;">1.Ubah mode menulis menjadi mode html</h4>
<h4 style="text-align: left;">2.Bemberian id heading untuk daftar isi</h4>
<h4 style="text-align: left;">3.Ubah Kode heading</h4>
<h4 style="text-align: left;">4. Tahap penyelesaian</h4>
<h4 style="text-align: left;">Tips</h4>
<h4 style="text-align: left;">Kesimpulan</h4>

heading dengan id

<h4 id='daftarisi-1'>Apa itu daftar isi??</h4>
<h4 id='daftarisi-2'>Apakah fungsi daftar isi??</h4>
<h4 id='daftarisi-3'>Cara Pemasangan / Penerapan daftar isi</h4>
<h4 id='daftarisi-4'>Ubah mode menulis menjadi mode html</h4>
<h4 id='daftarisi-5'>Bemberian id heading untuk daftar isi</h4>
<h4 id='daftarisi-6'>Ubah Kode heading</h4>
<h4 id='daftarisi-7'>Tahap penyelesaian</h4>
<h4 id='daftarisi-8'>Tips</h4>
<h4 id='daftarisi-9'>Kesimpulan</h4>

Nah itu dia contoh heading tanpa id dan heading dengan id nyesuaikan kode dibawah sesuai dengan kode yang dalam paragraf anda.

<h2 id='daftarisi-1'>teks</h2>
<h2 id='daftarisi-2'>teks</h2>
<h2 id='daftarisi-3'>teks</h2>
<h2 id='daftarisi-4'>teks</h2>
<h2 id='daftarisi-5'>teks</h2>
<h2 id='daftarisi-6'>teks</h2>
<h2 id='daftarisi-7'>teks</h2>
<h2 id='daftarisi-8'>teks</h2>
<h2 id='daftarisi-9'>teks</h2>

jika anda tidak mau ribet ubah saja kode style="text-align: left;"> pada heading postingan anda dengan kode Id='daftarisi-1'> agar heading postingan anda memiliki id dan dapat menjadi daftar isi anda hanya perlu mengubah angka satu diatas secara berurutan sesuai dengan yang ada pada kotak script diatas.

Ubah Kode heading

Ubah Kode heading awal seperti <h4 style="text-align: left;">Apa itu daftar isi??</h4> menjadi <h4 id='daftarisi-1'>Apa itu daftar isi??</h4> lalu sesuaisesuaikan kode <li><a href='#daftarisi-1'>Text</a></li> dan seterusnya sesuai dengan kebutuhan anda.

Tahap penyelesaian

Cobalah untuk mensave dan coba untuk membuka pratinjau dari postingan anda, apabila sudah terlihat rapih cobalah untuk memposting postingan tersebut apabila terjadi kesalahan pastikan kesesuaian dari kode daftar isi anda.

Selesai

Tips

Apabila daftar isi tidak berfungsi dengan baik cobalah untuk mengganti <ul> dengan <ol> dan save apabila belum valid juga coba periksa kesesuaian dari kode anda misal <h3> harus diakhiri dengan </h3> jangan sampai memiliki akhiran </h2> begitu pun sebaliknya, agar daftar isi valid sebaiknya harus memperhatikan kode kode yang ada didalamnya jangan sampai kode tersebut tidak sesuai.

Sekedar info pada kasus kasus tidak validnya daftar isi ada pada template yang digunakan namun ada juga yang berhasil menerapkannya tetapi pada saat diklik akan melenceng jika terjadi hal tersebut bisa langsung komen saja dibawah agar permasalahan anda dapat diselesaikan.

Fungsi dari id dalam daftar isi adalah untuk mengelompokkan agar supaya teks satu dan lainya saling terhung dengan adanya id seperti yang ada diatas setiap daftar isi memiliki id yang sama cuma dibedakan oleh angka untuk menggunakannya.

Jika anda memiliki artikel yang memiliki jumlah paragraf lebih dari yang datas anda tinggal melanjutkan saja <li><a href='#daftarisi-6'>Text</a></li> dan Id='daftarisi-6'> sesuai yang anda inginkan tinggal ganti saja angka enam menjadi 789 hingga seterusnya.

Untuk lebih lengkapnya bisa anda lihat dividio dibawah ini.

Vidio Belum Tayang Untuk Sementaa diganti dulu


Kesimpulan

Dalam penggunaannya daftar isi digunakan untuk memudahkan pembaca menemukan poin poin dalam suatu artikel, kalo diibaratkan daftar isi pada postingan bisa dikatakan seperti peta yang akan mengarahkan anda ketempat yang anda inginkan cuman daftar isi pada artikel berbentuk tulisan tulisan.

Jadi dalam suatu artikel apalagi artikel yang memiliki jumlah kata yang bisa dibilang cukup banyak seperti 1000 dan seterusnya itu sangat disarankan untuk menggunakan daftar isi agar para pembaca mudah memahami tentang materi yang dibahas dalam artikel tersebut.


2 Responses to "Cara Membuat daftar isi blog Responsive (postingan)"

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel