Inserire annunci AdSense dentro il post con i CSS


image Con la nuova veste grafica, ho inserito gli annunci AdSense non proprio sopra il post, ma all’inizio, facendoli integrare col testo dell’articolo. E’ una cosa che avrei voluto provare da tempo, per testarne il rendimento, ma nel vecchio template letteralmente non avevo lo spazio per farlo.

E’ ancora presto per dire se è una posizione migliorare di quella precedente, i rendimenti (in termini di click o di guadagno) sono sempre soggetti a fluttuazioni, quindi aspetto qualche giorno prima di trarre conclusioni (che condividerò come sempre in un post).

Ho visto comunque che la cosa interessa anche ad altri, ed eccomi qui a spiegare come fare. Sebbene farò sempre riferimento alla struttura di Blogger, il concetto vale per qualsiasi piattaforma in cui sia possibile inserire codice HTML.

Visto che andremo a modificare il codice del template, raccomando come sempre di farne un backup.

Creiamo l’annuncio adatto

Per prima cosa bisogna scegliere il formato, che, come mi è capitato di ricordare spesso, più grande è, meglio è. Ma senza esagerare, bisogna anche lasciare posto al testo dell’articolo altrimenti l’effetto sarà davvero spaventoso. Direi che si dovrebbe di occupare al massimo la metà dello spazio a disposizione. Avendo la colonna dei post un’ampiezza di oltre 600, ho usato un annuncio di dimensioni 300x250:

image

Se avete poco spazio, potete anche decidere di usare gli insiemi di link di AdSense, che come rendimento non hanno niente da invidiare agli altri, anzi, vista la posizione particolare potrebbero essere preferibili.

Potete anche usare entrambe le soluzioni: per esempio, un annuncio grande sopra il post, e un insieme di link dentro. Ma la regola del chi troppo vuole nulla stringe vale sempre: se riempite troppo di annunci il post, la sua lettura diventerà difficile, e al tempo stesso correte il rischio di far “perdere valore” ai vostri click.

Gli annunci testuali dovrebbero avere un rendimento nettamente migliore di quelli illustrati, ma consiglio sempre di provare le varie soluzioni.

Ricordatevi che una volta creato l’annuncio, passeranno almeno dieci minuti prima che sia visibile.

Prepariamo il codice

Una volta creato l’annuncio, dovrete usare lo strumento di cui ho parlato in questo post per adattare il codice HTML di AdSense a quello XML del template di Blogger.

Quando avrete fatto, il codice ottenuto va inserito tra:

<span style='float: left; margin: 10px 5px 5px 0px;'>

e

</span>

per avere l’annuncio allineato a sinistra. Se volete invece l’annuncio allineato a destra, come prima porzione di codice usate questa:

<span style='float: right; margin: 10px 0px 5px 5px;'>

Notate che tramite margin impostiamo il margine da lasciare intorno all’annuncio, partendo dall’alto e girando in senso orario. Queste sono definizioni CSS che regolano l’aspetto del vostro template.

Visualizzare l’annuncio solo nella pagina del post

Se volete visualizzare l’annuncio AdSense solo nella singola pagina del post (come faccio io), racchiudete ulteriormente tutto il codice tra:

<b:if cond='data:blog.pageType == &quot;item&quot;'>

e

</b:if>

Questa operazione si rende necessaria perchè lo stesso tipo di annuncio non può essere visualizzato più di tre volte, per cui nella pagina iniziale del blog i primi tre annunci lo avranno e gli altri no, con un effetto grafico non certo piacevole.

Inserire il codice nel template

Andate in Layout->Modifica HTML, selezionate “Espandi i modelli widget” e cercate la seguente porzione di codice:

<div class='post-body'

E subito sopra incollate il codice AdSense che avete ottenuto. Se non riuscite a trovare questa porzione di codice, cercate questa:

<p><data:post.body/></p>

E sempre subito sopra incollate il codice AdSense. L’annuncio verrà visualizzato automaticamente in tutti i post.

A questo punto non vi resta che salvare il template e il gioco è fatto.

Se fate questa modifica, mi piacerebbe avere un vostro riscontro sull’andamento dei click e dei guadagni per condividerne le impressioni.

Condividi su Facebook, Twitter o Google Buzz:
Condividi su Facebook Condividi su Twitter Pubblica su Google Buzz

Per ricevere direttamente in posta i nuovi articoli, inserisci il tuo indirizzo email:
oppure puoi iscriverti al feed per tenerti sempre aggiornato sui nuovi contenuti del blog!
Per maggiori informazioni sui feed, clicca qui!

