Come inserire in Blogger un indice tipo Wikipedia.

Avete presente il menu indice di Wikipedia ?

Come posso creare qualcosa di simile nel mio blog ?
Dove un utente clicca sulla scritta e si ritrova nel paragrafo scelto ?

Ti sei mai chiesto di generare un elenco dinamico di Table of Contents nel puro JavaScript senza utilizzare una singola riga di jQuery?
Abbiamo programmato con successo un robusto TOC Script in JavaScript e CSS3 intitolato come "TOC Plugin V 2.0".
Questo plugin creerà un Table of Contents multi-livello da un tag di intestazione di una pagina web nel caricamento della pagina in una frazione di secondo!

I ragazzi di  MyBloggerTricks hanno sviluppato il plugin Create Table Of Contents (TOC) With Multi-level List In JavaScript che fa caparbiamente il suo mestiere.TOC-plugin
Come inserire in Blogger un indice tipo Wikipedia.
Come installare il Plugin TOC.
Vediamo passo a passo paso a paso come modificare il modello.
Modificazioni nel Modello.
1.- Apri il modello in HTML (ricordati fi fare SEMPRE una copia di backup) cerca la riga </head> e subito sopra incolla questo codice:
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>
//<![CDATA[
//*************TOC Plugin V2.0 by MyBloggerTricks.com
function mbtTOC2(){var a=1,b=0,c="";document.getElementById("post-toc").innerHTML=document.getElementById("post-toc").innerHTML.replace(/<h([\d]).*?>(.*?)<\/h([\d]).*?>/gi,function(d,e,f,g){return e!=g?d:(e>a?c+=new Array(e-a+1).join("<ol class='point"+a+"'>"):e<a&&(c+=new Array(a-e+1).join("</ol></li>")),b+=1,c+='<li><a href="#point'+b+'">'+f+"</a>",a=parseInt(e),"<h"+e+" id='point"+b+"'>"+f+"</h"+g+">")}),a&&(c+=new Array(a+1).join("</ol>")),document.getElementById("mbtTOC2").innerHTML+=c}function mbtToggle2(){var a=document.getElementById("mbtTOC2"),b=document.getElementById("Tog");"none"===a.style.display?(a.style.display="block",b.innerHTML="hide"):(a.style.display="none",b.innerHTML="show")}
//]]>
</script>
Puoi ovviamente personalizzarlo: font, colore, dimensioni, ecc
2.- Vediamo ora di risolvere la parte sottostante.
Cerchiamo la riga ]]></b:skin> e subito sopra si incolla questa porzione di codice:
/*####TOC Plugin V2.0 by MyBloggerTricks####*/
.mbtTOC2{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%;}.mbtTOC2 button{background:#FFFFE0; font-family:oswald, arial; font-size:22px;position:relative; outline:none;border:none; color:#707037;padding:0 0 0 15px;}.mbtTOC2 button a {color:#0080ff; padding:0px 2px;cursor:pointer;}
.mbtTOC2 button a:hover{ text-decoration:underline; }
.mbtTOC2 button span {font-size:15px; margin:0px 10px; }

.mbtTOC2 li{margin:10px 0;  }
.mbtTOC2 li a {color:#0080ff; text-decoration:none; font-size:18px; text-transform:capitalize;}
.mbtTOC2 li a:hover {text-decoration: underline;}.mbtTOC2 li li {margin:4px 0px;}
.mbtTOC2 li li a{ color:#289728; font-size:15px;}

.mbtTOC2 ol{counter-reset:section1;list-style:none}
.mbtTOC2 ol ol{counter-reset:section2}
.mbtTOC2 ol ol ol{counter-reset:section3}
.mbtTOC2 ol ol ol ol{counter-reset:section4}
.mbtTOC2 ol ol ol ol ol{counter-reset:section5}

.mbtTOC2 li:before{content:counter(section1);counter-increment:section1;position:relative;padding:0 8px 0 0;font-size:18px}
.mbtTOC2 li li:before{content:counter(section1) "." counter(section2);counter-increment:section2;font-size:14px}
.mbtTOC2 li li li:before{content:counter(section1) "."counter(section2) "." counter(section3);counter-increment:section3}
.mbtTOC2 li li li li:before{content:counter(section1) "."counter(section2) "."counter(section3) "." counter(section4);counter-increment:section4}
.mbtTOC2 li li li li li:before{content:counter(section1) "."counter(section2) "."counter(section3) "." counter(section4)"." counter(section5);counter-increment:section5}
/*
.point2 {list-style-type:lower-alpha}
.point3 {list-style-type:lower-roman}
.point4 {list-style-type:disc}

*/
3.- Finalmente dobbiamo trovare la riga <data:post.body/> e sostituirla con:
<div id="post-toc"><data:post.body/></div>
assolutamente tutte le volte dove trovi il codice.
Modificazioni nel post (Modo HTML).
Queste mofifiche vanno all’interno del post in modo HMTL:

4.-Apriamo Opzioni e spuntiamo la pallina Premi “Invio” per le interruzioni di riga.plugin-TOC
5.- Il seguente codice va inserito nel posto dove vuoi che compaia l’Indice (ma comunque sempre prima dell’intestazioni iniziale):
Per esempio in queso esempio:
<h2> Come inserire in Blogger un indice tipo Wikipedia.
<h3> Come installare il Plugin TOC.
Va inserito prima del tag <h2>
<div class="mbtTOC2">
<button>Índice de contenidos <span>[<a onclick="mbtToggle2()"  id="Tog">hide</a>]</span></button>
<div id="mbtTOC2"></div>
</div>


Per attivare il plugin alla fine del post sempre in HTML aggiungere la porzione di codice:
<script>mbtTOC2();</script>
Conclusión.
Parece un poco complicado pero en realidad los códigos que vamos a tener que inserir constantemente son los dos últimos porque los tres primeros se colocan en la plantilla por primera y única vez.
Se ti è piaciuto l'articolo , iscriviti al feed cliccando sull'immagine sottostante per tenerti sempre aggiornato sui nuovi contenuti del blog:
http://feeds.feedburner.com/blogspot/UzOyu

Trovato questo articolo interessante? Condividilo sulla tua rete di contatti Twitter, sulla tua bacheca su Facebook o semplicemente premi "+1" per suggerire questo risultato nelle ricerche in Google, Linkedin, Instagram o Pinterest. Diffondere contenuti che trovi rilevanti aiuta questo blog a crescere. Grazie! CONDIVIDI SU!

Ar-themes Logo

Hugo Repetto

Tutti noi crediamo di avere qualcosa da insegnare, tutti noi abbiamo una nostra storia personale che ci rende unici e ineguagliabili.

Nessun commento:

Posta un commento