Vi sono widget di dimensioni troppo grandi per essere mostrati anche nella versione mobile e widget troppo piccoli per essere mostrati nella versione desktop, questo significa che bisogna agire in una delle due versione per mostrare o nascondere il widget a seconda delle nostre esigenze.

Ad esempio a chi ha adottato un menù multilivello, può capitare che se lo ritrovi anche nella versione mobile, dove è invece preferibile un menù più compatto e facilmente cliccabile. Precisiamo che la seguente guida vale esclusivamente per i widget, nel caso in cui abbiate inserito del codice css o di diverso tipo (javascript) all'interno del tema, l'unico modo per escluderli da una delle due versioni (mobile o desktop) è utilizzare i tag condizionali.

La prima cosa che si deve fare è andare su Tema > Modifica HTML > Vai al widget e selezionare quello che corrisponde all'ID del proprio widget.

Ipotizziamo che l'ID del widget sia HTML5. All'interno della prima stringa del widget HTML5 bisogna integrare uno dei tre seguenti codici subito dopo la scritta 'HTML5', come nei vari esempi.

mobile='yes'

<b:widget id='HTML5' mobile='yes' locked='false' title='' type='HTML'>

Va utilizzato quando il widget in questione appare solo nella versione desktop ma si vuole farlo apparire anche nella versione mobile.

mobile='no'

<b:widget id='HTML5' mobile='no' locked='false' title='' type='HTML'>

Va utilizzato quando il widget in questione appare in entrambe le versioni ma si vuole nasconderlo dalla versione mobile.

mobile='only'

<b:widget id='HTML5' mobile='only' locked='false' title='' type='HTML'>

Va utilizzato quando il widget in questione appare in entrambe le versioni ma si vuole nasconderlo dalla versione desktop. Questa scelta comporta che il widget scompare anche dalla sezione layout se starete utilizzando un computer per fare queste modifiche. Il widget ricompare nuovamente se rimuoverete questo codice dal tema.

Continua a leggere »

Quando su Blogger si presenta un errore permanente o temporaneo appare un codice formato da lettere e numeri, per capire a cosa mi riferisco suggerisco di vedere la lista dei codici di errore di Blogger. A volte può succedere che a seguito di un codice installato direttamente nel modello di Blogger in una zona sbagliata, si vengano a creare dei problemi agli altri widget e non appare alcun codice di errore. Col passare del tempo ci si accorgerà che il blog non risponde come dovrebbe, tuttavia avendo inserito altri codici e modificato sempre di più il modello, l'individuazione del codice problematico risulterà ancora più complessa. Non è un problema molto comune ma in questo blog è tutt'ora presente e anche altri mi hanno confermato di avere lo stesso problema.

Questo errore di cui vi parlo è presente nella sezione Layout: trascinando i widget o semplicemente invertendoli di posto e infine salvando la disposizione, apparirà un messaggio di errore con scritto "Si è verificato un errore. Aggiorna la pagina e riprova". In sintesi, è possibile aggiungere i gadget ma non trascinarli.

Al momento conosco due soli metodi per ovviare al malfunzionamento del trascinamento dei widget.

1° Metodo

Questo metodo è il più drastico perché resetta l'intero modello allo stato iniziale facendovi perdere tutto ciò che avete inserito nel modello (es. widget articoli simili, personalizzazioni riguardanti il colore e lo stile ecc.), però è anche il più semplice da applicare. 

Dovete andare su Modello > Modifica HTML e poi fare click su Ripristina modelli widget ai valori predefiniti. Al termine di ciò il vostro modello sarà "sano" e non presenterà alcun errore!

2° Metodo

Questo metodo non va a risolvere il problema, però permetterà ugualmente di trascinare i widget direttamente dal codice del modello attraverso un procedimento non proprio alla portata di tutti. È quello che sto utilizzando su Scuolissima!

La prima cosa che dovete fare è aggiungere il gadget del widget interessato in una qualsiasi posizione. Poi dovete individuare l'ID del widget appena creato. (es. HTML10)

Andate su Modello > Modifica HTML e cercate l'ID di questo widget attraverso la casella di ricerca del modello (non quella del browser). Dovete fare click sulle freccette nere ► per espandere il codice contenuto in quella riga e poi selezionare e tagliare tutto il codice contenuto da <b:widget fino a </b:widget> come nel seguente screenshot:

Per sapere in quale punto andare mettere il codice selezionato, dovrete cercare l'ID di un altro widget e poi incollarlo appena prima o subito dopo di esso, a seconda della posizione che gli si vuole dare.

Continua a leggere »

Il team di Blogger ha introdotto un nuovo widget che ritengo parecchio utile per qualsiasi tipo di blog, è chiamato "Post in evidenza" proprio perché permette di dare risalto agli articoli pubblicati che riteniamo importanti o che potrebbero interessare ai propri visitatori. Un buon modo per ridare valore a quei vecchi articoli che sembravano essersi smarriti in mezzo a tutti gli altri.


Eccovi un'anteprima di come si presenta il widget:

Nell'immagine dell'esempio potete notare che è stato messo in risalto l'articolo sulle frasi del mese di Dicembre, è la prima cosa che mi è venuta in mente da mettere in evidenza, dato che al momento in cui scrivo questa ci troviamo proprio in questo mese dell'anno. I più furbi potrebbero sfruttare questo widget per mettere in primo piano cose più utili anche dal punto di vista economico come ad esempio un articolo che parla del proprio ebook in vendita o prodotti da acquistare online a tema con il proprio blog. Penso che potrebbero essere utile cambiare di tanto in tanto il post in evidenza, giusto per dare una "rinfrescata" al proprio blog.

Come si installa

Essendo un widget ufficiale di Blogger basta semplicemente andare su Layout > Aggiungi un gadget > Post in evidenza.

