Plantillas Blogger para Móviles Línea Pasatiempo

Páginas web para móviles. Necesitabas de urgencia una plantilla Blogger que funcione perfectamente y que se ajuste tu plantilla a un teléfono móvil, Smartphone o tableta? En este tutorial de Plantillas Blogger podrás obtener una plantilla Blogger que se adapta a su teléfono móvil y así tener más tráfico web hacia tu blog gracias a estos nuevos diseños. Muchos usuarios de la red buscan información mediante sus teléfonos inteligentes, y es por esta razón que vamos habilitar en nuestra nueva plantilla, la plantilla Móvil personalizada. Los ajustes son fáciles de realizarlo, tendrán que descargar esta nueva plantilla para Blogger y habilitar la plantilla Móvil, activando la casilla “Personalizado” desde su cuenta de Blogger. A esta nueva plantilla para Blogger se la llama Línea Pasatiempo, la cual está diseñada para que se adapte a cualquier dispositivo móvil.

Características Principales

Diseño dinámico

Diseñado bajo los estándares de SEO

Diseñado para que se muestre en un teléfono inteligente

Menú desplegable para computador

Menú desplegable para que se muestre en teléfonos inteligentes

Buscador integrado para teléfonos inteligentes

Sistema de redes sociales para teléfonos inteligentes y de escritorio

Respuesta de comentarios

Carga ligera

Un slideshow carrusel basado en etiquetas

Habilitado para publicidad de Adsense

Widget Slideshow automático en el sidebar

Más plantillas para Blogger

Plantilla Zona, Plantilla de Noticias, Plantilla de Teléfonos, Plantilla de Espectáculos, Plantilla de Revista, Plantilla de Yahoo, Plantilla de Deportes, Plantilla Evolución, Plantilla Platón, Plantilla Negas, Plantilla Libertad, Plantilla Tiempos Modernos, Plantilla Taggui, Plantilla Cuántica, Plantilla Década, Plantilla Pietro, Plantilla Buenas Noticias, Plantilla Revolución, Plantilla Newslie, Plantilla DigitalText, Plantilla Cocina,  Plantilla Tendencia,  Plantilla Negocios, Plantilla Azul, Plantilla Dark y Plantilla Renovación.

A continuación mire su demostración en mi blog de demos

Demo Clic aquí Download Clic aquí

Les gusto verdad!

Vamos a trabajar

1 Ir a Blogger

2 Dirígete a “Plantilla”

3 Da un clic en la parte superior derecha donde dice “Crear copia de seguridad/restablecer” y se te abrirá una venta en la cual tendrás que dar un clic en “Examinar” y buscar el archivo XML que se te fue enviada. Luego das un clic en “Subir” y automáticamente ya tendrás instalada la plantilla en tu blog de

blogger.

4 Ahora dirígete a diseño y vas a encontrar que tus widgets están totalmente desordenados no te preocupes, no borres nada y sigue primero las instrucciones siguientes y luego podrás ordenar tus widgets:

Primer Paso:

Da un clic en “Plantilla”

Luego 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.

Configuración del Menú desplegable

Busca este código

homepageUrl'>Inicio</a></li>

Una vez que hayas encontrado el código, se te mostrara un código como el siguiente

<li class='first'><a expr:href='data:blog.homepageUrl'>Inicio</a></li>                 <li class='page_item page-item-105'><a href='#'>Noticias</a></li> <li class='page_item page-item-163'><a href='#'>Tecnología</a> <ul class='children'>             <li class='page_item page-item-166'><a href='#'>NOMBRE DEL POST.1</a></li>             <li class='page_item page-item-164'><a href='#'>NOMBRE DEL POST.2</a></li>             <li class='page_item page-item-168'><a href='#'>NOMBRE DEL POST.3</a></li>             <li class='page_item page-item-196'><a href='#'>NOMBRE DEL POST.4</a></li> </ul> </li> <li class='page_item page-item-107'><a href='#'>Deportes</a> <ul class='children'>             <li class='page_item page-item-108'><a href='#'>NOMBRE DEL POST.1</a></li>             <li class='page_item page-item-104'><a href='#'>NOMBRE DEL POST.2</a></li>             <li class='page_item page-item-109'><a href='#'>NOMBRE DEL POST.3</a></li>             <li class='page_item page-item-111'><a href='#'>NOMBRE DEL POST.4</a></li>             <li class='page_item page-item-110'><a href='#'>NOMBRE DEL POST.5</a></li> </ul> </li> <li class='page_item page-item-158'><a href='#'>Videos</a></li>                                                            </ul>                                                            </div><!-- .left -->                                                 <div class='right'>                     <ul class='nav'>                                                                 <li class='menu-category'><a href='#'><i class='icon-align-justify'/> Categorias</a>                                                            <ul> <li class='cat-item cat-item-4'><a href='#' title='Ver la información'>Categoría 1</a> </li>             <li class='cat-item cat-item-8'><a href='#' title='Ver la información'>Categoría 2</a> </li>             <li class='cat-item cat-item-15'><a href='#' title='Ver la información'>Categoría 3</a> </li>             <li class='cat-item cat-item-2'><a href='#' title='Ver la información'>Categoría 4</a> </li>             <li class='cat-item cat-item-6'><a href='#' title='Ver la información'>Categoría 5</a> </li>             <li class='cat-item cat-item-1'><a href='#' title='Ver la información'>Categoría 6</a> </li>                                                            </ul>                                                </li>                         <li class='menu-follow'><a href='#'><i class='icon-twitter'/> Siguenos</a>                                     <ul>                                                <li><a href='http://twitter.com/ayudadeblogger'><i class='icon-twitter-sign'/> Siguenos en Twitter</a></li>                                                <li><a href='https://www.facebook.com/pages/Ayuda-de-Blogger/140889692709017'><i class='icon-facebook-sign'/> Siguenos en Facebook</a></li>                                                <li><a href='https://plus.google.com/+Ayudadeblogger?prsrc=5'><i class='icon-google-plus-sign'/> Siguenos en Google+</a></li>                                                                                                             <li><a href='http://feeds.feedburner.com/foroayudadeblogger'><i class='icon-rss-sign'/> Suscríbete  RSS</a></li>

He marcado de tres diferentes colores en los lugares que ustedes tendrán que realizar sus diferentes cambios.

Por ejemplo:

Los símbolos numerales que están marcados de color azul #, cámbialos por las direcciones URLs de tus publicaciones

Cambia los nombres que están marcados de color rojo por los títulos de tus post

También, borra las URLs que están marcadas de color azul que pertenecen a las URLs de mis perfiles sociales, cambia una por una por las direcciones URLs de tus perfiles sociales

Segundo Paso

Configuración del Menú Móvil

Busca este código

<nav id='mobile-menu'>

Una vez que hayas encontrado el código, te mostrara el siguiente código en tu editor

<nav id='mobile-menu'>                         <ul id='responsive-menu'><li class='page_item page-item-105'><a href='/'>Inicio</a></li> <li class='page_item page-item-163'><a href='#'>Noticias</a> <ul class='children'>             <li class='page_item page-item-166'><a href='#'>NOMBRE DEL POST</a></li>             <li class='page_item page-item-164'><a href='#'>NOMBRE DEL POST</a></li>             <li class='page_item page-item-168'><a href='#'>NOMBRE DEL POST</a></li>             <li class='page_item page-item-196'><a href='#'>NOMBRE DEL POST</a></li> </ul> </li> <li class='page_item page-item-107'><a href='#'>Tecnologia</a> <ul class='children'>             <li class='page_item page-item-108'><a href='#'>NOMBRE DEL POST</a></li>             <li class='page_item page-item-104'><a href='#'>NOMBRE DEL POST</a></li>             <li class='page_item page-item-109'><a href='#'>NOMBRE DEL POST</a></li>             <li class='page_item page-item-111'><a href='#'>NOMBRE DEL POST</a></li>             <li class='page_item page-item-110'><a href='#'>NOMBRE DEL POST</a></li> </ul> </li> <li class='page_item page-item-158'><a href='#'>Deportes</a></li> </ul>                           </nav><!-- #mobile-menu -->

He marcado de tres colores diferentes en los lugares que ustedes tendrán que realizar sus diferentes cambios.

Existen 2 imágenes arriba en la cabecera principal

Para encontrar esas dos imágenes tendrán que buscarlas con estas URLs

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSVShXa4MGfHfLsbOJC7NB9u31wd55PfCCNGasLbpWa5xrx4t0BVLXIptYdXOyckZjTDgvihwuE5LeMt39S0wNx3COSERV5NZrZjnNVFNd8_ldGkHZ3rKIFd0_vOL1n2gI6VUac3j7Pv8/s1600/dise%C3%B1o+web.PNG

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTk35Qp_zT0HqUZIadMqxv3Ral6MMm9G2H0EEPJ4b1YRtZqq81vcdTho-HzD9GUhy-lcboTyjoeqGckxGvWjyn7JkS1aXMRj836Zliu9KKf-1Hem0YKJPK1bmCcAG6kgX6qK5acyVGGR4/s1600/dise%C3%B1o+web+blogger.PNG

Borra cada una de ellas y pon la dirección URL de la imágen que quieras mostrar.

Tercer paso

Configuración del Slideshow carrusel

Busca este código

label1 = "Noticias";

Una vez que hayas encontrado el código, necesitaras cambiar solo el nombre que está marcado de color amarillo “Noticias”, cambia solo el nombre por el nombre de una de tus etiquetas

¿Qué es una etiqueta? Más información en este enlace

Cuarto Paso

Configuración de los 3 widgets Thumbnail

Busca este código

headingfeature'>Brasil</h2>

Ahora, encontraras un código como el siguiente

<div id='featurebottom1'><h2 class='headingfeature'>Brasil</h2> <div class='left-corner-canvas'/>     <script src='/feeds/posts/summary/-/Brasil?max-results=4&amp;orderby=published&amp;alt=json-in-script&amp;callback=recentthumbs&amp;' type='text/javascript'/> <a class='readmoretopic' href='/search/label/Brasil'>Buscar más</a>          </div> <div style='clear:both;'/>           </b:if> <!--Labe2 Feature--> <b:if cond='data:blog.url == data:blog.homepageUrl'>   <div id='featurebottom1'><h2 class='headingfeature'>Tecnologia</h2> <div class='left-corner-canvas'/>     <script src='/feeds/posts/summary/-/Tecnologia?max-results=4&amp;orderby=published&amp;alt=json-in-script&amp;callback=recentthumbs&amp;' type='text/javascript'/> <a class='readmoretopic' href='/search/label/Tecnologia'>Buscar más</a>          </div> <div style='clear:both;'/>           </b:if> <!--Labe3 Feature--> <b:if cond='data:blog.url == data:blog.homepageUrl'>   <div id='featurebottom1'><h2 class='headingfeature'>Vehículos</h2> <div class='left-corner-canvas'/>     <script src='/feeds/posts/summary/-/Vehiculos?max-results=4&amp;orderby=published&amp;alt=json-in-script&amp;callback=recentthumbs&amp;' type='text/javascript'/> <a class='readmoretopic' href='/search/label/Vehiculos'>Buscar más</a>

Realiza estos cambios:

Estos widgets funcionan por medio de sus etiquetas, tendrán que cambiar los nombres que están marcados de color azul por el nombre de una sus etiquetas que quieran mostrar en cada widget.

Por ejemplo:

Cambia el nombre que está marcado de color rojo, este es el título de tu widget, como también tendrás que cambiar los dos nombres que están marcados de color azul por el nombre de una te tus etiquetas que quieras mostrar: recuerda que el nombre de tu etiqueta tendrá que repetirse dos veces y no pondrás un nombre diferente en cada una, tienes que poner los mismos nombres en los lugares que están marcados de color azul.

<div id='featurebottom1'><h2 class='headingfeature'>AQUÍ EL TITULO</h2> <div class='left-corner-canvas'/>     <script src='/feeds/posts/summary/-/nombredelaetiqueta1?max-results=4&amp;orderby=published&amp;alt=json-in-script&amp;callback=recentthumbs&amp;' type='text/javascript'/> <a class='readmoretopic' href='/search/label/nombredelaetiqueta1'>Buscar más</a>          </div> <div style='clear:both;'/>           </b:if>

Haz terminado de configurar tu nueva plantilla en el Editor HTML, es momento de dar un clic en “Guardar plantilla”

Una vez hecho esto se te mostrara la siguiente imagen en tu Blogger

Vamos a habilitar nuestra plantilla Móvil

Da un clic en el símbolo de herramienta

Luego se te mostrara una venta como la imagen a continuación

Ahora, da un clic en la pestaña “Predeterminada” y te mostrara varias opciones, escoge la última opción que dice “Personalizado” y dale un clic en “Guardar”.

Con esto se habilitara los estilos de tu plantilla Móvil en cualquier teléfono inteligente. Dando como lugar, a una fuente de trafico web.

Una vez hecho esto vamos a dirigirnos a “Diseño”

Organizaremos nuestros widgets antiguos.

Si quieren insertar el slideshow en el sidebar tal como está en el demo de la plantilla, sigan el siguiente enlace para su configuración

Como insertar un Slideshow en el sidebar de Blogger

Bueno, por fin hemos terminado de configurar nuestra plantilla de Blogger para mostrarse en computadores de escritorio, teléfonos inteligentes y tabletas. Y así no gastaremos dinero en comprar plantillas para móviles ya que Blogger y los diseños de plantillas, nos traen estas sorpresas.

Fácil verdad!

Recuerda suscribirte y recibirás mis nuevas actualizaciones directamente en tu bandeja de entrada

¿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

¿Te ha resultado útil este artículo, recomiendanos?

Si

TAGS: Plantillas Blogger

Share:

Luis Chávez

Soy el fundador del sitio web Ayudadeblogger.com - Considerado un Pro Blogger profesional, Consultor SEO y desarrollador Web adicto, ejecuto una serie de sitios web desde mi Oficina Quito-Ecuador.