- Menu Daftar Isi Atau yang biasa disebuat dengan Table Of Contents (TOS) yaitu daftar yang terdiri dari poin atau bab dari subjek yang terkandung dalam sebuah artikel. Kita sanggup memakai Daftar Isi sebagai uraian dari isi artikel dalam bentuk tautan sehingga akan lebih gampang bagi pembaca untuk menentukan info apa yang akan dibaca pokok bahasannya. Kita sering menemukan Daftar Isi di situs Wikipedia, Ensiklopedia, dan juga file PDF dari E-Books yang biasanya diletakkan sehabis pengenalan artikel atau inspirasi utama sebuah artikel.
Secara umum, Daftar Isi (TOC) dipakai dalam aplikasi Microsoft Word, yang berfungsi untuk mengetahui konten dokumen atau file. Namun kali ini bagaimana bila kita memakai TOC ini pada blogger untuk menciptakan daftar isi pada halaman posting blogger, mungkin ini akan terlihat lebih menarik.
Selain itu, desain yang dipakai dalam TOC hampir ibarat dengan Wikipedia, sehingga akan menarik perhatian pembaca blog Anda. Di sini kami tidak memakai isyarat skrip untuk mendeteksi tajuk teks atau tag tajuk yang disimpan dalam mengedit posting blog HTML, alasannya yaitu kami menganggap bahwa penggunaan Daftar Isi tidak dipakai untuk semua halaman, oleh alasannya yaitu itu penggunaan TOC ini harus dilakukan secara manual di pos Anda ingin memakai TOC ini.
Membuat daftar isi di blogger ini hanya memakai isyarat skrip HTML, ditambahkan dengan CSS untuk menyesuaikan tata letak dan desain tampilan, dan isyarat JavaScript untuk daftar beralih TOC untuk lompat tautan ke TOC.
Dibawah Ini Adalah Cara Membuat Table of Contents di Postingan Blogger
Untuk membuatnya silakan ikuti langkah-langkah berikut ini.
Itulah wacana cara menciptakan Tabel Of Contents (TOC) di posting blogger, bila Anda mempunyai saran atau pertanyaan, silakan hubungi kami melalui halaman kontak atau dengan berkomentar di bawah ini.
- Terima kasih. Sumber https://iyonxx.blogspot.com/
 |
