ESCAPARATE DIGITAL 2019: Widget

Mostrando entradas con la etiqueta Widget. Mostrar todas las entradas

COMO INSERTAR EL FORMULARIO DE CONTACTO DE BLOGGER ESTILO MATERIAL DESIGN .

Estabas buscando cambiar el diseño del Formulario de contactos de Blogger, Escaparate digital 2019, te guiara paso a paso en la implementación de un nuevo Formulario de contactos para Blogger estilo Material design.

Un diseño único y sorprendente gracias al rediseño utilizando los poderosos estilos de Material design de Google.

Los pasos son muy simples de realizarlo, tendrá que seguir las instrucciones claras de este tutorial creado exclusivamente para usuarios de Blogger.

El Formulario de contactos es responsive

El diseño del Formulario de contactos es totalmente responsive, se lo puede ver fácilmente desde una PC de escritorio y desde cualquier dispositivo móvil.

CARRUSEL DE IMÁGENES PARA BLOGGER CON JQUERY .

Vamos a ver como crear un carrusel de imagenes con enlaces, creado con CSS y JQuery, que le da un toque especial de animacion.

¿Para que nos puede servir? Por ejemplo para enlazar blogs o webs amigas, secciones del blog o incluso a modo de menu.

Para añadirlo en tu blog o web, tienes que ir a la plantilla y antes de </head>, pones el siguiente codigo con los scripts y los estilos

Para instalarlo en vuestro Bloc solo tenéis que seguir estos pasos:

Un clic en “Plantilla”

Un clic en “Editar HTML”

Ahora se te abrirá el Editor HTML de tu plantilla

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,

Busca el siguiente código

</head>

Ahora justo encima (ó antes) de esa etiqueta, pegamos lo siguiente:

Una vez hecho esto, alli donde quieras mostrar el carrusel, añades el siguiente codigo.

Un clic en “Diseño”

Clic en “Añadir un gadget”

Busca el widget que dice “HTML-Javascript” y ábrelo

Coloca el siguiente codigo en el interior

Donde esta indicado en color rojo, pones las urls de los enlaces y de las imagenes.

Si quieres poner mas cantidad de imagenes, añades la linea :

<li><a href="URL ENLACE" target="_blank"><img height="75" src="URL DE LA IMAGEN" width="75" /></a></li>

tantas veces como quieras.

Para instalarlo en vuestro Bloc en un gadget solo tenéis que seguir estos pasos:

Después de haber insertado el código, un clic en "Guardar"

Data de la Publicación; 02-09-2019

Fuente; redeando

Publicado por;

MENÚ RESPONSIVE DESPLEGABLE PARA BLOGGER.

Disponer de nuevos widgets para Blogger y agregarlos a los blogs de forma fácil y segura es lo que aprenderán a realizarlo en este tutorial creado para usuarios de Blogger

Si estaba buscando un tutorial que le ayude a generar un menú desplegable responsive en su blog de Blogger ha llegado al sitio adecuado. Aprenderá a insertar un Menú Responsive desplegable en su blog de Blogger.

El menú desplegable que se está presentando en este tutorial es totalmente responsive, se lo podrá visualizar con facilidad en computadoras de escritorio, smartphone, tabletas, etc. El menú se acopla perfectamente en todo tipo de pantallas disponibles

Información:

El menú es gratuito, basado en la interfaz de hojas de estilo Bootstrap, inspirado en el diseño Material Design de Google, el cual dispone de unas hojas de estilo CSS realmente sorprendentes.

A continuación puede ver su demostración en el siguiente blog

Demo :

Nota importante:

Se recomienda antes de realizar cualquier cambio en su plantilla, efectuar una copia de seguridad de su blog o a su vez crear un nuevo blog para realizar el tutorial, "Escaparate digital 2019" no se hace responsable si no ejecuto claramente el código tal como se lo indica en este tutorial.

Para más detalles puede visitar el siguiente enlace

Políticas de uso:

Empezamos

Realiza una copia de seguridad de tu blog o creas un nuevo blog de ejemplos para ejecutar el código de forma segura

Dependiendo de la plantilla que estés utilizando se puede ejecutar el código en un widget HTML/Javascript, si en caso que no se despliegue el menú correctamente,

deberás ingresarlo en el HTML de tu plantilla, para ello os voy a mostrar dos formas seguras de ejecutar el código.

Pasos para ejecutar el menú desde un widget HTML/javascript