Tra le opzioni possibili vi è quella di aggiungere un titolo al gadget, se mostrare o nascondere il titolo del post (indispensabile perché è l'unico modo per renderlo cliccabile) e se inserire l'immagine del post (di solito è l'elemento che attira maggiormente).

È presente sia la casella di ricerca nelle impostazioni del widget sia un menù a tendina per selezionare il post partendo da una etichetta, il che rende molto semplice la ricerca del'articolo in questione.

Come sfruttarlo al meglio

Chi ne è capace può sfruttare i cosiddetti tag condizionali, ad esempio su Scuolissima ho pensato che sarebbe stato più sensato nascondere questo widget dalla homepage che è già ricca di immagini e mostrarlo in tutte le altre pagine del blog.

In alternativa si potrebbe spostare il widget "Post in evidenza" sopra la sezione "Post sul blog" e poi eventualmente con i tag condizionali mostrarlo solo nella homepage. In questo modo l'articolo rimarrà sempre in primo piano pur avendo una data vecchia.

Ricordo che è possibile aggiungere un solo widget di questo tipo, tuttavia non credo sia così difficile "emularlo" utilizzando nel giusto modo HTML e CSS.

Personalizzazione avanzata

RIMUOVERE LA DESCRIZIONE

La descrizione può essere tolta andando su Modello > Modifica HTML e cercando la parola FeaturedPost1 . Dopodiché dovrete eliminare una parte di codice, ovvero:

<p>
      <data:postSummary/>
    </p>

RENDERE L'IMMAGINE CLICCABILE
Allo stato originale l'immagine non risulta cliccabile, per inserire un link nell'immagine in modo tale che una volta cliccata permette di aprire l'articolo in evidenza (come invece già avviene con il titolo) occorre eseguire un ulteriore modifica.

Dovrete cercare questo codice:

<img class='image' expr:src='data:postFirstImage'/>

ed andarlo a sostituire con quest'altro:

<a expr:href='data:postUrl'><img class='image' expr:src='data:postFirstImage'/></a> 

RIDIMENSIONARE L'IMMAGINE
L'immagine del post in evidenza potrebbe risultare visibilmente più piccola della sidebar, per cui sarebbe opportuno modificare le sue dimensioni. Sempre prendendo in considerazione lo screenshot precedente, dovrete modificare width: 100%; con un valore in pixel, ad esempio:

.image {
      width: 300px;
    }

Questo sono tutte le personalizzazioni possibili, adesso godetevi questo splendido widget!

Continua a leggere »

Chi ha avuto la fortuna di creare un sito monotematico, ovvero in cui tutti gli articoli pubblicati ruotano attorno ad un tema principale, troverà sicuramente utile questo widget. Esso permette di creare una mappa del blog per gli utenti in modo da ottimizzare la ricerca interna. Se ad esempio il vostro blog ha come tema principale la "cucina", vi apparirà l'elenco di tutte le etichette utilizzate in un'unica pagina (colazione, merenda, dolci, primi piatti ecc.), poi facendo click su ciascuna categoria, vi verranno mostrati tutti i post pubblicati contenuti in ciascuna etichetta sempre rimanendo all'interno della stessa pagina.

Questa è un'anteprima di ciò che verrà fuori:

Come potete vedere a destra è presente l'elenco di tutte le etichette, anche se dovreste averne molte la pagina rimarrà corta perché viene utilizzata la scrollbar verticale.

Per ottenere questo risultato dovete creare una pagina o un articolo ed incollare il codice seguente all'interno della modalità HTML e, quindi, senza mai andare su "Scrivi".

<style>#elenco-etichette{float:left;margin:20px 5% 20px 0;width:27%;height:900px;margin-top:-2px;overflow-x:hidden;overflow-y:auto;line-height:18px;border:1px solid #ccc}
#elenco-etichette ul{margin:0;border-top:0px solid #ccc;padding:0}
#elenco-etichette ul li{list-style-type:none;margin:0;border-right:1px solid #ccc;border-bottom:0px solid #ccc;border-left:0px solid #ccc;padding:0}
#elenco-etichette ul li a{display:block;padding:10px;border-bottom:1px solid #ccc;}
#elenco-etichette ul li:last-child a{border-bottom:none;}
#elenco-etichette ul li a,#link-nav a{background:#fff;color:#71B2CF;text-decoration:none}
#elenco-etichette ul li a,#link-nav a,#link-nav span{font-size:14px}
#elenco-etichette ul li a:hover,#link-nav a:hover{background:#FF8100;color:#fff}
#elenco-post{float:left;width:67%;line-height:1.5em}
#elenco-post ul li{list-style-type:none;margin-left:-40px}
#link-nav{padding:20px 0}
#link-nav a{margin-right:10px;border:1px solid #ccc}
#link-nav a,#link-nav span{padding:5px 10px}
#link-nav span{float:right}
@media screen and (max-width:800px){
#elenco-etichette{width:35%;}
#elenco-post{width:59%;}
}
@media screen and (max-width:560px){
#elenco-etichette{width:100%;margin:20px 0}
#elenco-post{width:100%;}
}</style>
<div id='elenco-etichette'></div>
<div id='elenco-post'>
<script type='text/javaScript'>
var cat_home='http://www.scuolissima.com';cat_numb=20;cat_pre='Precedente';cat_nex='Successivo';
var cat_name;var cat_start;var cat_class;
function show_post2(a){var tt=a.feed.openSearch$totalResults.$t;dw='';dw+='<ul>';for(var i=0;i<cat_numb&&i<a.feed.entry.length;i++){var entry=a.feed.entry[i];cat_title=entry.title.$t;for(var j=0;j<entry.link.length;j++){if(entry.link[j].rel=='alternate'){var cat_url=entry.link[j].href}}dw+='<li>';dw+=(cat_start+i)+'. <a href="'+cat_url+'" rel="nofollow" title="'+cat_title+'">'+cat_title+'</a>';dw+='</li>'}dw+='</ul>';dw+='<div id="link-nav">';if(cat_start>1){dw+='<a href="" onclick="show_post(\''+cat_name+'\',\''+(cat_start-cat_numb)+'\',\''+cat_class+'\');return false" title="'+cat_pre+'">'+cat_pre+'</a>'}if((cat_start+cat_numb-1)<tt){dw+='<a href="" onclick="show_post(\''+cat_name+'\',\''+(cat_start+cat_numb)+'\',\''+cat_class+'\');return false" title="'+cat_nex+'">'+cat_nex+'</a>'}dw+='<span>'+cat_start;if(cat_start!=tt){dw+=' – '+(cat_start+i-1)}dw+=' / '+tt+'</span>';dw+='</div>';document.getElementById('elenco-post').innerHTML=dw+'<style type="text/css">.cat-'+cat_class+' a{background:#FF8100!important;color:#fff!important}<\/style>'}function show_post(a,b,c){var d=document.getElementsByTagName('head')[0];e=document.createElement('script');e.type='text/javascript';e.setAttribute('src',cat_home+'/feeds/posts/default/-/'+a+'?alt=json-in-script&start-index='+b+'&max-results='+cat_numb+'&callback=show_post2');d.appendChild(e);cat_name=a;cat_start=parseInt(b),cat_class=c}function show_cat(a){var cat=a.feed.category;dw='';dw+='<ul>';for(var i=0;i<cat.length-1;i++){for(var j=i+1;j<cat.length;j++){if(cat[i].term>cat[j].term){cat_hv=cat[i].term;cat[i].term=cat[j].term;cat[j].term=cat_hv}}}for(var i=0;i<cat.length;i++){dw+='<li class="cat-'+i+'">';dw+='<a href="" onclick="show_post(\''+cat[i].term+'\',\'1\',\''+i+'\');return false" title="';dw+=cat[i].term;dw+='">';dw+=cat[i].term;dw+='</a>';dw+='</li>'}dw+='</ul>';document.getElementById('elenco-etichette').innerHTML=dw}document.write('<script type="text/javascript" src="'+cat_home+'/feeds/posts/default?alt=json-in-script&max-results=0&callback=show_cat"><\/script>');
</script>
</div>
<div style='clear:both'></div>

Personalizzazioni

Titoli etichette: color:#71B2CF; 

Sfondo etichette: cercare i due FF8100 e sostituirli con un altro codice esadecimale.

Numero dei post: cat_numb=20; il seguente numero può essere aumentato o diminuito.

Altezza etichette: come ho già detto è presente una barra di scorrimento verticale, tuttavia è possibile aumentare o diminuire l'altezza dell'elenco delle etichette modificando il seguente valore numerico height:900px .

Dovete sostituire l'indirizzo link del blog, attualmente ho messo quello di scuolissima (www.scuolissina.com).

Le parole PRECEDENTE e SUCCESSIVO possono essere modificate a proprio piacimento.

Continua a leggere »

Chi sostiene che Blogger non sia una piattaforma ottimizzata per i motori di ricerca non sta dando una risposta del tutto errata, infatti ho notato che per impostazione predefinita tutti i post o articoli di Blogger utilizzano il tag H3, quando invece ci sarebbe dovuto essere il tag H1. Il tag  H1 serve a racchiude sia il titolo del blog (o il logo) sia il titolo dei post mentre il tag H3 andrebbe utilizzato all'interno dei post o come titolo per i widget. Non credo che avere un tag sbagliato possa influire così negativamente sullo stato del blog ed infatti su Scuolissima me ne sono accorto solo dopo 3 anni e non è mai successo nulla di anomalo, tra l'altro quasi tutti i blog su Blogger (anche quelli importanti) non hanno mai eseguito questo tipo di modifica (probabilmente non è così necessaria). Anche dopo aver modificato il tag del titolo in H1, non ho notato immediati vantaggi, tuttavia consiglio di eseguire questa modifica solo ai più esperti.

Per ottimizzare i titoli dei post su Blogger sostituendo il tag H3 con il tag H1, bisogna andare su Modello > Modifica HTML e cercare il seguente codice:

<h3 class='post-title entry-title' itemprop='name'>

Dovrete sostituire h3 con h1, e poi più in basso dovrete sostituire </h3> con </h1>.

Questa modifica vi permetterà di avere il tag H1 negli articoli della versione desktop del tema. Per fare in modo che si visualizzi anche nella versione mobile, dovrete cercare questo codice:

<b:includable id='mobile-index-post' var='post'>

poi espanderlo cliccando sul simbolo ► presente alla sua sinistra e infine sostituire i due h3 con h1, come illustrato in figura:

Per fare in modo che questa modifica funzioni sulla versione mobile, occorre selezionare il modello Personalizza perché è l'unico che riconosce le modifiche apportate al modello.

Personalizzazioni

Allo stato attuale abbiamo H1 sia nei titoli dei post per chi accede da PC sia per chi accede da un dispositivo mobile come cellulari e tablet. Sembrerebbe che tutto stia funzionando per il meglio ma non è affatto così, in quanto smette di funzionare l'opzione per modificare la famiglia e le dimensioni del font del titolo dei post.

Per fare in modo che torni a funzionare come prima, bisogna cercare questo css (ce ne saranno più di uno):

h3.post-title

e tutte le volte che lo troverete, lo dovrete sostituire con:

h1.post-title

Ecco, questo è davvero tutto!

Continua a leggere »

Le etichette di Blogger sono la versione italiana dei tags di Wordpress, in un vecchio articolo ho scritto cosa sono e a cosa servono, e in poche parole servono a fare ordine tra i molteplici articoli di cui è costituito un blog attraverso l'inserimento di un menù, la funzione articoli simili o correlati di un widget ecc.. Tuttavia mi è stato fatto notare che è difficile "prenderle", ovvero trovare il link di una etichetta. Infatti in fase di scrittura di un post è vero che appaiono tutte le etichette sul menù di destra, ma non è possibile prenderne il link diretto.


Dato che le etichette si creano aggiungendole in un articolo o post, quello che dobbiamo fare è assicurarci che il post abbia una etichetta. Poi dalla sezione Layout, si deve cliccare su Modifica nel riquadro chiamato Main (Post sul blog). Si mette il segno di spunta su etichette (io l'ho chiamate "Categoria") e infine si Salva la modifica effettuata.

Adesso sotto il post a cui è stata assegnata l'etichetta, questa sarà finalmente visibile e, cliccando con il pulsante destro del mouse su di essa, si aprirà un menù. Dal menù che appare bisognerà selezionare Copia indirizzo link. Come nello screenshot sottostante:

Per fare un esempio, l'etichetta "blogger" ha questo indirizzo link:

http://www.scuolissima.com/search/label/blogger

Metodo alternativo 

Se da Layout andrete ad aggiungere il gadget delle etichette, questo compito di copiare l'indirizzo link delle etichette sarà ancora più semplice perché le avrete tutte a disposizione in una lista.

Continua a leggere »

La sicurezza è sempre stata il punto forte della piattaforma Blogger, infatti non ho mai sentito che ci siano stati attacchi da parte di hacker in passato e tutt'ora oggi non si sente parlare di vulnerabilità in essa. L'unico problema legato alla sicurezza è stato risolto, riguardava il fatto che non si potesse utilizzare una connessione https, più sicura rispetto al classico http; ma adesso, attraverso il blog Google Online Security veniamo a sapere che è disponibile solo per i domini blogspot che non hanno comprato un dominio personalizzato.
Non è indispensabile avere una connessione https, tuttavia è importante se si possiede un e-commerce o comunque un qualsiasi sito che ha a che fare con la registrazione di dati e operazioni di pagamenti che per ovvi motivi richiedono una maggiore sicurezza. Altre società di hosting si fanno pagare un costo aggiuntivo per l'attivazione dell'https, mentre Blogger lo offre gratuitamente... un motivo in più per scegliere Blogger piuttosto che Wordpress.

Esistono tre vantaggi principali nell'utilizzo di HTTPS rispetto a HTTP per l'accesso al blog:

• Consente di verificare che i tuoi visitatori aprano il sito web corretto e non vengano reindirizzati a un sito dannoso.
• Consente di rilevare eventuali attacchi volti alla modifica dei dati inviati a Blogger dal visitatore.
• Aggiunge misure di sicurezza che rendono più difficile a terzi leggere le conversazioni dei visitatori, tracciarne le attività o rubarne le informazioni.

Per attivare il protocollo HTTPS su Blogspot dovete andare su Impostazioni > Di base > Disponibilità HTTPS  e poi selezionare Si.

Così facendo il proprio blog si aprirà con una connessione criptata: https://esempio.blogspot.com ma sarà sempre il visitatore a decidere se aprirlo in questo modo oppure normalmente.

Tra i vantaggi di HTTPS, oltre alla sicurezza, vi è che Google lo ritiene un fattore SEO positivo e quindi a parità di condizioni tende a premiare i siti e blog che lo utilizzano. 

Tra gli svantaggi di HTTPS vi sono il possibile malfunzionamento di alcuni modelli e widget. Inoltre sarebbe più corretto sostituire il maggior numero di link precedenti (che utilizzano http) con la nuova versione dell'url.

Come già detto, HTTPS non è disponibile per i blog con dominio personalizzato e quindi se in futuro si dovesse impostare un dominio personalizzato, la funzione HTTPS verrà disattivata.

Continua a leggere »

Da marzo 2012 tutti i blog gratuiti di Blogger hanno un problema in più da risolvere e riguarda il redirect automatico che la piattaforma blogspot esegue a seconda della posizione geografica. Invece chi ha acquistato il dominio può stare certo di non avere più questo problema. Mi riferisco all'estensione dell'url del proprio blog. Normalmente dovrebbe finire con .com ma collegandoci dall'Italia vedremo il .it mentre collegandoci dalla Francia vedremo .fr e non finisce qui, cambia di paese in paese.

Tutto questo è nato da un esigenza tecnica del team di Blogger, che a causa di varie segnalazioni ha dovuto oscurare diversi blog. Tuttavia, essendo questi vietati solamente in certi paesi, hanno pensato bene di immettere la censura solo dove questi contenuti sono considerati illegali. Secondo loro è la giusta via di mezzo tra l'eliminazione del blog e il diritto di scrivere la propria opinione... (secondo me i motivi sono ben altri ma certe cose è meglio tenersele per sé).

Dato che una regola importante SEO dice che tutti i link devono puntare su un unico dominio, di conseguenza tutti i redirect che vengono eseguiti da paese in paese, sono solo penalizzanti. Nonostante qualcuno sostiene che non sia un grossissimo problema per le visite, sarebbe opportuno risolverlo perché sui siti di statistica come Alexa perderete punteggio e anche il pagerank ne risulterà penalizzato.

Per togliere il redirect dei domini blogspot (.it, .fr, .de) dovrete andare su Modello > Modifica HTML, cercare il tag </head> e subito prima di esso dovrete inserire il seguente codice:

<script type="text/javascript">
  var blog = document.location.href.toLowerCase();
  if (!blog.match(/\.blogspot\.com/)) {
    blog = blog.replace(/\.blogspot\..*?\//, ".blogspot.com/ncr/");  
    window.location.replace(blog);
  }
</script>

Infine dovrete salvare il modello. Fatto questo tutte le volte che aprirete il vostro blog non verrà eseguito alcun redirect e vi rimarrà sempre il .com finale. Ovviamente non è una pratica che va contro il regolamento di Blogger, quindi potrete eseguirla in tutta sicurezza, sapendo che di qui in avanti avrete solo dei vantaggi rispetto a prima.

L'unico inconveniente, se così può essere chiamato, è che se state utilizzando dei widget che salvano il numero delle condivisioni dei post sui social network, perderete il conteggio che difatti ripartirà da zero.

Continua a leggere »

In passato ho scritto una guida su come sia possibile cambiare sfondo su Blogger, è una operazione molto semplice ma talvolta inutile. Un immagine messa come sfondo tende a rallentare il caricamento del blog e alla fine gli utenti prediligono sempre i colori chiari, come il bianco, basti pensare che Google e Wikipedia possiedono entrambi uno sfondo bianco e nessuno si è mai lamentato di nulla. Quindi è inutile scervellarsi troppo alla ricerca dello sfondo perfetto, vince sempre la semplicità. Se nonostante il mio suggerimento, siete ugualmente intenzionati a cambiare sfondo, giusto per dare una rinfrescata al blog, vi invito a proseguire la lettura di questo articolo, dove vi sarà spiegato come cambiare il colore dello sfondo automaticamente.

Per cambiare automaticamente il colore dello sfondo andremo ad utilizzare uno script jQuery, ogni volta che si aggiornerà la pagina, apparirà uno sfondo differente da quello precedente. Quindi tutto quello che dovete fare è andare su Modello > Modifica HTML, cercare il tag </head> e poi prima di esso dovrete aggiungere il codice seguente:

<script type='text/javascript'>//<![CDATA[
function get_random_color(){var e="0123456789ABCDEF".split("");var t="#";for(var n=0;n<6;n++){t+=e[Math.round(Math.random()*14)]}return t}$(function(){$(".content").each(function(){$(this).css("background-color",get_random_color())})})//]]></script>

Poi dovete anche inserire lo script jQuery aggiornato, se già risulta presente non dovrete installarlo una seconda volta.

Spero che questo tutorial sia stato di vostro gradimento :-)

Continua a leggere »

Quasi tutti ci siamo lamentati della cookie law ma un problema ancora più grosso per chi gestisce a guadagna tramite un sito o blog su internet si chiama Adblock. Questa estensione per browser è diventata una app per smartphone e tablet, quindi adesso è diventato ancora più facile togliere la pubblicità. Se da una parta ci sarà l'utente felice di navigare indisturbato, dall'altra ci sarà colui che gestisce il sito o il blog a sue spese, che si vedrà ridottoìi, e anche di molto, i suoi guadagni. Questo significa che il web sta cambiando, non basta più la passione per sopravvivere in questa "giungla" ma che bisogna adattarsi. Parlo per esperienza e vi avviso che è davvero difficile convincere una persona a smettere di usare Adblock, crea dipendenza, ma più che altro lo si trova già attivo e funzionante su ogni sito ed è più noioso disattivarlo ed impostare un filtro sul sito considerato buono che abilitarlo. Gli utenti che utilizzano Adblock devono avere dei buoni motivi per disattivarlo, per esempio gli si potrebbe bloccare alcuni contenuti o meglio ancora l'intero sito.

In questo articolo vi presento uno script anti Adblock funzionante per Blogger e ideato dal sito Anti-adblok che serve a bloccare gli utenti che utilizzano Adblock. L'installazione è molto semplice, dovete andare su Layout > Aggiungi un gadget > HTML/Javascript e poi incollare il seguente codice:

<style>#cc55{position:fixed!important;position:absolute;top:0;top:expression((t=document.documentElement.scrollTop?document.documentElement.scrollTop:document.body.scrollTop)+"px");left:0;width:100%;height:100%;background-color:#fff;opacity:0.9;filter:alpha(opacity=90);display:block}#cc55 p{opacity:1;filter:none;font:bold 16px Verdana,Arial,sans-serif;text-align:center;margin:20% 0}#cc55 p a,#cc55 p i{font-size:12px}#cc55 ~ *{display:none}</style><noscript><b id=cc55><p><br>Per favore riabilità Javascript!<br>Please enable JavaScript!<br />Bitte aktiviere JavaScript!<br />S'il vous pla&icirc;t activer JavaScript!<br />Por favor,activa el JavaScript!<br /></p></b></noscript><script>(function(w,u){var d=w.document,z=typeof u;function cc55(){function c(c,i){var e=d.createElement('b'),b=d.body,s=b.style,l=b.childNodes.length;if(typeof i!=z){e.setAttribute('id',i);s.margin=s.padding=0;s.height='100%';l=Math.floor(Math.random()*l)+1}e.innerHTML=c;b.insertBefore(e,b.childNodes[l-1])}function g(i,t){return !t?d.getElementById(i):d.getElementsByTagName(t)};function f(v){if(!g('cc55')){c('<p onmouseover="(function(a){var i=false,b=a.lastChild,c=b.value;if(i===false&&c>0){b.value=c--;i=setInterval(function(){b.value=c--;if(c<0){clearInterval(i);b.value=\'Chiudi\';b.disabled=\'\'}},1000)}})(this);"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguGbIjsRuFUU9KjQMMHQL35v9Nb6Nk07fHuW6kvAljMGv_EOs-oKjGWL2DIgvpRr3M_2WgJ65gPsa1F0aQVsvNDkGqm4txchGSIKLMX23kW4Kpl6k8X5Y_NYNI0MNAYte85POGeI8Kjfc/s1600/anti-adblock.png" alt="Impostazioni Adblock" / / / / / / / / / / / / / / / / / / / / / /><br />Stai utilizzando Adblock!<br />Ti capiamo, molti siti abusano della pazienza degli utenti, mostrando pubblicità dappertutto.<br />Anche questo sito è supportato dalla sola pubblicità ma non è così fastidiosa come credi.<br />Non si apriranno inutili schede pubblicitarie e mai nulla si andrà a posizionare sopra i contenuti.<br />In via precauzionale, abbiamo solo impostato un attesa di 15 sec, che si avvia al passaggio del mouse.<br />Non abbiamo alcun interesse a bloccare il sito, tu pensa a disattivare Adblock e noi ti toglieremo questa stupida schermata.<br />Spero nel tuo buon senso, disattiva Adblock. :-)<br /><br />  <input type="button" onclick="(function(){document.getElementById(\'cc55\').style.display=\'none\'})()" value=15 disabled></p>','cc55')}};(function(){var a=['ad-300x250','ad-horizontal-header','ad_space_300_250','ads300Bottom','masthead_topad','specialAd_two','topAdBanner','ad','ads','adsense'],l=a.length,i,s='',e;for(i=0;i<l;i++){if(!g(a[i])){s+='<a id="'+a[i]+'"></a>'}}c(s);l=a.length;setTimeout(function(){for(i=0;i<l;i++){e=g(a[i]);if(e.offsetParent==null||(w.getComputedStyle?d.defaultView.getComputedStyle(e,null).getPropertyValue('display'):e.currentStyle.display)=='none'){return f('#'+a[i])}}},250)}());(function(){var t=g(0,'img'),a=['/adbar.','/adengage4.','/adscript_','/adv4.','/advert.','/banneradverts/ad','/loadads.','/marketing/banners_','_skybannerview.','/adb_detector.'],i;if(typeof t[0]!=z&&typeof t[0].src!=z){i=new Image();i.onload=function(){this.onload=z;this.onerror=function(){f(this.src)};this.src=t[0].src+'#'+a.join('')};i.src=t[0].src}}());(function(){var o={'http://pagead2.googlesyndication.com/pagead/show_ads.js':'google_ad_client','http://js.adscale.de/getads.js':'adscale_slot_id','http://get.mirando.de/mirando.js':'adPlaceId'},S=g(0,'script'),l=S.length-1,n,r,i,v,s;d.write=null;for(i=l;i>=0;--i){s=S[i];if(typeof o[s.src]!=z){n=d.createElement('script');n.type='text/javascript';n.src=s.src;v=o[s.src];w[v]=u;r=S[0];n.onload=n.onreadystatechange=function(){if(typeof w[v]==z&&(!this.readyState||this.readyState==="loaded"||this.readyState==="complete")){n.onload=n.onreadystatechange=null;r.parentNode.removeChild(n);w[v]=null}};r.parentNode.insertBefore(n,r);setTimeout(function(){if(w[v]===u){f(n.src)}},2000);break}}}())}if(d.addEventListener){w.addEventListener('load',cc55,false)}else{w.attachEvent('onload',cc55)}})(window);</script>

Anteprima

Questo è il risultato finale:

Come potete vedere c'è la solita immagine che vieta l'utilizzo di Adblock e poi un testo scritto da me. Volendo potete creare una pagina nel vostro blog dove non è presente questo script e potete usarla per descrivere il modo in cui bisogna disattivare adblock, e poi inserire il link in formato html proprio sotto la descrizione; in alternative invece di una pagina potete spiegare come disattivare adblock con un testo cliccabile che conduce a un'immagine.

Questo script non funziona solo con Adblock ma anche con altre estensioni meno note, e poi si attiva anche nel caso in cui un utente abbia disabilitato Javascript. 

La cosa positiva è che il contatore si avvia solo al passaggio del mouse sul testo o sul pulsante col timer. In questo modo è più probabile che gli utenti disattivino Adblock.

Personalizzazioni

Non c'è granché da personalizzare, forse il testo qualora non dovesse piacervi. È quella parte evidenziata con il colore rosso. Per andare a capo dovete utilizzare il tag <br>. Cercate di non utilizzare l'apostrofo nel testo perché altrimenti lo script smetterà di funzionare (es. un attesa, non è stato apostrofato per questo motivo)

15 = è il numero dei secondi di attesa prima che appaia il pulsante Chiudi.


Per il momento non sto usando questa soluzione su Scuolissima perché credo e spero nel buon senso degli utenti. Insomma, non è di certo questo il sito dove si prendono i virus... Ricordo che si può anche rimpiazzare la pubblicità bloccata con un banner alternativo.

Continua a leggere »

Anche su Blogger possono presentarsi dei problemi, o meglio degli errori con nomi strani formati da lettere e numeri. E' davvero raro che questi errori durino più di un paio di minuti, infatti basta semplicemente aggiornare la pagina del browser, per rendersi conto che l'errore è sparito. Se dura più del normale si può provare ad utilizzare un browser diverso da quello attualmente in uso o cancellare cache e cookie.

A titolo informativo elencherò in questa pagina i principali errori di Blogger, mentre per leggere il loro significato dovrete aprire il rispettivo link che rimanda al sito bx-codes che spiega il problema in inglese. Molti codici, anche se hanno un nome diverso, contengono la stessa spiegazione. Per sicurezza eseguite anche il backup del modello di Blogger e dei contenuti (articoli, pagine ecc.)


Lista dei codici di errore:

1. bbX-lgwej
2. bX-1us3c3
3. bX-1zu2vy
4. bX-2bdp09
5. bX-2f00qm
6. bX-2o3sed
7. bX-2v7ys6
8. bX-37qik4
9. bX-391dlh
10. bX-3d9atb
11. bX-3r3ejc
12. bX-45y3w1
13. bX-4qmsfw
14. bX-5d69vr
15. bX-5j5nhh
16. bX-5tdd1p
17. bX-677pki
18. bX-68tbuv
19. bX-6gfpx3
20. bX-6tj0s5
21. bX-6tnmaz
22. bX-6vix0l
23. bX-7auoq8
24. bX-7mplh0
25. bX-7s15tm
26. bX-85oi4e
27. bX-9pjt6o
28. bX-9w7qz9
29. bX-acffys
30. bX-afo7e2
31. bX-aw21o0
32. bX-bce8517c
33. bX-blo1ut
34. bX-btoxyn
35. bX-cf3xin
36. bX-cldfi1
37. bX-cviw8s
38. bX-d7il0a
39. bX-dalets
40. bX-dw5843
41. bX-e441ek
42. bX-ekwfjb
43. bX-f87uq5
44. bX-ftexlv
45. bX-gbdnj4
46. bX-gcdngf
47. bX-geqofh
48. bX-gfz536
49. bX-gi5hu8
50. bX-h94xv
51. bX-hqxd1g
52. bX-i54acw
53. bX-idlp73
54. bX-irbo2k
55. bX-ji78k6
56. bX-jp3d1
57. bX-kayz6v
58. bX-kewlk9
59. bX-kka0xf
60. bX-l28v5z
61. bX-l96j2
62. bX-l9xjx9
63. bX-la6m4o
64. bX-lsioy8
65. bX-ltlqzv
66. bX-lw8mpb
67. bX-lzkkhl
68. bX-mq2of1
69. bX-mtwwdi
70. bX-mws9sr
71. bX-mzm63b
72. bX-n3ff52
73. bX-n4mon3
74. bX-napiw5
75. bX-nsm4vm
76. bX-o0zoa0
77. bX-obv7m3
78. bX-ot8any
79. bX-pgtif7
80. bX-pn0dtw
81. bX-pohgdk
82. bX-ppqi9d
83. bX-pq8xgs
84. bX-prdd9n
85. bX-prxtbp
86. bX-pu7aaj
87. bX-pvq71c
88. bX-qa45xg
89. bX-qeihpe
90. bX-r1buvw
91. bX-r1ezpk
92. bX-resilr
93. bX-rfg2oe
94. bX-rh26vj
95. bX-rr85sd
96. bX-rthuiq
97. bX-rxaqrt
98. bX-seep61
99. bX-sp4hmm
100. bX-t0ou3g
101. bX-tgu0qs
102. bX-tkcah7
103. bX-tlsikm
104. bX-tsvpgj
105. bX-u01hr1
106. bX-ujue70
107. bX-uwdr66
108. bX-uxu3fu
109. bX-v2vqfh
110. bX-volzpw
111. bX-w0b81c
112. bX-woam4u
113. bX-x7mp8t
114. bX-xd3w84
115. bX-xetjcr
116. bX-xjlu2f
117. bX-xovb7t
118. bX-xt3xtp
119. bX-xu1zoq
120. bX-yvq86z
121. bX-yvtdin
122. bX-z8kqgm

Continua a leggere »

1) Quando si tenta di inserire un codice javascript non come widget ma direttamente all'interno del modello di Blogger, come quello di Adsense, di Facebook e simili, succede che il codice diventa di colore rosso e che il modello non può essere salvato.
A differenza di Wordpress dove basta un errore, come una virgola fuori posto, per causare seri danni al blog, su Blogger non succede un bel nulla, è vero che il modello non si riesce a salvare ma in compenso la grafica non viene distrutta. Vi basterà aggiornare la pagina e riprovare ad inserire il codice senza errori.


Le scritte di errore sono del tipo:

• The reference to entity "version" must end with the ';' delimiter.
• Could not load template preview. Error parsing XML, line 710, column 7...

Gli errori di parsing XML, anche chiamati errore di sintassi poiché si riferisce alla codifica, si verificano quando si tenta di caricare script di terze parti nel modello di Blogger. Solitamente viene indicata la linea e la colonna dove è situato il problema. Nella maggior parte dei casi, il problema è dovuto a quei caratteri speciali indicati nella tabella sottostante, che andrebbero sostituiti con quelli affiancati sulla loro destra.

Caratteri speciali	Da sostituire con
>	>
<	&lt;
&	&amp;
“	&quot;

2) Talvolta il problema il problema si presenta nella struttura iniziale dello script. Normalmente uno script esteso viene scritto con questa forma:

<script type="text/javascript"> CODICE </script>

Ma non sempre funziona, diventa necessario inserire anche //<![CDATA[ all'inizio e //]]> verso la fine dello script.

<script type="text/javascript">
//<![CDATA[
    CODICE
//]]>
</script>

3) Ricordo che anziché sostituire manualmente questi caratteri che causano problemi nel codice, è possibile utilizzare il convertitore da HTML a XML che svolge questo compito automaticamente.

