Annunci AdSense nel primo post su Blogger anche nella pagina principale del blog


Molti su Blogger hanno scelto di inserire gli annunci AdSense nel proprio blog senza ricorrere ai posizionamenti proposti da Google (“visualizzazione annunci tra post”) ma scegliendo come me di visualizzarli all’inizio e alla fine del singolo post, magari seguendo l’articolo scritto tempo fa su come farlo. Il “punto debole” di questa strategia è che la pagina principale del blog e quelle dell’elenco degli articoli per categorie rimangono scoperte da quegli annunci, a meno che non si ricorra a elaborate modifiche.

Da qualche tempo però Google ha messo a disposizione un codice che permette di identificare il primo post visualizzato, e questa piccola modifica apre la strada a innumerevoli possibili modifiche ai template di Blogger. La prima che mi è venuta in mente è proprio quella di sfruttare meglio la pagina principale del blog (e quelle dell’elenco dei post per categoria) per gli annunci AdSense:

image

Approfitterò dell’occasione per provare il rendimento di questi nuovi annunci e per tenervi aggiornati sul blog. Nel frattempo, se volete inserirli anche voi, vediamo come fare la modifica.

Era possibile anche farlo prima

In realtà modifiche come questa potevano essere fatte da sempre, tramite un semplice codice Javascript che contasse i post visualizzati. Il problema è che in questo modo il codice degli annunci, o qualsiasi altro elemento avessimo deciso di aggiungere, verrebbe comunque caricato dal browser, appesantendo inutilmente il caricamento del blog. Con il nuovo tag inserito nel codice del template, invece, sarà il server di Blogger a decidere preventivamente quali parti del template visualizzare o meno, alleggerendo il lavoro a carico del browser.

Generiamo gli annunci

Per prima cosa creiamo i nuovi annunci da inserire sopra e sotto il post, seguendo le istruzioni già fornite in questo articolo. Per il formato io ho deciso di usare un banner 486x60 con soli annunci di testo, per non stravolgere troppo l’aspetto del mio template. In altri contesti, altri formati di annunci potrebbero andare meglio.

Ricordatevi sempre che gli annunci devono essere sempre tre per tipo, quindi se avete già più di un annuncio presente nella pagina principale del blog fate i vostri conti.

Anche se il formato dei due annunci è lo stesso, ho preferito generare due diversi insiemi, per monitorarne meglio il rendimento con l’uso dei canali.

Modifichiamo il template di Blogger

Da Layout->Modifica HTML, selezioniamo “Espandi i modelli widget” e cerchiamo questa riga di codice:

<data:post.body/>

La riga potrebbe essere leggermente diversa, ma di certo troveremo sempre l’elemento post.body. Subito sopra, incollate il seguente codice:

<!-- annuncio sotto il titolo del primo post, inizio -->
<b:if cond='data:post.isFirstPost'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>

... codice adsense ...

</b:if>
</b:if>
<!-- annuncio sotto il titolo del primo post, fine -->

Ovviamente dovrete sostituire la parte in rosso con il vostro codice AdSense. Per i tecnici, isFirstPost è la parolina magica che permette di identificare il primo articolo. Con questa modifica l’annuncio apparirà sotto il titolo del primo post, ma prima del corpo dell’articolo.

Per inserire anche l’annuncio sotto, ritornate a:

<data:post.body/>

E subito sotto inserite:

<!-- annuncio sotto il primo post, inizio -->
<b:if cond='data:post.isFirstPost'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>

... codice adsense ...

</b:if>
</b:if>
<!-- annuncio sotto il primo post, fine -->

Usando questa volta il codice dell’annuncio AdSense che avete scelto di far apparire sotto.

Il risultato è possibile vederlo nell’immagine di apertura di quest’articolo.

Anche con i CSS

Alcuni hanno scelto di utilizzare la modifica alternativa che avevo proposto tempo fa inserendo gli annunci tramite CSS per farli apparire parte integrante dei post:

image

Anche in questo caso può essere applicata la stessa logica, basta racchiudere tutto il codice tra

