Come creare paragrafi in Blogger

Alternativa al tag <p> per Blogger. Come rinchiudere il testo dentro un tag che si comporti come il <p> mancante. Interruzioni di paragrafo inclusi.
È un po’ che uso Blogger e da sempre ho un problema: quello del tag <p>, che se lo inseriamo: o scompare o viene trasformato magicamente in un tag <div>.Il problema è legato all’editor probabilmente. Ma non ho approfondito la questione.
Quello che ho sin dall’inizio cercato di fare è di trovare un modo alternativo per scrivere i miei post. E ne ho provate davvero di tutti i colori!Ad oggi sono molto soddisfatto delle soluzioni trovate e per questo vorrei condividerle con voi in questo post.

<Span>, la soluzione definitiva... fino a poco fa.

Ho parlato di soluzioni, in particolare ne sono due.
La prima, quella che sto tutt’ora utilizzando ma che presto abbandonerò per “testare” la seconda, è quella di utilizzare un tag <span>.Senza dilungarmi troppo (ma se cercate spiegazioni o avete domande da pormi fatelo pure nei commenti) questo è il codice.
<span style="display: block; font-size: medium; margin: 1em 0;">Scrivi... </span> Osserviamo che all’interno è presente un attributo style. Analizzandone il contenuto leggiamo tre valori importanti: la visualizzazione come blocco e i margini superiori/inferiori, che simulano il comportamento del tag <p>, e il font-size (opzionale) che, oltre a ingrandire il testo per una migliore leggibilità e scrittura, consente di distinguere al volo se per sbaglio stiamo scrivendo al di fuori del tag.Questa è stata la mia soluzione definitiva fino a quando non ho trovato il secondo metodo di cui vado ancora più fiero.

2. Guida breve: estensione Chrome e codice JS

Perché ho continuato nella mia ricerca e non mi sono fermato al codice sopra? Modificando spesso l’html dei miei post ho notato che erano troppo confusionari; l’attributo style all’interno del tag span, infatti, occupa quasi una linea di testo qua e là nel contenuto.Essendo una spiegazione troppo lunga da scrivere qui, ho preferito buttare giù questa mini guida e lasciare a voi la comprensione del tutto. In breve: tramite del codice Javascript andiamo a inserire dello stile css (stessa cosa del metodo di prima ma creando un elemento <style> senza dover inserire lo stile in linea) per un tag creato da noi (che andremo a utilizzare al posto del tag <p>). Questo avrà effetto solo mentre scriviamo e non nel codice reale del post.Prima cosa: installate Chrome. Mi riferisco ai (molti) mac-user che utilizzano Safari. Questo perché l’estensione che andremo ad installare è per Chrome. A voi trovare le alternative per Safari e condividerle nei commenti. Al momento non ho controllato, usando Chrome come browser predefinito. (Safari solo per i video WWDC.)
[EDIT Aggiornamento del 26/10/2018] Per Safari la soluzione c’è ed è anche più immediata. In fondo a tutto trovi il paragrafo dedicato.Scarica l’estensione. Ne esistono alcune, tutte molto simili tra loro. Ma questa che vi consiglio mi ha convinto di più, molto per il design. User JavaScript and CSS.Una volta installata, andate nel sito di Blogger e create un nuovo post. In alto a destra cliccate sull’icona dell’estensione e fate su “+ Add new”. Si aprirà una pagina con due textarea, una per il codice JS e l’altra per quello CSS. Inserite il codice in basso nella sezione di sinistra, quella per il codice JS.
Cambiate la scritta evidenziata in rosso con il nome del vostro tag. Inventatene uno. Poi cliccate su Save in alto a destra.

(function() {
    var interval = setInterval(function() {
        var target = document.querySelector('#postingComposeBox');
        if (target && target.contentDocument) {
            var header = target.contentDocument.head;
            target = target.contentDocument.querySelector('#postingComposeBox');
            if (header && target) {
                var style = document.createElement('style');
                style.type = 'text/css';
                style.innerHTML = "data-blogger-escaped-mionuovotag { display: block; -webkit-margin-before: 1em; -webkit-margin-after: 1em; -webkit-margin-start: 0px; -webkit-margin-end: 0px; font-size: 120%; }";
                header.appendChild(style);
                clearInterval(interval);
            }
        }
    }, 1000);
})();

Sempre dalla pagina di Blogger per la creazione del post, cliccate sull’icona dell’estensione e accertatevi che sia abilitato lo switch. Giusto per essere sicuri che lo script sia abilitato.

Ora selezionate l’editor HTML del post e provate a scrivere il tag che avete scelto prima con del testo all’interno. es. <mionuovotag>Test... </mionuovotag>.Dovresti vedere che, oltre ad avere un font più grande, se premi Invio crea automaticamente un margine. E il tuo codice è un milione di volte più ordinato rispetto a prima!

Aggiornamento Safari 26-10-2018:

Tutto il processo per chi usa Safari è semplificato. Non è necessaria alcuna estensione e nessuna iniezione di codice. Basta infatti andare in Preferenze... > Avanzate e inserire un foglio di stile con la seguente regola: #postingComposeBox p data-blogger-escaped-mionuovotag { display: block; -webkit-margin-before: 1em; -webkit-margin-after: 1em; -webkit-margin-start: 0px; -webkit-margin-end: 0px; font-size: 120%; }.

Ricorda...

• Le modifiche sono solo in locale, quindi non vedrai margini e stili quando visualizzi il post online (basta aggiungere del codice CSS per il tuo nuovo tag nel tema, come faresti normalmente).
• Se scrivi da un altro computer non vedi nessun cambiamento grafico; dovresti seguire la guida e installare l’estensione anche sul nuovo dispositivo.
• Piccolo suggerimento, se vuoi andare a capo senza creare un nuovo paragrafo basta che tieni premuto Shift (o ctrl) insieme a Invio. (soft-return).

Alternative to the <p> tag for Blogger. How to lock up the text inside a tag that behaves like the missing <p> one. Paragraph breaks included.
It's been a while since I use Blogger and I've always had a problem: that of the <p> tag, which if we insert it in the editor: either disappears or is magically transformed into a <div> tag.The problem is probably related to the editor. But I did not elaborate on the matter.
What I have tried to do from the beginning is to find an alternative way to write my posts. And I really have tried in all the ways!To date I am very satisfied with the solutions found and I would like to share them with you in this post.

<Span>, the definitive solution... until recently.

I talked about solutions, in particular there are two.
The first one, the one I am still using but which I will soon abandon to “test” the second one, is to use a <span> tag.Without going too far (but if you are looking for explanations or you have questions to ask me, please do it in the comments) this is the code.
<span style="display: block; font-size: medium; margin: 1em 0;">Write... </span> Note that there is a style attribute inside.Analyzing the contents we read three important values: the display as a block and the upper/lower margins, which simulate the behavior of the tag <p>, and the font-size (optional) that, in addition to enlarging the text for better readability and writing, allows you to distinguish on the fly if by mistake we are writing outside the tag.This was my definitive solution until I found the second method I’m even more proud of.

2. Short guide: Chrome extension and JS code

Why did I continue my research and I did not stop at the code above? Often changing the html of my posts I noticed that they are too confusing; the style attribute inside the span tag, in fact, occupies almost a line of text here and there in the content.Being an explanation too long to write here, I preferred to throw down this mini guide and leave you an understanding of everything. In short: using the Javascript code we are going to insert the css style (same thing as the first method but creating a <style> element without having to insert the inline style) for a tag created by us (that we will use instead of the tag <p>). This will only take effect as we write and not in the actual post code.First thing: install Chrome. I refer to the (many) mac-users who use Safari. This is because the extension we're going to install is for Chrome. It’s up to you to find the alternatives for Safari and share them in the comments. At the moment I have not checked, using Chrome as the default browser. (and using Safari only for WWDC videos.)Download the extension. There are some, all very similar to each other. But what I’m going to recommend to you has convinced me more, maybe for the good-looking design. User JavaScript and CSS. Once installed, go to the Blogger site and create a new post.At the top right, click on the extension icon and then on “+ Add new”. A page will open with two textarea, one for the JS code and the other for the CSS code. Enter the code below in the left section, the one for the JS code.
Change the text highlighted in red with the name of your tag. Make up one. Then click on Save at the top right.

(function() {
    var interval = setInterval(function() {
        var target = document.querySelector('#postingComposeBox');
        if (target && target.contentDocument) {
            var header = target.contentDocument.head;
            target = target.contentDocument.querySelector('#postingComposeBox');
            if (header && target) {
                var style = document.createElement('style');
                style.type = 'text/css';
                style.innerHTML = "data-blogger-escaped-mynewtag { display: block; -webkit-margin-before: 1em; -webkit-margin-after: 1em; -webkit-margin-start: 0px; -webkit-margin-end: 0px; font-size: 120%; }";
                header.appendChild(style);
                clearInterval(interval);
            }
        }
    }, 1000);
})();

Always from the Blogger page to editing the post, click on the extension icon and make sure that the switch is enabled. Just to make sure the script is working.

Now select the HTML editor and try to write the tag you chose first with some text inside. e.g. <mynewtag>Test... </mynewtag>.You should see that, in addition to having a larger font, if you press Enter, it automatically creates a margin. And your code is a million times more orderly than before!

Remember...

• The changes are only local, so you will not see margins and styles when you view the post online (just add the CSS code for your new tag in the theme, as you normally would).
• If you’ll use another computer to write posts, you do not see any graphic changes; you should follow the guide and install the extension on the new device as well.
• Small tip, if you want to wrap without creating a new paragraph, just hold Shift when pressing Enter. (soft-return).