Un mapa del sitio es muy importante porque le muestra a tus visitantes un resumen muy completo de todos los artículos que has publicado en tu blog, haciéndole así mas fácil a los usuarios encontrar tus artículos.
Hoy les enseñare a agregar un espectacular mapa del sitio para Blogger, que se vera de la siguiente manera:
Para agregar este mapa del sitio en tu blog, ve a una Paginas, Pagina nueva, Pagina en Blanco y pega allí el siguiente código:
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<br /></div>
<style type="text/css">
#resultDesc {
margin:0 30px;
padding:0 0;
border-bottom:4px solid #58ACFA;
display:none;
}
#resultDesc span {
display:block;
margin:0 0;
padding:5px 10px 7px;
color:#58ACFA;
}
#feedContainer {
display:block;
clear:both;
margin:0 30px;
padding:0 0;
overflow:hidden;
position:relative;
border:1px solid #58ACFA;
border-top:none;
text-shadow:0 1px 0 rgba(0, 0, 0, .4);
}
#feedContainer:after {
content:"";
display:block;
width:1px;
height:100%;
position:absolute;
top:0;
bottom:0;
left:50%;
background-color:#58ACFA;
}
#feedContainer li {
list-style:none;
margin:0 0;
padding:0 0;
border-top:1px solid #58ACFA;
color:#999;
width:50%;
float:left;
display:inline;
}
#feedContainer li .inner {
margin:15px 16px;
height:120px;
overflow:hidden;
word-wrap:break-word;
text-overflow:ellipsis;
}
#feedContainer li a {
text-decoration:none;
color:#58ACFA;
}
#feedContainer li a:hover {
text-decoration:none;
color:##58ACFA;
}
#feedContainer li a.toc-title {
font-weight:bold;
font-size:12px;
margin:0 0;
}
#feedContainer li .news-text {
margin:10px 0 0
}
#feedContainer li a img {
margin:0 10px 0 0;
padding:4px 4px;
background-color:#58ACFA;
border:1px solid #111;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
-webkit-box-shadow:0 1px 0 #444;
-moz-box-shadow:0 1px 0 #444;
box-shadow:0 1px 0 #444;
float:left;
}
#feedNav {
margin:10px 30px 0;
text-align:center;
font:normal bold 12px/30px Verdana, Arial, Sans-Serif;
}
#feedNav a, #feedNav span {
background-color:#58ACFA;
padding:0 0;
color:#999;
text-decoration:none;
display:block;
}
#feedNav a:hover, #feedNav a:active {
background-color:black;
color:white;
border:none !important;
}
#feedNav span {
cursor:wait
}
#table-outer {
padding:7px 10px;
margin:30px 30px 0;
}
#table-outer input {
display:inline-block;
vertical-align:top;
margin:0 2px 0 0;
padding:0 0;
}
#table-outer table {
border:none
}
#table-outer td {
padding:2px 2px;
border:none;
}
#table-outer label {
font-weight:bold;
color:#999;
text-shadow:0 1px 0 rgba(0, 0, 0, .4);
display:block;
text-align:right;
margin:0 10px 0 0;
}
#table-outer select[disabled] {
opacity:.4
}
#postSearcher {
display:block;
margin:0 0;
padding:0 0;
}
#postSearcher input, #table-outer select {
width:180px;
background-color:#111;
border:none;
display:block;
margin:0 0;
padding:5px 5px;
font:normal normal 10px Tahoma, Verdana, Arial, Sans-Serif;
text-transform:uppercase;
color:#777;
outline:none;
-webkit-box-shadow:inset 0 1px 3px black, 0 1px 0 #444;
-moz-box-shadow:inset 0 1px 3px black, 0 1px 0 #444;
box-shadow:inset 0 1px 3px black, 0 1px 0 #444;
}
#postSearcher input {
width:170px;
padding:5px 5px;
}
#postSearcher input:focus, #table-outer select:focus {
background-color:#090909
}
@media (max-width:800px) {
#feedContainer li {
float:none;
display:block;
width:auto;
height:auto;
}
#feedContainer:after {
display:none
}
}
</style>
<script type="text/javascript">
//<![CDATA[
var tocConfig = {
url: "URL DE TU BLOG",
feedNum: 30,
labelName: false,
numChars: 0,
thumbWidth: 80,
navText: "Siguiente ▼",
frontText: "Atras ⇑",
resetToc: "Reset",
noImage: "https://www.governmentresource.com/files/blog_icon.png",
loading: "<span>Cargando...</span>",
searching: "<span>Mencari...</span>",
noResult: "No se ha encontrada nada con ese titulo"
};
//]]>
</script>
<br />
<div id="table-outer">
<table border="0">
<tbody>
<tr>
<td><label for="orderFeedBy">Ordenar las entradas por:</label>
</td>
<td><select id="orderFeedBy">
<option selected="" value="published">ULTIMA ENTRADA</option>
<option value="updated">PUBLICAR INFORMACIÓN ACTUALIZADA</option>
</select>
</td>
</tr>
<tr>
<td><label for="labelSorterSelect">Filtrar las entradas por categorias</label>
</td>
<td><span id="labelSorter"><select disabled="" id="labelSorterSelect"><option selected="">MEMUAT...</option></select></span>
</td>
</tr>
<tr>
<td><label for="feed-q-box">Buscar por palabras claves:</label>
</td>
<td><form id="postSearcher">
<input id="feed-q-box" type="text" />
</form>
</td>
</tr>
</tbody>
</table>
</div>
<br />
<br />
<br />
<br />
<br />
<header id="resultDesc"></header>
<br />
<ul id="feedContainer"></ul>
<div id="feedNav">
</div>
<script src="https://dl.dropboxusercontent.com/u/35784805/Mil%20Trucos%20Blogger/sitemapnuevo.js" type="text/javascript"></script></div>
Ahora reemplaza lo que esta resaltado en color azul por la URL de tu blog, y si quieres reemplazar la imagen que se muestra por defecto solo sustituye lo que esta resaltado en color rojo por la URL de la imagen que quieras.
Espero que te guste este tutorial y que sigas visitando Mil Trucos Blogger.