| Cara Membuat Table Of Contents (Menu Daftar Isi) Di Postingan Blogger |
Selain itu, desain yang dipakai dalam TOC hampir ibarat dengan Wikipedia, sehingga akan menarik perhatian pembaca blog Anda. Di sini kami tidak memakai isyarat skrip untuk mendeteksi tajuk teks atau tag tajuk yang disimpan dalam mengedit posting blog HTML, alasannya yaitu kami menganggap bahwa penggunaan Daftar Isi tidak dipakai untuk semua halaman, oleh alasannya yaitu itu penggunaan TOC ini harus dilakukan secara manual di pos Anda ingin memakai TOC ini.
Membuat daftar isi di blogger ini hanya memakai isyarat skrip HTML, ditambahkan dengan CSS untuk menyesuaikan tata letak dan desain tampilan, dan isyarat JavaScript untuk daftar beralih TOC untuk lompat tautan ke TOC.
Dibawah Ini Adalah Cara Membuat Table of Contents di Postingan Blogger
Untuk membuatnya silakan ikuti langkah-langkah berikut ini.
- Buka Blogger >>
- Klik sajian Tema >>
- Klik tombol Edit HTML >>
- Kemudian tambahkan isyarat CSS ini sebelum
- </head>
- Atau
- </head><!--<head/>-->
<style type='text/css'> /* CSS Table of Contents */ #light-toc{background:#f5f5f5;border-radius:3px;padding:10px 20px} #toc_list{font-weight:700;cursor:pointer;margin:10px 0} #toc_list:focus,#toc li:focus,.back_tocontent:focus{outline:none} #toc_list svg{vertical-align:middle} #toc li{background:transparent;cursor:pointer;margin:.2em 0 .2em 1em} #toc ol li:before{left:-2em} #toc li a{color:#222} #toc li a:hover{color:#1e90ff} #toc{display:grid} .back_tocontent{display:inline-block;cursor:pointer;text-align:right;float:right;margin:15px auto;background:#00cec9;color:#fff;font-size:11px;padding:2px 12px;border-radius:99em;transition:all .3s} .back_tocontent:hover{background:#2d3436;color:#fff} :target::before{content:'';display:block;height:40px;margin-top:-40px;visibility:hidden} </style> - selanjutnya >>
- Tambahkan isyarat di bawah ini sebelum </body> atau <!--</body>--></body>
<script type="text/javascript"> //<![CDATA[ $(document).ready(function(){$(".post-body a").on("click",function(o){if(""!==this.hash){o.preventDefault();var t=this.hash;$("html, body").animate({scrollTop:$(t).offset().top},600,function(){window.location.hash=t})}})}); //]]> </script> - Simpan Tema >>
- Setelah itu masuk ke bab Postingan > kemudian Edit salah satu postingan blog Anda yang ingin memakai Tabel Of Contents (TOC)
- Pastikan Anda berada pada bab HTML bukan Compose.
- Copy isyarat dibawah ini, kemudian Paste sehabis paragraf pertama atau sanggup Anda sesuaikan sendiri.
<div id="light-toc"> <div id="toc_list" onclick="if (document.getElementById('toc').style.display === 'none') { document.getElementById('toc').style.display = 'block'; } else { document.getElementById('toc').style.display = 'none'; }" role="button" tabindex="0"> Contents <svg width="18" height="18" viewBox="0 0 24 24"><path fill="#000000" d="M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z" /></svg></div> <div id="toc"> <ol> <li><a href="#toc_1" title="Cara Membuat Table Of Contents (Menu Daftar Isi) Di Postingan Blogger">Bagian Subheading 1</a></li> <li><a href="#toc_2" title="Cara Membuat Table Of Contents (Menu Daftar Isi) Di Postingan Blogger">Bagian Subheading 2</a></li> <li><a href="#toc_3" title="Cara Membuat Table Of Contents (Menu Daftar Isi) Di Postingan Blogger">Bagian Subheading 3</a></li> <li><a href="#toc_4" title="Cara Membuat Table Of Contents (Menu Daftar Isi) Di Postingan Blogger">Bagian Subheading 4</a></li> <li><a href="#toc_5" title="Cara Membuat Table Of Contents (Menu Daftar Isi) Di Postingan Blogger">Bagian Subheading 5</a></li> <li><a href="#toc_6" title="Cara Membuat Table Of Contents (Menu Daftar Isi) Di Postingan Blogger">Bagian Subheading 6</a></li> <li><a href="#toc_7" title="Cara Membuat Table Of Contents (Menu Daftar Isi) Di Postingan Blogger">Bagian Subheading 7</a></li> <li><a href="#toc_8" title="Cara Membuat Table Of Contents (Menu Daftar Isi) Di Postingan Blogger">Bagian Subheading 8</a></li> <li><a href="#toc_9" title="Cara Membuat Table Of Contents (Menu Daftar Isi) Di Postingan Blogger">Bagian Subheading 9</a></li> <li><a href="#toc_10" title="Cara Membuat Table Of Contents (Menu Daftar Isi) Di Postingan Blogger">Bagian Subheading 10</a></li> </ol> </div> </div> - Edit goresan pena yang ditandai dengan goresan pena sendiri >> Kemudian tambahkan id="toc_1" di setiap heading sesuai dengan ID pada isyarat di atas.
- contohnya ibarat ini >>
<h4> Cara Membuat Table of Contents (TOC) di Postingan Blogger</h4> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. - Tambahkan ID pada heading menjadi ibarat ini
<h4 id="toc_1"> Cara Membuat Table of Contents di Postingan Blogger</h4> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. - Perhatikan isyarat yang ditandai, untuk tajuk berikutnya, sesuaikan urutan ID pada Table of Contents yang Anda buat.
- Contoh >>
<h4 id="toc_1"> Heading Bagian 1</h4> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. <h4 id="toc_2"> Heading Bagian 2</h4> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. <h4 id="toc_3"> Heading Bagian 3</h4> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. <h4 id="toc_4"> Heading Bagian 4</h4> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. <h4 id="toc_5"> Heading Bagian 5</h4> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. <h4 id="toc_6"> Heading Bagian 6</h4> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. <h4 id="toc_7"> Heading Bagian 7</h4> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. <h4 id="toc_8"> Heading Bagian 8</h4> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. <h4 id="toc_9"> Heading Bagian 9</h4> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. <h4 id="toc_10"> Heading Bagian 10</h4> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. - Selanjutnya >>
- Tambahkan isyarat ini di setiap selesai paragraf tiap bagian
<div class="back_tocontent" onclick="document.getElementById('toc_list').scrollIntoView(true);" role="button" tabindex="0"> Back to Content</div>- Maka Lengkapnya Menjadi Seperti Dibawah Ini Ini
<h4 id="toc_1"> Heading Bagian 1</h4> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. <div class="back_tocontent" onclick="document.getElementById('toc_list').scrollIntoView(true);" role="button" tabindex="0"> Back to Content</div>- Setelah selesai.
- Silakan klik tombol Terbitkan posting dan lihat kesannya di blog Anda.
Itulah wacana cara menciptakan Tabel Of Contents (TOC) di posting blogger, bila Anda mempunyai saran atau pertanyaan, silakan hubungi kami melalui halaman kontak atau dengan berkomentar di bawah ini.
- Terima kasih. Sumber https://iyonxx.blogspot.com/