Tutorial: Come inserire un box per prelevare codice HTML

domenica 1 dicembre 2013 3 commenti:

Bentornati readers! :D Questo tutorial è la continuazione di Come sostituire i titoli widget con delle immagini. La seconda richiesta che mi è stata fatta riguarda l'inserire il box per prelevare il codice HTML dei banner. In questo tutorial cercherò di spiegarvelo il più chiaramente possibile :) Come ho già scritto in precedenza, seguendo questo link si aprirà l'ultimo dei tre post che ho preparato oggi per voi. Al suo interno troverete un nuovo rating, anche questo richiesto, riguardante il Signore degli Anelli! Ora vi lascio al tutorial, buona lettura! ;)

Graphic Drops
Rubrica di cadenza casuale che vi aiuterà a gestire al meglio la parte grafica, sia HTML che non, dei vostri blog. Troverete elementi grafici da utilizzare, tutorial specifici e consigli utili. Se volete contattarmi potete farlo tramite il modulo delle richieste che trovate nel menù in alto, sezione Graphic Drops. Risponderò alle vostre domande.

Come inserire un box per prelevare codice HTML

Inserire un box per prelevare una porzione di codice può essere utile in molti casi, viene comunemente usato dai blogger per permettere ai lettori di prelevare il codice di un banner, utile per affiliazioni o eventi. Oggi, per spiegarvi questo procedimento, utilizzerò proprio questo esempio. Per creare un box dobbiamo usare il seguente codice:
<textarea style='height:50px; width:230px;'>HTML che volete visualizzare</textarea>
La Textarea ci permette di creare un box all'interno del quale possiamo inserire qualsiasi codice. Con height e width (altezza e larghezza) possiamo determinare le dimensioni, proviamo a inserire un box per un banner:

Reading with Love

Per creare questo box ho unito tre codici, ho usato un div (contenitore) con al suo interno il codice immagine e il codice textarea. In questo modo ho potuto centrare tutto e tenerlo unito e ordinato.
<div style='width:230px; margin-left:auto; margin-right:auto'>
<img src="LINKIMG" width='auto' height='auto'/>
<br /><textarea style='height:50px; width:230px;'>CODICE</textarea></div>
ANALIZZIAMO IL CODICE: Il codice width che si trova all'interno di DIV e di TEXTAREA deve avere lo stesso valore della larghezza dell'immagine o poco più grande, questo per contenere nel modo giusto gli elementi. I codici margin-left:auto; margin-right:auto servono a centrare tutto. Al posto di LINKIMG va inserito il link della vostra immagine, mentre al posto di CODICE dovete mettere il codice del banner che volete far prelevare.



Anche questo Tutorial è terminato, spero di essermi spiegata bene. Per dubbi o domande sono sempre disponibile, scrivetemi nei commenti o attraverso il modulo delle richieste. Ci sentiamo al prossimo Graphic Drops! :)

3 commenti:

  1. Caspita! Ma sei fantastica. Questo tuo tutorial mi ha aiutato molto, perché non avevo trovato nulla sull'argomento ed ero un po' in crisi, visto che volevo usufruire di questo box per html. Grazie infinite per aver condiviso il tuo sapere e complimenti per questo utilissimo post :D

    RispondiElimina
  2. Oww ma grazie Mirella! :3 Sono davvero contenta di averti aiutato!

    RispondiElimina
  3. Ciao, ho prelevato il codice per il box per prelevare htlm, ma una volta inserito nella pagina del mio sito non funziona, mi puoi aiutare, grazie vincenzo

    RispondiElimina