Cara Menciptakan Table Of Contents Di Postingan Blogger
Table of Contents yakni daftar yang terdiri dari poin-poin atau bagian-bagian pokok bahasan yang terdapat pada sebuah artikel. Table of Contents sanggup kita gunakan sebagai rincian dari isi artikel yang berupa link sehingga akan memudahkan pembaca untuk menentukan isu bab pokok bahasan apa yang akan dibacanya. Table of Contents ini sering kita temui pada situs Wikipedia, Ensiklopedia, dan juga file PDF dari E-Book yang biasanya diletakkan sehabis goresan pena kata pengantar atau inspirasi pokok dari sebuah artikel.
Baiklah, di sini akan menawarkan tips perihal bagaimana Cara Membuat Table of Contents di Postingan Blogger dengan mudah.
Untuk membuatnya silakan teman ikuti langkah-langkah berikut ini.
Bagi teman yang ingin mempunyai Kode Promo Hosting Terbaru, silakan kunjungi Promo Hosting
Buka Blogger > Klik sajian Tema > Klik tombol Edit HTML > Kemudian tambahkan arahan CSS ini sebelum </head> atau </head><!--<head/>-->
Langkah selanjutnya, tambahkan arahan di bawah ini sebelum </body> atau <!--</body>--></body>
Klik tombol Simpan tema.
Selanjutnya ke bab postingan, buat postingan di editor post blogger. Tambahkan arahan di bawah ini pada tab HTML (bukan Compose)
Edit goresan pena yang ditandai dengan goresan pena sendiri. Kemudian tambahkan id="toc_1" di setiap heading sesuai dengan ID pada arahan di atas. Misalnya menyerupai ini
Tambahkan ID pada heading menjadi menyerupai ini
Perhatikan arahan yang ditandai, untuk heading selanjutnya sesuaikan dengan urutan ID pada Table of Contents yang teman buat. Contohnya
Kemudian tambahkan arahan ini di setiap simpulan paragraf tiap bagian
Maka kesudahannya menjadi menyerupai ini
Setelah selesai, silakan klik tombol Publikasikan post dan lihat kesudahannya di blog sobat.
Dan ini teladan Table of Contents yang sudah aku tambahkan pada template blog
Demikian tips Cara Membuat Table of Contents di Postingan Blogger, biar bermanfaat dan wassalam.
Baiklah, di sini akan menawarkan tips perihal bagaimana Cara Membuat Table of Contents di Postingan Blogger dengan mudah.
Cara Membuat Table of Contents di Postingan Blogger
Untuk membuatnya silakan teman ikuti langkah-langkah berikut ini.
Bagi teman yang ingin mempunyai Kode Promo Hosting Terbaru, silakan kunjungi Promo Hosting
Buka Blogger > Klik sajian Tema > Klik tombol Edit HTML > Kemudian tambahkan arahan 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>Langkah selanjutnya, tambahkan arahan 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>Klik tombol Simpan tema.
Selanjutnya ke bab postingan, buat postingan di editor post blogger. Tambahkan arahan di bawah ini pada tab HTML (bukan Compose)
<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 di Postingan Blogger">Bagian Subheading 1</a></li> <li><a href="#toc_2" title="Cara Membuat Table of Contents di Postingan Blogger">Bagian Subheading 2</a></li> <li><a href="#toc_3" title="Cara Membuat Table of Contents di Postingan Blogger">Bagian Subheading 3</a></li> <li><a href="#toc_4" title="Cara Membuat Table of Contents di Postingan Blogger">Bagian Subheading 4</a></li> <li><a href="#toc_5" title="Cara Membuat Table of Contents di Postingan Blogger">Bagian Subheading 5</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 arahan di atas. Misalnya menyerupai ini
<h4> 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.Tambahkan ID pada heading menjadi menyerupai 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 arahan yang ditandai, untuk heading selanjutnya sesuaikan dengan urutan ID pada Table of Contents yang teman buat. Contohnya
<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.Kemudian tambahkan arahan ini di setiap simpulan paragraf tiap bagian
<div class="back_tocontent" onclick="document.getElementById('toc_list').scrollIntoView(true);" role="button" tabindex="0"> Back to Content</div>Maka kesudahannya menjadi menyerupai 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 Publikasikan post dan lihat kesudahannya di blog sobat.
Dan ini teladan Table of Contents yang sudah aku tambahkan pada template blog
Demikian tips Cara Membuat Table of Contents di Postingan Blogger, biar bermanfaat dan wassalam.