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.

Plantillas Blogger para Móviles Línea Pasatiempo
Plantillas Blogger para Móviles Línea Pasatiempo

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


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


Les gusto verdad!

Vamos a trabajar

1 Ir a Blogger

2 Dirígete a “Plantilla

Plantillas Blogger para Móviles Línea Pasatiempo

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

Plantillas Blogger para Móviles Línea Pasatiempo

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

Plantillas Blogger para Móviles Línea Pasatiempo

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.

Plantillas Blogger para Móviles Línea Pasatiempo


Configuración del Menú desplegable

Plantillas Blogger para Móviles Línea Pasatiempo

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

Plantillas Blogger para Móviles Línea Pasatiempo

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

Plantillas Blogger para Móviles Línea Pasatiempo
Plantillas Blogger para Móviles Línea Pasatiempo

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

http://1.bp.blogspot.com/-CM2LC0ce_lc/Uroo3-Kt-zI/AAAAAAAAF5I/hFkTJT-naAk/s1600/dise%C3%B1o+web.PNG

http://1.bp.blogspot.com/-QknMGNpy2v4/UroqceSGbAI/AAAAAAAAF5U/mdo36NYsFrI/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

Plantillas Blogger para Móviles Línea Pasatiempo

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


Cuarto Paso

Configuración de los 3 widgets Thumbnail

Plantillas Blogger para Móviles Línea Pasatiempo

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

Plantillas Blogger para Móviles Línea Pasatiempo

Vamos a habilitar nuestra plantilla Móvil

Da un clic en el símbolo de herramienta

Plantillas Blogger para Móviles Línea Pasatiempo

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

Plantillas Blogger para Móviles Línea Pasatiempo

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

Plantillas Blogger para Móviles Línea Pasatiempo

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


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



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.

Related post

Comentarios

2 comentarios:

  1. Hola Amigo Luis Saludo Cordial desde Colombia me Envías la Plantilla Me Gusta por Las Entradas! Reducidas Mi correo es ayinson923@gmail.com Bendiciones Amigo y Feliz Año Nuevo los mejores deseos para este 2014

    ResponderEliminar
  2. Hola Amigo Luis Saludo Cordial desde Colombia me Envias Esta Plantilla es Genial Me encanta Sus Entradas El Diseño Esta Excelente mi Correo Es ayinson923@gmail.com saludos desde Colombia feliz año nuevo y muchas bendiciones

    ResponderEliminar