Como insertar una caja de Artículos Relacionados en las entradas de Blogger
¿Cómo puedo agregar una caja de Artículos relacionados en Blogger y un método de suscripción? Con Blogger.com se pueden crear miles de trucos e implementarlos en nuestro blog de Blogger de una forma sencilla sin tener conocimiento alguno de código HTML. Lo que vamos a aprender en este tutorial de Blogger es a implementar una caja de artículos relaciones y un método de suscripción. Todo este proceso lo vamos a realizar desde el Editor HTML de nuestro blog de Blogger, insertaremos dos códigos en diferentes puntos, esto hará que se muestre al final de cada artículo, mostrándonos los artículos relaciones y también una caja de suscripciones de una forma fácil y ligera. No le causara ningún daño a la estructura de su blog y además lo más importante es que funciona correctamente en todos los navegadores web.
A continuación pueden ver su demostración
en el siguiente blog de demos, mirelo al final de la publicación
Les gusto verdad!
Vamos a trabajar
1 Ir a Blogger
2 Un clic en “Plantilla”
3 Un clic en “Editar HTML”
Ahora se te abrirá el editor HTML de tu
plantilla, se mostrara igual como la imagen que esta a continuación
En este punto deberás presionar la tecla
“Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador
integrado en la parte superior derecha de tu editor, debes esperar unos segundos hasta que se muestre, aquí es donde tendrás que
insertar el código para buscarlo e insertar los códigos correspondientes en el editor, a continuación
mire la imagen la cual te mostrara tal y cual deberá aparecerte el buscador en
tu editor HTML de tu plantilla y así puedas colocar el código en el buscador al
momento que yo diga busca este código.
4 Busca este código
]]></b:skin>
|
Una vez que hayas encontrado el código,
tienes que insertar las siguientes líneas de código justo arriba del código que
encontraste
#related{background:#222; border:1px solid #000; border-bottom:1px
solid #444; border-right:1px solid #444;text-shadow:0 1px 0 #000;margin:0 0
5px;padding:10px}
ul#related-posts{font:bold 11px Arial;list-style:none;text-transform:none;margin:10px
0;padding:0}
#related .related-posts{font-weight:400;width:50%;float:right}
#related .related-posts p{margin:0}
ul#related-posts
li{float:left;height:auto;list-style-type:none;margin:0 5px;padding:2px 1px}
*html ul.rp#related-posts li{margin:0 13px}
ul#related-posts li a{-moz-box-shadow:0 1px 2px
rgba(0,0,0,0.15);border:2px solid
#333;display:block;height:72px;position:relative;width:72px;color:#eaeaea;text-decoration:none;text-shadow:0
1px 0 #000}
ul#related-posts li .overlay{height:66px;line-height:16px;position:absolute;width:66px;z-index:10;padding:6px
0 0 6px}
ul#related-posts li a:hover
.overlay{background:#000;display:block!important;opacity:0.7}
ul#related-posts li img{bottom:0;padding:0!important}
ul#related-posts li a:hover{-moz-box-shadow:0 1px 3px
rgba(0,0,0,0.25)}
#related .subscribe{width:43%;float:left;color:#bdbdbd;}
#related .subscribe p.intro{font-weight:400}
#related .subscribe
p.feed{margin-bottom:10px;font-weight:700;padding-left:21px;background:url(http://lh3.ggpht.com/_pt7i0nbIOCY/SuPmf8r8eqI/AAAAAAAACXM/BYjbuwVwxas/FeedIcon-16_thumb.gif)
0 50% no-repeat;vertical-align:middle}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-block}
|
5 Busca el siguiente código
<data:post.body/>
|
Este punto es muy importante, tendremos
dos o tres códigos similares en nuestra plantilla
<data:post.body/>
<data:post.body/>
<data:post.body/>
Es por esto que les digo que busquen el último
código similar e inserten el código ahí y no lo ubiquen en el primer puesto. Quiero
decir que el código lo inserten en el último puesto de este código <data:post.body/>
Luego de encontrar el código,
insertaremos las siguientes líneas de código justo abajo del código que
encontramos
<b:if cond='data:blog.pageType == "item"'>
<div class='clearfix' id='related'>
<div class='related-posts'>
<p>Artículos Relacionados</p>
<script type='text/javascript'>
var
defaultnoimage="http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/s1600/no+image.jpg";
var maxresults=6;
</script>
<script src='http://yourjavascript.com/1198561349/relatedimg.js'
type='text/javascript'/>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name
+
"?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"'
type='text/javascript'/>
</b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div>
<div class='subscribe'>
<p class='intro'>Si les gusto
este artículo <a href='http://feeds.feedburner.com/foroayudadeblogger'
target='_blank' title='feedburner'>
<b>haga un clic aquí</b></a>,
o suscríbase para que reciba nuestras nuevas publicaciones.</p>
<p class='feed'><a href=' http://stylemagazine2.blogspot.com/ feeds/posts/default'>Suscríbete via RSS Feed</a></p>
<form action='http://feedburner.google.com/fb/a/mailverify'
method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=foroayudadeblogger',
'popupwindow',
'scrollbars=yes,width=550,height=520');return true'
target='popupwindow'>
<input name='uri' type='hidden' value='foroayudadeblogger'/>
<input name='loc' type='hidden' value='es_ES'/>
<input id='botsub' name='email' onblur='if (this.value ==
"") {this.value = "Ingrese su email ";}'
onfocus='if (this.value == "Ingrese su email email")
{this.value = "";}' type='text' value='Ingrese su email....'/>
<input id='botsubbutton' type='submit' value='Ingresar'/><br/>
<small>Su información no será revelada
nunca.</small><br/>
<a href='http://feeds.feedburner.com/foroayudadeblogger '><img
alt='' height='26' src='http://feeds.feedburner.com/~fc/foroayudadeblogger?bg=ceaa6c&fg=444444&anim=1'
style='border:0' width='88'/></a>
</form>
</div>
</div>
</b:if>
|
Realiza estos cambios:
Hay 5 nombres llamados foroayudadeblogger
tienes que borrarlos y remplazarlos por el nombre de tu método de suscripción de
tu FeedBurner
Además, tienes que sustituir la URL que está
marcada de color azul http://stylemagazine2.blogspot.com/ por la dirección URL de tu blog de Blogger
Eso es todo, es momento de dar un clic
en “Guardar plantilla” y mira los nuevos cambios en las publicaciones de tu
blog de Blogger
Fácil verdad!
Recuerda suscribirte y recibirás mis
nuevas actualizaciones directamente en tu correo electrónico
¿Necesitas ayuda?
Cualquier pregunta no duden en hacérmelo
saber y de inmediato les responderé
Saludos
Recuerda suscribirte:
Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
6 comentarios: