- Home
- Post archiviati in bordi
Pubblicato il 03/06/16 - aggiornato il | 1 commento :
Aggiungere bordo arrotondato ai titoli dei widget di Blogger.
Pubblicato il 17/10/15 - aggiornato il | Nessun commento :
Come arrotondare una immagine con Photoshop.

Pubblicato il 01/09/15 - aggiornato il | 8 commenti :
Come racchiudere in un bordo la sidebar, il footer, l'header o un widget di Blogger.

Come personalizzare lo stile dei bordi in dimensioni, colori e forma con il CSS.


Pubblicato il 08/10/14 - aggiornato il | 4 commenti :
Mostrare le immagini con bordi e cornici animati.


Pubblicato il 17/05/14 - aggiornato il | 9 commenti :
Inserire bordi o immagini tra i widget nella sidebar di Blogger.

Pubblicato il 25/04/14 - aggiornato il | 6 commenti :
Come inserire uno sfondo e un bordo nei contenuti dei post di Blogger.

Pubblicato il 16/08/13 - aggiornato il | 1 commento :
Come inserire i bordi nel menù delle pagine statiche di Blogger.

Pubblicato il 29/03/13 - aggiornato il | 2 commenti :
Come creare CSS per bordi arrotondati, gradienti e ombreggiature.

Pubblicato il 04/09/12 - aggiornato il | 14 commenti :
Come nascondere sfondo e bordi in una immagine di Blogger.

Pubblicato il 20/07/12 - aggiornato il | 53 commenti :
Come eliminare ombre e bordi dalle immagini di Blogger.

Pubblicato il 25/05/12 - aggiornato il | 6 commenti :
Come togliere il bordo alle immagini del blog.

