Tutorial: Cómo añadir un mapa del sitio a tu blog

  • Autor Autor Karpol
  • Fecha de inicio Fecha de inicio
Karpol

Karpol

Delta
Redactor
Verificación en dos pasos activada
Hola, como están forobetanos!?

Hoy les vengo a dejar un pequeño código que les servirá para agregar un mapa del sitio a su blog, este viene incluido con algunos estilos para darle un aspecto mas atractivo, si ustedes les quieren cambiar los colores y demás ya seria por parte de ustedes, bueno si mas nada que decir aquí el code:

Insertar CODE, HTML o PHP:
<script>var postTitle=new Array();var postUrl=new Array();var postMp3=new Array();var postDate=new Array();var postLabels=new Array();var postBaru=new Array();var sortBy="titleasc";var tocLoaded=false;var numChars=250;var postFilter='';var numberfeed=0;function loadtoc(json){function getPostData(){if("entry"in json.feed){var numEntries=json.feed.entry.length;numberfeed=numEntries;ii=0;for(var i=0;i<numEntries;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var postdate=entry.published.$t.substring(0,10);var posturl;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}var postmp3='';for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='enclosure'){postmp3=entry.link[k].href;break}}var pll='';if("category"in entry){for(var k=0;k<entry.category.length;k++){pll=entry.category[k].term;var l=pll.lastIndexOf(';');if(l!=-1){pll=pll.substring(0,l)}postLabels[ii]=pll;postTitle[ii]=posttitle;postDate[ii]=postdate;postUrl[ii]=posturl;postMp3[ii]=postmp3;if(i<5){postBaru[ii]=true}else{postBaru[ii]=false};ii=ii+1}}}}}getPostData();sortBy="titleasc";sortPosts(sortBy);sortlabel();tocLoaded=true;displayToc2()}function filterPosts(filter){scroll(0,0);postFilter=filter;displayToc(postFilter)}function allPosts(){sortlabel();postFilter='';displayToc(postFilter)}function sortPosts(sortBy){function swapPosts(x,y){var temp=postTitle[x];postTitle[x]=postTitle[y];postTitle[y]=temp;var temp=postDate[x];postDate[x]=postDate[y];postDate[y]=temp;var temp=postUrl[x];postUrl[x]=postUrl[y];postUrl[y]=temp;var temp=postLabels[x];postLabels[x]=postLabels[y];postLabels[y]=temp;var temp=postMp3[x];postMp3[x]=postMp3[y];postMp3[y]=temp;var temp=postBaru[x];postBaru[x]=postBaru[y];postBaru[y]=temp}for(var i=0;i<postTitle.length-1;i++){for(var j=i+1;j<postTitle.length;j++){if(sortBy=="titleasc"){if(postTitle[i]>postTitle[j]){swapPosts(i,j)}}if(sortBy=="titledesc"){if(postTitle[i]<postTitle[j]){swapPosts(i,j)}}if(sortBy=="dateoldest"){if(postDate[i]>postDate[j]){swapPosts(i,j)}}if(sortBy=="datenewest"){if(postDate[i]<postDate[j]){swapPosts(i,j)}}if(sortBy=="orderlabel"){if(postLabels[i]>postLabels[j]){swapPosts(i,j)}}}}}function sortlabel(){sortBy="orderlabel";sortPosts(sortBy);var j=0;var i=0;while(i<postTitle.length){temp1=postLabels[i];firsti=j;do{j=j+1}while(postLabels[j]==temp1);i=j;sortPosts2(firsti,j);if(i>postTitle.length)break}}function sortPosts2(firstvar,lastvar){function swapPosts2(x,y){var temp=postTitle[x];postTitle[x]=postTitle[y];postTitle[y]=temp;var temp=postDate[x];postDate[x]=postDate[y];postDate[y]=temp;var temp=postUrl[x];postUrl[x]=postUrl[y];postUrl[y]=temp;var temp=postLabels[x];postLabels[x]=postLabels[y];postLabels[y]=temp;var temp=postMp3[x];postMp3[x]=postMp3[y];postMp3[y]=temp;var temp=postBaru[x];postBaru[x]=postBaru[y];postBaru[y]=temp}for(var i=firstvar;i<lastvar-1;i++){for(var j=i+1;j<lastvar;j++){if(postTitle[i]>postTitle[j]){swapPosts2(i,j)}}}}function displayToc(filter){var numDisplayed=0;var tocTable='';var tocHead1='Judul Artikel';var tocTool1='Klik untuk sortir berdasarkan judul';var tocHead2='Tanggal';var tocTool2='Klik untuk Sortir bedasarkan tanggal';var tocHead3='Kategori';var tocTool3='';if(sortBy=="titleasc"){tocTool1+=' (descending)';tocTool2+=' (newest first)'}if(sortBy=="titledesc"){tocTool1+=' (ascending)';tocTool2+=' (newest first)'}if(sortBy=="dateoldest"){tocTool1+=' (ascending)';tocTool2+=' (newest first)'}if(sortBy=="datenewest"){tocTool1+=' (ascending)';tocTool2+=' (oldest first)'}if(postFilter!=''){tocTool3='Klik untuk menampilkan semua'}tocTable+='<col4>';tocTable+='<href>';tocTable+='<td class="toc-header-col1">';tocTable+='<a href="javascript:toggleTitleSort();" title="'+tocTool1+'">'+tocHead1+'</a>';tocTable+='</td>';tocTable+='<td class="toc-header-col2">';tocTable+='<a href="javascript:toggleDateSort();" title="'+tocTool2+'">'+tocHead2+'</a>';tocTable+='</td>';tocTable+='<td class="toc-header-col3">';tocTable+='<a href="javascript:allPosts();" title="'+tocTool3+'">'+tocHead3+'</a>';tocTable+='</td>';tocTable+='<td class="toc-header-col4">';tocTable+='Download MP3';tocTable+='</td>';tocTable+='</tr>';for(var i=0;i<postTitle.length;i++){if(filter==''){tocTable+='<href><td class="toc-entry-col1"><a href="'+postUrl[i]+'">'+postTitle[i]+'</a></td><td class="toc-entry-col2">'+postDate[i]+'</td><td class="toc-entry-col3">'+postLabels[i]+'</td><td class="toc-entry-col4">'+'<a href="'+postMp3[i]+'">'+'Download'+'</a>'+'</td></tr>';numDisplayed++}else{z=postLabels[i].lastIndexOf(filter);if(z!=-1){tocTable+='<href><td class="toc-entry-col1"><a href="'+postUrl[i]+'">'+postTitle[i]+'</a></td><td class="toc-entry-col2">'+postDate[i]+'</td><td class="toc-entry-col3">'+postLabels[i]+'</td><td class="toc-entry-col4">'+'<a href="'+postMp3[i]+'">'+'Download'+'</a>'+'</td></tr>';numDisplayed++}}}tocTable+='</table>';if(numDisplayed==postTitle.length){var tocNote='<postUrl class="toc-note">Menampilkan Semua '+postTitle.length+' Artikel<br/></span>'}else{var tocNote='<postUrl class="toc-note">Menampilkan '+numDisplayed+' artikel dengan kategori \'';tocNote+=postFilter+'\' dari '+postTitle.length+' Total Artikel<br/></span>'}var tocdiv=document.getElementById("toc");tocdiv.innerHTML=tocNote+tocTable}function displayToc2(){var j=0;var i=0;document.write('<div id="feed-control">');document.write('<div class="gfg-root">');while(i<postTitle.length){temp1=postLabels[i];document.write('<div class="gfg-subtitle">');document.write('<a  class="gfg-collapse-href" href="/search/label/'+temp1+'">'+temp1+'</a>');document.write('<div class="clearFloat"></div>');document.write('</div><div class="gfg-list"><false>');firsti=j;var tempposition='odd';do{if(tempposition=='odd'){document.write('<li><div class="gfg-listentry gfg-listentry-odd">');tempposition='even'}else{document.write('<li><div class="gfg-listentry gfg-listentry-even">');tempposition='odd'}document.write('<a href="'+postUrl[j]+'">'+postTitle[j]+'</a>');if(postBaru[j]==true){document.write(' - <strong><em><postUrl style="color: rgb(255, 0, 0);">¡ Nuevo !</span> </em></strong>')};document.write('</div></li>');j=j+1}while(postLabels[j]==temp1);i=j;document.write('</ol></div>');sortPosts2(firsti,j);if(i>postTitle.length)break}document.write('</div>');document.write('</div>')}function toggleTitleSort(){if(sortBy=="titleasc"){sortBy="titledesc"}else{sortBy="titleasc"}sortPosts(sortBy);displayToc(postFilter)}function toggleDateSort(){if(sortBy=="datenewest"){sortBy="dateoldest"}else{sortBy="datenewest"}sortPosts(sortBy);displayToc(postFilter)}function showToc(){if(tocLoaded){displayToc(postFilter);var toclink=document.getElementById("toclink")}else{alert("Cargando...")}}</script><br />
<script src="http://[COLOR="#FF0000"]AQUI NOMBRE DE TU BLOG O WEB.blogspot.com[/COLOR]/feeds/posts/default?max-results=9999&alt=json-in-script&amp;callback=loadtoc"></script><br />
<style type="text/css">
.gfg-root {
  width : 100%;
  height : auto;
  position : relative;
  overflow : hidden;
  text-align : center;
font-family:Arial;
font-size:13px
}