Video Tutorial:

Primer paso

Un clic en “Plantilla”

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 su teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de su editor, 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 le muestra como debe aparecerle el buscador en el editor HTML de su plantilla y así pueda colocar el código en el buscador al momento que yo diga busca este código.

4 Busca el siguiente Código

<head>

Justo abajo del código que encontraste, ingresa los siguientes estilos:

Un clic en Guardar plantilla

Para implementarlo en vuestro Bloc en un gadget solo tenéis que seguir estos pasos:

Un clic en “Diseño”

Clic en “Añadir un gadget”

Busca el widget que dice “HTML-Javascript” y ábrelo

Coloca el siguiente código en el interior

<nav class='navbar navbar-success navbar-fixed-top' role='navigation'>
<div class='container-fluid'>
<div class='navbar-header'>
<button class='navbar-toggle' data-target='#bs-example-navbar-collapse-1' data-toggle='collapse' type='button'>
<span class='sr-only'>Toggle navigation</span>
<span class='icon-bar'/>
<span class='icon-bar'/>
<span class='icon-bar'/>
</button>
<a class='navbar-brand'>Ayudadeblogger</a>
</div>

<div class='collapse navbar-collapse' id='bs-example-navbar-collapse-1'>
<ul class='nav navbar-nav'>
<li class='active'><a href='/'>Inicio</a></li>

<li class='dropdown'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'>Dropdown <b class='caret'/></a>
<ul class='dropdown-menu'>
<li><a href='#'>Farándula</a></li>
<li class='divider'/>
<li><a href='#'>Noticias</a></li>
<li class='divider'/>
<li><a href='#'>Espectáculos</a></li>
<li class='divider'/>
<li><a href='#'>Videos</a></li>
<li class='divider'/>
<li><a href='#'>Chats</a></li>
</ul>
</li>

<li class='dropdown'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'>Dropdown 2<b class='caret'/></a>
<ul class='dropdown-menu'>
<li><a href='#'>Farándula</a></li>
<li class='divider'/>
<li><a href='#'>Noticias</a></li>
<li class='divider'/>
<li><a href='#'>Espectáculos</a></li>
<li class='divider'/>
<li><a href='#'>Videos</a></li>
<li class='divider'/>
<li><a href='#'>Chats</a></li>
</ul>
</li>

<li class='dropdown'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'>Dropdown 3 <b class='caret'/></a>
<ul class='dropdown-menu'>
<li><a href='#'>Farándula</a></li>
<li class='divider'/>
<li><a href='#'>Noticias</a></li>
<li class='divider'/>
<li><a href='#'>Espectáculos</a></li>
<li class='divider'/>
<li><a href='#'>Videos</a></li>
<li class='divider'/>
<li><a href='#'>Chats</a></li>
</ul>
</li>

<li class='dropdown'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'>Dropdown 4 <b class='caret'/></a>
<ul class='dropdown-menu'>
<li><a href='#'>Farándula</a></li>
<li class='divider'/>
<li><a href='#'>Noticias</a></li>
<li class='divider'/>
<li><a href='#'>Espectáculos</a></li>
<li class='divider'/>
<li><a href='#'>Videos</a></li>
<li class='divider'/>
<li><a href='#'>Chats</a></li>
</ul>
</li>

<li class='dropdown'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'>Dropdown 5<b class='caret'/></a>
<ul class='dropdown-menu'>
<li><a href='#'>Farándula</a></li>
<li class='divider'/>
<li><a href='#'>Noticias</a></li>
<li class='divider'/>
<li><a href='#'>Espectáculos</a></li>
<li class='divider'/>
<li><a href='#'>Videos</a></li>
<li class='divider'/>
<li><a href='#'>Chats</a></li>
</ul>
</li>

<li><a href='#'>Contactos</a></li>
</ul>
</div>
</div>
</nav>

Después de haber insertado el código, un clic en "Guardar"

Realiza los siguientes cambios:

Cambia las palabras que están marcadas de color rojo por las que vosotros necesitéis mostrar

Cambia el símbolo numeral # que está marcado de negrita, por las direcciones URLs de las entradas que necesitéis mostrar

Eso es todo, un clic en Guardar, ubica tu nuevo widget Menu Responsive desplegable para Blogger justo debajo de la entrada principal

Nota:

-Si ves que no se abren los desplegables en tu plantilla puede seguir las siguientes instrucciones:

Pasos para ejecutar el Menú desde el HTML de la plantilla

Video Tutorial

Primer paso

Un clic en “Plantilla”

Un clic en “Editar HTML”

Ahora se le abrirá el Editor HTML de su plantilla

3 Busca el siguiente código

<head>

Ingresa el siguiente código justo abajo del código que encontraste.

Busca el siguiente código

<body>

Si no existe dicho código, tal vez lo tengas de la siguiente manera

Si aún no encuentras el código, puede dejarme un comentario, indicando la dirección URL de tu blog de Blogger y con mucho gusto le ayudare a encontrar el código

Un clic en “Plantilla”

Un clic en “Editar HTML”

Ahora se le abrirá el Editor HTML de su plantilla

Coloca este código en el buscador y dale un "Enter"

<body>

Ingresa el siguiente código justo abajo del código que encontraste.

<nav class='navbar navbar-success navbar-fixed-top' role='navigation'>
<div class='container-fluid'>
<div class='navbar-header'>
<button class='navbar-toggle' data-target='#bs-example-navbar-collapse-1' data-toggle='collapse' type='button'>
<span class='sr-only'>Toggle navigation</span>
<span class='icon-bar'/>
<span class='icon-bar'/>
<span class='icon-bar'/>
</button>
<a class='navbar-brand'>Ayudadeblogger</a>
</div>

<div class='collapse navbar-collapse' id='bs-example-navbar-collapse-1'>
<ul class='nav navbar-nav'>
<li class='active'><a href='/'>Inicio</a></li>

<li class='dropdown'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'>Dropdown <b class='caret'/></a>
<ul class='dropdown-menu'>
<li><a href='#'>Farándula</a></li>
<li class='divider'/>
<li><a href='#'>Noticias</a></li>
<li class='divider'/>
<li><a href='#'>Espectáculos</a></li>
<li class='divider'/>
<li><a href='#'>Videos</a></li>
<li class='divider'/>
<li><a href='#'>Chats</a></li>
</ul>
</li>

<li class='dropdown'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'>Dropdown 2 <b class='caret'/></a>
<ul class='dropdown-menu'>
<li><a href='#'>Farándula</a></li>
<li class='divider'/>
<li><a href='#'>Noticias</a></li>
<li class='divider'/>
<li><a href='#'>Espectáculos</a></li>
<li class='divider'/>
<li><a href='#'>Videos</a></li>
<li class='divider'/>
<li><a href='#'>Chats</a></li>
</ul>
</li>

<li class='dropdown'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'>Dropdown 3 <b class='caret'/></a>
<ul class='dropdown-menu'>
<li><a href='#'>Farándula</a></li>
<li class='divider'/>
<li><a href='#'>Noticias</a></li>
<li class='divider'/>
<li><a href='#'>Espectáculos</a></li>
<li class='divider'/>
<li><a href='#'>Videos</a></li>
<li class='divider'/>
<li><a href='#'>Chats</a></li>
</ul>
</li>

<li class='dropdown'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'>Dropdown 4 <b class='caret'/></a>
<ul class='dropdown-menu'>
<li><a href='#'>Farándula</a></li>
<li class='divider'/>
<li><a href='#'>Noticias</a></li>
<li class='divider'/>
<li><a href='#'>Espectáculos</a></li>
<li class='divider'/>
<li><a href='#'>Videos</a></li>
<li class='divider'/>
<li><a href='#'>Chats</a></li>
</ul>
</li>

<li class='dropdown'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'>Dropdown 5 <b class='caret'/></a>
<ul class='dropdown-menu'>
<li><a href='#'>Farándula</a></li>
<li class='divider'/>
<li><a href='#'>Noticias</a></li>
<li class='divider'/>
<li><a href='#'>Espectáculos</a></li>
<li class='divider'/>
<li><a href='#'>Videos</a></li>
<li class='divider'/>
<li><a href='#'>Chats</a></li>
</ul>
</li>

<li><a href='#'>Contactos</a></li>
</ul>
</div>
</div>
</nav>

Realiza estos cambios:

Cambia las palabras que están marcadas de color rojo por las que vosotros necesitéis mostrar

Cambia el símbolo numeral # que está marcado de color azul, por las direcciones URLs de las entradas que necesites mostrar

Eso es todo, un clic en Guardar plantilla

Data de la Publicación; 01-09-2019

Fuente; ayudadeblogger

Publicado por;