Bellissimo effetto da usare per le citazioni o per evidenziare un contenuto del blog.

Come personalizzare il contenuto di una citazione con effetto hover che accende una luce al passaggio del cursore.

I CMS più utilizzati hanno nei Temi o nei Template un loro stile per le citazioni tramite un determinato CSS che si attiva con il tag HTML <blockquote>. Per creare uno stile personalizzato quindi non potremo utilizzare questo tag almeno di non modificare direttamente il CSS. Per gli utenti di Blogger però è consigliabile modificare il CSS blockquote con una certa prudenza perché tale codice in alcuni Modelli può influenzare l'aspetto di altri elementi quali i commenti nidificati.

Vediamo come creare uno stile veramente originale per le citazioni ma pure per altri contenuti come potrebbero essere testi poetici, ricette, schede di prodotti, ecc. Lo stile che vado a proporre avrà un effetto hover cioè cambierà l'aspetto del contenuto quando ci si passi sopra con il mouse

Se abbiamo un blog su Blogger, dopo aver salvato il template, si va su Modello > Modifica HTML e si clicca sulla freccetta nera intorno alla 12-esima, 20-esima riga che si trova accanto alla sezione <b:skin> quindi  si cerca il tag ]]></b:skin> e, subito sopra, si incolla questo codice

.citazione {
overflow:auto;
width:508px;
height:198px;
font-family: Georgia;
color:#bcbbb4;
text-align:justify;
margin : 15px 35px 15px 15px;
padding : 10px 20px 10px 25px;
clear : both;
list-style-type : none;
background : #111 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4iSoBJYszqtvYocon0p-OOP8UyyLxP7zrZ62nYWy7ZQphOO3Tixw8U_5QN2S9QnFMo6enrYuSiJFk5TIi3k5IaOGaQIP5CL9tgT2VEJWPErxYXspdlU9RNcR9Se3ixITVxKYR2aUGoa4/s535/spenta.png) repeat-y top left;
border : 1px solid #000;
border-left:10px solid #bbb;
-webkit-transition:all .4s ease-in-out;
-moz-transition:all .4s ease-in-out;
-o-transition-duration:all .4s ease-in-out;
transition:all .4s ease-in-out;
-webkit-border-radius:3px;
-moz-border-radius: 23px 20px 20px 20px;
border-radius: 23px 20px 20px 20px;
}
.citazione:hover{
background : #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEepjU0XRuzSwrHnp8BADghOwad_8pnAqfiwdu9SV7XafWapxH33ojxTk-aOgpi9dPO251cXJfgiswTdXAXlMaiBWZR9_NGL-zTulRIQeY3YWkgVeaWcM0YX8qrz4LIfNbldGV8KvHFGc/s535/accesa.png) repeat-y top left;
color:#fcec39;
border : 1px solid #111;
border-left:10px solid #bbb;
-webkit-box-shadow: 0px 0px 50px  rgba(0, 0, 0, .4);
-moz-box-shadow: 0px 0px 50px  rgba(0, 0, 0, .4);
box-shadow: 0px 0px 5px  rgba(0, 0, 0, .4);
box-shadow: 5px 5px 3px #666;
}

poi si salva il modello. Quando si desideri inserire un contenuto all'interno di un rettangolo con questo effetto si incolla nell'Editor del post in Modalità HTML questo codice

<div class="citazione">
Codice del contenuto
</div>

Se non si vuole appesantire il modello e si voglia utilizzare questo effetto solo in un dato articolo o pagina statica non si incolla nulla nel template ma solo nell'Editor con questa sintassi

<style>
codice della citazione da incollare nel modello </style>
<div class="citazione">
Contenuto della citazione
</div>

Le dimensioni del contenitore sono settate in funzione di quelle della immagine. Qualora il contenuto fosse troppo ampio si visualizzerà un cursore per dare in modo al lettore di scorrerlo tutto

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer consequat feugiat nisl at tempus. Praesent in elementum magna. Nam aliquet vulputate est, ultricies aliquam nulla consequat sed. Maecenas fringilla consectetur lorem eget vulputate. Duis at felis nunc. Donec vehicula lectus sed lorem gravida, eu aliquam ligula varius. Phasellus tincidunt lacus metus, vitae auctor metus viverra in. Sed mattis at odio sit amet hendrerit. Sed non luctus lectus, sit amet aliquet augue. Pellentesque commodo lectus eget massa accumsan commodo. Aliquam vel diam non nibh elementum porta sit amet non massa. Phasellus at nulla nisl. Praesent molestie rhoncus nibh, et auctor dolor interdum vel. Praesent ac porttitor urna.

I parametri colorati di rosso possono essere modificati così come pure gli URL delle immagini.