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
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
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&orderby=published&alt=json-in-script&callback=recentthumbs&'
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&orderby=published&alt=json-in-script&callback=recentthumbs&'
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&orderby=published&alt=json-in-script&callback=recentthumbs&'
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&orderby=published&alt=json-in-script&callback=recentthumbs&'
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
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
2 comentarios: