Come Creare Un Paragrafo In HTML

 

<p style="font-size:50px; color:#efa7a1;">Testo Del Paragrafo</p>

Allineare testo al Centro

Possibilità numero 1:

<p align=center>Testo di prova</p> 

Possibilità numero 2:

 <center><p>Testo di prova</p></center>

HTML Immagine con link

<img src="http://IMMAGINE" alt="https://LINK CHE DESIDERATE SI APRA">

CSS centrare titoli colonne

 h3.post-title {text-align:center;}

.widget li, .tabs .widget li { 

float: none; 

display: inline-block; 

}

.widget {

text-align: center;

}

Come inserire video e immagini nei commenti

 Blogger ha sicuramente migliorato la funzionalità dei commenti inserendo quelli nidificati ma i contenuti visualizzabili sono rimasti limitati al solo testo. Gli unici tag HTML che possono essere utilizzati sono <b> per il grassetto, <i> per il corsivo e <href=…> per i collegamenti. Vediamo come si possano aggiungere anche video e immagini seguendo lo stesso procedimento usato per le emoticon animate.

Si tratta in sostanza di codificare una sintassi che tramite javascript venga sostituita dal codice di una immagine o dal codice embedded di un video. Tale codice dovrà necessariamente essere funzione dell'indirizzo della immagine o del video che vogliamo visualizzare. Per determinare l'URL di un video di Youtube possiamo selezionare e copiare l'indirizzo dalla barra del browser oppure dal link presente su Condividi o direttamente nel codice da incorporare che hanno comunque sempre lo stesso ID. Per esempio:

https://www.youtube.com/watch?v=cd4TUoUN44w
http://youtu.be/cd4TUoUN44w
https://www.youtube.com/embed/cd4TUoUN44w

mentre per i video di Vimeo l'URL si ricava andando su Share poi su Embed e copiando il solo indirizzo. Un video di Vimeo ha per esempio questo URL:

http://player.vimeo.com/video/108798045

Per essere sicuri che sia quello giusto incollatelo nella barra degli indirizzi del browser e aprite la scheda. Si dovrà vedere il player video a tutta pagina. 

MESSAGGIO AI LETTORI

Affinché i lettori possano usufruire di questa funzionalità è chiaro che debbono essere informati della sua esistenza. La cosa migliore è quella di inserire un testo nel modulo dei commenti. Si va su Bacheca > Impostazioni > Post e Commenti > Messaggio del modulo dei commenti

e si può inserire un messaggio di questo tenore

Per inserire immagini nei commenti usate questa sintassi
[img]URL_Immagine[/img]
Per inserire video nei commenti usate questa sintassi
[video]URL_Video[/video]
Sono supportate immagini in JPG, PNG e GIF e video di Youtube e Vimeo

che mostri la sintassi da utilizzare per postare immagini e video. Gli indirizzi delle immagini non sono altro che i link diretti ottenuti da Picasa o altro hosting su cui siano state caricate mentre gli URL dei video di Youtube e Vimeo si ottengono con il metodo appena illustrato. Il messaggio può essere arricchito con i tag <b> e <i> per il grassetto e il corsivo.

CODICE NEL MODELLO PER VIDEO E IMMAGINI NEI COMMENTI

Dopo aver salvato il template si va su Modello > Modifica HTML, si cerca la riga </body> e subito sopra si incolla il seguente codice javascript

<!-- Video e Immagini nei Commenti Inizio -->
<script>
//<![CDATA[
function Video_Imm_Comm(id) {
var ItemId = document.getElementById(id),
cambia = ItemId.innerHTML;
cambia = cambia.replace(/\[img\](.[^\]]*)\[\/img\]/ig, "<img class='imm_commenti' src='$1'\/>");
cambia = cambia.replace(/\[video\]https:\/\/www\.youtube\.com\/embed\/(.*?)\[\/video\]/ig, "<iframe class='video-comm' src='https://www.youtube.com/embed/$1'><\/iframe>");
cambia = cambia.replace(/\[video\](https:\/\/youtu\.be\/|https:\/\/www\.youtube\.com\/watch\?v\=)(.*?)\[\/video\]/ig, "<iframe class='video-comm' src='https://www.youtube.com/embed/$2'><\/iframe>");
cambia = cambia.replace(/\[video\](http:\/\/youtu\.be\/|http:\/\/www\.youtube\.com\/watch\?v\=)(.*?)\[\/video\]/ig, "<iframe class='video-comm' src='https://www.youtube.com/embed/$2'><\/iframe>");
cambia = cambia.replace(/\[video\](http:\/\/player\.vimeo\.com\/video\/)(.*?)\[\/video\]/ig, "<iframe class='video-comm' src='http://player.vimeo.com/video/$2'><\/iframe>");
document.getElementById(id).innerHTML = cambia;} Video_Imm_Comm('comment-holder');
//]]>
</script>
<!-- Video e Immagini nei Commenti Fine -->

Si cerca quindi la riga ]]></b:skin> e, subito sopra, si incolla quest'altro codice

/* Video e Immagini nei Commenti */
#comment-holder .imm_commenti, #comment-holder i[rel="image"] {
max-width: 420px; /* Larghezza massima immagini */
width: auto;
height: auto;
display: block;
margin: 5px auto;  /* Centrare e separare immagini */
}
#comment-holder .video-comm {
width: 420px; /* Larghezza del player */
 height: 236px; /* Altezza del player */
display: block;
margin: 5px auto; /* Centrare e separare il video */
}

Si salva il template. Il tag display: block; viene utilizzato per mostrare immagini e video in una riga separata senza testo alla loro sinistra e alla loro destra mentre i valori degli altri parametri possono essere modificati in funzione delle dimensioni del nostro layout. Il rapporto scelto tra larghezza e altezza del player video è di 16:9 ma può essere scelto anche di 4:3. Quando in un commento saranno inserite insieme al normale testo anche delle stringhe di questo genere

[img]URL_Immagine[/img]
[video]URL_Video[/video]

si potranno vedere nel commento anche l'immagine e il video relativi. 

OSSERVAZIONI CONCLUSIVE

Per utilizzare questa tecnica è necessario avere attivati i commenti nidificati, con le risposte per intenderci, e  il modulo dei commenti posizionato sotto al post e non che si apra in una finestra a parte. A questo scopo si può andare su Impostazioni > Post e Commenti > Posizione commento e scegliere Incorporato. Sono supportate le immagini JPG, PNG e GIF anche animate mentre per i video sono supportati quelli di Youtube e Vimeo. 

Dopo il primo commento il messaggio dei lettori viene visualizzato in basso e non immediatamente sopra al modulo e potrebbe essere poco visibile. Si può ovviare facendo una modifica al template che mostri il messaggio ai lettori sempre sopra al modulo dei commenti come del resto è stato fatto da tempo anche in questo sito.

Music...

 

Buone Vacanze.....

Gabbiani La Voce del Mare

Sfondo post

 

Inserire uno sfondo nei post del blog

Con un piccolo trucco è possibile inserire uno sfondo diverso in ogni singolo post che pubblichiamo sul blog, magari in linea con quello che abbiamo scritto. Per prima cosa scegliamo l'immagine che vogliamo come sfondo e pubblichiamola su un servizio in rete come Picasa, stando attenti a non scegliere un'immagine troppo colorata che impedirebbe di leggere il testo dell'articolo.

 

Creiamo un nuovo post e scriviamo quello che vogliamo. Prima di pubblicarlo (io consiglio di inserire il codice html dopo aver scritto il post, ma potete farlo anche prima) andiamo in Modifica HTML e inseriamo prima di tutto la seguente riga:

<div style="background:url(indirizzo dell'immagine);">

sostituendo indirizzo dell'immagine con il link all'immagine che vogliamo come sfondo, e in fondo all'articolo come testo inseriamo:

</div>

Se visualizziamo l'anteprima del post, vedremo già il post con lo sfondo che abbiamo scelto, ed eventualmente sistemare l'immagine (o cambiarla) prima di pubblicare il post. Inserendo le righe sopra, l'immagine verrà ripetuta per tutto il post, ma possiamo cambiare la prima riga per avere effetti diversi:

• <div style="background:url(indirizzo dell'immagine) no-repeat;"> (l'immagine non si ripete)
• <div style="background:url(indirizzo dell'immagine) repeat-y;"> (l'immagine si ripete solo in verticale)
• <div style="background:url(indirizzo dell'immagine) repeat-x;"> (l'immagine si ripete solo in orizzontale)
• <div style="background:url(indirizzo dell'immagine) no-repeat center;"> (l'immagine viene messa al centro senza ripetizioni)
• <div style="background:url(indirizzo dell'immagine) repeat-y center;"> (l'immagine viene messa al centro e si ripete in verticale)
• <div style="background:url(indirizzo dell'immagine) no-repeat bottom center;"> (l'immagine viene messa al centro in basso)
• <div style="background:url(indirizzo dell'immagine) no-repeat bottom center;"> (l'immagine viene messa al centro in alto)

Insomma, potrete sbizzarrirvi con le varie combinazioni di repeat, no-repeat, repeat-y, repeat-x, bottom, center, top.

Con Blogger è possibile inserire questo codice automaticamente in tutti i nuovi post, andando in Impostazioni -> Formattazione e inserendo le due righe di codice in Modello post: quando create un nuovo post, vi trovrete il codice già inserito ed eventualmente dovrete solo cambiare l'indirizzo dell'immagine. Il testo dell'articolo va inserito tra la prima riga di codice e il </div> finale. Premetto comunque che io consiglio di inserire il codice manualmente in ogni nuovo post piuttosto che inserirlo nel Modello post.

Se volete inserire lo sfondo solo in una parte del post, come ho fatto io in questo, basta mettere il </div> finale nel punto dovete volete che finisca lo sfondo.

Link nei commenti

 

Inserire un link in un commento su Blogger

Come inserire un link in un commento su Blogger è una cosa che mi viene richiesta spesso ed eccomi qui finalmente a spiegare una volta per tutte l’operazione per farlo. Io stesso lo faccio sempre per rimandare a un post in particolare.

E’ incredibile come Blogger pecchi su certi piccoli aspetti come questo: non è infatti possibile inserirlo tramite un pulsante, bisogna necessariamente inserire il codice HTML nel commento per crearlo manualmente.

Vediamo insieme come.

Il codice HTML per creare un link

Il codice HTML per creare un link è il seguente:

<a href="indirizzo">testo</a>

Sostituendo indirizzo con l’indirizzo di destinazione (che può essere quello di una pagina web,
ma anche l’indirizzo di un video, un’immagine, il vostro feed), e testo con il testo visualizzato dal link. Questo codice va inserito direttamente tra le parole, ricordandovi che alla fine
verrà visualizzato solo il testo indicato.

Per fare un esempio, il seguente codice:

Clicca <a href="https://fleur-du-desert.blogspot.com/">qui</a> per visitare il mio blog!

Visualizzerà questo:

Clicca qui per visitare il mio blog!

Ed ecco fatto.
Ovviamente lo stesso codice può essere utilizzato in qualsiasi elemento
di tipo HTML/Javascript o nel corpo di un post (da Modifica HTML del post).

Table

Тesto

Table

Scrivi qui il tuo testo

 

Table

*

 

 

Table Black...

Sabry.69

Guitar Music....

Audio prova

Stive Morgan - The Valley Of Dreams

Stive Morgan - The Valley Of Dreams

Odysee

༻❀༺ Table ༻❀༺

 Scrivi qui

 

 

 

 

 

Scrollbar HTLM

Scrivi qui il tuo testo

 

 

<div style="width: 550px; height: 100px; overflow-y: scroll; margin: auto; padding: 20px; box-shadow: inset 0px 0px 10px black;">
<p>Ecrire ici</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>