.gfg-title {
  font-size: 14px;
  font-weight : bold;
  color:#585858;
  background-color:#BDBDBD;
  line-height : 1.4em;
  overflow : hidden;
  white-space : nowrap;
}

.gfg-title a {
  color : #3366cc;
}

.gfg-subtitle {
  font-size: 14px;
  font-weight: bold;
  color:#585858!important;
padding:4px;
border-radius:4px;
  background-color: #BDBDBD;
  line-height: 1.4em;
  overflow:hidden;
  white-space:nowrap;
  margin-bottom:5px;
}

.gfg-subtitle a {
  color:#404040!important
}

.gfg-entry {
  background-color : white;
  width : 100%;
  height : 6.9em;
  position : relative;
  overflow : hidden;
  text-align : left;
  margin-top : 3px;
}

/* To allow correct behavior for overlay */
.gfg-root .gfg-entry .gf-result {
  position : relative;
  background-color : white;
  width : auto;
  height : 100%;
  padding-left : 20px;
  padding-right : 5px;
}

.gfg-list {
  position : relative;
  overflow : hidden;
  text-align : left;
  margin-bottom : 5px;
}

.gfg-listentry {
  line-height : 1.5em;
  overflow : hidden;
  white-space : nowrap;
  text-overflow : ellipsis;
  -o-text-overflow : ellipsis;
  padding-left : 15px;
  padding-right : 5px;
  margin-left : 5px;
  margin-right : 5px;
}

