add

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.

Como insertar una caja de Artículos Relacionados en las entradas

A continuación pueden ver su demostración en el siguiente blog de demos, mirelo al final de la publicación

DEMO

Les gusto verdad!

Vamos a trabajar

1 Ir a Blogger

2 Un clic en “Plantilla

Como insertar una caja de Artículos Relacionados en las entradas

3 Un clic en “Editar HTML

Como insertar una caja de Artículos Relacionados en las entradas

Ahora se te abrirá el editor HTML de tu plantilla, se mostrara igual como la imagen que esta a continuación

Como insertar una caja de Artículos Relacionados en las entradas

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.

Como insertar una caja de Artículos Relacionados en las entradas

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 == &quot;item&quot;'>
<div class='clearfix' id='related'>
<div class='related-posts'>
<p>Artículos Relacionados</p>
<script type='text/javascript'>
var defaultnoimage=&quot;http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/s1600/no+image.jpg&quot;;
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 != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/>
</b:loop>

<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</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(&apos;http://feedburner.google.com/fb/a/mailverify?uri=foroayudadeblogger&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);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 == &quot;&quot;) {this.value = &quot;Ingrese su email &quot;;}' onfocus='if (this.value == &quot;Ingrese su email email&quot;) {this.value = &quot;&quot;;}' 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&amp;fg=444444&amp;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

emailEnviar por correo

6 comentarios:

  1. hola amigo tienes unas webs exelentes me gustaria me ayudaras a pones una linea como la que tienes en tu blog donde van cambiando los links como la que tienes tu, yo tengo un blog de descargas de peliculas y me gustaria ponerlo con los estrenos de peliculas me podrias ayudar ggracias

    ResponderEliminar
  2. Que es? tienes que borrarlos y remplazarlos por el nombre de tu método de suscripción de tu "FeedBurner"

    ResponderEliminar
  3. Muy buen trabajo, te invito a visitar mi blog de imagenes http://imagenescristo.blogspot.com/

    ResponderEliminar
  4. que es el metodo de suscripcion de feedburner? soynueva en esto

    ResponderEliminar
  5. emm Estaba haciendo esto en mi blog y se me ha descontrolado todo y no se como volverlo a la normalidad y ahora voy a Personalizar pantallita y me aparece error. Y las dos columnas que estaban a los lados ya no estan, no se que hacer http://melanieherediablog.blogspot.com/

    ResponderEliminar
    Respuestas
    1. Hola, si te present un error, borra todo el codigo que insertastes para que vuelva a su normalidad, he visto tu blog y veo que lo has arreglado, saludos

      Eliminar

Discusión

person_pin Luis Chávez

group_work Fundador

contact_phone +593 994589032

email ayudadeblogger@gmail.com

Entradas populares

Youtube.com/ayudadeblogger

Suscríbete

Etiquetas

Adsense dispositivos moviles (2) Alojamiento web (12) Aplicaciones moviles (15) Backlinks (1) Breaking News para Blogger (3) Como (33) Como crear una pagina web gratis (8) Comprar Dominios (2) Comprar un Dominio en Godaddy (2) Configurar dominio de Godaddy en Blogger (1) Consejos de Blogs (33) Consejos de Trafico (12) Correo Dominio (3) Crear un Sitemap (6) Crear una Aplicacion gratis (2) Diseno Responsive (5) Diseño Web (7) En vivo (1) Entradas Populares (18) Enviar Sitemap a Bing y Yahoo (1) Error al analizar XML (5) Facebook trucos (10) Firefox (9) Formulario de contactos (3) Ganar Dinero (22) Google (11) Google Adsense (10) Google Plus (5) Guia de SEO (2) Herramientas Blogger (4) Herramientas para Webmasters (6) Iconos Font Awesome (1) Info Tech (1) La ética de los blogs (2) Laptops (2) Manual Blogger (11) Material Design Blogger (2) Medios de Comunicacion Social (39) Menu desplegable (20) Menu Responsive para Blogger (6) Mobile-friendly (9) Movil (12) Noticias (3) Optimizado para moviles (4) Plantillas Blogger (42) Plantillas Landing page para Blogger (3) Popout (6) Posicionamiento SEO (22) Publicidad (2) SEO Mobile (12) SEO para Moviles (14) Sitemap (1) Sitios web optimizados para moviles (3) Slider Carrusel (7) Slideshow (35) Smartphone (12) Social Media Marketing (1) Tácticas de Marketing (4) Tecnologia (12) Temas de invitados (2) Top Hosting (3) Trucos Blogger (40) Trucos CSS y HTML (11) Web Hosting (14) Widget Acordeón (3) Widget Tab Multiple (1) Widgets para Blogger (69) Widgets Suscripciones (9) Widgets y Plugins (6)

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *

Seguidores

Comentarios