Dopo un po', ho deciso di scrollarmi di dosso le ragnatele di VIM (il mio editor di codice preferito) e di mettermi al lavoro su un modello che avevo iniziato qualche mese prima. Citlali è la parola nahuatl che significa "stella" ed è un nome proprio femminile comune in Messico.
Basato sulla nuova versione di Bootstrap, l'idea è un design semplice ma in grado di visualizzare una quantità significativa di contenuti sulla homepage. Un design che trasmette un'immagine fresca, pur rimanendo piacevole da leggere e compatibile con un'ampia gamma di risoluzioni dello schermo. Forse la novità più importante è l'aggiunta della modalità scura e del relativo pulsante per selezionare la modalità preferita.
Citlali è disponibile nella sua versione CSS originale e per Blogger nella versione normale (completamente funzionale) e nella versione Pro, con funzionalità di personalizzazione aggiuntive.
Nascondi contenuto
1.2.1 Menu a discesa a un livello.
1.2.2 Menu a discesa a due livelli.
1.2.3 Menu a discesa con elenco dei post.
1.5 Citazioni con citazioni a blocchi
1.7 Elenco dei post nella pagina principale.
1.8 Elenchi di post all'interno del contenuto del post.
1.9 Elenchi di post nei gadget (piè di pagina)
1.11 Icone social nel piè di pagina o nell'intestazione
1.15 Carattere/tipo di carattere e colori principali.
Documentazione
Opzioni modello
In questo modello troverai un gadget "Opzioni modello" relativo agli elementi all'interno del modello. Queste opzioni sono:
- Mostra l'effetto particelle nell'intestazione. Per visualizzare o nascondere l'effetto particelle bianche fluttuanti nell'intestazione. Nel campo URL, puoi digitare:
trueofalse. - Menu principale sempre visibile (menu fisso) . Qui puoi decidere se desideri che il menu principale sia sempre visibile o meno. Nel campo URL, puoi digitare:
true(per visualizzarlo sempre) ofalse. - Forza l'uso delle maiuscole nei titoli. Converti i titoli dei post, della barra laterale e di altri titoli in maiuscolo. Nel campo URL, puoi digitare:
trueofalse.
Menu a discesa principale
Il menu principale supporta voci a discesa. Questo menu si basa sul gadget Elenco Link. Per aggiungere un collegamento normale (senza visualizzare un sottomenu), aggiungilo come qualsiasi altro collegamento in questi gadget, ad esempio:
Menu a discesa a un livello.
Per aggiungere una voce di sottomenu a discesa di UN LIVELLO :
1. Crea un collegamento normale, ma il collegamento non è importante.
2. Crea un secondo collegamento, ma questa volta aggiungi un trattino all'inizio del Nome/Titolo del collegamento e aggiungi il collegamento come di consueto. Questo sarà il primo elemento del sottomenu.
3. Aggiungi tutti i link di cui hai bisogno, ma ricorda di aggiungere un trattino all'inizio di ogni titolo.
Esempio completo di questo gadget:
Il risultato sarebbe:
Menu a discesa a due livelli.
Per aggiungere un elemento con un sottomenu a discesa A DUE LIVELLI :
1. Crea un collegamento normale, ma il collegamento non è importante.
2. Crea un secondo collegamento, aggiungendo un trattino all'inizio del Nome/Titolo del collegamento e aggiungendo il collegamento come di consueto. Questo sarà il primo elemento del sottomenu.
3. Crea un terzo collegamento, ma questa volta aggiungi DUE trattini all'inizio del Nome/Titolo del collegamento e aggiungi il collegamento normalmente.
Esempio completo di questo gadget:
Risultato:
Menu a discesa con elenco dei post.
Questo menu segue una logica diversa rispetto ai precedenti. In questo caso, è necessario aggiungere il seguente formato come testo del collegamento:
tag:TagName-NumberOfPost-DisplayImageDove:
TagName– Questo è il nome del tag da cui verranno presi i post.NumberOfPost– Questo è il numero di post che desideri visualizzare.DisplayImage– Questa è l'opzione per visualizzare o meno un'immagine del post accanto al titolo. Opzioni:trueofalse.
Esempio:
Mostra gli ultimi 3 post nel tag "Tech":
tag:Tech-3-trueRisultato:
Titolo e logo del blog.
Per modificare il titolo o aggiungere un logo, puoi andare alla dashboard di Blogger, quindi su Design e cercare i rispettivi gadget:
Descrizione nei gadget.
La maggior parte dei gadget in Blogger non dispone di un campo per aggiungere una descrizione o altri contenuti. In questo modello, puoi aggiungere una descrizione a qualsiasi gadget semplicemente modificando il titolo del gadget nel seguente schema:
Titulo-desc:DescripciónDove:
- Titolo: questo è il titolo standard del tuo gadget.
- Descrizione: questa è la descrizione che vuoi aggiungere subito sotto il titolo.
Ad esempio, il gadget "Segui via email" non ha un campo descrizione, ma è un ottimo posto per aggiungere un messaggio per convincere i tuoi lettori a iscriversi. Per aggiungere una descrizione a questo gadget, puoi modificare il titolo in:
SUBSCRIBE-desc:Subscribe for Free to get all newest tutorials and lessons.
E il risultato sarebbe:
Nota : il gadget per l'iscrizione via email è stato rimosso da Blogger, ma la descrizione dei gadget segue la stessa logica.
Citazioni con citazioni a blocchi
Per visualizzare correttamente le citazioni formattate all'interno di un post, è necessario utilizzare l'editor dei post in modalità HTML:
E usa la seguente struttura:
<blockquote><p>Contenido de mi cita</p></blockquote>
Codice
Per visualizzare il codice all'interno di un post con il formato corretto, è necessario utilizzare l'editor dei post in modalità HTML (vedere citazioni) e utilizzare la seguente struttura HTML:
<code><span>Este es mi código & luce genial</span></code>Elenco dei post nella pagina principale.
Nella homepage sono presenti due sezioni con elenchi di post (nella demo, si chiamano "Post in evidenza" e "Ultime notizie") e uno slider (chiamato anche "Slider" nella demo). Queste tre sezioni funzionano con un gadget HTML e mostrano per impostazione predefinita gli ultimi post del blog, ma possono essere configurate per visualizzare il contenuto di qualsiasi tag. Per fare ciò, il contenuto del gadget HTML deve seguire la seguente struttura:
NúmeroDePosts-TipoDePosts-TamañoDeMiniatura-EstiloDeFormatoDove:
NúmeroDePostsè il numero di post che vuoi visualizzare.TipoDePostspotrebbe essere:latestposts– Per visualizzare gli ultimi post del blog indipendentemente dai loro tagtag:Etiqueta– Per visualizzare gli ultimi post con un tag specifico. Dove "Tag" è il nome esatto del tag desiderato così come appare nei tuoi post.
TamañoDeMiniatura– È la dimensione in pixel dell'immagine in miniatura.EstiloDeFormato– Può assumere i valori:slider– Per visualizzarlo come cursore.composition1– Per visualizzare una galleria di post. Utilizzato nella sezione "Post in evidenza" della demo. Nota: per questo formato, ilNúmeroDePostsvalore ideale è 5, ma è possibile utilizzare 9 o 13 se si desidera visualizzare più contenuti.bloglist– Per visualizzare un elenco di post. Utilizzato nella sezione "Ultime notizie" della demo.
Esempio 1 : per visualizzare 5 post nel primo elenco di post (post in evidenza) del tag "Viaggi", si utilizzerebbe la seguente struttura:
5-Tag:Travel-800px-composition1Esempio 2 : Per visualizzare 5 post nello slider del tag "Lingue", si utilizzerebbe la seguente struttura:
5-tag:Languages-800px-sliderEsempio 3 : Per visualizzare gli ultimi 4 post del blog nel secondo elenco di post (Ultime notizie), si utilizzerebbe la seguente struttura:
4-latest-400px-bloglistNota: per visualizzare gli ultimi post del blog, non è necessario includere il suffisso tag:.
Elenchi di post all'interno del contenuto del post.
A volte è molto utile elencare i post relativi a un evento o a una persona che sono già stati definiti da un tag specifico. In questo modello, puoi utilizzare una riga di testo molto simile agli shortcode di WordPress.
Ad esempio, per visualizzare gli ultimi 50 post all'interno del tag "Viaggi", all'interno dei post scrivi la seguente riga:
[posts--tag:Travel--50]Elenchi di post nei gadget (piè di pagina)
Analogamente allo slider, puoi creare elenchi con gli ultimi post del blog o post di un tag specifico, sia nella barra laterale che nel piè di pagina. Per creare un nuovo elenco di post:
1. Vai su Blogger/Design e crea un nuovo gadget HTML. Puoi usare il titolo che preferisci.
2. Nel campo contenuto: per visualizzare gli ultimi post del blog utilizzare:
3-latest-65pxE per mostrare gli ultimi post in un dato tag usa:
3-tag:Nombre de la etiqueta-65pxDove "Nome tag" è il nome esatto del tag che vuoi usare.
In entrambi i casi puoi sostituire il numero “3” con il numero di post che vuoi visualizzare.
Galleria di tag
Le gallerie di tag funzionano nella versione Pro del modello. Queste gallerie utilizzano il gadget Tag e mostrano un elenco di tag più accattivante con un'immagine di anteprima. Questa immagine corrisponde al post più recente all'interno di quel tag.
Queste gallerie rendono la navigazione più intuitiva per i lettori e rendono l'aspetto del blog più dinamico, poiché vengono aggiornate ogni volta che un post viene pubblicato all'interno di un tag.
Nella demo, è la sezione "Sezioni" nella pagina principale. E come gadget nel piè di pagina, sempre chiamata "Sezioni".
Come per qualsiasi gadget etichetta, è possibile visualizzare solo le etichette desiderate.
Nella versione gratuita , la sezione "Sezioni" nella pagina principale è sostituita da un gadget HTML. Qui, è possibile aggiungere manualmente una galleria modificando il codice HTML per ciascun elemento, come segue:
<a class="bt-tag" href="URL" alt=""><div class="tag-thumb"><img src="IMAGE URL"></div><h4>NAME</h4></a>Icone social nel piè di pagina o nell'intestazione
Con questo modello, puoi aggiungere facilmente le icone dei social media all'intestazione o al piè di pagina. Basta modificare o creare un gadget Elenco Link e aggiungere ciascuno dei tuoi account social con i rispettivi link. Salva le modifiche e diventeranno automaticamente icone.
Esempio:
La stessa operazione si applica alla barra con le icone social nell'intestazione:
Poiché su Mastodon vengono utilizzati un'ampia varietà di server e nomi di dominio , è necessario aggiungere ?icon=mastodonal tuo profilo un collegamento alla fine del collegamento, ad esempio:
https://fosstodon.org/fcovicente?icon=mastodonModalità scura
La modalità scura è disponibile nella versione Pro.
Questa funzionalità utilizza JavaScript per rilevare se l'utente preferisce una versione chiara (predefinita) o una modalità scura. Una volta rilevato, la applica al design.
I lettori possono impostare le proprie preferenze di design, indipendentemente da quelle attualmente configurate sul loro sistema, utilizzando l'interruttore a levetta situato nel menu principale. Questa preferenza verrà memorizzata per le visite future.
Post correlati
I post correlati sono disponibili nella versione Pro e vengono visualizzati automaticamente sotto il contenuto dei singoli post. Questi post si basano sul primo tag del post.
Pagina di errore 404
La pagina di errore 404 può essere personalizzata dalla dashboard di Blogger. Basta individuare la sezione corrispondente nella sezione "Design". Lì troverai un gadget immagine e un gadget HTML.
Carattere/tipo di carattere e colori principali.
Per modificare il font principale e la tavolozza dei colori, basta andare alla sezione Modelli e cercare il link "Progettazione Modelli" . Una volta lì, vai su "Regola Larghezza" , dove potrai apportare le modifiche necessarie.
Supporto RTL.
Il modello offre un supporto parziale per l'allineamento RTL (da destra a sinistra), utilizzato in lingue come l'arabo. Per abilitarlo, cerca:
<html b:css='false'E sostituiscilo con:
<html lang="ar" dir="rtl" b:css='false'Dov'è aril codice della lingua araba?
Ora cerca:
bootstrap.min.cssE sostituiscilo con:
bootstrap.rtl.min.cssRegistro delle modifiche
- Versione 1.0 – 30-01-2023 – Versione iniziale.
Trovato questo articolo interessante? Condividilo sulla tua rete di contatti Twitter, sulla tua bacheca su Facebook per suggerire questo risultato nelle ricerche in Linkedin, Instagram o Pinterest. Diffondere contenuti che trovi rilevanti aiuta questo blog a crescere. Grazie! CONDIVIDI SU!
Post
Nessun commento:
Posta un commento