Continua a leggere »

La pubblicità su internet è diventata uno schifo, una volta quando entravo su un quotidiano di notizie, la prima cosa che vedevo era la notizia, mentre adesso vedo prima la pubblicità, poi un sito che ho aperto per errore nel tentativo di chiudere la pubblicità e infine quello che stavo cercando: la notizia da leggere.
Questi siti abusano di pubblicità, la mettono ovunque e sempre sopra il contenuto. Secondo gli utenti, la pubblicità più fastidiosa è quella che appare prima di un video, in quanto obbligano l'utente ad attendere e, perdere tempo, è una cosa che a nessuno va a genio. Estensioni come Adblock e Adblock Plus sono nate per arrestare la pubblicità, ma così facendo non fanno altro che aumentarla dato che bisogna recuperare quello che si perde quando un utente utilizza Adblock. Infatti prima che nascesse questa celebre estensione per bloccare le pubblicità, bastava inserire meno banner per guadagnare la stessa cifra. Un altro problema è che gli adblocker, cioè gli utente che usano Adblock, dimenticano di disattivarlo sugli altri siti la cui pubblicità non è invasiva e di conseguenza danneggiano anche chi non se lo merita.

A questo punto è il caso di avvisare i propri utenti per fargli capire che il sito è gratuito solo perché include pubblicità e che devono disattivare/eliminare Adblock per potervi accedere. Probabilmente, recuperando quel 10% di guadagni che Adblock vi sottrae mensilmente, potreste anche permettervi di inserire un banner pubblicitario in meno.

