Hola amigos de Bloggers!! estoy medio abrumado con los tutoriales, hay momentos en los que no se que puedo escribir y no se me viene nada a la cabeza... ahora que me puse a chusmiar mi blog, veo un tutorial a pedido que eh pasado por alto.... y ya que no se me venia una idea a la cabeza, aremos unos
tutoriales sobre migas de pan o Breadcrumbs (Como quieran llamarlo) y comentarios realizados agregándole un poco de CSS... Espero que les guste.
Antes de comenzar veremos una demostración:
La demostración la encontraras en mi blog
- Paso 1: Vamos a Blogger>> Plantilla>> HTML>>
- Paso 2: Buscamos la siguiente linea (Ctrol + F)
- Paso 3: Justo por encima de </head> pegamos la siguiente linea
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
- Paso 4: Ahora buscamos la siguiente linea (Ctrol + F)
- Paso 5: Justo por encima de ]]></b:skin> pegamos el siguiente código CSS
.related-post {
margin:2em auto 0;
font-size:13px;
background:#fff;
border-radius:4px;
}
.related-post h1{
font-size:14px;
margin:0 0 .5em;
background:#9dcb63;
color:#fff;
padding:14px 20px 14px 75px;
font-weight:normal;
border-radius:4px 4px 4px 4px
position:relative;
font-family:Oswald,Arial, Sans-Serif;
text-transform:uppercase;
}
.related-post h1:before {
content: "\f074";
font-family:fontAwesome;
font-size:22px;
font-style: normal;
background-color:#8db857;
color:#fff;
border-radius:4px 0 0 0;
top:0;
left:0;
padding:8px 20px;
position:absolute;
}
ul.related-post-style-1 {
padding-left:0 !important;
margin-top:-12px;
}
.related-post-style-1 li {
list-style:none;
padding:15px 20px;
border-top:1px solid #eceef5;
}
.related-post-style-1 li a{
color:#79798d;
text-decoration:none;
}
.related-post-style-1 li a:hover{
color:#33aea5;
text-decoration:none;
}
.related-post-style-1 li:before {
content: "\f08e";
font-family:fontAwesome;
color:#c7cbd4;
font-style: normal;
top:0;
left:0;
margin-right:13px;
}
- Paso 6: Todavía en la plantilla buscamos la siguiente linea (Ctrol+ F)
- Paso 7: Justo debajo de <data:post.body/> pegamos el siguiente código HTML
<b:if cond='data:blog.pageType == "item"'>
<div class='related-post' id='related-post'/>
<script type='text/javascript'>
var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
"<data:label.name/>"<b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop></b:if>];
var relatedPostConfig = {
homePage: "<data:blog.homepageUrl/>",
widgetTitle: "<h1>Entradas Relacionadas:</h1>",
numPosts: 5,
summaryLength: 370,
titleLength: "auto",
thumbnailSize: 80,
noImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",
containerId: "related-post",
newTabLink: false,
moreText: "Read More",
widgetStyle: 1,
callBack: function() {}
};
</script>
<script src='http://blogger-json-experiment.googlecode.com/svn/resources/related-post/related-post.min.js' type='text/javascript'/>
</b:if>
- Paso 8: Guardamos los cambios relacionados y listo. A disfrutar de nuestras entradas relacionadas
Comentarios (0)
Instrucciones Para omentar
Incertar Enlace
Utilice el codigo
<a href='LINK'> EJEMPLO </a>
Cargar Imagen
[img] LINK_ANH [/img]
-Use el codigo para cargar una imagen.Formato Word
<b> negrita </b>
<i> cursiva </i>
<u> texto subrayado </u>
<strike>
texto tachado</strike>Insertar un Fragmento de codigo
Primero use esta herramienta para codificar el codigo que quiera agregar.
CerrarLuego utilice el codigo
[code] CODIGO HTML [/code]