.gfg-listentry-odd {
  background-color : #F6F6F6;
}

.gfg-listentry-even {
}

.gfg-listentry-highlight { 
  background-image : url('garrow.gif');
  background-repeat: no-repeat;
  background-position : center left;
}
.gfg-root .gfg-entry .gf-result .gf-title {
  font-size: 14px;
  line-height : 1.2em;
  overflow : hidden;
  white-space : nowrap;
  text-overflow : ellipsis;
  -o-text-overflow : ellipsis;
  margin-bottom : 2px;
}

.gfg-root .gfg-entry .gf-result .gf-snippet {
  height : 3.8em;
  color: #000000;
  margin-top : 3px;
}
.gfg-horizontal-container {
  position : relative;
}

.gfg-horizontal-root {
  height : 1.5em;
  _height : 100%;
  position : relative;
  white-space : nowrap;
  overflow : hidden;
  text-align : center;
  font-family: "Arial", sans-serif;
  font-size: 13px;
  border: 1px solid #AAAAAA;
  padding : 5px;
  margin-right : 80px;
}

.gfg-horizontal-root .gfg-title {
  font-weight : bold;
  background-color: #FFFFFF;
  line-height : 1.5em;
  overflow : hidden;
  white-space : nowrap;
  float : left;
  padding-left : 10px;
  padding-right : 12px;
  border-right: 1px solid #AAAAAA;
}

.gfg-horizontal-root .gfg-title a {
  color : #444444;
  text-decoration : none;
}

.gfg-horizontal-root .gfg-entry {
  width : auto;
  height : 1.5em;
  position : relative;
  overflow : hidden;
  text-align : left;
  margin-top : 0px;
  margin-left : 0px;
  padding-left : 10px;
}

/* To allow correct behavior for overlay */
.gfg-horizontal-root .gfg-entry .gf-result {
  position : relative;
  background-color : white;
  width : 100%;
  height : 100%;
  line-height : 1.5em;
  overflow : hidden;
  white-space : nowrap;
}

.gfg-horizontal-root .gfg-list {
  display : none;
}

.gfg-horizontal-root .gfg-entry .gf-result .gf-snippet,
.gfg-horizontal-root .gfg-entry .gf-result .gf-author {
  display : none;
}

.gfg-horizontal-root .gfg-entry  .gf-result .gf-title {
  color: #0000cc;
  margin-right : 3px;
  float : left;
}

.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer {
  float : left;
}

.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer,
.gfg-horizontal-root .gfg-entry .gf-result .gf-relativePublishedDate {
  display : block;
  color: #AAAAAA;
}

.gfg-branding {
  white-space : nowrap;
  overflow : hidden;
  text-align : left;
  position : absolute;
  right : 0px;
  top : 0px;
  width : 80px;
}

.gfg-collapse-open, .gfg-collapse-closed {
  background-repeat : no-repeat;
  background-position : center;
  cursor : pointer;
  float : right;
  width : 17px;
  height : 20px;
}

.gfg-collapse-open {
  background-image : url('arrow_open.gif');
}

.gfg-collapse-closed {
  background-image : url('arrow_close.gif');
}

.gfg-collapse-href {
  float : left;
}

.clearFloat {
  clear : both;
}</style>

Lo único que tienen que cambiar es donde dice COLOCAR NOMBRE DE SU BLOG WEB por su url de su blog o pagina, y así de sencillo.

Esto lo pueden colocar creando una entrada nueva o una pagina, yo les recomiendo que lo coloquen en una pagina con un titulo "Mapa del sitio" y lo pegan en la seccion HTML ya que hay es donde funcionara.

No coloco imágenes porque es algo sumamente sencillo, si tienen alguna duda o otro cosa, comentenla y les respondere lo antes posible.

Acuerdense si les gusto, darle click al Me Agrada así me animan a seguir creando otros posts como estos!

Saludos

Aqui les dejo como se veria: DEMO


 
Se ve bueno a probar :encouragement:
 
Pues no es tan pequeño como lo veo, jejeje. Se agradece el aporte.
 
[MENTION=80115]xTeran[/MENTION]

De seguro te gustara, ya si le quieres dar un estilo mas personal cambia los estilos de la parte de abajo del script :encouragement:
[MENTION=1005]César Arévalo[/MENTION]

No te creas amigo, se ve súper largo, pero carga súper rápido, hasta yo me quede loco, ya habia probado otros y cargaban en una eternidad pero este carga rapido xDD:encouragement:
 
Gracias por la aportación, funciona bien 🙂
 
Un poco largo el script, pero quedo bien
 
[MENTION=111302]Xauen[/MENTION] y [MENTION=76637]xLincex[/MENTION]

De nada amigos, estamos a la orden.

Tengo otro par de tutos pero los iré haciendo entre la semana xDD. Entre ellos estaran como colocar un siteskins para la publicidad y otras cositas de blogger xDD :encouragement:

Saludos!
 
Ah, es blogger. Menos mal que wordpress no me marea con tanto código enredado :distant:
 
Gracias por la info :3 a fav
 
Gracias por el aporte amigo. :encouragement:
 
Te tenia que contestar porque lo probé y muy bien, solo que mi blog tiene mas de 2600 entradas y no salen todas
 
Gracias por el aporte :encouragement:

De nada estamos a la orden cualquier duda :encouragement:

Te tenia que contestar porque lo probé y muy bien, solo que mi blog tiene mas de 2600 entradas y no salen todas

Hola, disuculpa que conteste tan tarde :welcoming:. Bueno pues es algo muy raro ya que de donde lo saque (de CiudadBlogger) a el les muestra todas sus entradas y a mi tambien, ai que sinceramente no se a que se debera eso :neglected:
 
Que gran aporte, realmente me ha gustado. Tienes mi agrada y mis mil gracias.
 
Funcionaria tambien para wordpress?
 
Funcionaria tambien para wordpress?

Desconozco totalmente si funciona en WordPress supongo que NO funcionaria ya que WordPress no trabaja con etiquetas sino con categorías. Deberías de sacar un hilo nuevo preguntando eso xD. Saludos

- - - Actualizado - - -

Está genial. Muchas gracias :encouragement:

De nada amigo. Que e bien que te funcionó xD
 
Buen aporte :encouragement:
 
Lo pruebo ahora, muchas gracias por el aporte 🙂
 
Muchas gracias por el aporte a tener en cuenta ahora que se lleva tanto los mapitas 😉
 
Atrás
Arriba