Se state utilizzando Wordpress vi basterà installare un plugin anti Adblock e impostarlo secondo le proprie necessità. Se invece state utilizzando piattaforme limitate come Blogger, in cui è possibile aggiungere solamente script, allora quello che dovete fare è incollare in un area HTML che deve essere visibile in ogni pagina del sito o blog, come un widget, il seguente codice:

<script>(function(w,u){var d=w.document,z=typeof u;function g207(){function c(c,i){var e=d.createElement('i'),b=d.body,s=b.style,l=b.childNodes.length;if(typeof i!=z){e.setAttribute('id',i);s.margin=s.padding=0;s.height='100%';l=Math.floor(Math.random()*l)+1}e.innerHTML=c;b.insertBefore(e,b.childNodes[l-1])}function g(i,t){return !t?d.getElementById(i):d.getElementsByTagName(t)};function f(v){if(!g('g207')){c('<p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBE3CPFlFmwxzf09Cg5raWzUKGqI2jAh2Ylzzl1pZC6ftifLZCAF9SanJRQcxRlElnFqXZjKcOmoAQh7i4UD_iCOsQWTDaKbBJhImSwE7iw1kCgLq6XpB-tITX3csI0nxMs4nlmXlx2tE/s1600/disattiva-adblock.png"><br/><a rel="nofollow" href="https://www.scuolissima.com/2013/08/come-disattivare-adblock.html" target="_blank"><font color=”blue”>Per saperne di più CLICCA QUI</font></a></p>','g207')}};(function(){var a=['Adrectangle','PageLeaderAd','ad-column','advertising2','divAdBox','mochila-column-right-ad-300x250-1','searchAdSenseBox','ad','ads','adsense'],l=a.length,i,s='',e;for(i=0;i<l;i++){if(!g(a[i])){s+='<a id="'+a[i]+'"></a>'}}c(s);l=a.length;for(i=0;i<l;i++){e=g(a[i]);if(e.offsetParent==null||(w.getComputedStyle?d.defaultView.getComputedStyle(e,null).getPropertyValue('display'):e.currentStyle.display)=='none'){return f('#'+a[i])}}}());(function(){var t=g(0,'img'),a=['/adaffiliate_','/adops/ad','/adsales/ad','/adsby.','/adtest.','/ajax/ads/ad','/controller/ads/ad','/pageads/ad','/weather/ads/ad','-728x90-'],i;if(typeof t[0]!=z&&typeof t[0].src!=z){i=new Image();i.onload=function(){this.onload=z;this.onerror=function(){f(this.src)};this.src=t[0].src+'#'+a.join('')};i.src=t[0].src}}());(function(){var o={'http://pagead2.googlesyndication.com/pagead/show_ads.js':'google_ad_client','http://js.adscale.de/getads.js':'adscale_slot_id','http://get.mirando.de/mirando.js':'adPlaceId'},S=g(0,'script'),l=S.length-1,n,r,i,v,s;d.write=null;for(i=l;i>=0;--i){s=S[i];if(typeof o[s.src]!=z){n=d.createElement('script');n.type='text/javascript';n.src=s.src;v=o[s.src];w[v]=u;r=S[0];n.onload=n.onreadystatechange=function(){if(typeof w[v]==z&&(!this.readyState||this.readyState==="loaded"||this.readyState==="complete")){n.onload=n.onreadystatechange=null;r.parentNode.removeChild(n);w[v]=null}};r.parentNode.insertBefore(n,r);setTimeout(function(){if(w[v]!==null){f(n.src)}},2000);break}}}())}if(d.addEventListener){w.addEventListener('load',g207,false)}else{w.attachEvent('onload',g207)}})(window);</script>
<style type="text/css">
/* Personalizzazioni Anti AdBlock */
 #g207{
position:fixed !important;
position:absolute;
top:0;
top:expression((t=document.documentElement.scrollTop?document.documentElement.scrollTop:document.body.scrollTop)+"px");
left:0;
width:100%;
 height:100%;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtpls8cjDgqXM3Y3gMOQL7LwXFoeJDYmMglMGZ44OSmrMinQo7aKnYD30w0D_wwyiGyuTgAbg4Ao5rzaCxDu4aQzRMDgKO46BiXJzFixUaL0Tpy8Ppi7bsTwaBqT6BR7O8kAUMsXCDk0I/s1600/cielo-stellato.png) right center !important;
opacity:0.90;
filter:alpha(opacity=20)
;
display:block
}
#g207 p{
opacity:1;
filter:none;
font:bold 25px Georgia, sans-serif;
line-height:36px;
color: red;
text-align:center; }
#g207 p a,#g207 p i{
font-size:22px;
}
#g207 ~ *{
display:none
}
</style>

Anteprima

Quello sottostante è un esempio di come dovrebbe apparire lo script una volta inserito nel sito:

È una guida illustrativa per disattivare adblock, al di sotto di essa è presente un link che apre in una nuova scheda del browser una guida più approfondita per poterlo disattivare o eliminare sul proprio browser. Tutti sanno attivare Adblock ma pochi sanno disabilitarlo per tutto il dominio, al massimo sanno disabilitarlo solo sulla singola pagina. Per questo ritengo che sia utile un link verso la giusta procedura di disattivazione del plugin, potete anche sostituire il link della mia guida con uno vostro (se ne avete già scritto una).

