Lo prometido es deuda, el dia de hoy les voy a enseñar una nueva forma de mostrar nuestras entradas de blogger al inicio de la pagina, a esta modificacion le he puesto el nombre de "Entradas Albums" asi que todas las entradas que le dedique este nombre tratara sobre este tipo de modificacion que solo afecta a la home de nuestros blogs, se que me he demorado mucho en este tutorial pero eso fue debido a que estaba buscando una forma de hacer esta modificacion lo mas compatiblemente posible, esto se debe a que todos usan tpls distintos por lo que la estructura tambien lo es, aunque he podido completar el tutorial debido a las variaciones de diseño que existen se que mas de uno necesitara de mi ayuda y con todo gusto contestare sus comentarios, comencemos con este tutorial
Paso 1 - agregando el script
Lo primero que necesitamos es el script que nos dara un resumen automatico de nuestras entradas, si ya tienen uno funcionando en sus blogs recomiendo que lo remuevan totalmente e instalen este, este script es una modificacion realizada por El potro al script original por Anhvo y ahora es nuevamente modificado por mi para este tutorial, recuerden que esto es solo para usuarios blogger
Entren al panel de su blog y dirijansen a Plantilla > Edición de HTML y busquen: "</head>" ensima de eso agregan esto:
Entren al panel de su blog y dirijansen a Plantilla > Edición de HTML y busquen: "</head>" ensima de eso agregan esto:
<script type='text/javascript'>
summary_txt = 410;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
// Script original de Anhvo, modificado por ciudadblogger.com
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID, pURL){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
if(img.length<=0) {
imgtag = '<a href="'+ pURL +'"></a><div class="cut-img"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTQnw7x789a09wZ0O3DFCS6Qst-oIuCj3T1CApiSjCQdTBt-XddRw3iiEVGxp77Pdjzx8zKtDMukl0sQTAZq0e4YIMGFGYqm6KUhExR6xNqkJedY1oqg5LafAuuTNJHQmNXslbMkKGp44/" /></div>';
summ = summary_txt;
}
if(img.length>=1) {
imgtag = '<a href="'+ pURL +'"></a><div class="cut-img"><img src="'+img[0].src+'" /></div>';
summ = summary_txt;
}
var summary = imgtag + '<div style="display:none">' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
Paso 2 - agregando el estilo
El estilo tiene igual de importancia o incluso mayor como el script, este ocultara todos los elementos inecesarios de la home sin modificar al momento de entrar al post, tambien le dara el acabado final y acomodara todo en su sitio correspondiente.
Nuevamente en la plantilla busquen "</head>" y ensima agregan lo siguiente, es decir que el siguiente codigo quedara debajo del primero que pegamos en el paso 1:
Nuevamente en la plantilla busquen "</head>" y ensima agregan lo siguiente, es decir que el siguiente codigo quedara debajo del primero que pegamos en el paso 1:
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<style type='text/css'>
/*paso 3 estilos*/
.date-outer, .date-posts, .post-outer {
display: inline;
}
.post {
border: 0 none;
display: inline-block;
margin-bottom: 0 !important;
}
.post-body {
background: none repeat scroll 0 0 transparent !important;
display: inline-block;
height: auto !important;
line-height: 1.25 !important;
margin: 0;
padding: 0;
}
.post-footer {
display: none;
}
#shadow-album {
list-style: none outside none;
margin: 0;
padding: 0;
position: relative;
}
.contenido-s {
float: left;
padding: 0 0 40px;
width: 265px;
}
#shadow-album img {
max-width: 300px;
}
#shadow-album a {
height: 100%;
left: 0;
position: absolute;
width: 100%;
z-index: 60;
}
#shadow-album .content-img {
background: none repeat scroll 0 0 #FFFFFF;
border: 8px solid #F3F3F3;
cursor: pointer;
height: 130px;
margin: 0 auto;
position: relative;
width: 230px;
}
i.tshadow {
box-shadow: 0 0 50px -15px #000000 inset;
color: #FFFFFF;
font-family: Arial,Helvetica;
font-size: 16px;
font-style: normal;
font-weight: bold;
height: 100%;
left: 0;
line-height: 130px;
position: absolute;
text-align: center;
text-indent: -9999px;
top: 0;
-moz-transition: all 400ms ease-in-out 0s;
-webkit-transition: all 400ms ease-in-out 0s;
-o-transition:all 400ms ease-in-out 0s;
transition: all 400ms ease-in-out 0s;
width: 100%;
z-index: 50;
}
#shadow-album .contenido-s:hover i.tshadow {
background: rgba(0, 0, 0, 0.5);
box-shadow: 0 0 50px 0px #000 inset;
text-indent: 0;
}
.cut-img {
height: 130px;
overflow: hidden;
width: 230px;
}
#shadow-album h1 {
background: #555;
color: #FFF;
font-family: Arial,helvetica;
font-size: 13px;
font-weight: bold;
height: 30px;
line-height: 30px;
margin: 10px auto;
overflow: hidden;
padding: 0 20px;
text-align: center;
width: 200px;
}
.post-title {
display: none;
}
</style>
</b:if>
</b:if>
Paso 3 - agregando html y modificando la plantilla
hasta el momento ya tenemos todo lo que funcionara como "motor" que mostrara todo los cambios realizados hasta ahora.
En la parte superior izquierda de donde nos encontramos ahora hay una casilla en blanco que dice "Expandir plantillas de artilugios", marcan esa casilla y despues que cargue buscamos esto:
En la parte superior izquierda de donde nos encontramos ahora hay una casilla en blanco que dice "Expandir plantillas de artilugios", marcan esa casilla y despues que cargue buscamos esto:
<data:post.body/>
Este codigo puede estar 3 veces en sus plantillas, solo necesitamos modificar el que este primero, asegurensen de dar con el indicado, una vez localizado lo reemplazan por esto:
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div id='shadow-album'>
<div class='contenido-s'>
<div class='content-img'>
<div expr:id='"summary" + data:post.id' style='font-size:13px; text-align:justify;'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>","<data:post.url/>");</script>
<i class='tshadow'>Ver más</i>
</div>
<h1><data:post.title/></h1>
</div>
<div style='clear:both'/>
</div>
</b:if></b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>
Paso 4 - Configurando blogger
pude darse el caso que algunos elementos indeceados aparescan entre las entradas, para evitarlo lo unico que tienen que hacer (si es que les sucede) es configurar las entradas de esta forma, para ello nos dirigimos en el panel a "Diseño", veremos algunos cuadros blancos con la opcion "editar", precionaremos el que se encuentra en el cuadro blanco que dice Entradas del blog y nos aseguraremos que lo tengamos de esta forma:
y listo, terminamos el tutorial, aunque dependiendo de cada plantilla y diseño pueden tener algun problema, si es asi dejenme un comentario explicandome su situacion
No hay comentarios:
Publicar un comentario