31 commenti:

Den ha detto...

Io per il momento preferisco non occupare molto spazio del post da annunci.
Anche se so che il guadagno sarebbe maggiore, preferisco mettere solo "una striscia" nel post, e gli altri nella sidebar.
Beh, sarà che devo ancora studiare bene le migliori posizioni... :-)
Poi ho notato che in questo nuovo template l'annuncio illustrato è più piccolo al precedente. Se la colonna è più stretta è ovvio che la parte dei post sarà più larga, e questo è un bene! Volevo sapere però quale dimensione hai usato.

Claudio Pomhey ha detto...

molto incuriosito anche io, per ora non ti copio, attendo i tuoi risultati.

il problema è che io su tanti articoli ho messo una immagine proprio in quella posizione dunque dovrei spostarla per non fare un casotto.

Cmq questo stile lo usa il super blog americano mydigitalife.info quindi sarà abbastanza redditizio

Recenso ha detto...

Io l'ho fatta 2 gg fa perché l'ho vista su un blog che seguo e ora vediamo, anche se penso ci voglia un blog mooolto visitato per risultati attendibili.
Per adesso non modifico i post

gaber ha detto...
Questo commento è stato eliminato dall'autore.
Felipegonzales ha detto...

Io con la pubblicità c'ho mollato perchè i guadagni erano troppo ridicoli... ma ti vorrei chiedere un consiglio, visto la tua dimestichezza. Non riesco più ad inserire un'immagine al posto del titolo del mio blog. Forse per il tipo di layout "a tutta pagina"? ho provato a spuntare anche "adatta", ma niente da fare. Sai darmi qualche dritta?

vicio ha detto...

brv hai rimesso la barra delle ricerche questo tornera' utile a molti ciao!

neurone in disordine ha detto...

a prescindere dal fatto che la nuova veste grafica del tuo blog è veramente bella (efficace ed efficiente)... ora ti chiedo: inserendo gli annunci all'interno del post non pensi che si dovrebbe trovare una soluzione per differenziarli "visivamente" dal contenuto dell'articolo (magari con uno sfondo di colore differente)?

neurone in disordine ha detto...

ops... ho dimenticato di salutarti... ciao... marco

lella ha detto...

Ciao Tenebrae,ti ho taggato nel mio ultimo post per una iniziativa interessante e volevo sentire la tua opinione.
Vienimi a trovare
Buon w.e.
Lella

Francy ha detto...

ciao ti scrivo qui perchè non ho trovato la tua mail, ho messo il link di creare blog sul mio blog:
http://scripposcrappo.blogspot.com/
poi devo domandarti una cosa, per mettere tre colonne nel tuo blog ho seguito le indicazioni del tuo post ma ho un problema perchè le larghezze sono indicate in percentuale. Come posso fare?
Grazie da Francy

Sercri ha detto...

Ciao,ho scaricato un template per poter inserire pubblicità ma non riesco a centrare gli annunci, ti prego puoi aiutarmi? Il risultato lo puoi vedere su "occasionidiguadagno.blogspot.com"
Cosa faccio !!!!
Grazie

Sercri ha detto...

Dimenticavo,il template è a 4 colonne
Sergio

Tenebrae ha detto...

@francy: semplice, utilizza le percentuali nella width, invece dei pixel, considerando che la somma deve fare 100... per esempio 25% per le colonne laterali, e 50% per quella dei post... prova e fammi sapere!

@sergio: per centrare gli annunci basta inserirli tra

<center>

e

</center>

Tenebrae ha detto...

@felipe: l'immagine si trova sul tuo pc o da qualche parte in rete?

@vicio: non l'ho mai tolto, non ci hai fatto caso ;)

@neurone: si dovrebbe... perchè? per migliorare la leggibilità del post o per aumentare la visibilità dell'annuncio?

dagherrotipo ha detto...

so di chiederti fin troppo ma . . . ho perso gli occhi sul codice html del layout per trovare la stringa span style . . . ecc., mi potresti dire al'incirca a che altezza si trova nel codice ?
Grazie ancora e complimenti per tutto !

Dagherrotipo

Tenebrae ha detto...

@dagherrotipo: in realtà rileggendo il post ho visto che non ho indicato il punto di inserimento del codice nel template... l'avevo già fatto in altri post (che linko nell'articolo) e senza volerlo l'ho dato per scontato

Ho modificato il post, adesso non dovresti avere più problemi

giuliana ha detto...

Ciao Tenebrae,grazie ai tuoi preziosi consigli sono riuscita a rinnovare il template del mio blog:http://cannellaecioccolato.blogspot.com;ti prego non inorridire,non è proprio il max ma per me è già tanto averlo fatto solo seguendo i tuoi post...ti ho doverosamente linkato...grazie!

Anonimo ha detto...

ciao..non riesco a trovare la tua mail per il tuo blog così scrivo qui..

Questo è il mio blog: http://hyip-earn.blogspot.com e vorrei sapere come poter tracciare attorno a tutti gli elementi(i post, gli elementi della pagina,..ecc..) un bordo nero per poter riuscire a fare un pò piu d'ordine..

E poi ti chiedevo come posso mettere gli annunci di adsense nell'header..

Grazie mille..puoi anche rispondermi dicendomi direttamente linkandomi delle guide..

Noy a.k.a. Manah ha detto...

Ciao! Ma, è questo il sistema per 'far cadere' un messaggio di AdSense nel bel mezzo del post, ad esempio dopo il 'read more'?

Tenebrae ha detto...

@noy: ciao peppe, no, lo fai mettere in alto dentro il post, come vedi ora ho io nel blog

ma quello di cui parli è una cosa su cui sto studiando

Anonimo ha detto...

Tenebrae ho visto che hai ripreso a mettere gli annunci adsense non allineato a sinistra. E' pereché non ti piace o perché alla fine rendono di più

Tenebrae ha detto...

@anonimo: presto pubblicherò un post sull'argomento

Mondo Msn ha detto...

Ciao Tenebrae, ho notato che non hai effettuato più un post, su adsense con i CSS e inoltre hai rimesso gli annunci nella stessa posizione precedente, dunque ti volevo chiedere, sai dirmi come rendono questi annunci con i CSS? Grazie e veramente complimenti per il blog

peppe genchi ha detto...

sei un grande!

Giuseppe ha detto...

ciao tene, volevo chiederti se era possibile inserire non solo annunci adsense ma anche un banner, in mezzo all' articolo, ossia ad esempio dopo un certo tot di caratteri non riesco proprio a fare questa modifica, anche perchè non ho trovato niente al rigurdo su creareblog

Tenebrae ha detto...

@giuseppe: è una cosa su cui sto lavorando anch'io :) appena avrò notizie le posterò qui

Debor@h ha detto...

ciao mi chiamo deborah è da un pò che m aiuto in questo blog... volevo kiedere come si fa ha inserire alla fine den singolo post un annuncio, cioè vale a dire prima di "POSTA UN COMMENTO" ciao grazie in anticipo..

Tenebrae ha detto...

@deborah: buon suggerimento, ci stavo pensando anch'io, magari scriverò un articolo in proposito

方松腾 ha detto...

cheap jordans
michael kors outlet online,michael kors,kors outlet,michael kors outlet,michael kors handbags,michael kors outlet online sale,michael kors handbags clearance,michael kors purses,michaelkors.com,michael kors bags,michael kors shoes,michaelkors,cheap michael kors
mulberry handbags
tory burch outlet online
swarovski crystal
canada goose coats
toms outlet
michael kors factory sale
giuseppe zanotti sale
nba jerseys wholesale
fitflops shoes
hollister pas cher
longchamp outlet online
cheap mlb jerseys
swarovski outlet
swarovski outlet

林剑伟 ha detto...

oakley store online
tiffany and co uk
mlb jerseys authentic
nike kobe sneakers
tiffany and co outlet
http://www.2016michaelkorsoutlet.us.com
cheap oakley sunglasses
toms outlet
tiffany and co
http://www.chromeheartsonline.us.com
michael jordan shoes
http://www.huarachesshoes.co.uk
oakley vault
retro jordans
cheap real jordans
kobe byrant shoes
oakley sunglasses
fitflops outlet
tiffany and co
ray ban sunglasses outlet
michael kors handbags,michael kors handbags outlet,michael kors purses outlet,cheap michael kors handbags,cheap michael kors purses
chrome hearts
Michael Kors Outlet Store
Michael Kors Handbags
air jordan retro
michael kors outlet online
kobe shoes
kobe byrant shoes
ralph lauren uk
http://www.raybanglasses.in.net
nike zoom kobe
http://www.huarachesshoes.uk
air jordan
http://www.rayban-sunglasses.uk
oakley sunglasses

xiaozhengsen ha detto...

2017-5-30 xiaozheng6666
oakley sunglasses wholesale
cheap oakley sunglasses
kate spade outlet store
adidas shoes for men
coach outlet
mcm backpack
coach outlet online
oakley sunglasses
pandora outlet online
oakley sunglasses


Prima di lasciare un commento, leggete qui

Posta un commento