Personalizzazioni

La scritta in rosso dell'avvertimento a disattivare Adblock è una immagine e quindi per modificarla dovreste cambiare l'immagine.

color: red; --> è il colore rosso del testo. Attualmente non c'è alcun testo perché ho preferito unirlo all'immagine, se volete aggiungerlo, dovrete posizionarlo dopo il link dell'immagine.

font:bold 25px Georgia, sans-serif; --> per modificare le dimensioni e la famiglia del font


In un altro articolo ho parlato di un nuovo tipo di anti adblock con timer, che è meno invasivo perché gli utenti potranno navigare lo stesso ma dovranno attendere qualche secondo in più (il tempo lo decidete voi).

Di questo passo, anche in questo blog sarò costretto a introdurre una soluzione simile, per le perdite di guadagni, certo, ma anche per principio: non mi piace l'idea che il mio blog debba essere trattato allo stesso livello di un sito spazzatura!

Continua a leggere »

Stanno avendo sempre più successo fra gli utenti le estensioni per il browser come Adblock e Ghostery, che permettono di eliminare la pubblicità dai siti internet. E quando un utente attiva Adblock o plugin simili è finita: lo si può paragonare a una persona che va a mangiare al ristorante e poi se ne va senza pagare. Le persone danno troppo per scontato che i guadagni possono arrivare anche in altri modi oltre che con la pubblicità, questo forse un giorno sarà possibile, ma non oggi. Non per niente Google e Amazon hanno preferito pagare Adblock per rimanere sulla whitelist.