Pubblicato il 15/04/11 - aggiornato il | 3 commenti :
Come personalizzare l'aspetto dei link su Blogger tramite le pseudo-classi con selettori.
In tutti i modelli di Blogger c'è una classe che sovrintende all'aspetto dei link che si vedono nei post o nei widget. Più che di classe si dovrebbe parlare di pseudo-classe visto che non definisce un elemento ma un suo stato particolare. Per esempio la pseudo classe
a:link {color: #004488;}
inserisce la regola che i link non ancora visitati abbiano quel particolare colore. Un'altra pseudo classe sicuramente presente potrà essere così
a:visited {color: #800080;}
in cui la regola impone il colore del codice esadecimale per i link che sono già stati aperti. Ai meno esperti consiglio di leggere il post sui codici dei colori. L'altra pseudo classe utilizzata per i link è la seguente
a:hover {color: #FDBCB7;}

Pubblicato il 26/02/11 - aggiornato il | 9 commenti :
Come separare i commenti nei blog su Blogger con bordi o immagini.
Dopo aver presentato la personalizzazione su come inserire i commenti dell'autore del blog in un rettangolo colorato ecco un altro trucco per rendere più vivace quell'area dei siti su piattaforma Blogger. L'obiettivo è quello di inserire un separatore tra commento e commento. Cominciamo con applicare un semplice bordo tra ognuno di essi. Andiamo su Design > Modifica HTML e cerchiamo la riga ]]></b:skin> quindi, immediatamente sopra, incolliamo questo codice
#comments-block .comment-footer {
border-bottom:3px double #940F04; /* Bordo dei commenti */
}
Le parti in rosso possono essere personalizzate e riguardano lo stile del bordo e il suo colore. I commenti saranno divisi tra loro da una linea orizzontale

Pubblicato il 09/01/11 - aggiornato il | 6 commenti :
Come eliminare o ingrandire i bordi delle sidebar in Blogger.
Nei modelli di Blogger è quasi sempre presente una linea di divisione tra l'area del post (main-wrapper) e quella della sidebar (sidebar-wrapper) o delle sidebar, se ce ne sono più di una. Nei vecchi modelli si possono agevolmente modificare le impostazioni delle sidebar andando su Design > Modifica HTML e cercando il foglio di stile relativo alla sidebar. I fogli di stile (CSS) sono individuabili perché iniziano con un punto oppure con un cancelletto.
Se si ha una sola sidebar dovremo quindi cercare le righe .sidebar oppure #sidebar. Nel blocco di codice sotto di queste, ci dovrebbe essere il parametro border che si riferisce appunto alla linea di separazione. Ecco cosa si trova per esempio in questo modello

Pubblicato il 29/10/09 - aggiornato il | 11 commenti :
Come eliminare il bordo dalle immagini se si utilizza l'editor avanzato di Blogger.
Nel momento in cui passaste alla modalità HTML vi trovereste, per la foto inserita, di fronte ad un codice simile a questo
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCAeN6gRzv_YKP5zyyNdfA4bx3dgBElj2p5UJKqOv5qFpx8j-ZPwVN1iLCmeKOr3Avr8ELVEVAfrruNNiREjAtnbsPrzcO9mF30dGoPRHVGi05RJuxko9PVjEW4Vp7usMhFKfhyphenhyphendrV3j8X/s1600-h/santarelli.jpg" imageanchor="1" linkindex="28" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCAeN6gRzv_YKP5zyyNdfA4bx3dgBElj2p5UJKqOv5qFpx8j-ZPwVN1iLCmeKOr3Avr8ELVEVAfrruNNiREjAtnbsPrzcO9mF30dGoPRHVGi05RJuxko9PVjEW4Vp7usMhFKfhyphenhyphendrV3j8X/s320/santarelli.jpg" /></a>
</div>
dove è presente l'attributo border="0" che però non significa affatto che il bordo non ci sia. Se lo vogliamo togliere dobbiamo effettuare una piccola modifica al codice dell'immagine andando in modalità HTML ed modificando il codice in questo modo
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCAeN6gRzv_YKP5zyyNdfA4bx3dgBElj2p5UJKqOv5qFpx8j-ZPwVN1iLCmeKOr3Avr8ELVEVAfrruNNiREjAtnbsPrzcO9mF30dGoPRHVGi05RJuxko9PVjEW4Vp7usMhFKfhyphenhyphendrV3j8X/s1600-h/santarelli.jpg" imageanchor="1" linkindex="28" style="margin-left: 1em; margin-right: 1em;"><img style="border:none;" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCAeN6gRzv_YKP5zyyNdfA4bx3dgBElj2p5UJKqOv5qFpx8j-ZPwVN1iLCmeKOr3Avr8ELVEVAfrruNNiREjAtnbsPrzcO9mF30dGoPRHVGi05RJuxko9PVjEW4Vp7usMhFKfhyphenhyphendrV3j8X/s320/santarelli.jpg" /></a>
</div>
E' stata inserita la parte colorata in rosso style="border:none;".
Ripeto che questa personalizzazione vale solo se si usa la versione aggiornata dell'editor di Blogger e non un editor offline come WLW.
Le differenze tra le immagini non sarebbero visibili in questo post in quanto lo stile del blog presuppone immagini senza bordo

Pubblicato il 30/09/09 - aggiornato il | Nessun commento :
Come aggiungere cornici, bordi e sfondi a tutte le immagini pubblicate in un blog su Blogger.
Nella maggior parte dei modelli non esiste uno stile particolarmente sofisticato che definisce il modo di pubblicazione delle immagini. In genere queste vengono viste esattamente come vengono postate con l'aggiunta al massimo di un bordo. Se si possiede un blog nel quale le foto hanno grande importanza e si vuole creare uno stile personalizzato si possono seguire le seguenti indicazioni
Si può cioè creare uno stile che consenta automaticamente di
- Aggiungere dei bordi alle immagini
- Aggiungere dello spazio tra bordo e immagine (padding)
- Inserire una cornice di sfondo tra bordo e immagine
E' chiaro che questa personalizzazione può essere interessante per blog con attitudine artistica e sarebbe assolutamente fuori luogo per un blog come questo che si occupa di informatica.
Per prima cosa andate a vedere se nel vostro blog è presente uno stile per la pubblicazione delle immagini. Recatevi su Layout > Modifica HTML e cercate una riga di questo tipo
.post img {
questo è l'inizio del foglio di stile che dà le istruzioni di pubblicazione. In un modello Sample Blog si trova per esempio questo blocco di codice
.post img {
padding:4px;
border:1px solid $bordercolor;
}
dove le due parentesi graffe rappresentano l'inizio e la fine dei parametri immessi. In altri template il blocco di codice relativo può essere anche sostanzialmente diverso. Da notare che, in questo caso, il colore del bordo è definito da $bordercolor; vuol dire che è presente come variabile e può essere cambiato nella sezione Caratteri e Colori. 4 pixel di padding significa che l'immagine disterà quel valore dal bordo in tutte e quattro le direzioni. 1 pixel di bordo è la sua dimensione mentre solid ne indica l'aspetto. Invece di solid potrebbe essere inserito double (doppia riga), dotted (punteggiato), dashed (tratteggiato), ridge (stile in rilievo).
Si possono inserire valori diversi e si può anche inserire un'immagine di background che si visualizzi nello spazio del padding cioè tra l'immagine e il suo bordo. L'immagine che si sceglie come sfondo deve essere necessariamente piccola e si riprodurrà automaticamente in tutte le direzioni. Ovviamente dovrà essere caricata in un hosting gratuito tipo Skydrive.
Gli esempi sono molto spesso più efficaci di qualunque trattazione teorica; quindi ho caricato questa immagine su Skydrive e ne ho acquisito l'URL.
Adesso ho modificato il codice dello stile delle immagini in questo modo
.post img {
padding:15px;
border:3px solid #003366;
background: URL(URL_immagine)
}
Se adesso si salva il template, qualsiasi immagine, anche quelle già pubblicate, avranno un aspetto simile a questa
Nel caso in cui in modello non esista la riga .post img { si può sempre aggiungere il precedente blocco di codice cercando l'altra riga ]]></b:skin> e incollandolo immediatamente sopra.
Sono piuttosto scarso in quanto a gusto artistico e certo la maggior parte di voi saprà fare di meglio.

Pubblicato il 20/06/09 - aggiornato il | 13 commenti :
Come racchiudere all’interno di un bordo e mettere un sottofondo colorato (background) ai nostri post su Blogger.
Questa è una personalizzazione piuttosto semplice che è indicata soprattutto per i blog che hanno un aspetto semplice e vogliono ravvivarlo un po’.
Andare su Layout > Modifica HTML e scaricare un modello completo per sicurezza. Cercare la seguente riga di codice cliccando su F3 o Ctrl+F
.post {
Troverete un codice di questo tipo
.post {
padding-$startSide:20px;
margin-bottom:20px;
text-indent:12px;
padding-$endSide:20px;
line-height:22px;
}
Per aggiungere bordi e colore di sfondo basta aggiungere le seguenti righe colorate di rosso
.post {
border: 2px dashed #003366;
background:#FFFFFF;
padding-$startSide:20px;
margin-bottom:20px;
text-indent:12px;
padding-$endSide:20px;
line-height:22px;
}
in cui le parti in blue possono essere personalizzate.
- 2 rappresenta il numero dei pixel del bordo
- dashed significa che il bordo è tratteggiato ma può essere sostituito da solid per una linea unita e dotted per una punteggiata
- I codici dei colori dopo il cancelletto possono essere scelti in funzione dei colori del nostro blog
Possiamo, nello stesso modo, personalizzare anche la data andando su
h2.date-header
troveremo un codice simile a questo
h2.date-header {
border-bottom:none;
font-size: 130%;
text-align:$startSide;
margin-top:20px;
margin-bottom:14px;
padding:1px;
padding-$startSide:17px;
color: $dateHeaderColor;
font-weight: normal;
font-family: Trebuchet MS, Verdana, Sans-serif;
}
che potremo modificare per esempio così
h2.date-header {
border: 2px dashed #003366;
background:#FFFFFF;
border-bottom:none;
font-size: 130%;
text-align:$startSide;
margin-top:20px;
margin-bottom:14px;
padding:1px;
padding-$startSide:17px;
color: $dateHeaderColor;
font-weight: normal;
font-family: Trebuchet MS, Verdana, Sans-serif;
}
con le stesse personalizzazioni precedenti. In questo caso anche la data sarà racchiusa in un bordo e avrà un colore di sottofondo. Salvate il modello e visualizzate il blog.

Pubblicato il 02/05/09 - aggiornato il | Nessun commento :
Come mettere una cornice colorata e punteggiata ad una foto o immagine.
In una email mi è stato chiesto se fosse possibile inserire dei bordi ad una foto. Per mettere dei semplici bordi ho specificato che bastano le funzionalità di Windows Live Writer.
Con WLW bisogna selezionare la foto che si è inserita quindi andare su Margini Personalizzati>Bordi e scegliere quello che si vuole. In pratica si può scegliere tra 1 e 3 pixel.
Per fare delle cose un po’ più complesse dobbiamo invece operare sull’HTML.
Per prima cosa bisogna conoscere le dimensioni dell’immagine che si vuole incorniciare.
Niente di più facile visto che basta puntarci sopra il mouse che le visualizziamo senza problemi
in questo caso sono 400x533 pixel come evidenziato nello screenshot.
Il passo successivo è di caricarla su un servizio gratuito di hosting come Skydrive. Se non sapete come fare seguite le indicazioni dell’articolo di cui al collegamento.
Per acquisirne l’indirizzo che la nostra immagine ha su Skydrive cliccarci sopra con il destro del mouse e scegliere Copia indirizzo immagine
Per inserirla nel blog dobbiamo andare in modalità HTML e copiare questo codice
<img style="border-bottom: purple 5pt dotted; border-left: black 5pt dotted; border-top: yellow 5pt dotted; border-right: red 5pt dotted" src="http://fr9sew.blu.livefilestore.com/y1pbRBi86oI-noddZbTfTaT4UOMm08o1LUy6_V7XCwuKXDUg0mEuSWJQYN5AEHhcE1K7ZAOukG-w3jTAC-pqUILIrOlHDoqoe4v/charlize_theron1_300_400.jpg" width="400" height="533" />
dove le personalizzazioni da fare sono
- l’URL che è l’espressione lunghissima che comincia con http e finisce con jpg ed è quello dell’immagine copiato su Skydrive. Ovviamente mettete l’indirizzo della vostra immagine
- Il nome dei colori in inglese per il sotto (bottom), sopra (top), sinistra (left) e destra (right)
- Le dimensioni che sono quelle acquisite puntando con il mouse sul file immagine
- 5pt è la larghezza in pixel del bordo. Ovviamente il numero 5 può essere cambiato a piacimento
- dotted significa punteggiato
Ecco che cosa si ottiene in pratica con questo codice
In questa immagine ho messo 10 pixel di bordo perché 5 mi sembravano di poco effetto.