<b:if cond='data:post.isFirstPost'>

e

</b:if>

Senza però aggiungere il codice che indico nella sezione “Visualizzare l’annuncio solo nella pagina del post.

Per concludere

Certe modifiche alla visualizzazione degli annunci danno una vera e propria spinta in avanti al rendimento complessivo di un blog. Questa potrebbe essere una di quelle, o forse no, ma vale la pena provare. Ovviamente l’impatto varia molto da blog a blog, a seconda del template usato, quindi se volete un riscontro la cosa migliore è fare voi stessi la modifica e vedere come va.

L’importante è non stravolgere troppo la grafica del blog ed essere sensibili alle critiche dei lettori per capire se l’impatto non è gradito.

Il nuovo tag nel codice del template, come dicevo, apre le strade a infinite possibili modifiche, ad esempio la visualizzazione del primo post con font diversi (per enfatizzarlo), o solo il suo titolo. A voi eventuali proposte.

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!

21 commenti:

Elisabetta ha detto...

credo sia questo l'articolo,Orazio..a cui facevo riferimento nel terzultimo tuo articolo..scusa se posto il commento qui..:)
grazie..comunque per tutto cio' che fai!!!:)

Articoli e commenti recenti: due nuovi gadget facili da installare e personalizzare

Vinnie ha detto...

Ottima modifica,

però da me non va purtroppo. Quando vado a inserirli non vengono visualizzati solo nel primo post ma anche in tutti gli altri, riducendo inoltre il numero di post visualizzati in Home (da 7 a 4)e visualizzando nell' ultimo post la stringa di codice: "annuncio sotto il primo post, fine"

Nel xml ho due data:post.body/, la modifica l' ho provata per entrambe le stringhe ma niente da fare. Sicuramente dipende da come è impostato l' xml del mio template.

Comunque bella modifica e la quoto ugualmente.

P.S. Parse HTML lo hanno risistemato (menomale):)

Admin ha detto...

Fantastico, blogger cresce sempre più speriamo di arrivare ai livelli di wordpress o joomla. Grande Ten...

Tenebrae ha detto...

@vinnie: il tuo problema era colpa mia, o meglio di una formattazione automatica di windows live writer... ho sistemato il codice, riprova e fammi sapere come va!

Vinnie ha detto...

Stesso problema Tenebrae, dipende sicuramente dal mio template.

Dopo aver convertito il tutto con Parse HTML, lo incollo prima o dopo la riga di codice indicata e mi da questo problema.

Le tue indicazioni sono chiare ma missà che questa modifica il mio template non la regge.

Grazie comunque ;)

LbS ha detto...

Ciao Tenebrae! Il mio blog ha preso vita da poco e si è vestito di tanti tuoi consigli! Ho letto che ti piace la cucina e tutto ciò attinente all'argomento:bhè, il mio blog non è proprio gastronomico ma ci si avvicina perchè analizzo attentamente i prodotti che compriamo al supermercato, alimentari e non, indicando quelli consigliati e quelli da evitare, consigli per risparmiare ecc ecc! Se ti fa piacere passa a trovarmi su http://spesaintelligente.blogspot.com/ e se magari ti piace lascia un tuo commento :) so che te lo chiederanno in tanti ma se ti va mi fa piacere! Complimenti per il bel lavoro svolto! Marcella

Asgard ha detto...

Aiutoooooooooo :((
riguarda gli articoli correlati (scrivo qui almeno sono sicuro che verrà letto)

l'ultimo post in merito mi funzionava fino a quando non è sparito tutto... peccato perché era molto meglio di LinkWithin...

Fatto sta che sono tornato proprio a LinkWithin... però non riesco a cambiare il colore al passaggio del mouse.... risultato? sfondo blog bianco, articolo in evidenza nero e scritta nera....

così cercando su internet ho trovato la soluzione!!!! :D
ma è in ingleseeee =))

------------

