MASIGNCLEAN101

Cara Menciptakan Table Of Contents (Toc) Di Postingan Blogger Atau Blogspot


Maret 09, 2018
Cara Menciptakan Table Of Contents (Toc) Di Postingan Blogger Atau Blogspot
Jumat, 09 Maret 2018
Seperti yang saya sebutkan di postingan sebelumnya Table Of Contents yaitu sebuah daftar wangsit pokok utama dalam sebuah artikel atau bacaan. Table Of Contents juga sering disebut dengan TOC. Untuk klarifikasi lebih lanjutnya silahkan kunjungi Apa Itu Tables Of Contents (TOC)

Kali ini admin tidak akan membahas lebih lanjut wacana TOC. Tapi di postingan ini admin akan menawarkan tutorial Memasang Table Of Contents di postingan Blogspot atau Blogger

Cara Memasang Table Of Contents di postingan Blogger atau Blogspot

Blogger merupakan platform pembuatan website yang paling user interface. JIka sahabat pengguna Worpress sahabat exp sanggup pribadi menerapkannya melalui plugin. Tapi unntuk plugin Blogger tidak ada. Kaprikornus anda harus melakukannya secara manual setiap kali menulis artikel.

Saya Mempunyai beberapa aba-aba yang sanggup sahabat terapkan ke blogspot sobat. Ingat setiap Table Of Contents selalu di terapkan Jum Link

Baca Cara Membuat Jump Link di Blog, Wordpress atau di Html

1. Kode Table Of Contents by mybloggertricks


Fitur:
  • Coded in pure JavaScript - just 10 lines of code!
  • Lightweight and fast.
  • SEO Friendly
  • Adds unique ID to each section automatically.
  • Creates both ordered or unordered list
  • Contains a Toggle button
  • Show on any location you choose
  • Easily Customized
  • Mobile responsive
  • Executes only when invoked! 
Pertama pasang font awesome dan javascript berikut ini ke template silahkan sahabat pergi ke tema terus edit html cari aba-aba </head>
Kedua kalau sudah ketemu copy aba-aba dibawah ini

<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>       
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>

<script type='text/javascript'>          
//<![CDATA[       
//*************TOC plugin by MyBloggerTricks.com       
function mbtTOC() {var mbtTOC=i=headlength=gethead=0;       
headlength = document.getElementById("post-toc").getElementsByTagName("h2").length;for (i = 0; i < headlength; i++)            {gethead = document.getElementById("post-toc").getElementsByTagName("h2")[i].textContent;document.getElementById("post-toc").getElementsByTagName("h2")[i].setAttribute("id", "point"+i);mbtTOC = "<li><a href='#point"+i+"'>"+gethead+"</a></li>";document.getElementById("mbtTOC").innerHTML += mbtTOC;}}function mbtToggle() {var mbt = document.getElementById('mbtTOC');if (mbt .style.display === 'none') {mbt .style.display = 'block';} else {mbt .style.display = 'none';}}       
//]]>          
</script>

Pasang aba-aba tadi di atas aba-aba epilog </head>

Kedua pemasangan CSS cari aba-aba ]]></b:skin>, kalau sudah ketemu copy aba-aba beriikut ini

        /*####Automatic TOC Plugin by MyBloggerTricks####*/           .mbtTOC{border:5px solid #f7f0b8;box-shadow:1px 1px 0 #EDE396;background-color:#FFFFE0;color:#707037;line-height:1.4em;margin:30px auto;padding:20px 30px 20px 10px; font-family:oswald, arial;display: block;width: 70%;}       
.mbtTOC ol,.mbtTOC ul {margin:0;padding:0;}       
.mbtTOC ul {list-style:none;}       
.mbtTOC ol li,.mbtTOC ul li {padding:15px 0 0; margin:0 0 0 30px;font-size:15px;}       
.mbtTOC a{color:#0080ff;text-decoration:none;}       
.mbtTOC a:hover{text-decoration:underline; }      
.mbtTOC button{background:#FFFFE0; font-family:oswald, arial; font-size:20px;position:relative; outline:none;cursor:pointer; border:none; color:#707037;padding:0 0 0 15px;}       
.mbtTOC button:after{content: "\f0dc"; font-family:FontAwesome; position:relative; left:10px; font-size:20px;}     

Dan paste sempurna di atas aba-aba ]]></b:skin>

Pada tahap ini sudah selesai memasang CSS dan Javascript, kini admin tunjukan caranya memasang Table Of Contents di postingan blog.

 Ketiga cari aba-aba <data:post.body/> kalau sudah ketemu ganti setiap aba-aba <data:post.body/> dengan aba-aba dibawah ini

<div id="post-toc"><data:post.body/></div>

Mungkin aba-aba <data:post.body/> ada dua atau lebih.

Keempat Pasang aba-aba dibawah ini sempurna di atas tag h2 / heading pada postingan pilih Html jangan Compose. Bisa juga diletakkan sesudah kata pengantar sempurna sesudah paragraf pertama. Cara tersebut merupakan lokasi yang baik untuk peletakan TOC.

<div class="mbtTOC"> 
<button onclick="mbtToggle()">Contents</button> 
<ol id="mbtTOC">
</ol> 
</div>

Kelima pasang aba-aba di bawah ini sempurna di selesai postingan

<script>mbtTOC();</script>

Seperti yang saya katakan sebelumnya, sesudah selesai setiap isi dari Table Of Contents silahkan anda berikan Jump Link.

2. Kode TOC sederhana


Sobat cukup menciptakan bullet list atau numbering list dan pribadi gunakan jump link, berikut pola kodenya;

<ol>
<li><a href="#jump1">Cara memasang Table Of Contents di Blogger</a> </li>

<li><li><a href="#jump2">Cara memasang Table Of Contents manual</a></li>

<li><li><a href="#jump3">Cara memasang Table Of Contents di Blogspot</a></li>

</ol>

Dan setiap list dikasih jump link

Setelah itu berikan tag id pada lokasi tujuan jump link

<div id="jump1"></div> Cara memasang Table Of Contents di Blogger

Next saya akan bagikan lebih banyak aba-aba Table Of Contents.
Sumber https://www.exppoin.com/
Share This :

Related Post