Tra l'altro siti e blog hanno dei costi molto alti che vanno da 60 a 1500€ l'anno, dipende da quanto sono grossi, ma anche dai dipendenti che ci lavorano. Per fare un esempio, i miei siti hanno un costo medio di 100€ ciascun l'anno. E se si considera il tempo che ogni editore perde per mantenerlo aggiornato, il danno economico sarà di gran lunga maggiore.

Per combattere il problema Adblock, sempre più siti stanno adottando soluzioni che bloccano l'intero sito agli ad blocker, magari per una decina di secondi, giusto il tempo di permettergli di leggere l'avviso sulla schermata bianca. Dato che secondo me è ancora presto per utilizzare soluzioni così drastiche, consiglio a chi ne ha la possibilità di mostrare un elemento alternativo alla vera pubblicità (es. Google Adsense). Per esempio  ho visto già che qualcuno sta provando a recuperare i soldi perduti inserendo i link di Amazon dentro una immagine (lo spiegherò nel secondo metodo come fare). Probabilmente riuscirà a recuperare solo l'1%, che è sempre troppo poco. Per iniziare mi limiterò a spiegarvi come inserire una semplice immagine dietro ad un banner pubblicitario.


Eccovi un esempio:

1° metodo 

Per rimpiazzare la pubblicità bloccata da Adblock con un altro elemento, dovrete utilizzare il seguente codice:

<div class="adwrapper">LA TUA PUBBLICITA'
<style>div.adwrapper{
width: 300px;
height: 250px;
background-image: url("image_url");
}</style>

Dovete sostituire la scritta LA TUA PUBBLICITA' con il codice script o iframe del banner pubblicitario che vi è stato fornito dalla vostra affiliazione. Al posto di image_url dovrete inserire il link dell'immagine o del banner.
Le dimensioni del vostro banner dovranno essere le stesse di quelle del banner pubblicitario.

Tramite questa soluzione non è possibile inserire un link dentro l'immagine, quindi vi conviene sfruttare tale spazio per inserire un avviso sotto forma di immagine in modo da convincere i lettori a disabilitare Adblock.

Suggerisco anche di utilizzare questa soluzione per banner posizionati in basso, e non dietro quelli che si vedono nella parte alta del sito. Il motivo è semplice, dato che le immagini caricano più velocemente degli script, per un momento potrebbero vedere anche l'immagine che sta dietro alla pubblicità.

2° metodo

Questo metodo consiste nell'inserire un immagine con link, che può essere utilizzata per spiegare le conseguenze di Adblock e come disabilitarlo, per mettere in risalto un articolo importante del proprio sito o per sfruttare un link referral... tipo quelli di Amazon che riconoscono una percentuale sulla vendita generata. E' una soluzione più complicata delle precedente ma certamente migliore.

Dovete inserire dopo il tag <head> il seguente codice:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Poi prima del tag </head> quest'altro codice:

<script type="text/javascript">
    <!--
    var adblock = true;
    //-->
    </script>
    <script type="text/javascript" src="http://nome del sito/adframe.js"></script>
<script language="javascript" type="text/javascript">
         $(document).ready(function () {
             if (typeof (adblock) == 'undefined') {
                 $("#rilevoAd").html("<a target='_blank' href='http://www.scuolissima.com/2013/08/come-disattivare-adblock.html'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb-ZnjZytEGzD_2EEZgswfpRSoY_Qf9gPwcrFOVtIPRyrtgswTMYsWVbYrKmpUPrrZqIjC_RGyTu2GbCw0rgK4ZOvwZOtlXYnv-1ODfAc7UrnSCs7IjyAuMwn8_wwbdeEs9W603eySfD8/s1600/anti-adblock.png' /></a>");
             }
             else {
                 $("#rilevoAd").html("");
             }
         });
    </script>

Allo stato attuale questo codice non funziona, dovete creare un file di testo sul vostro computer ed inserire al suo interno questo codice:

adblock = false;

Il file che si chiamerà nuovo-documento-di-testo.txt dovrà essere rinominato e chiamato adframe.js . A questo punto lo dovete caricare su un server esterno proprio o su uno esterno come Google Drive, Google Sites, Dropbox ecc. Una volta caricato dovrete prendere il link diretto del file e sostituirlo con il link in rosso.

I link di colore blu sono invece quelli dell'immagine da mostrare a chi usa Adblock e alla pagina da linkare quando si clicca sull'immagine. Per impostazione predefinita ho lasciato quello di Scuolissima, ma dato che non sono un esperto di grafica e dato che è pure presente il nome di questo blog sul banner, vi consiglio di modificarlo o cambiarlo con qualcosa di meglio.

Il passaggio successivo è quello di piazzare nel punto in cui si vuole fare apparire questo banner, il seguente codice:

<div id="rilevoAd"></div>

Questa guida può andare bene per chi ha un blog su Blogger, chi utilizza Wordpress non dovrà accontentarsi di ciò, perché potrà sfruttare svariati plugin anti adblock molto più professionali dei metodi appena illustrati.

Continua a leggere »

