Dewa Blogger: Hasil penelusuran untuk cara-membuat-table-of-contents-di-blogger

Halaman

    Social Items

Home / Hasil penelusuran untuk cara-membuat-table-of-contents-di-blogger
Table of Contents yaitu 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 info 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 sesudah goresan pena kata pengantar atau inspirasi pokok dari sebuah artikel.

bagian pokok bahasan yang terdapat pada sebuah artikel Cara Membuat Table of Contents di Postingan Blogger

Baiklah, di sini akan menunjukkan 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 aba-aba CSS ini sebelum </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;

<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:&#39;&#39;;display:block;height:40px;margin-top:-40px;visibility:hidden} </style>

Langkah selanjutnya, tambahkan aba-aba di bawah ini sebelum </body> atau &lt;!--</body>--&gt;&lt;/body&gt;

<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 aba-aba 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 aba-aba di atas. Misalnya ibarat 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 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 aba-aba 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 aba-aba 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 kesannya menjadi ibarat 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 kesannya di blog sobat.


Dan ini rujukan Table of Contents yang sudah aku tambahkan pada template blog


Demikian tips Cara Membuat Table of Contents di Postingan Blogger, biar bermanfaat dan wassalam.

Cara Menciptakan Table Of Contents Di Postingan Blogger

niscaya Anda akan melihat sebuah sajian melayang kecil di sebelah kiri layar Menciptakan Navigasi Mini Bergaya Nettuts+
http://tutsplus.com

Saat Anda mengunjungi situs Nettuts+, atau Tuts+ niscaya Anda akan melihat sebuah sajian melayang kecil di sebelah kiri layar. Kali ini Saya akan membuat versi yang seolah-olah dengan itu. Pada dasarnya, cara kerjanya masih sama dengan jQuery Tooltip onClick, yaitu pada ketika suatu elemen diklik, maka elemen tertentu yang telah ditentukan sebagai sasaran akan tampil. Untuk membuat sedikit perbedaan, Saya telah menambahkan elemen tooltip dengan konten yang diproduksi dari teks di dalam menu:

$('#sidenav li a.main').hover(function() {     $(this).append('<span class="ttp">' + $(this).text() + '<em></em></span>');         $('span.ttp', this).stop().animate({marginLeft:7, opacity:"show"}, 200);     }, function() {         $('span.ttp', this).stop().animate({marginLeft:10, opacity:"hide"}, 100, function() {             $(this).remove();         });     }); });
niscaya Anda akan melihat sebuah sajian melayang kecil di sebelah kiri layar Menciptakan Navigasi Mini Bergaya Nettuts+

Lihat Demo Unduh Berkas

Kerangka Navigasi

Kerangka navigasi terdiri dari elemen biasa yaitu <nav>, <ul> dan <li>:

<nav id='sidenav'>     <ul>         <li><a class='main home' href='/'>Home</a></li>         <li><a class='main about' href='#'>About</a>             <ul class='fallback'>                 <li><a class='social blogger' href='#'>Me on Blogger</a></li>                 <li><a class='social facebook' href='#'>Me on Facebook</a></li>                 <li><a class='social twitter' href='#'>Me on Twitter</a></li>                 <li><a class='social googleplus' href='#'>Me on Google+</a></li>             </ul>         </li>         <li><a class='main archive' href='#'>Archives</a>             <ul class='fallback'>                 <li><a href='#'>Table of Contents</a></li>                 <li><a href='#'>Recent Articles</a></li>                 <li><a href='#'>Recent Comments</a></li>             </ul>         </li>         <li><a class='main share' href='#'>Share</a>             <ul class='fallback'>                 <li><a class='social blogger' href='#'>Blogger</a></li>                 <li><a class='social facebook' href='#'>Facebook</a></li>                 <li><a class='social twitter' href='#'>Twitter</a></li>                 <li><a class='social googleplus' href='#'>Google+</a></li>                 <li><a class='social flickr' href='#'>Flickr</a></li>                 <li><a class='social rss' href='#'>RSS</a></li>                 <li><a class='social mail' href='#'>Mail</a></li>             </ul>         </li>         <li><a class='main photos' href='#'>Screencast</a></li>         <li><a class='main contact' href='#'>Contact</a>             <ul class='fallback' style='font-weight:bold;'>                 <li><a class='social facebook' href='#'>Facebook</a></li>                 <li><a class='social twitter' href='#'>Twitter</a></li>                 <li><a class='social mail' href='#'>Mail</a></li>             </ul>         </li>     </ul> </nav>

CSS

Kode CSS tidak begitu rumit, di sini Saya hanya menekankan kepada konsep CSS Sprites:

/*!  * Mini floating Navigation by Taufik Nurrohman  * Visit: http://gplus.to/tovic  */  #sidenav {   position:fixed !important;   position:absolute; /* IE6 Fallback */   top:60px;   left:0px;   z-index:999;   background-color:#eee;   border:1px solid #ccc;   width:auto;   height:auto;   text-indent:-99999px;   font:normal 12px Arial,Sans-Serif !important;   -webkit-box-shadow:0px 1px 7px -3px rgba(0,0,0,0.4);   -moz-box-shadow:0px 1px 7px -3px rgba(0,0,0,0.4);   box-shadow:0px 1px 7px -3px rgba(0,0,0,0.4); }  #sidenav ul {   margin:0px 0px;   padding:0px 0px; }  #sidenav li {   margin:0px 0px;   padding:0px 0px;   list-style:none;   display:block;   position:relative; }  #sidenav a {   display:block;   width:20px;   border-bottom:1px solid #ccc;   color:#666;   text-decoration:none;   -webkit-box-shadow:inset 0px 0px 0px 1px white;   -moz-box-shadow:inset 0px 0px 0px 1px white;   box-shadow:inset 0px 0px 0px 1px white; }  #sidenav li:last-child a {   border-bottom:none; }  #sidenav span.ttp {   display:block;   position:absolute;   top:0px;   font:normal 94% Arial,Sans-Serif;   background-color:#39f;   color:white;   padding:0px 10px;   line-height:22px;   height:22px;   width:auto;   left:100%;   z-index:77;   margin-left:17px;   text-indent:0px;   -webkit-border-radius:5px;   -moz-border-radius:5px;   border-radius:5px;   display:none; }  #sidenav span.ttp em {   display:block;   width:0px;   height:0px;   border:4px solid transparent;   border-right-color:#39f;   position:absolute;   top:7px;   right:100%; }  #sidenav li ul {   width:150px;   height:auto;   background:transparent;   border:none;   position:absolute;   top:-1px;   left:100%;   -webkit-box-shadow:0px 1px 7px -3px rgba(0,0,0,0.4);   -moz-box-shadow:0px 1px 7px -3px rgba(0,0,0,0.4);   box-shadow:0px 1px 7px -3px rgba(0,0,0,0.4);   display:none; }  #sidenav li ul a {     border:1px solid #ccc;   border-bottom:none;   background-color:#eee;   display:block;   width:auto;   padding:0px 10px;   line-height:25px;   text-indent:0px;   -webkit-box-shadow:inset 0px 0px 0px 1px white;   -moz-box-shadow:inset 0px 0px 0px 1px white;   box-shadow:inset 0px 0px 0px 1px white; }  #sidenav li a:hover {background-color:#ddd;}  #sidenav li ul li:last-child a {   border-bottom:1px solid #ccc; }  /* CSS Sprites */ #sidenav a.main {   background-image:url('main-sprites.png');   background-repeat:no-repeat;   width:26px;   height:25px; }  #sidenav a.home    {background-position:5px 4px;   } #sidenav a.about   {background-position:5px -22px; } #sidenav a.archive {background-position:5px -48px; } #sidenav a.share   {background-position:5px -73px; } #sidenav a.photos  {background-position:5px -100px;} #sidenav a.contact {background-position:5px -126px;}  #sidenav li ul a.social {   background-image:url('social-sprites.png');   background-repeat:no-repeat;   padding-left:30px !important; }  #sidenav li ul a.blogger    {background-position:5px 4px;   } #sidenav li ul a.facebook   {background-position:5px -21px; } #sidenav li ul a.twitter    {background-position:5px -47px; } #sidenav li ul a.googleplus {background-position:5px -73px; } #sidenav li ul a.flickr     {background-position:5px -99px; } #sidenav li ul a.rss        {background-position:5px -125px;} #sidenav li ul a.mail       {background-position:5px -151px;}  /* CSS Fallback */ #sidenav li:hover .fallback {display:block;}

jQuery

Dan… sedikit isyarat jQuery yang merupakan pengembangan dari jQuery Tooltip onClick. Kodenya memang tampak banyak, tapi yang banyak itu intinya hanya deskripsi cara kerjanya saja:

$(function() {      // Menonaktifkan fallback CSS (Saya akan membahas ini suatu ketika nanti)     $('#sidenav .fallback').removeClass('fallback');      // Menampilkan dan menyembunyikan tooltip     $('#sidenav li a.main').hover(function() {         $(this).append('<span class="ttp">' + $(this).text() + '<em></em></span>');         $('span.ttp', this).stop().animate({marginLeft:7, opacity:"show"}, 200);     }, function() {         $('span.ttp', this).stop().animate({marginLeft:10, opacity:"hide"}, 100, function() {             $(this).remove();         });     });      // Saat elemen <a> diklik...     $('#sidenav li a[href="#"]').click(function(e) {         // Hilangkan semua anak <ul> dan tooltip yang tampil         $('#sidenav li ul:visible, span.ttp:visible').hide();         // Tampilkan elemen setelahnya (dalam hal ini ialah elemen <ul>)         // dengan imbas .show('fast') dan set nilai margin-left menjadi 10 piksel untuk membuat jarak         $(this).next().css('margin-left', '10px').show('fast');         // Jangan biarkan event .click() pada elemen ini mempengaruhi elemen lain di dalam dokumen         // Selengkapnya: http://api.jquery.com/event.stopPropagation/         e.stopPropagation();         return false;     });      // Hilangkan semua anak elemen <ul> dan tooltip yang tampil ketika elemen selain sajian diklik     $(document).click(function() {         $('#sidenav li ul:visible, span.ttp:visible').hide();     });  });

Intinya adalah, ketika sebuah sajian diklik, maka anak sajian di dalamnya akan tampil, sedangkan elemen sejenis lain yang sedang tampil akan menghilang, termasuk tooltip sajian itu sendiri:

// Saat elemen <a> diklik... $('#sidenav li a[href="#"]').click(function(e) {     // Hilangkan semua anak <ul> dan tooltip yang tampil     $('#sidenav li ul:visible, span.ttp:visible').hide();     // Tampilkan elemen setelahnya (dalam hal ini ialah elemen <ul>)     // dengan imbas .show('fast') dan set nilai margin-left menjadi 10 piksel untuk membuat jarak     $(this).next().css('margin-left', '10px').show('fast');     // Jangan biarkan event .click() pada elemen ini mempengaruhi elemen lain di dalam dokumen     // Selengkapnya: http://api.jquery.com/event.stopPropagation/     e.stopPropagation();     return false; });

Sumber https://www.dte.web.id/

Menciptakan Navigasi Mini Bergaya Nettuts+

Langganan: Postingan (Atom)