take a look at “Reset all a:hover colors” and “Use the !important declaration” chapters on part IV of the tutorial. You can set link color by using (for istance): a {color:#113242 /* deep blue } but more specific declaration on default.css will reset some link colors. Force all link colors with: a {color:#113242 !important/* links are ALWAYS deep blue*/}.

“Share This” links have a .stbutton class. So you can different style them using a code like this: a.stbutton {color:#FF0000/* sharethis links are red*/}. Remember to apply !important declaration too if you previously applied it to generic links (as I showed above) .


--------

il mio inglese si ferma qui (whot time is it :-/ )...

Tenebra saresti così gentile da spiegarmi cosa vuol dire?

ToroBiz ha detto...

grande Orazio, mi metto subito a lavoro

Unknown ha detto...

Funziona...grazie :)

Tenebrae ha detto...

@elisabetta: in questo caso abbiamo poco controllo sulla cosa, visto che è un widget di blogger... hai provato a toglierlo e rimetterlo?

se non cambia niente, proviamo ad aspettare qualche giorno per vedere se risolvono il problema

@channel: è indifferente dove lasci il commento, arriva sempre la notifica via mail... l'articolo (se lo linki ci do un'occhiata e magari ne faccio un tutorial in italiano) ti suggerisce di modificare il codice CSS utilizzando la codifica RGB dei colori, sostituendo il valore in quel a:{ che metti in evidenza

reginadiquadri ha detto...

uffi, io non riesco a metterlo....
:(
http://www.ilrestodelcarlino.blogspot.com
ho cambiato il template ed è complicatissimo apportare delle modifiche, solo in htlm e io sto iniziando ora a capirci qualcosa...non so se è perchè la porzione che indichi è in italiano mentre i comandi del template sono in inglese..boh. o forse sono oltre la quota adsense di inserimento...http://clp8uq.bay.livefilestore.com :((
j

Tenebrae ha detto...

@reginadiquadri: ne hai già 3 nella pagina principale del blog, hai raggiunto il limite.

anche eliminando gli altri, ricordati di aspettare una decina di minuti prima che gli annunci diventino visibili

Elisabetta ha detto...

grazie Orazio...si..ora l'ho levato,perche' esteticamente quel tratto di pagina bianca non era bello da vedere..grazie ancora e felica giornata!:)

greg fotter ha detto...

è possibile inserire Annunci AdSense nell'ultimo post su Blogger nella pagina principale e nelle etichette???

cioè il caso inverso di questo post... al posto che nel primo nell'ultimo inserirlo nell'ultimo...

ho provato a sostituire first con last in ma non funziona...

Roxblog ha detto...

Ciao Orazio, sai come posso cambiare il Template di blogger senza perdere tutte le impostazioni e dover ricominciare da capo?

Vinnie ha detto...

Tene ci sono riuscito. Grazie per la dritta! ;)

Vinnie ha detto...

Tene, mi viene un dubbio. Ma AdSense consente di utilizzare questa modifica si? Non è che si rischia qualcosa?..Giusto per stare tranquilli :p

Tenebrae ha detto...

@vinnie: ah eccoti, stavo guardando questo tuo problema quando ho visto che sul blog c'eri riuscito e ti ho lasciato un commento

il bello della diretta

no, nessun problema con adsense, non stai modificando il codice nè ingannando nessuno.. è la stessa modifica degli annunci nei post, ma al contrario

fammi sapere come andrà il rendimento!

Vinnie ha detto...

Ok, io invece ti ho mandato una mail poco fa, prima di leggere i commenti qui...sembra fatto a posta :)

Ti terrò aggiornato ;)

Aggiornami anche tu quando ti capita così scambiamo qualche parere e considerazione.

keira_91 ha detto...

non ci riesco ç_ç
non capisco dove caxxo sbaglio ç_ç
è da 2 mesi che ci provo ç_ç

Unknown ha detto...

oakley sunglasses
ugg outlet
michael kors outlet online
pandora charms
nike air force 1
polo outlet
longchamp handbags
ray ban sunglasses outlet
ysl outlet online
coach factory outlet
20161230caiyan


Prima di lasciare un commento, leggete qui

Posta un commento

Nota. Solo i membri di questo blog possono postare un commento.