A seguito del successo dei social network, le persone sono abituate ad utilizzare le emoticon per far capire che ciò che hanno scritto sia una battuta, una freddura o un pensiero contrastante.
Questa usanza non è poi così cattiva rispetto alle odiose abbreviazioni che secondo il mio modesto parere potrebbero essere considerate come errori grammaticali per i motori di ricerca. Le emoticon permettono di capire lo stato d'animo di chi ha commentato e quindi diventa più facile rispondergli con lo stesso umore. Al contrario di Wordpress, su Blogger non c'è una funzione predefinita per attivare le emoticon nei commenti, tuttavia seguendo questa semplice guida vi sarà possibile aggiungerli.


Per abilitare le emoticon nei commenti di Blogger dovete andare su Modello > Modifica HTML, cercare il tag <data:post.commentHtml/> e sotto di esso aggiungere il seguente codice:

<script type='text/javascript'>
//<![CDATA[
var emovar = 0;
function emocomm(el) {
    var elem = typeof el === "string" ? document.getElementById(el) : el,
    testo = elem.innerHTML,
    // :) :-) :] :-]                // :'-(  :((  :'(       // :( :[ :-( :-[      // :P :-P   // :D :-D xD  // :$ :-$ // ;) ;-) ;] ;-]        // :-I  :| :-|    // :-X // :O :-O // |O  |-O  ¬¬  // :S :-/
    regs = [":\\)|:-\\)|:\\]|:-\\]",":'-\\(|:\\(\\(|:'\\(",":\\(|:\\[|:-\\(|:-\\[",":P|:-P",":D|:-D|xD",":\\$|:-\\$",";\\)|;-\\)|;\\]|;-\\]",":-I|:\\||:-\\|",":-X",":O|:-O","\\|o|\\|-o|¬¬",":S|:-\\/"],
    classe = "sorriso pianto triste lingua riso oops ammiccamento neutro segreto sorpresa arrabbiato confuso".split(" "),
    i = 0,
    reg
    for(; regs[i]; i++){
        reg = new RegExp("("+regs[i]+")(\\s|$)", "gi")
        testo = testo.replace( reg, function(){emovar++;return "<i class='icon "+ classe[i] +"' id='icon"+(emovar).toString()+"'><\/i> "})
    }
    elem.innerHTML = testo
}
function emoannidate(){
    var commenti = document.getElementById('comments-block') || document.getElementById('comment-holder' ) , i = 0;
    commenti = commenti.getElementsByTagName('p')
    for(; commenti[i]; i++){
        emocomm(commenti[i])
    }
}
emoannidate()
//]]>
</script>

Poi dovrete cercare il tag ]]></b:skin> e prima di esso aggiungere il seguente codice:

i.icon{
    width:15px;height:15px;
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp9WE80cFjhNpW_ppojLEvdIaleeB5Q8H-RN2zCl2_3l_Qd6uMloiKhxsAFs1fEKcvkwZOzvdXM8jgvBfR8rwQnF4MnJHzmVtjFwG3gaO1Eg8KP0WJ5bZGxjrq33RPreFoCkW4Jn3O0ls/s1600/emoticon-commenti.png);
    background-repeat:no-repeat;
    display: inline-block;
}
i.icon.confuso{ background-position: 0 0;  }
i.icon.lingua{ background-position:-15px 0;  }
i.icon.arrabbiato{ background-position: -30px 0;  }
i.icon.pianto{ background-position: -45px 0;  }
i.icon.ammiccamento{ background-position: -60px 0;  }
i.icon.neutro{ background-position:-75px 0;  }
i.icon.oops{ background-position: -90px 0;  }
i.icon.riso{ background-position: -105px 0;  }
i.icon.segreto{ background-position: -120px 0;  }
i.icon.sorpresa{ background-position: -135px 0;  }
i.icon.sorriso{ background-position: -150px 0;  }
i.icon.triste{ background-position: -165px 0;  }

A questo punto salvate il modello, le emoticon sono già attive e funzionanti. Per ogni simbolo apparirà un emoticon specifica.

Dato che non tutti conoscono queste combinazione di tasti per far apparire le emoticon, potreste utilizzare un'immagine come quella riportata appena sopra ed inserirla prima del modulo dei commenti.

Cercare la riga <div class='post-footer-line post-footer-line-3'> e dopo di essa aggiungete quest'altro codice:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<center><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheFwVgAxbXqwArNLQzdgqRxgwtaDU9x6HidA80Hk28doleJctlnO2Za5-0zTz8Q7_KdTN7jMH8QwaKzRR77SPLqKp5TLZ1V9nIhfm0lqOV8C4yLISs82eC9UsmSS0bG_KW7sJPeaOQlTk/s640/emoticon-blogger.png'/></center>
</b:if>

AVVISO: normalmente le emoticon funzionano ma se si utilizzano in modo consecutivo, qualcuna potrebbe non apparire come icona. A volte non appaiono per altri motivi: ad esempio ho notato che la faccia triste appare in ogni caso mentre la faccia che sorride ogni tanto appare solo con i due punti e la parentesi tonda chiuda.
In questi casi non posso farci nulla, guardate il lato positivo: gli utenti impareranno ad esprimersi con le emoticon (anche con le sole lettere e punteggiatura)... piuttosto che con le parolacce.

Continua a leggere »

Il design gioca un ruolo importante in un blog perché è l'aspetto chiave in grado di attrarre i lettori, quando si dà un giudizio di un blog si inizia solitamente dalla grafica. Per questo si consiglia sempre di utilizzare i migliori temi possibili dal design accattivante. Quelli che trovate in questa pagina sono i 10 migliori modelli di Blogger del 2015. Sono tutti ottimizzati e quindi a livello di indicizzazione non ce ne uno che prevale sull'altro, basatevi solamente sulla tematica e sulla facilità di navigazione e di lettura.

1) Charity Mag

E' un tema progettato per organizzazioni di beneficenza o non governative. 

2) MagOne

E' un modello progettato appositamente per blog tech con stile magazine. E' un tema a pagamento e costoso = 21$.

3) Sevida

E' uno dei modelli di Blogger maggiormente utilizzati. Nonostante il prezzo non sia alla portata di tutti sono soldi ben spesi.

4) Balance

E' uno dei modelli più semplici, leggeri e puliti di Blogger. Non è un modello recente ma rimane ugualmente uno dei migliori. Di solito viene utilizzato per blog di tecnologia e di notizie.

 

5) Newspaper

E' un modello premium per Blogger con alcune delle migliori caratteristiche ogni modello dovrebbe avere. Possiede diverse funzionalità come un mega menù, bellissimi widget e gli spazi pubblicitari per monetizzare al meglio il proprio blog.

6) Techism

E' un tema appositamente progettato per siti tech, sugli animali in stile magazine. Ha già preinstallato alcuni widget che di solito si reputano fra i più utili e quindi non occorre aggiungerne altri manualmente.

7) Social Mag

E' un tema costruito su concetti futuristici e adatto a chi punta molto sulle visite provenienti dai social network (Facebook, Twitter, Google+).

8) PhotoVid

E' un bellissimo tema per fashion blogger o per esperti di fotografia.

9) BetaCommerce

E' il modello ideale per realizzare un negozio online. E' facile da maneggiare e contiene un gran numero di strumenti per la personalizzazione della grafica. Include una interessante vetrina che può essere utilizzata per la vendita di qualsiasi prodotto.

10) Compact

E' un modello per blog portfolio.

LEGGI ANCHE: Migliori modelli per Blogger del 2014

Continua a leggere »