SHORT CODE EN BLOGGER
Presentamos el complemento de código corto de Blogger
¡Sorpresa!Después de haber trabajado en Blogger durante más de 5 años, volvemos con otro complemento que transformará las plantillas de Blogger y especialmente los blogs como nunca antes. ¡Equiparlo con un sistema que hará que el diseño web y la creación de widgets sea pan comido! STC network se enorgullece de presentar el complemento de código corto de Blogger que le permitirá agregar elementos web con muy poco esfuerzo sin usar ningún código largo, complicado y feo. Ahora puede insertar videos, audios, galería de fotos, pestañas, acordeones, etc. con solo una línea de código dentro de sus publicaciones , widgets , barras laterales y adivina dónde más. también dentro de los comentarios de tu blog! Incrustar objetos en Blogger nunca antes fue tan fácil. Hoy llevamos a Blogger al siguiente nivel. ¡Empecemos!
¿Qué es un código corto de Blogger?
El shortcode de Blogger es un macrocódigo, es decir, una sola línea de código que contiene un conjunto de instrucciones que le permiten hacer cosas ingeniosas sin ningún esfuerzo. Los códigos cortos pueden ayudarlo a incrustar archivos o crear objetos en blogs de BlogSpot con una sola línea de código que normalmente requeriría mucho código complejo y largo y feo.
Ahora puede insertar fácilmente objetos como videos, audios, archivos, presentaciones de diapositivas y todos los elementos web importantes como acordeones, pestañas, botones coloridos, cuadros, etc.dentro del encabezado, barra lateral, pie de página, publicaciones, páginas, títulos y, sorprendentemente, ¡incluso comentarios internos! No requiere conocimientos previos de HTML, CSS o JavaScript. El complemento es extremadamente ligero y su compatibilidad con múltiples incrustaciones reducirá el tiempo de carga de la página en un 50%.
¿Qué tan diferente es del código corto de Wordpress?
Wordpress ha sido nuestra mayor fuente de inspiración y nunca hubiera sido posible desarrollar este complemento para Blogger si la lógica no estuviera ya presente. Simplemente convertimos las funciones PHP en funciones jQuery que son independientes de la plataforma y fáciles de implementar.
A diferencia de los códigos cortos de Wordpress que solo se pueden insertar dentro del contenido de la publicación, los complementos de códigos cortos de Blogger le permiten insertar contenido incluso dentro de widgets y comentarios . La API de código abreviado de WP es específica de la plataforma, pero nuestro complemento ofrece soporte de incrustación multiplataforma que no se limita solo a los blogs de Blogger. Seguramente puede funcionar en cualquier sitio web, ya sea estático o dinámico.
La característica más exclusiva de este complemento es admitir la anidación de códigos cortos . Puede insertar un código corto dentro de otro para ofrecer una experiencia dinámica completa.
Los códigos cortos como el acordeón y las pestañas se pueden agregar varias veces en una sola página sin que se afecten entre sí. Este complemento optimiza y reduce el tiempo de carga de la página extremadamente bien.
Lista de códigos cortos admitidos
Hasta ahora hemos desarrollado alrededor de 10 códigos cortos y estamos planeando desarrollar alrededor de 50 códigos cortos dentro de un mes inshAllah. Los códigos cortos se crearán en función de su importancia y usabilidad. Lanzaremos cada shortcode con un tutorial separado.
Un shortcode en sí mismo no es un código sino un TEXTO que se procesa como HTML. ¿No te crees a ti mismo? ¡Créelo! :)
Los siguientes son los códigos cortos desarrollados hasta ahora.
| Código corto | Definición |
|---|---|
| [acordeón] | El acordeón es una lista de elementos apilados verticalmente donde cada elemento se puede "expandir" o "estirar" para revelar el contenido asociado con ese elemento. Los elementos se pueden activar y desactivar fácilmente. Un ejemplo es el widget de acordeón |
| [lengüeta] | El widget de pestaña permite contener varios documentos o paneles dentro de una sola ventana, utilizando pestañas como un widget de navegación para cambiar entre conjuntos de documentos. Un ejemplo es el widget de pestañas múltiples |
| [código] | Incorpora el resaltador de sintaxis que conserva el formato original del código fuente |
| [mesa] | Cree tablas HTML elegantes y con capacidad de respuesta con varias filas y columnas |
| [citar] | Inserta una cita elegante en bloque |
| [botón] | Inserta coloridos botones CSS3 |
| [icono] | Inserte iconos de FontAwesome en cualquier lugar con soporte de opciones personalizadas |
| [soundcloud] | Incorpora la pista de SoundCloud |
| [dailymotion] | Incorpora video de Dailymotion |
| [Youtube] | Incorpora video de YouTube |
| [divisor] | Inserta un separador horizontal para dividir una sección, también contiene un botón Volver al principio |
| [num] | Inserta un número encerrado dentro de un fondo circular |
| [advertencia] | Inserta un cuadro con un mensaje de advertencia |
| [éxito] | Inserta un cuadro con mensaje de éxito |
| [alerta] | Inserta un cuadro con mensaje de alerta |
| [info] | Inserta un cuadro con un mensaje de información |
| [actualizar] | Inserta un cuadro con el mensaje de estado de actualización |
| [Facebook] | Incorpora el complemento de la página de Facebook |
| [imagen] | ¡Incrusta imágenes en cualquier lugar que desee con una resolución clara! |
| [descripción emergente] | Inserta una información sobre herramientas de CSS3 elegante arriba o debajo del hipervínculo para mostrar información adicional |
- Ahora también puede sugerirnos qué código corto crear
Pasos de instalación
Siga estos pasos para instalar el complemento Shortcode en su blog de blogger.1 Vaya a Blogger > Plantilla > Haga una copia de seguridad de su plantilla
2 Haga clic en Editar HTML
3 Búsqueda </body>
4 Descargue el siguiente archivo JS actualizado dinámicamente y alójelo en algún lugar y luego pegue el siguiente código justo encima de </body>
<!-- Blogger Shortcode Plugin Dynamic JS File -->
<script src='PASTE-YOUR-LINK-HERE' type='text/javascript'></script> NOTA: Reemplace con el enlace de su archivo js alojado que descargó desde aquí
5 Siguiente Buscar <head>6 pegar los siguientes archivos CSS justo debajo de ella
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/> 7 ¡ Guarde su plantilla y ya está!
Las nuevas funciones se insertan dinámicamente dentro del archivo Shortcode JS y debe instalarlo solo una vez. Seguiré actualizando esta página para presentar cualquier actualización realizada al script y los nuevos códigos abreviados creados se agregarán a la Lista de tablas en esta página.
Sintaxis de shortcode
Los códigos cortos tienen un nombre y atributos. Los atributos son opciones que le ayudan a configurar un objeto. Los códigos cortos están simbolizados por corchetes. Las llaves se abren y cierran como HTML pero con un formato mucho más simple como se muestra a continuación:Suponga que necesita incrustar un video de Dailymotion dentro de las publicaciones de su blog, la barra lateral o los comentarios del blog, entonces puede hacerlo de dos maneras.
[dailymotion src="x2lhjki"][/dailymotion]
or simply
[dailymotion src="x2lhjki" /]
Ahora, si desea cambiar el color del botón del jugador, ocultar la información del jugador y editar la dimensión del jugador, puede insertar atributos como se muestra a continuación.
[dailymotion src="x2lhjki" width="100%" background="0080ff" height="100" info="0"][/dailymotion]
or simply
[dailymotion src="x2lhjki" width="100%" background="0080ff" height="100" info="0" /]
Tenga en cuenta que lo anterior es solo un ejemplo, los detalles completos sobre cómo usar un código corto de dailymotion se compartirán en su propio tutorial
Errores de sintaxis
Evite cometer estos errores al escribir nombres y atributos de shortcode:- No use camelCase o MAYÚSCULAS para nombres de atributos o nombres de códigos cortos. Utilice solo caracteres en minúscula
- No agregue espacios entre los nombres de códigos cortos y las llaves cuadradas
- Las macros de código abreviado pueden utilizar comillas simples (') o dobles (") para los valores de los atributos, u omitirlas por completo si el valor del atributo no contiene espacios.es equivalente a
- Se requiere un espacio entre el nombre del shortcode y los atributos del shortcode. Cuando se utiliza más de un atributo, cada atributo debe estar separado por al menos un espacio.
- El analizador de códigos cortos no acepta corchetes dentro de los atributos.
¿Cómo funciona este complemento de código corto?
Los códigos cortos se escriben proporcionando una función de controlador " mbt (html)" . Los controladores de shortcode son muy similares a los filtros de WordPress: aceptan parámetros ( atributos ) y devuelven un resultado. Usamos una función jQuery para analizar el contenido y los atributos de los corchetes y luego reemplazar el DOM del corchete con la versión HTML e ignorar o escapar de los corchetes que están encerrados en un nombre que no está registrado a través de la variable global " var bhf" . La función Analizador reconoce shorctodes registrados a través de las variables globales solamente. Las ubicaciones donde funcionarán los códigos cortos incluyen widgets, publicaciones de blog, páginas y comentarios de blog. Los códigos cortos colocados en otros lugares se escaparán.
Créditos
© 2008-2015 STCnetwork.org.Versión: 1.0 (29-marzo-2015)
El complemento de código corto de Blogger de STCnetwork tiene una licencia internacional Creative Commons Reconocimiento-No comercial-Compartir igual 4.0 . Le invitamos a compartir el complemento con sus lectores siempre que adjunte un enlace de atribución a esta publicación de blog y evite vender el complemento en un producto o servicio comercial.
Tenemos que agradecer a mucha gente aquí por ayudarnos en el desarrollo del complemento.
Comentarios
Publicar un comentario