Blogger Book

Aggregatori di social media: 8 widget di feed social per siti web

2026-07-28T20:50:00.000+02:00

I social media sono uno strumento potente per il marketing, il branding e l'interazione con il pubblico. Uno dei modi migliori per integrare i tuoi account social con il tuo sito web è utilizzare gli aggregatori di social media per incorporare i feed sul tuo sito web.

In questo modo puoi enfatizzare la tua presenza sui social media, i tuoi impegni, evidenziare la prova sociale e persino trasformare i visitatori in follower fedeli.

In precedenza, abbiamo condiviso diversi strumenti per il social media marketing , nonché utili widget per i siti web, per aiutarti a potenziare le tue attività di marketing. Tuttavia, in questo articolo, esamineremo alcuni dei migliori aggregatori di social media per incorporare post sui siti web.

Sommario

I migliori aggregatori di social media da utilizzare

Vista degli elfi

Elfsight è una piattaforma che ti consente di creare vari widget per i tuoi siti web e campagne di marketing senza dover scrivere alcun codice.

La piattaforma comprende oltre 90 widget, suddivisi in varie sezioni (aggregatori social, aggregatori di recensioni, strumenti di e-commerce, componenti web, ecc.). I suoi widget per i feed dei social media sono tra le app più popolari che consentono di aggregare i post social dei propri account (o di qualsiasi profilo/pagina pubblica) e visualizzarli sul proprio sito web.

Il generatore di widget per feed TikTok di Elfsight

Elfsight dispone di diversi aggregatori di feed di social media:

Social Feed : un aggregatore di feed per social media che consente di integrare più fonti di feed per creare un feed diversificato.
Feed di Facebook : mostra i contenuti di una pagina Facebook gestita per la quale hai accesso come amministratore.
Feed di Instagram : visualizza i post di Instagram tramite nome utente, hashtag o posizione in qualsiasi combinazione.
Feed di LinkedIn : visualizza sul tuo sito i feed della tua pagina aziendale su LinkedIn.
Feed TikTok : mostra i post di TikTok in base al nome utente o all'hashtag.
Feed X/Twitter : visualizza X feed in base al nome utente o all'hashtag.

Crea un widget di feed social per il tuo sito web utilizzando Elfsight

Per creare gratuitamente un widget per i social feed, inizia utilizzando il generatore di widget. Seleziona un modello e clicca sul pulsante " Continua con questo modello ". Quindi, aggiungi le fonti dei tuoi social feed, filtra i contenuti e personalizza il layout e l'aspetto in base alle tue esigenze. Infine, clicca su "Aggiungi al sito web gratuitamente". Segui le istruzioni per ottenere il codice di incorporamento.

Cosa rende Elfsight speciale

Ecco alcuni fattori per cui Elfsight è probabilmente la soluzione migliore per aggregare feed provenienti da social media e piattaforme di recensioni:

Gratuito : nessuna funzionalità è limitata in base alla piattaforma. Puoi iniziare gratuitamente e passare a un piano successivo man mano che il tuo sito web cresce.
Feed individuali o aggregali tutti in un unico feed : Elfsight dispone di widget feed separati per ogni principale social network e piattaforma di recensioni, nonché di widget feed misti per combinarli tutti e creare un feed diversificato.
Controllo completo sui feed : in alcune circostanze potresti voler nascondere post specifici o mostrare solo post senza parole chiave, hashtag o persino post con contenuti visivi. Elfsight ti consente di filtrare e moderare i contenuti facilmente.
Ottieni più interazioni con i layout : sono disponibili cinque layout personalizzabili: Griglia, Masonry, Elenco, Slider e Carousel.
Stili dei post social : controlla completamente le informazioni visualizzate nel widget del feed social. Puoi attivare o disattivare gli elementi di qualsiasi post: nome dell'autore e immagine del profilo, data di pubblicazione, icona della fonte, testo e pulsante di condivisione.
Migliora il coinvolgimento degli utenti con i feed popup : l'opzione di visualizzazione dei popup consente ai visitatori di guardare il feed live dei social media in dettaglio e di leggere i commenti senza uscire dal sito web. Questo migliora significativamente il coinvolgimento degli utenti. Inoltre, diversi aggregatori di feed social consentono di mostrare pulsanti CTA per promuovere un link.

Prezzi di Elfsight

Elfsight offre due piani tariffari: uno per singola app e uno per tutte le app. I piani per singola app includono un livello gratuito, mentre il piano per tutte le app offre l'accesso a tutte le app di Elfsight, comprese le notifiche di vendita e i widget della barra degli annunci .

Ecco i dettagli sui prezzi del Social Feed Widget di Elfsight :

Gratuito : siti web illimitati, un widget, 200 visualizzazioni al mese
Base ($ 10/mese) — Siti web illimitati, 3 widget, 5.000 visualizzazioni al mese
Pro ($ 20/mese) — Siti web illimitati, 3 progetti, 1 collaboratore, 9 widget, 50.000 visualizzazioni al mese, personalizzazioni avanzate
Premium ($ 40/mese) — Siti web illimitati, 9 progetti, 21 widget, 150.000 visualizzazioni al mese, 3 collaboratori, personalizzazioni avanzate

Inoltre, sono disponibili pacchetti Enterprise per agenzie e freelance, con visualizzazioni illimitate. Tutti i piani a pagamento includono una funzionalità "progetti", che consente agli utenti di raggruppare i widget in cartelle.

I pacchetti All Apps sono pensati per i proprietari di siti web che desiderano creare più tipi di widget, come un carosello di foto con impaginazione , vari widget per moduli web e pulsanti CTA , per i propri siti web. I prezzi partono da $ 15 al mese.

Per maggiori dettagli, consulta la guida completa ai prezzi di Elfsight .

Clicca qui per provare Elfsight .

Walls.io

Walls.io è un aggregatore di social media potente e intuitivo. Può raccogliere e organizzare contenuti dalle principali piattaforme social.

L'app si integra perfettamente con le piattaforme web più diffuse, i sistemi di gestione dei contenuti (CMS) e le piattaforme di e-commerce, semplificandone la configurazione. Che tu sia esperto di tecnologia o alle prime armi, il tuo feed dei social media sarà pronto in un batter d'occhio!

a) Fonti di contenuto

Walls.io semplifica il processo di raccolta, organizzazione e presentazione dei contenuti in un feed personalizzabile. Puoi raccogliere contenuti da diverse piattaforme di social media, feed RSS o consentire al tuo pubblico di pubblicare direttamente sulla tua bacheca.

b) Strumenti di moderazione

Ti aiuta a risparmiare tempo nella moderazione del tuo social wall e ne aumenta l'impatto presentando i contenuti migliori. Puoi impostare il tuo social wall in modo che pubblichi automaticamente post con i tuoi hashtag e utilizzare un filtro antispam e una blocklist per impedire la pubblicazione di contenuti indesiderati.

Esiste una lista di parole chiave e frasi predefinite per filtrare lo spam, ma puoi anche crearne una tua. Grazie alla lista di parole chiave, a un robusto algoritmo di rilevamento dello spam e alla possibilità di bloccare utenti specifici, puoi mantenere un social wall libero da spam.

Personalizza la lingua del tuo social media wall in base al tuo pubblico. Ad esempio, se il tuo sito web è in tedesco, puoi scegliere di mostrare solo post in tedesco. Puoi anche includere più lingue per soddisfare un pubblico multilingue.

Per evitare che il tuo muro sembri inattivo, usa la funzione "post looping". Questa funzione ripubblica periodicamente i contenuti approvati in cima, il che è particolarmente utile nei periodi di bassa attività degli hashtag.

Il filtro Data ti consente di visualizzare i contenuti sul tuo social wall in un intervallo di tempo specifico. Attiva il filtro nella tua dashboard, seleziona un intervallo di tempo e visualizza i post corrispondenti.

c) Invito all'azione

Questa funzionalità ti consente di aggiungere pulsanti ai contenuti generati dagli utenti sul tuo social media wall. Questo ti aiuta ad aumentare le vendite del tuo negozio online, a migliorare l'interazione durante gli eventi dal vivo o a creare un hub social sul sito web del tuo brand per coinvolgere i visitatori.

Puoi facilmente collegare i fantastici contenuti dei tuoi fan ai tuoi prodotti o servizi con pochi clic. Puoi scegliere dal nostro elenco di call to action e collegare ogni post alla pagina giusta del tuo sito web. I pulsanti CTA saranno nella stessa lingua del tuo social wall, come mostrato nell'anteprima.

d) Messaggi diretti

La funzione Post Diretti consente agli utenti di condividere contenuti sul tuo social wall senza utilizzare Instagram, Twitter (ex Twitter), Facebook o altri social network. La tua community può caricare immagini o post di testo direttamente sul tuo social wall dai propri laptop o cellulari.

e) Generazione di lead

Con la funzionalità di lead generation sul tuo social wall, non solo raccogli indirizzi email e nomi, ma raccogli anche preziosi contenuti generati dagli utenti che generano più interazione e portano a migliori tassi di conversione. Puoi esportare facilmente questi lead e iniziare a coltivarli.

Oltre a generare lead e aumentare il coinvolgimento, la nostra funzionalità di lead generation fornisce informazioni preziose sul tuo pubblico. Raccogliere indirizzi email verificati ti aiuta a comprendere meglio il tuo pubblico di riferimento. Queste informazioni ti consentono di creare campagne di marketing più efficaci, personalizzare i tuoi messaggi in base al tuo pubblico e ottenere tassi di conversione più elevati.

f) Sondaggio in diretta

I sondaggi in tempo reale sono un modo fantastico per coinvolgere le persone e condividere le proprie opinioni. Se utilizzati sui social wall, possono essere utili per votare nei concorsi, avviare conversazioni durante le riunioni e raccogliere feedback o altri tipi di informazioni.

Utilizzando i sondaggi live sul tuo social wall, fai sentire alla tua community che le proprie opinioni sono importanti e possono fare la differenza.

Questo è particolarmente utile per coinvolgere i partecipanti all'evento, così come i dipendenti o i clienti. Li fa sentire coinvolti nel processo e dà loro la possibilità di avere voce in capitolo nelle decisioni importanti.

g) Reazioni e voto

Questa funzionalità consente ai tuoi visitatori di esprimere le proprie impressioni sui post mettendo "Mi piace" sul tuo social wall. Puoi usare le reazioni per mantenere vivo l'interesse del tuo pubblico, vedere quali post sono popolari o anche per partecipare a concorsi.

Permette al tuo pubblico di esprimere la propria opinione, ad esempio scegliendo il vincitore di un concorso. Puoi chiedere alle persone di condividere foto, video o post di testo su un social wall e poi incoraggiarle a votare per i loro contenuti preferiti.

h) Cabina fotografica virtuale

Un photo booth virtuale è un prezioso strumento di marketing per eventi che consente al tuo pubblico di creare facilmente contenuti fotografici personalizzati. Puoi personalizzarlo in base alle tue esigenze e pubblicarlo sulla piattaforma o sul sito web del tuo evento preferito.

Proprio come un social wall, puoi portare il tuo photo booth ovunque con te. Funziona ovunque le persone possano andare online, quindi puoi usare codici QR e sfondi accattivanti durante gli eventi per incoraggiare le persone a scattare selfie durante le pause.

Prezzi di Walls.io

I piani tariffari di Walls.io sono più costosi rispetto a quelli dei suoi concorrenti. Il piano Professional costa 250 dollari al mese per 10 fonti.

Clicca qui per provare Walls.io .

TINTA

TINT collabora con diversi canali social, incluso TikTok. La sua potente tecnologia di moderazione automatica garantisce che vengano mostrati solo i contenuti più adatti e pertinenti.

Non si limita a raccogliere contenuti, ma ti aiuta anche a ottenere l'autorizzazione per utilizzare i contenuti generati dagli utenti. Con un solo clic, puoi richiedere e tutelare legalmente i tuoi diritti. La piattaforma monitora inoltre tutto per garantire la conformità, semplificando la gestione di richieste e autorizzazioni.

a) Suite di contenuti generati dagli utenti

Ti aiuta a raccogliere e riunire i contenuti generati dagli utenti (UGC) più interessanti, significativi ed efficaci, conservandoli tutti in un unico posto. Puoi scegliere tra numerosi canali social e ordinare i contenuti in base a parole chiave, date, livello di coinvolgimento e altro ancora.

Prima che i contenuti vengano pubblicati, puoi controllare e scegliere rapidamente i contenuti più adatti utilizzando i potenti filtri e la tecnologia di moderazione automatica di TINT.

Con un solo clic, puoi richiedere e ottenere i diritti legali sui contenuti. Gestisci tutte le richieste e le autorizzazioni direttamente dalla piattaforma TINT e mantieni un registro della conformità alle normative.

b) Soluzione di Social Commerce

Questo software ti aiuta ad aumentare le visite al sito web, i clic e le vendite sfruttando i contenuti generati dagli utenti (UGC), le recensioni tempestive e i contenuti acquistabili.

Puoi risparmiare tempo creando rapidamente Call-to-Action (CTA) o Hotspot per i tuoi prodotti caricando un catalogo prodotti esistente. Il software importa automaticamente i dettagli dei prodotti, inclusi SKU, miniature, nomi, descrizioni e prezzi.

Taggare i prodotti è facile: l'apprendimento automatico intelligente di TINT analizza i tuoi contenuti e tagga automaticamente gli oggetti nei post, facendoti risparmiare tempo collegando automaticamente i tuoi prodotti alle immagini.

Tieni traccia dei clic, degli acquisti e dei miglioramenti derivanti dai tuoi contenuti generati dagli utenti acquistabili.

d) Creatori e influencer

TINT riunisce in un unico posto i contenuti di creatori, influencer e clienti, rendendo tutto facilmente accessibile.

Puoi inviare senza problemi i dettagli, i termini e le condizioni della tua campagna a influencer e creator. Raccogli contenuti da profili o hashtag specifici. Successivamente, personalizza e mostra questi contenuti sul tuo sito web, sulle pagine prodotto, nelle campagne email e su altri canali di marketing. Questo contribuisce a creare fiducia e ad aumentare le conversioni durante l'intero percorso di acquisto.

e) Valutazioni e recensioni

TINT semplifica l'avvio di una nuova campagna di valutazioni e recensioni, consentendoti di raccogliere feedback dai tuoi clienti.

Puoi quindi pubblicare queste recensioni sul tuo sito web, sulle pagine dei prodotti, nelle campagne email e su altri canali di marketing. In questo modo, metti in risalto le esperienze reali, creando fiducia e incoraggiando i potenziali clienti a effettuare un acquisto.

f) Campionamento del prodotto

Utilizza TINT per creare e gestire la community del tuo brand online, tutto da un unico strumento. Coinvolgi specifici consumatori in campagne di campionamento personalizzate che li incoraggino a provare il tuo prodotto, a promuovere il tuo brand e a lasciare recensioni.

g) Programmazione e pubblicazione

Utilizza il semplice strumento di pianificazione per pianificare e impostare i tuoi contenuti sui social media. Puoi programmarli per essere pubblicati quando il tuo pubblico è più attivo, mantenendo un programma di pubblicazione regolare per garantire che i tuoi contenuti raggiungano i tuoi follower quando sono più interessati.

h) Monitoraggio delle prestazioni e analisi

Le sue funzionalità di analisi e reporting ti aiutano a monitorare le prestazioni dei tuoi contenuti social. Utilizza queste informazioni per prendere decisioni consapevoli sulla tua strategia, basandoti sui dati, monitorando il coinvolgimento, le impressioni, i clic e altre metriche chiave.

Prezzi TINT

Per conoscere i costi, puoi richiedere i dettagli sui prezzi .

Clicca qui per provare TINT .

Tagembed

Tagembed è uno strumento gratuito per aggiungere contenuti social al tuo sito web. Il suo widget reattivo semplifica la visualizzazione di un feed social combinato sul tuo sito aziendale.

Permette di mostrare testimonianze, condividere storie sui social media e creare gallerie di post visivamente accattivanti. TagEmbed offre l'aggregazione di recensioni, hashtag e contenuti generati dagli utenti su piattaforme come Facebook, Twitter e Instagram.

Puoi aggregare feed da oltre 20 reti.

TagEmbed offre diverse opzioni di personalizzazione, consentendoti di scegliere colori, layout e persino di aggiungere banner per migliorare il coinvolgimento e l'attrattiva visiva del tuo feed sui social media.

Integra facilmente i social media nel tuo sito web

Utilizza i widget dei social media per integrare perfettamente i feed social nel tuo sito web. Questo può aumentare il traffico sul tuo sito web grazie all'elevato coinvolgimento che offre.

<?XML:NAMESPACE PREFIX = "[default] http://www.w3.org/2000/svg" NS = "http://www.w3.org/2000/svg" />Sono disponibili oltre 15 layout di temi e numerose opzioni di personalizzazione, tra cui l'integrazione con Google Analytics.

Puoi utilizzare in modo efficace i post correlati al tuo marchio, sia quelli del tuo marchio che quelli degli utenti, per promuovere prodotti, generare lead e catturare l'attenzione di potenziali clienti.

Grazie alla funzione di moderazione di Tagembed, puoi filtrare i post non pertinenti, assicurandoti di visualizzare solo i post appropriati sui social media.

Moderare i post in TagEmbed

Prezzi di TagEmbed

Clicca qui per provare Tagembed .

Juicer.io

Juicer è un'altra piattaforma di aggregazione di social media, apprezzata e apprezzata da oltre 5.000 aziende, indipendentemente dalle loro dimensioni. Si collega facilmente a diversi social network, consentendo di collegare fino a 15 account sorgente per ogni feed.

Con Juicer puoi facilmente raccogliere contenuti, immagini, post e hashtag per creare un feed coerente e visivamente accattivante.

Puoi posizionare questo feed curato dove vuoi, sul tuo sito web o su un'altra piattaforma. Questo aggregatore di social media è estremamente utile per sfruttare il potere della riprova sociale.

Aggiungendo un feed social al sito web della tua attività, i visitatori possono leggere feedback autentici da parte di altri clienti. Questo contribuisce a creare fiducia nei tuoi servizi e prodotti.

a) Muri sociali

I social wall di Juicer ti permettono di collegare i tuoi account social, monitorare gli hashtag e filtrare i contenuti, offrendo ai tuoi follower una visione unica del tuo brand personale o aziendale. Puoi anche personalizzare il design del tuo social wall in base al tuo brand.

Riceverai un codice di incorporamento e un URL personalizzati per aggiungere facilmente il social media wall di Juicer direttamente al tuo sito web. Se utilizzi WordPress, Juicer offre anche un plugin per il social wall, che puoi scaricare da qui .

Che tu voglia aggiungere un social media wall per eventi al tuo sito web o impostare una visualizzazione live sui social media durante il tuo evento, Juicer consente al tuo pubblico di vedere facilmente ogni menzione del tuo evento.

b) Moderazione dei social media

Tutte le opzioni a pagamento di Juicer sono dotate di funzionalità di moderazione e filtraggio dei social media, offrendoti il controllo completo su ciò che viene visualizzato sul tuo feed Juicer.

Indipendentemente dal social network che utilizzi, Juicer può aiutarti a moderarlo e a mostrare i contenuti social più adatti al tuo brand. Ancora meglio, impostare il filtro e la moderazione dei post social di Juicer è semplicissimo.

Ad esempio, con Juicer puoi scegliere il livello di moderazione dei social media che preferisci. Se preferisci rivedere personalmente ogni post prima che venga visualizzato sul tuo feed, seleziona il pulsante "Invia tutti i post alla moderazione". In questo modo, nessun post verrà visualizzato sul tuo feed live senza la tua approvazione.

c) Cura dei contenuti

Juicer ti permette di selezionare facilmente post, hashtag, immagini e foto dai tuoi canali social preferiti in un unico feed, integrabile sul tuo sito web. È semplicissimo e, con soli tre semplici passaggi, avrai un curatore di contenuti in tempo reale che farà il lavoro per te.

Prezzi degli spremitori

Clicca qui per provare Juicer .

IncorporaSocial

EmbedSocial è una piattaforma intuitiva per l'utilizzo di contenuti generati dagli utenti (UGC) e contenuti dei social media.

Con oltre 100.000 utenti, forniscono integrazioni API ufficiali con i principali social network e creano prodotti che sincronizzano senza problemi i contenuti generati dagli utenti (UGC) dei clienti con i loro siti web.

Permette di raccogliere vari tipi di contenuti, come foto dei clienti e interi post. Di recente, è stata aggiunta l'integrazione con YouTube e TikTok, un'ottima soluzione per i brand che puntano sui contenuti video. Include anche un aggregatore di hashtag, che semplifica il monitoraggio delle campagne di marketing incentrate sugli hashtag.

a) Muro degli hashtag

Crea un muro sui social media sul web che mostri le foto generate dagli utenti tramite vari hashtag su Instagram, X/Twitter o YouTube.

Ecco come funzionano gli hashtag wall di Embed:

Combina i post di Instagram e gli hashtag X per creare un feed di campagne hashtag unificato.
Sviluppa un feed per una campagna con un massimo di tre hashtag, visualizzando solo i post che utilizzano tutti e tre gli hashtag.
Grazie agli aggiornamenti dell'API di Instagram, il feed ora mostrerà i post pubblicati nelle ultime 24 ore che includono l'hashtag specificato.
Crea un feed combinato con post da più hashtag, escludendo quelli con entrambi gli hashtag ma includendo uno qualsiasi degli hashtag specificati

Editor di widget TikTok di EmbedSocial

b) Incorporare gli album di Facebook

Condividi i tuoi album fotografici di Facebook o un'intera galleria su qualsiasi sito web. Puoi anche mostrare le tue foto di Instagram in un layout feed attivando l'impostazione della didascalia.

Questa funzione ti consente di importare facilmente tutti gli album da una pagina Facebook con un solo clic. La sincronizzazione avviene automaticamente ogni volta che aggiungi una nuova foto alla tua pagina Facebook.

Puoi anche incorporare un negozio completo con pulsanti di acquisto per ogni foto nei tuoi album di Facebook. Crea slideshow, caroselli, album in muratura o a griglia con le tue foto di Facebook e Instagram.

c) Moderazione

Questa funzione ti aiuta a mettere in evidenza il tuo post più popolare nel widget, rendendolo il primo nel tuo feed. Puoi visualizzare solo i post con parole chiave specifiche.

Decidi se mostrare o nascondere le didascalie dei post nel feed. Inoltre, puoi scegliere di visualizzare per primi i post più recenti o quelli più vecchi.

Hai la flessibilità di scegliere manualmente i contenuti dei social media per il tuo sito web. Offre una scheda dedicata per i post selezionati, permettendoti di identificare facilmente quali post sono presenti nel tuo feed. In alternativa, attiva l'opzione automatica per visualizzare automaticamente tutti i post.

d) Feed acquistabile

Pulsanti CTA sul feed Instagram di EmbedSocial

Personalizza il tuo negozio Instagram in base al design del tuo sito web con diverse opzioni. Scegli l'aspetto dell'intero layout del feed, tra cui un layout Instagram standard a tre colonne, a griglia, a righe o a masonry.

EmbedSocial offre una varietà di modelli che consentono di raccogliere e visualizzare feed e recensioni dei social media.

Puoi anche creare widget slider o carosello che mostrano i tuoi feed di Instagram o Facebook sul tuo sito web. Tagga le foto con pulsanti di invito all'azione per un maggiore coinvolgimento.

Prezzi di EmbedSocial

Clicca qui per provare EmbedSocial .

Flockler

Flockler, utilizzato da marchi noti come Continental, GoPro e Metallica, aiuta le aziende a creare feed di social media coinvolgenti per i loro siti web, display digitali, campagne hashtag ed eventi dal vivo.

Con Flockler, puoi visualizzare i contenuti che hai raccolto utilizzando diversi layout. Puoi creare bacheche, griglie, caroselli e presentazioni e mostrarli su un numero illimitato di siti web, app mobili, intranet e schermi digitali con la stessa quota di abbonamento.

a) UGC acquistabile

Trasforma i tuoi contenuti brandizzati e i contenuti generati dagli utenti (UGC) in gallerie di immagini e video accessibili per il tuo negozio online e diverse piattaforme digitali. Aggiungi tag ai tuoi prodotti su immagini e video, migliorando la riprova sociale del tuo negozio online.

Condividi il tuo feed prodotti con noi e Flockler manterrà automaticamente aggiornato il tuo catalogo prodotti, eliminando la necessità di aggiornamenti manuali. Garantisce che le tue gallerie di prodotti indirizzino i visitatori solo ai prodotti attualmente disponibili nel tuo negozio online.

Con Flockler puoi creare un numero illimitato di Wall, Griglie, Carousel e Slideshow, integrandoli perfettamente in qualsiasi negozio online. Metti in mostra gallerie di immagini e contenuti acquistabili sulla homepage, sulle pagine prodotto, nelle categorie e in altre aree chiave.

b) Recensioni dei clienti

Ti consente di raccogliere recensioni, testimonianze e feedback direttamente dai tuoi clienti sul tuo sito web, via email e sui social media. Permetti ai tuoi clienti di condividere le loro esperienze aggiungendo testo e immagini alle loro recensioni.

Utilizza le recensioni e le testimonianze dei clienti nei tuoi annunci sui social media e nelle campagne di email marketing per aumentare le conversioni.

c) Gestione dei diritti UGC

Riceverai l'autorizzazione a utilizzare immagini e video generati dagli utenti (UGC) anche al di fuori del tuo sito web. Condividi i tuoi UGC sui tuoi canali social ufficiali o incorporali in annunci sui social media, cataloghi cartacei e qualsiasi altra piattaforma in cui desideri pubblicare contenuti generati dagli utenti.

d) Strumento di analisi dei social media

Offre preziose informazioni sulle prestazioni dei tuoi contenuti social, aiutandoti a migliorare il ROI e a ottenere risultati migliori. Il componente aggiuntivo Analytics di Flockler fornisce una panoramica chiara, senza la necessità di dover analizzare dati complessi.

e) Feed acquistabili di Shopify

Permette ai tuoi clienti di acquistare direttamente dai tuoi social media integrando i feed Instagram acquistabili nel tuo negozio Shopify. Trasforma la tua vetrina da prodotti statici a una vetrina dinamica di infinite storie ed esperienze reali, senza sforzo, con Flockler.

L'integrazione con il tuo negozio Shopify è progettata per essere semplice, garantendo un'implementazione semplice e senza richiedere competenze tecniche.

Prezzi Flocker

Flockler offre una prova gratuita di 14 giorni, con prezzi a partire da $ 129 al mese.

Clicca qui per provare Flockler .

Curator.io

Curator è una soluzione di aggregazione social media intuitiva, adatta ad aziende di tutte le dimensioni, inclusi nomi noti come Unilever, Yamaha e Netflix. Il processo è semplice: collega i tuoi account social, personalizza il feed a tuo piacimento e incorporalo senza sforzo utilizzando il codice fornito.

Curator eccelle nel filtraggio dei contenuti, garantendo un feed adatto alle famiglie. Puoi stabilire regole per bloccare linguaggio inappropriato o contenuti non in linea con il tuo brand.

Oltre alla sicurezza, Curator è ottimizzato per gli hashtag, ottimizzato per la SEO e ottimizzato per i dispositivi mobili. Cerca autonomamente hashtag specifici, adattandosi sia a Google che ai cartelloni pubblicitari.

Le funzionalità principali includono la possibilità di ricondividere i feed dei social media sul tuo sito web, modelli preimpostati per feed visivamente accattivanti, moderazione dei contenuti, aggiunta di post specifici e opzioni di visualizzazione su desktop, dispositivi mobili e schermi digitali durante eventi o cartelloni pubblicitari.

Prezzi del curatore

Clicca qui per provare Curator .

Conclusione

Come puoi vedere, gli aggregatori di social media sono un ottimo modo per mostrare i tuoi contenuti sui social media, aumentare la tua visibilità online e interagire con il tuo pubblico.

Che tu voglia creare una campagna hashtag, un feed di profilo, un feed di piattaforma, un feed di YouTube o un feed combinato, esiste uno strumento adatto a te.

Puoi utilizzare questi strumenti per creare e integrare feed dei social media sul tuo sito web, blog o schermata dell'evento, personalizzandoli in base alle tue esigenze. Provali e scopri quale funziona meglio per te.

fonte

Errori GSC: dati non aggiornati

2026-07-25T15:34:00.000+02:00

Nella tab 'Indicizzazione' di Search Console compare l'avviso: "A causa di problemi interni, questo report non è stato aggiornato e non riflette i dati recenti". I dati sono fermi a 24 giorni fa. Vorremmo capire cosa sta succedendo e se si può fare qualcosa per risolvere.

l' avviso riporta esattamente ciò che sta succedendo, c'è un delay nell' aggiornamento dei dati mostrati nella Search Console ma questo, per fortuna, non riguarda in alcun modo i processi di scansione e indicizzazione.

Gli unici che sono in condizione di operare per ristabilire il normale funzionamento sono già a lavoro per farlo quindi non resta che avere pazienza.

Personalizza la barra di scorrimento con jScrollPane

2026-07-20T21:15:00.000+02:00

jScrollPane è uno script jQuery che permette di modificare la barra di scorrimento del blog , ovvero quella del browser .
Sebbene sia possibile modificarla tramite CSS, il problema è che non esiste uno standard, quindi con il CSS possiamo farla funzionare solo in Chrome e Safari; nel caso di Internet Explorer, esiste un codice specifico, ma ovviamente funziona solo in quel browser (non so quali versioni). Quindi, quello che faremo ora è dare alla barra di scorrimento un nuovo aspetto utilizzando jQuery, in modo che la modifica sia visibile in tutti i browser. Puoi vedere un esempio in questo blog di prova ; noterai che la barra di scorrimento ha una forma e un colore diversi. Per modificare la barra di scorrimento del tuo blog, vai prima su Template | Modifica HTML e incolla questo codice prima di </head> :

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<style>
.jspContainer {overflow: hidden;position: relative;}.jspPane {position: absolute;}
.jspVerticalBar {position: absolute;top: 0;right: 0;width: 16px;height: 100%;background: #ccc;} .jspHorizontalBar {position: absolute;bottom: 0;left: 0;width: 100%;height: 16px;background: #ccc;} .jspVerticalBar *,.jspHorizontalBar * {margin: 0;padding: 0;} .jspCap {display: none;}.jspHorizontalBar .jspCap {float: sinistra;} .jspTrack { background: #dde; /* Colore di sfondo della barra */ position: relative; } .jspDrag { background: #bbd; /* Colore del pulsante di spostamento */ position: relative; top: 0; left: 0; cursor: pointer; } .jspHorizontalBar .jspTrack, .jspHorizontalBar .jspDrag { float: left; height: 100%; } .jspArrow { background: #50506d; /* Colore dei limiti */ text-indent: -20000px; display: block; cursor: pointer; } .jspArrow.jspDisabled { cursor: default; background: #80808d; /*Colore dei limiti quando il pulsante li raggiunge*/ } .jspVerticalBar .jspArrow { altezza: 16px; } .jspHorizontalBar .jspArrow { larghezza: 16px; float: sinistra; altezza: 100%; } .jspVerticalBar .jspArrow:focus {outline: nessuno;}.jspCorner {sfondo: #eeeef4;float: sinistra;altezza: 100%;}* html .jspCorner {margine: 0 -3px 0 0;} html, body { altezza: 100%; margine: 0; padding: 0; } #blog-container { altezza: 100%; margine: 0; padding: 0; overflow: auto; } </style> <script>

//<![CDATA[
/*! Copyright (c) 2013 Brandon Aaron (http://brandonaaron.net)
* Concesso in licenza secondo la licenza MIT (LICENSE.txt).
* Versione: 3.1.3
*/
(function (factory) {
if ( typeof define === 'function' && define.amd ) {
define(['jquery'], factory);
} else if (typeof exports === 'object') {
module.exports = factory;
} else {
// Globali del browser
factory(jQuery);
}
}(function ($) {
var toFix = ['wheel', 'mousewheel', 'DOMMouseScroll', 'MozMousePixelScroll'];
var toBind = 'onwheel' in document || document.documentMode >= 9 ? ['wheel'] : ['mousewheel', 'DomMouseScroll', 'MozMousePixelScroll'];
var lowestDelta, lowestDeltaXY;
if ( $.event.fixHooks ) {
for ( var i = toFix.length; i; ) {
$.event.fixHooks[ toFix[--i] ] = $.event.mouseHooks;
}
}
$.event.special.mousewheel = {
setup: function() {
if ( this.addEventListener ) {
for ( var i = toBind.length; i; ) {
this.addEventListener( toBind[--i], handler, false );
}
} else {
this.onmousewheel = handler;
}
},
teardown: function() {
if ( this.removeEventListener ) {
for ( var i = toBind.length; i; ) {
this.removeEventListener( toBind[--i], handler, false );
}
} else {
this.onmousewheel = null;
}
}
};
$.fn.extend({
mousewheel: function(fn) {
return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
},
unmousewheel: function(fn) {
return this.unbind("mousewheel", fn);
}
});
function handler(event) {
var orgEvent = event || window.event,
args = [].slice.call(arguments, 1),
delta = 0,
deltaX = 0,
deltaY = 0,
absDelta = 0,
absDeltaXY = 0,
fn;
event = $.event.fix(orgEvent);
event.type = "mousewheel";
if ( orgEvent.wheelDelta ) { delta = orgEvent.wheelDelta; }
if ( orgEvent.detail ) { delta = orgEvent.detail * -1; }
if ( orgEvent.deltaY ) {
deltaY = orgEvent.deltaY * -1;
delta = deltaY;
}
if ( orgEvent.deltaX ) {
deltaX = orgEvent.deltaX;
delta = deltaX * -1;
}
if ( orgEvent.wheelDeltaY !== undefined ) { deltaY = orgEvent.wheelDeltaY; }
if ( orgEvent.wheelDeltaX !== undefined ) { deltaX = orgEvent.wheelDeltaX * -1; }
absDelta = Math.abs(delta);
if ( !lowestDelta || absDelta < lowestDelta ) { lowestDelta = absDelta; }
absDeltaXY = Math.max(Math.abs(deltaY), Math.abs(deltaX)); if ( !lowestDeltaXY || absDeltaXY < lowestDeltaXY ) { lowestDeltaXY = absDeltaXY; } fn = delta > 0 ? 'floor' : 'ceil'; delta = Math[fn](delta / lowestDelta); deltaX = Math[fn](deltaX / lowestDeltaXY); deltaY = Math[fn](deltaY / lowestDeltaXY); args.unshift(event, delta, deltaX, deltaY); return ($.event.dispatch || $.event.handle).apply(this, args); } })); /* * jScrollPane - v2.0.0beta5 - 2010-09-18 * http://jscrollpane.kelvinluck.com/ * Copyright (c) 2010 Kelvin Luck * Doppia licenza con le licenze MIT e GPL. */

(function(b,a,c){ b.fn.jScrollPane=function(f){function d(C,L){var au,N=this,V,ah,v,aj,Q,W,y,q,av,aB,ap,i,H,h,j,X,R,al,U,t,A,Am,ac,ac,F,l,ao,at,x,q,aE,g,aA,ag=true,M=t rue,aD=false,k=false,Z=b.fn.mwheelIntent?"mwheelIntent.jsp":"mousewheel.jsp";aE=C.css("paddingTop")+" "+C.css("paddingRight")+" "+C.css("paddingBottom")+" "+C.css("paddingLeft");g=(parseInt(C.css("paddingLeft"))||0)+(parseInt(C.css("paddingLeft"))||0)+(parseInt(C.css("paddingLeft")); aL,aK,aJ,aG,aF,aI;au=aH;if(V==c){C.css({overflow:"hidden",padding:0});ah=C.innerWidth()+g;v=C.innerHeight();C.width(ah);V=b('<b'sp).Pawdiv class="j; class="jspContainer" />').css({width:ah+"px",height:v+"px"}));C.wrapInner(V.parent());aj=C.find(">.jspContainer");V=aj.find(">.jspPane");V.css("padding",aE)}else{C.c. ss("width",null);aI=C.outerWidth()+g!=ah||C.outerHeight()!=v;if(aI){ah=C.innerWidth()+g;v=C.innerHeight();aj.css({width:ah+"px",height:}+}"px" A=V.innerWidth();if(!aI&&V.outerWidth()==Q&&V.outerHeight()==W){if(aB||av){V.css("width",aA+"px");C.css("width",(aA+g)+"cs(px")V.}re ",null);C.css("width",(ah)+"px");aj.find(">.jspVerticalBar,>.jspHorizontalBar").remove().end()}aL=V.clone().css("position","absolute");aK=b('<div style="width:1px; position: relative;" />').append(aL);b("body").append(aK);Q=Math.max(V.outerWidth(),aL.outerWidth());a. K.remove();W=V.outerHeight();y=Q/ah;q=W/v;av=q>1;aB=y>1;if(!(aB||av)){C.removeClass("jspScrollable");V.css({top:0,width:aj.width()-g});n();D();O();w();af()}else{C.addClass("jspScrollable");aJ=au.maintainPosition&&(H|)Xa);{aF=aay(a)); aC();z();E();if(aJ){K(aG);J(aF)}I();ad();if(au.enableKeyboardNavigation){P()}if(au.clickOnTrack){p()}B();if(au.hijackInternalLinks){m(&)&}}if(au.auto. aq){aq=setInterval(function(){an(au)},au.autoReinitialiseDelay)}else{if(!au.autoReinitialise&&aq){clearInterval(aq)}}C.trigger("jsp-initialised",[aB||av])}function aC(){if(av){aj.append(b('<div class="jspVerticalBar" />').append(b('<div class="jspCap jspCapTop" />'),b('<div class="jspTrack" />').append(b(<"/jsp'ra). class="jspDragTop" />'),b('<div class="jspDragBottom" />'))),b('<div class="jspCap jspCapBottom" />')));R=aj.find(">.jspVerticalBar");al=R.find(">.jspTrack");ap=al.find(">.jspDrag");if(au.showArrows){am=b('<a class="jspArrow jspArrowUp" />').bind("mousedown.jsp",az(0,-1)).bind("click.jsp",ax);ac=b('<a class="jspArrow jspArrowDown" />').bind("mousedown.jsp",az(0,1)).bind("click.jsp",ax);if(au.arrowScrollOnHover){am.bind("mouseover.jsp",az(0,-1,am));ac.bind("mouseover.jsp",az(0,1,ac))}ai(al,au.verticalArrowPositions,am,ac)}t=v;aj.find(">.jspVerticalBar>.jspCap:visible,>.jspVerticalBar>.jspArrow").each(function(){t-=b(this).outerHeight()});ap.hover(function(){ap.addClass("jspHover")},function(){ap.removeClass("jspHover")}).bind("mousedown.jsp",function(aF){b("html").bind("dragstart.jsp selectstart.jsp",function(){return false});ap.addClass("jspActive");var s=aF.pageY-ap.position().top;b("html").bind("mousemove.jsp",function(aG){S(aG.pageY-s,false)}).bind("mouseup.jsp mouseleave.jsp",ar);return false});o()}}function o(){al.height(t+"px");H=0;U=au.verticalGutter+al.outerWidth();V.width(ah-Ug);if(R.position().left==0){V.css("margin-left",U+"px")}}function z(){if(aB){aj.append(b('<div class="jspHorizontalBar" />').append(b('<div class="jspCap jspCapLeft" />'),b('<div class="jspTrack" />').append(b('<div class="jspDrag" />').append(b('<div class="jspDragLeft" />'),b('<div class="jspDragRight" />'))),b('<div class="jspCap jspCapRight" />')));ak=aj.find(">.jspHorizontalBar");F=ak.find(">.jspTrack");h=F.find(">.jspDrag");if(au.showArrows){at=b('<a class="jspArrow jspArrowLeft" />').bind("mousedown.jsp",az(-1,0)).bind("click.jsp",ax);x=b('<a class="jspArrow jspArrowRight" />').bind("mousedown.jsp",az(1,0)).bind("click.jsp",ax);bind("mousemove.jsp",function(aG){S(aG.pageY-s,false)}).bind("mouseup.jsp mouseleave.jsp",ar);return false});o()}}function o(){al.height(t+"px");H=0;U=au.verticalGutter+al.outerWidth();V.width(ah-Ug);if(R.position().left==0){V.css("margin-left",U+"px")}}function z(){if(aB){aj.append(b('<div class="jspHorizontalBar" />').append(b('<div class="jspCap jspCapLeft" />'),b('<div class="jspTrack" />').append(b('<div class="jspDrag" />').append(b('<div class="jspDragLeft" />'),b('<div class="jspDragRight" />'))),b('<div class="jspCap jspCapRight" />')));ak=aj.find(">.jspHorizontalBar");F=ak.find(">.jspTrack");h=F.find(">.jspDrag");if(au.showArrows){at=b('<a class="jspArrow jspArrowLeft" />').bind("mousedown.jsp",az(-1,0)).bind("click.jsp",ax);x=b('<a class="jspArrow jspArrowRight" />').bind("mousedown.jsp",az(1,0)).bind("click.jsp",ax);bind("mousemove.jsp",function(aG){S(aG.pageY-s,false)}).bind("mouseup.jsp mouseleave.jsp",ar);return false});o()}}function o(){al.height(t+"px");H=0;U=au.verticalGutter+al.outerWidth();V.width(ah-Ug);if(R.position().left==0){V.css("margin-left",U+"px")}}function z(){if(aB){aj.append(b('<div class="jspHorizontalBar" />').append(b('<div class="jspCap jspCapLeft" />'),b('<div class="jspTrack" />').append(b('<div class="jspDrag" />').append(b('<div class="jspDragLeft" />'),b('<div class="jspDragRight" />'))),b('<div class="jspCap jspCapRight" />')));ak=aj.find(">.jspHorizontalBar");F=ak.find(">.jspTrack");h=F.find(">.jspDrag");if(au.showArrows){at=b('<a class="jspArrow jspArrowLeft" />').bind("mousedown.jsp",az(-1,0)).bind("click.jsp",ax);x=b('<a class="jspArrow jspArrowRight" />').bind("mousedown.jsp",az(1,0)).bind("click.jsp",ax);
if(au.arrowScrollOnHover){at.bind("mouseover.jsp",az(-1,0,at));x.bind("mouseover.jsp",az(1,0,x))}ai(F,au.horizontalArrowPositions,at,x)}h.hover(function(){h.addClass("jspHover")},function(){h.removeClass("jspHover")}).bind("mousedown.jsp",function(aF){b("html").bind("dragstart.jsp selectstart.jsp",function(){return false});h.addClass("jspActive");var s=aF.pageX-h.position().left;b("html").bind("mousemove.jsp",function(aG){T(aG.pageX-s,false)}).bind("mouseup.jsp mouseleave.jsp",ar);return false});l=aj.innerWidth();ae()}else{}}funzione ae(){aj.find(">.jspHorizontalBar>.jspCap:visible,>.jspHorizontalBar>.jspArrow").each(function(){l-=b(this).outerWidth()});F.width(l+"px");X=0}funzione E(){if(aB&&av){var aF=F.outerHeight(),s=al.outerWidth();t-=aF;b(ak).find(">.jspCap:visible,>.jspArrow").each(function(){l+=b(this).outerWidth()});l-=s;v-=s;ah-=aF;F.parent().append(b('<div class="jspCorner" />').css("width",aF+"px"));o();ae()}if(aB){V.width((aj.outerWidth()-g)+"px")}W=V.outerHeight();q=W/v;if(aB){ao=1/y*l;if(ao>au.horizontalDragMaxWidth){ao=au.horizontalDragMaxWidth}else{if(ao<au.horizontalDragMinWidth){ao=au.hor izontalDragMinWidth}}h.width(ao+"px");j=l-ao;ab(X)}if(av){A=1/q*t;if(A>au.verticalDragMaxHeight){A=au.verticalDragMaxHeight}else{if(A<au.verticalDragMinHeight){A=au.verticalDragMinHeight}}ap.height(A+"px");i=tA;aa(H)}}function ai(aG,aI,aF,s){var aK="prima",aH="dopo",aJ;if(aI=="os"){aI=/Mac/.test(navigator.platform)?"dopo":"spl it"}if(aI==aK){aH=aI}else{if(aI==aH){aK=aI;aJ=aF;aF=s;s=aJ}}aG[aK](aF)[aH](s)}funzione az(aF,s,aG){return function(){G(aF,s,this,aG);this.blur();return false}}funzione G(aH,aF,aK,aJ){aK=b(aK).addClass("jspActive");var aI,s=function(){if(aH!=0){T(X+aH*au.arrowButtonSpeed,false)}if(aF!=0){S(H+aF*au.arrowButtonSpeed,false)}},aG=setInterval(s,au.arrowRepeatFreq);s();aI=aJ==c?"mouseup.jsp":"mouseout.jsp";aJ=aJ||b("html");aJ.bind(aI,function(){aK.removeClass("jspActive");clearInterval(aG);aJ.unbind(aI)})}function p(){w();if(av){al.bind("mousedown.jsp",function(aH){if(aH.originalTarget==c||aH.originalTarget==aH.currentTarget){var aG=b(this),s=setInterval(function(){var aI=aG.offset(),aJ=aH.pageY-aI.top;if(H+A<aJ){S(H+au.trackClickSpeed)}else{if(aJ<H){S(H-au.trackClickSpeed)}else{aF()}}},au.trackClickRepeatFreq),aF=function(){s&&clearInterval(s);s=null;b(document).unbind("mouseup.jsp",aF)};b(document).bind("mouseup.jsp",aF);return false}})}if(aB){F.bind("mousedown.jsp",function(aH){if(aH.originalTarget==c||aH.originalTarget==aH.currentTarget){var aG=b(this),s=setInterval(function(){var aI=aG.offset(),aJ=aH.pageX-aI.left;if(X+ao<aJ){T(X+au.trackClickSpeed)}else{if(aJ<X){T(X-au.trackClickSpeed)}else{aF()}}},au.trackClickRepeatFreq),aF=function(){s&&clearInterval(s);s=null;b(document).unbind("mouseup.jsp",aF)};b(document).bind("mouseup.jsp",aF);return false}})}}function w(){F&&F.unbind("mousedown.jsp");al&&al.unbind("mousedown.jsp")}function ar(){b("html").unbind("dragstart.jsp selectstart.jsp mousemove.jsp mouseup.jsp mouseleave.jsp");ap&&ap.removeClass("jspActive");h&&h.removeClass("jspActive")}function S(s,aF){if(!av){return}if(s<0){s=0}else{if(s>i){s=i}}if(aF==c){aF=au.animateScroll}if(aF){N.animate(ap,"top",s,aa)}else{ap.css("top",s);aa(s)}}function aa(aF){if(aF==c){aF=ap.position().top}aj.scrollTop(0);H=aF;var aI=H==0,aG=H==i,aH=aF/i,s=-aH*(Wv);if(ag!=aI||aD!=aG){ag=aI;aD=aG;C.trigger("jsp-arrow-change",[ag,aD,M,k])}u(aI,aG);V.css("top",s);C.trigger("jsp-scroll-y",[-s,aI,aG])}function T(aF,s){if(!aB){return}if(aF<0){aF=0}else{if(aF>j){aF=j}}if(s==c){s=au.animateScroll}if(s){N.animate(h,"left",aF,ab)}else{h.css("left",aF);ab(aF)}}function ab(aF){if(aF==c){aF=h.position().left}aj.scrollTop(0);X=aF;var aI=X==0,aH=X==j,aG=aF/j,s=-aG*(Q-ah);if(M!=aI||k!=aH){M=aI;k=aH;C.trigger("jsp-arrow-change",[ag,aD,M,k])}r(aI,aH);V.css("left",s);C.trigger("jsp-scroll-x",[-s,aI,aH])}function u(aF,s){if(au.showArrows){am[aF?"addClass":"removeClass"]("jspDisabled");ac[s?"addClass":"removeClass"]("jspDisabled")}}function r(aF,s){if(au.showArrows){at[aF?"addClass":"removeClass"]("jspDisabled");animate(h,"sinistra",aF,ab)}else{h.css("sinistra",aF);ab(aF)}}function ab(aF){if(aF==c){aF=h.position().sinistra}aj.scrollTop(0);X=aF;var aI=X==0,aH=X==j,aG=aF/j,s=-aG*(Q-ah);if(M!=aI||k!=aH){M=aI;k=aH;C.trigger("jsp-arrow-change",[ag,aD,M,k])}r(aI,aH);V.css("sinistra",s);C.trigger("jsp-scroll-x",[-s,aI,aH])}function u(aF,s){if(au.showArrows){am[aF?"addClass":"removeClass"]("jspDisabled");ac[s?"addClass":"removeClass"]("jspDisabled")}}function r(aF,s){if(au.showArrows){at[aF?"addClass":"removeClass"]("jspDisabled");animate(h,"sinistra",aF,ab)}else{h.css("sinistra",aF);ab(aF)}}function ab(aF){if(aF==c){aF=h.position().sinistra}aj.scrollTop(0);X=aF;var aI=X==0,aH=X==j,aG=aF/j,s=-aG*(Q-ah);if(M!=aI||k!=aH){M=aI;k=aH;C.trigger("jsp-arrow-change",[ag,aD,M,k])}r(aI,aH);V.css("sinistra",s);C.trigger("jsp-scroll-x",[-s,aI,aH])}function u(aF,s){if(au.showArrows){am[aF?"addClass":"removeClass"]("jspDisabled");ac[s?"addClass":"removeClass"]("jspDisabled")}}function r(aF,s){if(au.showArrows){at[aF?"addClass":"removeClass"]("jspDisabled");

x[s?"addClass":"removeClass"]("jspDisabled")}}funzione J(s,aF){var aG=s/(Wv);S(aG*i,aF)}funzione K(aF,s){var aG=aF/(Q-ah);T(aG*j,s)}funzione Y(aN,aL,aF){var aJ,aH,s=0,aG,aK,aM;try{aJ=b(aN)}catch(aI){return}aH=aJ.outerHeight();aj.scrollTop(0);while(!aJ.is(".jspPane")){s+=aJ.position().top;aJ=aJ.offsetParent();if(/^body|html$/i.test(aJ[0].nodeName)){return}}aG=aw();aK=aG+v;if(s<aG||aL){aM=s-au.verticalGutter}else{if(s+aH>aK){aM=s-v+aH+au.verticalGutter}}if(aM){J(aM,aF)}}function ay(){return -V.position().left}function aw(){return -V.position().top}function ad(){aj.unbind(Z).bind(Z,function(aI,aJ,aH,aF){var aG=X,s=H;T(X+aH*au.mouseWheelSpeed,false);S(H-aF*au.mouseWheelSpeed,false);return aG==X&&s==H})}function n(){aj.unbind(Z)}function ax(){return false}function I(){V.unbind("focusin.jsp").bind("focusin.jsp",function(s){if(s.target===V[0]){return}Y(s.target,false)})}function D(){V.unbind("focusin.jsp")}function P(){var aF,s;C.attr("tabindex",0).unbind("keydown.jsp").bind("keydown.jsp",function(aJ){if(aJ.target!==C[0]){return}var aH=X,aG=H,aI=aF?2:16;switch(aJ.keyCode){case 40:S(H+aI,false);break;case 38:S(H-aI,false);break;case 34:case 32:J(aw()+Math.max(32,v)-16);break;case 33:J(aw()-v+16);break;case 35:J(Wv);break;case 36:J(0);break;case 39:T(X+aI,false);break;case 37:T(X-aI,false);break}if(!(aH==X&&aG==H)){aF=true;clearTimeout(s);s=setTimeout(function(){aF=false},260);return false}});if(au.hideFocus){C.css("outline","none");if("hideFocus" in aj[0]){C.attr("hideFocus",true)}}else{C.css("outline","");if("hideFocus" in aj[0]){C.attr("hideFocus",false)}}}function O(){C.attr("tabindex","-1").removeAttr("tabindex").unbind("keydown.jsp")}function B(){if(location.hash&&location.hash.length>1){var aG,aF;prova{aG=b(location.hash)}cattura(s){ritorna}se(aG.length&&V.find(aG)){se(aj.scrollTop()==0){aF=setInterval(funzione(){se(aj.scrollTop()>0){Y(location.hash,true);b(document).scrollTop(aj.position().top);clearInterval(aF)}},50)}altrimenti{Y(location.hash,true);b(document).scrollTop(aj.position().top)}}}}funzione af(){b("a.jspHijack").unbind("click.jsp-hijack").removeClass("jspHijack")}funzione m(){af();b("a[href^=#]").addClass("jspHijack").bind("click.jsp-hijack",function(){var s=this.href.split("#"),aF;if(s.length>1){aF=s[1];if(aF.length>0&&V.find("#"+aF).length>0){Y("#"+aF,true);return false}}})}b.extend(N,{reinitialise:function(aF){aF=b.extend({},aF,au);an(aF)},scrollToElement:function(aG,aF,s){Y(aG,aF,s)},scrollTo:function(aG,s,aF){ K(aG,aF);J(s,aF)},scrollToX:funzione(aF,s){K(aF,s)},scrollToY:funzione(s,aF){J(s,aF)},scrollBy:funzione(aF,s,aG){N.scrollByX(aF,aG);N.scrollByY(s,aG)},scrollByX: funzione (s, aG) { var aF = sì () + s, aH = aF / (in Q)); aG={};aG[aI]=s;aF.animate(aG,{duration:au.animateDuration,ease:au.animateEase,queue:false,step:aH})},getContentPositionX:function(){return ay()},getContentPositionY:function(){return aw ( ) } , getIsScrollableH : function () { return aB } , getIsScrollableV : function ( ) { return av } , getContentPane : function () { return V},scrollToBottom:function(s){S(i,s)},hijackInternalLinks:function(){m()}})}f=b.extend({},b.fn.jScrollPane.defaults,f);var e;this.each(function(){var g=b(this),h=g.data("jsp");if(h){h.reinitialize(f)}else{h=new d(g,f);g.data("jsp",h)}e=e?e.add(g):g});return e};b.fn.jScrollPane.defaults={showArrows:false,maintainPosition:true,clickOnTrack:true,autoRestart:false,autoRestartDelay:500,verticalDragMinHeight:0,verticalDragMaxHeight:99999,horizontalDragMinWidth:0,horizontalDragMaxWidth:99999,animateScroll:false,animateDuration:300,animateEase:"linear",hijack InternalLinks:false,verticalGutter:4,horizontalGutter:4,mouseWheelSpeed:10,arrowButtonSpeed:10,arrowRepeatFrequency:100,arrowScrollOnHover:false,trackClickSpeed :30,trackClickRepeatFreq:100,verticalArrowPositions:"split",horizontalArrowPositions:"split",enableKeyboardNavigation:true,hideFocus:false}})(jQuery,this);
//]]>
</script>
<script>
$(document).ready(function() {
$('.scroll-pane').jScrollPane( {showArrows: true} );
});
</script>

Quindi cerca l'etichetta:

<corpo>

Oppure questa riga:

<body expr:class='"loading" + data:blog.mobileClass'>

Sotto una di queste due opzioni, aggiungi quanto segue:

<div class='scroll-pane' id='blog-container'>

Infine, trova il tag </body> e incolla questo sopra di esso:

</div>

Salva le modifiche e hai finito. In verde, vedrai dove sono stati modificati i colori della barra di scorrimento e le sue diverse aree. Dato che si tratta di CSS, puoi aggiungere altri stili se lo desideri, come ombre, angoli arrotondati, ecc.
Se vuoi nascondere i bordi superiore e inferiore (come nell'esempio), elimina la parte evidenziata in rosso.
Ricorda che lo script utilizza jQuery, quindi se lo hai già installato, non includere nuovamente lo script (la prima riga di codice). Se utilizzi Scriptaculous o Mootools, dovrai apportare alcune piccole modifiche affinché funzioni.
Il codice sembra lungo, ma è sempre meglio incorporare gli script direttamente nel template piuttosto che caricarli su un servizio di hosting. In questo modo, gli script saranno sempre disponibili e si caricheranno più velocemente. In ogni caso, il risultato finale è piuttosto gradevole esteticamente, non credi?

fonte

Come programmare un invio con Gmail.

2026-07-18T15:53:00.000+02:00

Puoi programmare l'invio di un'email in Gmail utilizzando la funzione di pianificazione dell'invio.

Ecco come fare, passo dopo passo, sia da desktop che da mobile:

️ Su Desktop (Web Browser)

Componi l'Email: Clicca su "Scrivi" nell'angolo in alto a sinistra per avviare un nuovo messaggio.
Completa l'Email: Scrivi il destinatario, l'oggetto e il corpo del messaggio come faresti normalmente.
Trova il pulsante di Pianificazione: Invece di cliccare direttamente su "Invia", clicca sulla freccetta accanto al pulsante "Invia".
Seleziona l'Opzione: Apparirà un menu a tendina. Seleziona "Programma invio".
Scegli Data e Ora: Si aprirà una finestra dove puoi scegliere una delle opzioni predefinite (ad esempio, domani mattina) oppure cliccare su "Scegli data e ora" per impostare l'ora e la data esatte in cui desideri che l'email venga inviata.
Conferma: Clicca su "Programma invio" per confermare.

Su Mobile (App Gmail)

Componi l'Email: Apri l'app Gmail e tocca "Scrivi" (l'icona a forma di matita o il pulsante rotondo) in basso a destra.
Completa l'Email: Scrivi il messaggio come al solito.
Accedi alle Opzioni: Tocca l'icona con i tre puntini verticali (⋮) nell'angolo in alto a destra dello schermo.
Seleziona l'Opzione: Nel menu che appare, tocca "Programma invio".
Scegli Data e Ora: Seleziona una delle opzioni suggerite o tocca "Scegli data e ora" per impostare la data e l'ora specifiche.
Conferma: Tocca "Programma invio" (o l'equivalente) per salvare.

Dove trovare le Email Programmate

Le email che hai programmato vengono spostate in una cartella speciale chiamata "Programmati" (o "Scheduled"), che trovi nel menu a sinistra (desktop) o nel menu hamburger (mobile). Puoi aprire questa cartella per modificare l'orario di invio o annullare l'invio dell'email prima che venga spedita.

Come scrivere con l'AI in Documenti Google (Workspace Labs)

2026-07-11T19:58:00.000+02:00

Questo articolo fa riferimento a Google Workspace Labs, un programma per trusted tester che consente agli utenti di provare nuove funzionalità di AI. Per verificare se hai accesso alle funzionalità di Workspace Labs, apri un documento in Documenti Google. A sinistra, individua Aiutami a scrivere . Scopri dove puoi utilizzare le funzionalità di Workspace Labs.

In Documenti Google, puoi utilizzare il prompt "Aiutami a scrivere" per suggerire testo utilizzando l'intelligenza artificiale. Puoi utilizzare il prompt per:

Scrivere nuovo testo. Ad esempio, puoi chiedere a Documenti Google di scrivere la bozza di una lettera o una didascalia per i social media.
Riscrivere il testo esistente. Ad esempio, puoi riformulare il testo o renderlo più formale, più conciso o più dettagliato.

Questa funzionalità è attualmente disponibile su desktop.

Utilizza l'AI per scrivere qualcosa di nuovo

Apri un documento in Documenti Google sul computer.
Nel documento, fai clic sul punto in cui vuoi scrivere.
A destra, fai clic su Aiutami a scrivere .
Inserisci un prompt. Ad esempio:
- "Scrivi una poesia sulla vita di un bambino di 6 anni"
- "Manuale di istruzioni per l'utilizzo di un tosaerba"
- "Lettera di ringraziamento in seguito a un colloquio"

Suggerimento: per risultati migliori, scrivi istruzioni anziché domande. Ad esempio: "Scrivi il programma di un summit sul design tecnologico".

Fai clic su Crea.
(Facoltativo) Dopo aver generato il testo, puoi:
- Inviare un feedback sul testo suggerito: fai clic su Suggerimento utile o Suggerimento sbagliato .
- Modificare il prompt: nella parte superiore della finestra popup, fai clic sul prompt. Modifica il prompt e fai clic su Aggiorna.
- Riscrivere il testo suggerito: fai clic su Perfeziona e scegli un'opzione:
  - Tono: seleziona Formale o Informale.
  - Riassumi: fornisce i punti chiave del testo.
  - Elenco puntato: formatta il testo in un elenco puntato.
  - Elabora: aggiunge dettagli per ampliare il testo.
  - Abbrevia: rende il testo più conciso.
  - Riprova: crea una nuova versione del testo.
    - Importante: dopo aver creato una nuova versione, non puoi tornare a quella precedente.
Al termine, fai clic su Inserisci.

Utilizza l'AI per riscrivere un testo esistente

Apri un documento in Documenti Google sul computer.
Seleziona il testo che vuoi riscrivere.
A destra, fai clic su Aiutami a scrivere .
Scegli un'opzione dal menu:
- Modifica con un prompt: scrivi il tuo prompt per perfezionare il testo.
- Riformula: riformula il testo.
- Abbrevia: rende il testo più conciso.
- Elabora: aggiunge dettagli per ampliare il testo.
- Più formale: rende il testo più formale.
- Più informale: rende il testo più informale.
- Elenco puntato: formatta il testo in un elenco puntato.
- Riassumi: fornisce i punti chiave del testo.
(Facoltativo) Dopo aver generato il testo, puoi:
- Inviare un feedback sul testo suggerito: fai clic su Suggerimento utile o Suggerimento sbagliato .
- Modificare il prompt: nella parte superiore della finestra popup, fai clic sul prompt. Modifica il prompt e fai clic su Aggiorna.
- Continuare a perfezionare il testo suggerito: fai clic su Perfeziona e ripeti il passaggio 4.
- Creare una nuova versione del testo: fai clic su Perfeziona Riprova.
  - Importante: dopo aver creato una nuova versione, non puoi tornare a quella generata in precedenza.
Scegli un'opzione:
- Fai clic su Sostituisci per accettare il nuovo testo.
- Fai clic su Inserisci per aggiungere il nuovo testo sotto quello esistente.
- Fai clic su Chiudi per conservare il testo esistente.

Fornisci feedback sul testo generato

Google Workspace con Gemini impara costantemente e potrebbe non essere in grado di supportare la tua richiesta.

Se ricevi un suggerimento che non è preciso o che ritieni non affidabile, puoi comunicarcelo inviando un feedback. Il tuo feedback può contribuire a migliorare le funzionalità di Workspace assistite dall'AI e l'impegno di Google nel campo dell'AI.

Sotto il testo generato, seleziona Suggerimento utile o Suggerimento sbagliato .
Se selezioni Suggerimento sbagliato , puoi selezionare il problema che hai rilevato e inserire un feedback aggiuntivo.
- Facoltativo: per esaminare i dati che verranno allegati al feedback, in basso seleziona Quali dati verranno allegati? Se non vuoi includere i dati nel feedback, deseleziona Allega al tuo feedback i dati raccolti per aiutarci a migliorare l'esperienza con il prodotto.
Seleziona Avanti.
Esamina il contesto aggiuntivo che puoi condividere con il tuo feedback. Se non vuoi includere il contesto aggiuntivo nel feedback, deseleziona Contesto aggiuntivo (contenuti a cui viene fatto riferimento per creare output).
Seleziona Invia.

Disattiva il prompt "Aiutami a scrivere"

Per disattivare una qualsiasi delle funzionalità di Google Workspace Labs, devi uscire da Workspace Labs. Se esci, perderai definitivamente l'accesso a tutte le funzionalità di Workspace Labs e non potrai partecipare di nuovo a Workspace Labs.

Scopri di più sui suggerimenti delle funzionalità di Workspace Labs

I suggerimenti delle funzionalità di Workspace Labs non rappresentano le opinioni di Google e non devono essere attribuiti a Google.
Non considerare le funzionalità di Workspace Labs al pari di consulenze mediche, legali, finanziarie o professionali di altro tipo.
Le funzionalità di Workspace Labs possono suggerire informazioni imprecise o inappropriate. Il tuo feedback rende Workspace Labs più utile e sicuro.
Non includere informazioni personali, riservate o sensibili nei tuoi prompt.
Google utilizza i dati e le metriche di Workspace Labs per fornire, migliorare e sviluppare prodotti, servizi e tecnologie di machine learning su Google.
I tuoi dati di Workspace Labs possono anche essere letti, valutati, annotati ed esaminati da revisori. È importante sottolineare che, quando Google utilizza l'input selezionato da Google (come descritto nell'Informativa sulla privacy) per generare l'output, aggrega i contenuti e l'output risultante e/o assegna loro pseudonimi prima che vengano visualizzati dai revisori, a meno che non siano forniti specificamente come parte del tuo feedback a Google.

Puoi consultare l'Informativa sulla privacy e i Termini di servizio per gli account personali di Google Workspace Labs.

Come vengono raccolti i dati di Workspace Labs in Documenti Google

Quando usi il prompt "Aiutami a scrivere (Labs)" in Documenti Google, Google utilizza e memorizza i seguenti dati:

Prompt inseriti o selezionati
Testo selezionato da riscrivere
Testo generato
Contenuti del documento a cui viene fatto riferimento per generare il testo
Il tuo feedback sul testo generato

Tre nuove suddivisioni nei tuoi report AdSense

2026-07-04T16:49:00.000+02:00

I tuoi report AdSense hanno appena ricevuto un importante upgrade con tre nuove suddivisioni. Questi strumenti sono stati progettati per fornirti informazioni più dettagliate e strategiche sul rendimento degli annunci e sulle entrate, aiutandoti a collegare i punti tra contenuti, pubblico e utili.

Ecco le novità e come possono aiutarti a crescere:

Un nuovo modo per vedere se i tuoi utili sono influenzati da un problema relativo alle norme

Per la prima volta, due nuove suddivisioni ti consentono di vedere il collegamento diretto tra i problemi relativi alle norme e le tue entrate stimate. Questi dettagli ti permettono di avere una visione storica delle applicazioni delle norme e dei trattamenti dei clic confermati, e di capire quale impatto hanno avuto sui tuoi utili in quel periodo.

•
Stato di pubblicazione di annunci secondo le norme: Scopri esattamente in che modo l'applicazione delle norme sta influendo sulla pubblicazione dei tuoi annunci. Ora puoi suddividere il traffico in quattro categorie chiare:

◦
Pubblicazione regolare degli annunci: gli annunci vengono pubblicati normalmente.

◦
Pubblicazione degli annunci a rischio: gli annunci sul tuo sito rischiano di essere disattivati o limitati.

◦
Pubblicazione degli annunci limitata: alcuni annunci sono soggetti a limitazioni sul tuo sito perché determinati inserzionisti non fanno offerte per questi contenuti.

◦
Pubblicazione degli annunci disattivata: la pubblicazione degli annunci sul tuo sito è stata interrotta.

•
Stato del clic confermato: verifica se il gruppo sperimentale "Clic confermato" (applicato per prevenire i clic involontari) è attivo sui tuoi contenuti, per aiutarti a comprenderne l'impatto.

Identifica le tue sorgenti di traffico più preziose.

Da dove proviene il tuo traffico di maggior valore?

La nuova suddivisione delle sorgenti di traffico ti mostra esattamente da dove provengono i tuoi visitatori (ad es. Ricerca Google, Meta, X e così via) e, cosa più importante, quali sorgenti generano le maggiori entrate.

Così potrai concentrare il tuo tempo e le tue risorse sui canali più preziosi per la crescita del tuo sito.

Queste nuove suddivisioni sono ora attive nel tuo account AdSense.

Carica i video di YouTube solo quando l'utente desidera guardarli

2026-06-27T18:23:00.000+02:00

Sapevi che incorporare un video di YouTube aggiunge almeno 400 kB alle dimensioni del tuo blog? Questo perché l'iframe di YouTube deve scaricare immagini, script, stili CSS ed effettuare più richieste per garantire che il player e il video vengano visualizzati correttamente, anche se l'utente non è interessato a guardare il video.
Ora immagina un utente con Internet Explorer che visita un videoblog: una ricetta per il disastro.

Google+ lo sapeva, e sapeva anche che il suo social network avrebbe avuto molti video incorporati che avrebbero potuto influire negativamente sulla velocità di caricamento delle pagine, ma ha risolto il problema in modo molto semplice. La soluzione: l'iframe del video si carica solo quando l'utente ci clicca sopra. Questo impedisce che il video si carichi inutilmente e consumi risorse non necessarie.
Il sistema è in realtà molto semplice. Lo script che vedremo di seguito mostra solo la miniatura del video e, quando l'utente clicca sull'immagine, la miniatura scompare e viene caricato l'iframe contenente il video. Potete vederlo nell'elemento qui sotto; è un'immagine che, quando cliccata, carica il video.

Per implementare questo sistema di caricamento video sul tuo blog, vai su Modello | Modifica HTML e incolla quanto segue prima di </body> :

<script>
//<![CDATA[
// iFrame di YouTube
var i,c,y,v,s,n;v=document.getElementsByClassName("youtube");if(v.length>0){s=document.createElement("style");s.type="text/css";s.innerHTML='.youtube{background-color:#000;max-width:100%;overflow:hidden;position:relative;cursor:hand;cursor:pointer}.youtube .ythumb{bottom:0;display:block;left:0;margin:auto;padding:0;max-width:100%;position:absolute;right:0;top:0;width:100%;height:auto}.youtube .play{filter:alpha(opacity=80);opacity:.8;left:50%;margin-left:-38px;margin-top:-38px;position:absolute;top:50%;width:77px;height:77px;background:url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-ofn60TvnW1Rwu6gdH1mUD-Q_PTlH5Nyz3edKywoB5B-W3_ 05ESaknZOwRrOk-ze0oRuyfIDTwpdp2yat0CQaGJ16RR0NSJOGoqDdVAWbIkmm0RRMozWByDev1yK2ZX15zyMc74MlJGOn/s77/play.png ) no-repeat}';document.body.appendChild(s)}for(n=0;n<v.length;n++){y=v[n];i=document.createElement("img");i.setAttribute("src","http://i.ytimg.com/vi/"+y.id+"/hqdefa ult.jpg");i.setAttribute("class","ythumb");c=document.createElement("div");c.setAttribute("class","play");y.appendChild(i);y.appendChild(c);y.onclick=function(){var a=document.createElement("iframe");a.setAttribute("src","https://www.youtube.com/embed/"+this.id+"?autoplay=1&autohide=1&border=0&wmode=opaque&enablejsapi=1");a.style.width=this.sty le.width;a.style.height=this.style.height;a.style.margin=this.style.margin;a.style.border=this.style.border;a.style.display=this.style.display;this.parentNode.replaceChild(a,this)}};
//]]>
</script>

E ora, ogni volta che vuoi inserire un video nel tuo blog, sia in un post che in un gadget, usa questo codice:

<div class="youtube" id=" XXXXXXXX " style=" width:560px; height:315px; margin:0 auto; display:block; border:none"></div>

Il testo in grassetto mostra la larghezza e l'altezza del video; puoi regolarlo a piacere.
Il testo in rosso è dove inserisci l'ID del video.
Cos'è l'ID del video?
Quando apri un video di YouTube, vedrai un URL nella barra degli indirizzi; gli ultimi caratteri sono l'ID del video.

https://www.youtube.com/watch?v= GfxAEl15pDs

Nel primo frammento di codice, vedrai un URL verde : è l' immagine del pulsante di riproduzione . Puoi modificarla se vuoi, assicurandoti che l'immagine sia di 77x77 pixel.
Come puoi vedere, è un sistema pratico e funzionale per ottimizzare la velocità di caricamento del blog , qualcosa che sia i crawler dei motori di ricerca che i tuoi lettori apprezzeranno, poiché i video non si caricheranno a meno che l'utente non voglia guardarli .

fonte

Più brani (playlist) in HTML5

2026-06-20T18:19:00.000+02:00

Nel post precedente abbiamo visto come incorporare musica in un blog usando il tag `<audio>` e video con il tag `<video>`.
Ora vedremo come creare un piccolo player per riprodurre più brani in HTML5; ovvero come creare una playlist con l' elemento `<audio>` .

Si tratta di un semplice lettore MP3 che consente di aggiungere più brani in loop, in modo che, al termine di un brano, si passi automaticamente al successivo. L'unico problema è che supporta solo file MP3, quindi non funziona con il browser Opera. Non funziona con altri browser che supportano l'elemento <audio>.
Potete vederlo in azione proprio qui, premendo play o selezionando un brano dall'elenco.

Potrebbe sembrare complicato, ma non lo è. Infatti, lo script che utilizza è molto breve; è praticamente tutto CSS.
Per aggiungere questo lettore multi-canzone al tuo blog, vai su Modello | Modifica HTML e aggiungi quanto segue prima di </body> :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'/>
<script>
//<![CDATA[
var audio;var playlist;var tracks;var current;initaudio();function initaudio(){current=0;audio=$('audio');playlist=$('#playlist');tracks=playlist.find('li a');len=tracks.length-1;audio[0].volume=1;playlist.find('a').click(function(e){e.preventDefault();link=$(this);current=link.parent().index();runaudio(link,audio[0])});audio[0] .addEventListener('terminato',function(e){current++;if(current>len){current=0;link=playlist.find('a')[0]}else{link=playlist.find('a')[current]}runaudio($(link),audio[0])})}function runaudio(link,player){player.src=link.attr('href');par=link.parent();par.addClass('attivo').siblings().removeClass('attivo');audio[0].load();audio[0].play()}
//]]>
</script>

Se nel tuo modello è già presente jQuery, ometti la prima riga.

Quindi, proprio lì nella sezione Modifica HTML, cerca il tag ]]></b:skin> e incolla gli stili prima di esso:

#playlist, #player {
width: 400px; /* Larghezza dell'intero contenitore */
padding: 20px;
margin: 0 self;
display: block;
text-align: center;
}
#player {
/* Immagine di sfondo del primo contenitore */
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG96BQhMBfCwMZQaahM2xrX9ZKPbu8qJcZQ9udzl9zBE6j 7aE2fQwFaclS3odB-MqVeJm4asqmzZlJU-ZU6-ag4mkBLUZchr1h019-zA6BJ4Afofb7vKZmV4SsWATfZRMFajCZzuE6p0o/s300/bg.png);
padding: 10px 20px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
audio {
width:300px; /* Larghezza del lettore */
margin:0 auto;
display: inline-block
}
#player:after {
/* Immagine animata */
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAlqm-TzZLNXZNwmHNCGm3EBv1RDo9wJWIAGv3SYi_kSRQwt9P piDLhCYkNKWcaedpa098suJaxGIzCEdgzgCc3ATSXoAKTeCeOjosPoI0ILe86NBLWE59CI_niFgNQbFG0jQcUJLhcnI/s75/equalizador.gif);
padding-left: 10px;
}
#playlist {
margin: 0 auto 20px auto;
display: block;
background: #424242; /* Sfondo del secondo contenitore */
border-top: 5px solid #9F111B;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
text-align: left;
font-size: 12px; /* Stili dei caratteri */
font-family: 'Trebuchet MS', Trebuchet, Verdana, sans-serif;
font-weight: normal;
}
#playlist li, #playlist ul li {
background-image: none;
list-style-type: none;
padding: 0;
margin: 0;
}
#playlist li a {
color: #CCC; /* Colore del brano */
background: #222; /* Sfondo del brano */
padding: 7px 5px;
display: block;
padding-left: 10px;
decorazione del testo: nessuno;
}
#playlist li a:hover{
background: #9F111B; /* Colore di sfondo al passaggio del mouse */
text-decoration: none;
}
#playlist .active a {
color: #B11623; /* Colore del brano attivo */
font-style: italic;
text-decoration: none;
}
#playlist .active a:before {
content: "\25B6";
color: #CCC;
font-style: normal;
padding-right: 8px;
}
#playlist .active a:hover {
color: #222; /* Colore del brano attivo al passaggio del mouse */
}

Infine, in un gadget HTML/Javascript o in un post del blog, aggiungi la seguente struttura:

<div id='player'>
<audio controls='' id='audio' preload='auto' tabindex='0' type='audio/mpeg'>
<source src=' URL del primo brano ' type='audio/mp3'/>
Ciao, il tuo browser non è aggiornato e non può visualizzare questo contenuto.
</audio>
</div>
<ul id='playlist'>
<li class='active'> <a href=' URL del primo brano '> Nome del primo brano </a></li>
<li> <a href=' URL del secondo brano '> Nome del secondo brano </a></li>
<li> <a href=' URL del terzo brano '> Nome del terzo brano </a></li>
</ul>

Lì dovrai inserire gli URL dei tuoi brani dove indicato in rosso . Nota che l'URL del primo brano viene aggiunto due volte, una volta nel player e una volta nella playlist. Tutti gli URL dei brani devono essere in formato MP3. Aggiungi i titoli dei brani
in blu
. Se desideri personalizzarli, puoi farlo seguendo le istruzioni in verde , dove vedrai come modificare dimensioni, colori, sfondi, ecc.
L'immagine dell'equalizzatore è una GIF animata; puoi rimuoverla se ritieni che sia troppo appariscente, oppure puoi sostituirla con il logo del tuo blog o qualsiasi altra immagine.
Per aggiungere altri brani, aggiungi semplicemente una riga come questa prima del tag di chiusura </ul> per ogni brano aggiuntivo che desideri aggiungere al player:

<li> <a href=' URL dell'altra canzone '> Nome dell'altra canzone </a></li>

E se volessi creare un lettore video utilizzando l' elemento <video> , in modo simile in HTML5, allora dovresti aggiungere questo codice prima di </body>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'/>
<script>
//<![CDATA[
var video;var vplaylist;var vtracks;var vcurrent;initvideo();function initvideo(){vcurrent=0;video=$('video');vplaylist=$('#vplaylist');vtracks=vplaylist.find('li a');vlen=vtracks.length-1;video[0].volume=1;vplaylist.find('a').click(function(e){e.preventDefault();link=$(this);vcurrent=link.parent().index();runvideo(link,video[0])});video[0].a ddEventListener('terminato',function(e){vcurrent++;if(vcurrent>vlen){vcurrent=0;link=vplaylist.find('a')[0]}else{link=vplaylist.find('a')[vcurrent]}runvideo($(link),video[0])})}function runvideo(link,player){player.src=link.attr('href');par=link.parent();par.addClass('attivo').siblings().removeClass('attivo');video[0].load();video[0].play()}
//]]>
</script>

Allo stesso modo, ometti la prima riga se hai già jQuery nel tuo template.
Quindi, prima di ]]></b:skin>, aggiungi gli stili:

#vplaylist, #vplayer {
width: 400px; /* Larghezza dell'intero contenitore */
padding: 20px;
margin: 0 self;
display: block;
text-align: center;
}
#vplayer {
padding: 10px 20px;
background: #000; /* Primo colore di sfondo del contenitore */
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
video {
width:400px; /* Larghezza del lettore */
padding-top: 10px;
margin:0 self;
display: inline-block
}
#vplaylist {
margin: 0 auto 20px auto;
display: block;
background: #424242; /* Colore di sfondo del secondo contenitore */
border-top: 5px solid #9F111B;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
text-align: left;
font-size: 12px;
font-family: 'Trebuchet MS', Trebuchet, Verdana, sans-serif;
font-weight: normal;
}
#vplaylist li, #vplaylist ul li {
background-image: none;
list-style-type: none;
padding: 0;
margin: 0;
}
#vplaylist li a:hover{
background: #9F111B; /* Colore di sfondo al passaggio del mouse */
text-decoration: none;
}
#vplaylist .active a {
color: #B11623; /* Colore del brano attivo */
font-style: italic;
text-decoration: none;
}
#vplaylist .active a:before {
content: "\25B6";
color: #CCC;
font-style: normal;
padding-right: 8px;
}
#vplaylist .active a:hover {
color: #222; /* Colore del brano attivo quando si passa il mouse sopra */
}

E infine, aggiungi questo al tuo gadget o al post del blog:

<div id='vplayer'>
<video controls='' height='224' width='400' id='video' preload='auto' tabindex='0' type='video/mp4'>
<source src=' URL del primo video ' type='video/mp4'/>
Ciao, il tuo browser non è aggiornato e non può visualizzare questo contenuto.
</video>
</div>
<ul id='vplaylist'>
<li class='active'> <a href=' URL del primo video '> Nome del primo video </a></li>
<li> <a href=' URL del secondo video '> Nome del secondo video </a></li>
<li> <a href=' URL del terzo video '> Nome del terzo video </a></li>
</ul>

Lì dovrai anche modificare gli URL dei video in rosso, ma questa volta i file saranno in formato MP4 . Allo stesso modo, l'URL del primo video appare due volte.
I nomi dei video vengono modificati nella sezione blu . In grassetto, vedrai dove modificare le dimensioni del player.
Per aggiungere altri video, dovrai anche aggiungere una riga come questa prima del tag di chiusura </ul> :

<li> <a href=' URL dell'altro video '> Nome dell'altro video </a></li>

Il risultato sarà questo:

In questo modo potrai avere un lettore audio o video con una playlist HTML5 . L'unico problema sarà con il browser Opera, ma tutti gli altri browser moderni funzioneranno senza problemi.

fonte

Musica e video sul blog con HTML5

2026-06-13T18:14:00.000+02:00

Quando aggiungiamo musica al nostro blog, ci imbattiamo in un problema: non viene riprodotta sui dispositivi mobili. Lo stesso può accadere con alcuni video. Questo perché i blog utilizzano spesso lettori basati su Flash per riprodurre musica (o video) e la maggior parte dei dispositivi mobili non supporta questo formato.

Per alcuni, questo può essere molto frustrante, e ciò è comprensibile considerando che oggigiorno un gran numero di utenti naviga da telefoni o tablet, quindi coloro che hanno un podcast o della musica sul proprio blog si ritroveranno con un gran numero di visitatori delusi perché non potranno ascoltare i contenuti.

La soluzione? Usare HTML5

Uno dei tanti vantaggi che HTML5 ci offre è la possibilità di utilizzare due tag per riprodurre audio o video, che sono a loro volta <audio> e <video> .

Questi elementi sono supportati da tutti i browser moderni, compresi quelli per dispositivi mobili, ad eccezione di Internet Explorer 8 e versioni precedenti.

Il suo utilizzo è molto semplice, basta aggiungere il tag <audio> e il tag <source> che è la fonte da cui viene preso l'indirizzo del file multimediale.

Il codice è il seguente:

<controlli audio>
<source src=" URL file mp3 " type="audio/mpeg">
<source src=" URL file ogg " type="audio/ogg">

Ciao utente di Internet Explorer! Se avessi un browser moderno staresti ascoltando una bellissima canzone invece di leggere questo :(
</audio>

Lì devi aggiungere l'URL del tuo brano in formato MP3 e un altro URL dello stesso brano ma in formato OGG . Questo perché alcuni browser non supportano ancora il formato MP3, in particolare Opera, anche se, per quanto ne so, Firefox supporta MP3 dalla versione 21.

Esistono diversi programmi per PC e Mac che convertono file audio e video in formato OGG, ma ci sono anche diversi siti online che lo fanno; uno dei miei preferiti è media.io

In corsivo vedrai che abbiamo aggiunto del testo per gli utenti di browser più vecchi, poiché non saranno in grado di vedere il player ma potranno vedere il messaggio.

Ora, se vi sentite particolarmente generosi e non volete che si perdano i contenuti, potete aggiungere l' elemento `<embed>` nello stesso codice . In questo modo, gli utenti di IE8 e versioni precedenti, anche se non riescono a visualizzare il player HTML5, potranno comunque visualizzarlo tramite il plugin installato nel browser.

<controlli audio>
<source src=" URL file mp3 " type="audio/mpeg">
<source src=" URL file ogg " type="audio/ogg">
<embed src=" URL del tuo file mp3 " type="audio/mp3" width="200"
height="100"/>
</audio>

Gli attributi dell'elemento AUDIO e VIDEO sono: controlli , riproduzione automatica , loop , disattivato e precaricamento

controlli consente di visualizzare i controlli e il lettore stesso.
autoplay fa sì che il file venga riprodotto quando la pagina viene caricata.
Il loop riprodurrà il file più e più volte.
muted rimuoverà l'audio dal file.
precarico definisce se il player deve essere caricato quando viene caricata la pagina.

Un esempio di giocatore con più attributi potrebbe apparire così:

<audio controlla il ciclo di riproduzione automatica >
<source src=" URL del file mp3 " type="audio/mpeg">
<source src=" URL del file ogg " type="audio/ogg">

<embed src=" URL del tuo file mp3 " type="audio/mp3" width="200"
height="100"/>
</audio>

Nel caso dell'elemento VIDEO è lo stesso, solo che qui impostiamo una larghezza e un'altezza.

<video width="320" height="240" controls>
<source src=" URL del file mp4 " type="video/mp4">
<source src=" URL del file ogv " type="video/ogg">
Ciao utente di Internet Explorer! Indovina un po'? Qui è in riproduzione un video fantastico, ma non riesci a vederlo perché il tuo browser è vecchio :(
</video>

E se si desidera fornire un supporto completo per IE, il codice dovrebbe apparire così:

<video width="320" height="240" controls>
<source src=" URL file mp4 " type="video/mp4">
<source src=" URL file ogv " type="video/ogg">
<object data=" URL file swf " width="320" height="240" type="application/x-shockwave-flash">
<param value=" URL file swf " name="movie"/>
</object>
</video>

Forse uno svantaggio dell'utilizzo di questi lettori HTML5 è la necessità di convertire i file in formati diversi, ma con così tanti strumenti di conversione disponibili, come quello che ho menzionato prima, questo problema è attenuato.
Per quanto riguarda l'aspetto, qui incontriamo un ostacolo: ogni browser visualizza il lettore in modo diverso.

Potreste pensare che potremmo migliorarlo con CSS, ma la cattiva notizia è che non è così. L'unico modo per cambiarne completamente l'aspetto è usare JavaScript. Ci sono molte opzioni disponibili online e ne condivideremo sicuramente alcune più avanti.
Per ora, quello che possiamo fare è usare una piccolissima quantità di JavaScript e CSS al di fuori del player per creare qualcosa di simile a questo:

Non è niente di speciale, ma le mie competenze informatiche non mi permettono di fare molto di più. Ciononostante, lascio il codice qui nel caso qualcuno lo volesse, ma attenzione: non funzionerà su Opera, perché aggiungeremo solo il file MP3, e su IE9 la barra di avanzamento non sarà visibile, ma verrà mostrata la percentuale di riproduzione.

<div class='player-wrapper'>
<audio id='player' src=" URL file MP3 "></audio>
<div class='player-controls'>
<div class='player-thumb'>
<img src=' URL miniatura ' />
</div>
<a onclick="document.getElementById('player').play()"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4fzcCnyiN98kHXb7IwkIhh47wb4IbnOP6l5PcOPRjIvnT7s tPCLuBUQxgz_74fyNnToZkIHXb4zuNBy8UFqS86DN52NXRczS6rml4BrU8mMkxErjf2DZH0giF0s0j4q13EOPpfdvoT1oy/s28/icon_play.png' /></a>
<a onclick="document.getElementById('player').pause()"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiygUPAg16a2e_9WakB6oCpbG8pLmIUOJBPW2DLHAumbBmqvuY uQEPJ4hyVGUdUlyVSQIuz-PFpi9yHusS93H3Q6MFveBKCjc2fRQbFayIYyZO0xhLALOd25YXADib7RYnWawD9AlWG1fPD/s28/icon_pause.png' /></a>
<a onclick="document.getElementById('player').volume+=0.1"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmbHMIS7soqjU3T1kMoykD4I7beeQVMZRcWKm8mjOiCTIqqQRx ur-0To4j3gYNruNAAv3Y1MOCdBAQjVkQAuiIUb9W7-pKQPngMdhaAw8RYPoFTFKPSOx2GAS-lVoOuB4s17WXbNZPq5U9/s18/icon_increase.png' /></a>
<a onclick="document.getElementById('player').volume-=0.1"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc-07UiBGoGHRF7dmtFDCX071j6CUggBFwGHs-KhXzsuv2r1yA fDK3TPGx0MB1az6QYEwpe-n32bNLED4iLXhIekO2yp0o_kOXU-41-AhJ2iQPET5QdT6WE8d3xDO0d0ljhaDLFnVIfOsw/s18/icon_decrease.png' /></a>
<progress id='progress' max='100' value='0'><span>0</span>%</progress>
</div>
</div>
<style>
.player-wrapper {
display: table;
height: self;
width: 180px; /* Larghezza del player */
background: #FA5858; /* Colore del player */
border-radius: 13px;
position:relative;
margin: 0 self;
}
.player-thumb img {
width: 160px; /* Dimensione miniatura */
padding:10px 0;
margine: 0 self;
allineamento testo: centro;
}
.controlli del lettore {
allineamento testo: centro;
visualizzazione: cella della tabella;
allineamento verticale: centro;
padding:0 0 10px;
} margine: 0 2px;
.player-controls a {
cursore: puntatore;
cursore: mano;
}
.player-controls progress {
larghezza:75%;
altezza: 7px;
sfondo: #FFF;
colore: #484848;
margine superiore: 5px;
}
::-moz-progress-bar {background: #484848;} /* Colore di sfondo della barra di avanzamento */
::-webkit-progress-bar {background: #fff;} /* Colore di sfondo della barra di avanzamento */
::-webkit-progress-value {background: #484848;} /* Colore dell'indicatore */
</style>
<script>
var audio=document.getElementById('player');var pBar=document.getElementById('progress');audio.addEventListener('timeupdate',function(){var percent=Math.floor((100/audio.duration)*audio.currentTime);pBar.value=percent;pBar.getElementsByTagName('span')[0].innerHTML=percent},false);
</script>

Usare HTML5 per incorporare l'audio mi sembra l'opzione migliore, non solo perché ci introduce nell'era moderna dell'HTML, ma anche perché evita di escludere gli utenti di dispositivi mobili. Inoltre, essendo una funzionalità nativa del browser, consuma molte meno risorse di qualsiasi altro player. E come se non bastasse, può essere utilizzato anche per lo streaming audio o, come molti sanno, per la radio in diretta .

NetMix FM Blues Train

fonte

Didascalia: con sfondo e sopra l'immagine

2026-06-06T18:11:00.000+02:00

Una didascalia è una breve descrizione che puoi aggiungere alle immagini del tuo blog. Questa descrizione fornisce informazioni accurate sulla foto e ti aiuta a comprenderla.
Ad esempio, quando aggiungi la foto di una persona, puoi includere una didascalia che ne indichi il nome, la posizione, il risultato o un evento rilevante. In questo modo, chiunque veda la foto saprà chi è la persona o cosa ha fatto.

Vedi altro

Da un punto di vista SEO, queste descrizioni ci aiutano anche a posizionare le immagini nei motori di ricerca, poiché queste informazioni sono utili per i crawler.
Blogger ci offre la possibilità di aggiungere una didascalia quando carichiamo l'immagine, ma il problema è che il risultato è molto semplice e poco accattivante, tanto da passare quasi inosservato.

Cuccioli in giardino

Quello che faremo è aggiungere una didascalia alle immagini , ma a differenza di una didascalia tradizionale, questa verrà posizionata sopra l'immagine stessa e aggiungeremo uno sfondo semitrasparente, in modo che il risultato sia simile a questo:

Se vuoi una didascalia come questa, vai su Modello | Modifica HTML e prima di ]]></b:skin> aggiungi questi stili:

.caption {
padding: 0;
width: 100%;
position:relative;
}
.caption img {
width: 100%;
height: self;
display: block;
padding: 0;
border: 0;
}
.caption::before {
content: attr(title);
position: absolute;
background: #EAF200; /* Colore di sfondo */
background: rgba(234, 242, 0, 0.6); /* Colore di sfondo in RGBA */
color: #000; /* Colore del testo */
font-size: 14px; /* Dimensione del testo */
padding: 5px;
right: 0;
bottom: 0;
left: 0;
text-align: center;
z-index: 1;
}

Vedi altro

Ora, ogni volta che vuoi aggiungere una didascalia alle tue immagini, usa questo codice:

Vedi altro

<div style=" width:400px; padding:10px; margin:0 auto;"><div class='caption' title=' Aggiungi didascalia qui '><img src=' URL immagine '/></div></div>

Qui vedrai dove aggiungere la descrizione della foto e l'URL dell'immagine.
La dimensione dell'immagine viene modificata modificando il testo in grassetto.
Il primo codice che abbiamo aggiunto contiene gli stili per la didascalia. Vedrai che il colore di sfondo appare due volte, prima in codice esadecimale e poi in RGBA. Questo perché RGBA ci permette di definire la trasparenza; in questo caso, è 0,6. Tuttavia, se il browser (Internet Explorer, come al solito) non supporta questo stile, utilizzerà il codice esadecimale, ma senza la trasparenza. Nella sezione Colori , puoi trovare il codice sia in esadecimale che in RGB.

Vedi altro

Per impostazione predefinita, l'immagine sarà centrata, ma se si desidera allinearla a sinistra in modo che sia circondata dal testo, utilizzare questo codice:

<div style="width:400px; padding:10px; clear: left; float: left; "><div class='caption' title=' Aggiungi didascalia qui '><img src=' URL immagine '/></div></div>

In realtà è la stessa cosa: abbiamo solo aggiunto un float a sinistra e rimosso il margine. Il risultato è il seguente.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi aliquet leo et erat posuere, at aliquet lorem commodo. Mecenate a gravida ligula. Mai sed malesuada leo, et lacinia diam. Nullam bibendum just libero, a varius mi suscipit vel. Mecenate commodo venenatis ante, eget ultricies nulla faucibus quis. Duis volutpat vulputate tortor volutpat euismod. Nam sed sapien a odio porttitor tincidunt. Curabitur mollis enim lacus, euismod fringilla lorem fringilla accumsan. Intero a erat ornare, molestie lorem sed, volutpat arcu.

Possiamo fare lo stesso se vogliamo allineare l'immagine a destra .

<div style="width:400px; padding:10px; clear: right; float: right; "><div class='caption' title=' Aggiungi didascalia qui '><img src=' URL immagine '/></div></div>

E apparirà così:

E se volessimo che la didascalia appaia solo quando il cursore passa sopra l'immagine ?

In tal caso, rimuoviamo gli stili che abbiamo applicato e aggiungiamo invece questi:

.caption {
padding: 0;
width: 100%;
position:relative;
}
.caption img {
width: 100%;
height: self;
display: block;
padding: 0;
border: 0;
}
.caption::before {
content: attr(title);
position: absolute;
background: #EAF200;
background: rgba(234, 242, 0, 0.6);
color: #000;
font-size: 14px;
padding: 5px;
right: 0;
bottom: 0;
left: 0;
text-align: center;
opacity:0;
filter:alpha(opacity=00);
-webkit-transition: tutti 0.4s lineari;
-moz-transition: tutti 0.4s lineari;
-o-transition: tutti 0.4s lineari;
-ms-transition: tutti 0.4s lineari;
transizione: tutti 0,4s lineari;
}
.caption:hover:before {
opacity:1;
filter:alpha(opacity=100);
}

In entrambi i casi, trovo il risultato molto più attraente del layout nativo di Blogger (anche se i gusti variano) e possiamo anche personalizzarlo a nostro piacimento cambiando il colore dello sfondo, le dimensioni, il tipo di testo e gli stili extra che possono essere aggiunti in base alla creatività di ognuno.

fonte

Il mistero dello spazio invisibile in HTML

2026-05-30T18:29:00.001+02:00

Ciao, amico appassionato di digitale! ‍‍ Se ti è mai capitato di navigare sul web o di programmare e di imbatterti in questo strano codice "&NBSP;", oggi è il tuo giorno fortunato! Scopriamo insieme cosa significa questo termine: sembra uscito da un film di spionaggio, ma in realtà è molto più comune di quanto pensi.

Che cosa è &NBSP;?

Per cominciare, &NBSP; è codice HTML . HTML (Hypertext Markup Language) è il linguaggio utilizzato per strutturare e visualizzare i contenuti sul web. E questo piccolo pezzo di codice ha uno scopo ben preciso.

Lo spazio vuoto che non si rompe

1. Traduzione letterale: &NBSP; deriva dall'inglese «Non-Breaking SPace», che tradotto sarebbe qualcosa come «Spazio senza salti» o «Spazio che non si rompe».

2. Funzione principale: il suo scopo è quello di creare uno spazio vuoto tra parole o caratteri che non può essere separato o diviso . In altre parole, impedisce ai browser di dividere una riga in quel punto specifico, anche se lo schermo è troppo stretto.

3. Uso comune: immagina di scrivere di prezzi e di non voler separare il simbolo "$" e il numero su due righe distinte. Puoi usare &NBSP; per assicurarti che rimangano sempre insieme.

Perché è importante?

1. Controllo del design: nel web design, piccoli dettagli come il posizionamento del testo possono fare una grande differenza. Questo offre un controllo preciso su come vengono visualizzati i contenuti.

2. Leggibilità ed estetica: evitare di separare frasi o elementi che hanno più senso insieme, migliorando l'esperienza di lettura dell'utente.

3. Universalità: funziona in tutti i browser ed è una parte essenziale dello standard HTML.

Suggerimenti per l'utilizzo di &NBSP;

1. Non esagerare: come ogni cosa nella vita, è bene usarlo con moderazione. Se ne abusate, potreste ritrovarvi con blocchi di testo dall'aspetto strano o che non si adattano bene a tutti gli schermi.

2. Strumenti di aiuto: esistono strumenti online che possono aiutarti a inserire &NBSP; nel tuo testo in modo corretto ed efficiente.

3. Pratica: come per qualsiasi abilità, la pratica rende perfetti. Sperimenta e gioca finché non ti senti a tuo agio!

Conclusione

Potrebbe sembrare un dettaglio insignificante, ma nel mondo del web design e dello sviluppo è un gigante! La prossima volta che lo vedrai, saprai che non è un codice segreto, ma un alleato nella tua avventura digitale.

Domain Rating: cos'è e a cosa serve

2026-05-23T20:14:00.000+02:00

Il Domain Rating (o DR) è una delle metriche più importanti in Ahrefs. Puoi trovarlo in quasi tutti gli strumenti e report della nostra piattaforma.

Sebbene questa metrica possa essere molto utile per prendere decisioni SEO, può anche trarre in inganno se non la si comprende bene.

In questo articolo spiegherò tutti i dettagli del DR, analizzerò i suoi casi d'uso più comuni e risponderò ad alcune domande frequenti.

Che cosa è il Domain Rating?

Domain Rating (DR) è una metrica di Ahrefs che mostra la forza relativa del profilo backlink di un sito web .

La DR viene misurata su una scala logaritmica da 0 a 100, dove quest'ultima è la più forte.

Nota a margine: il termine "scala logaritmica" significa che la differenza tra DR 70 e DR 71 è molto maggiore di quella tra DR 20 e DR 21. In altre parole, più alto è il tuo DR, più difficile sarà aumentarlo di qualche altro punto.

Come viene calcolato il Domain Rating?

Calcoliamo il DR in modo simile al PageRank . La differenza principale è che il PageRank viene calcolato tra le pagine, mentre il DR viene calcolato tra i siti web.

Tecnicamente funziona più o meno così:

Cerchiamo tutti i domini che hanno almeno un collegamento seguito al dominio di destinazione.
Esaminiamo a quanti altri domini è collegato ciascun dominio.
Successivamente, trasferiamo una certa quantità di "DR juice" da ciascun dominio di legame al dominio target. Questa quantità viene determinata (approssimativamente) dividendo il DR del dominio di legame per il numero di domini univoci a cui si lega.

Ovviamente, questa è una spiegazione molto semplificata, ma cattura l'essenza del modo in cui calcoliamo il DR di un dato sito web.

Guardiamolo da un punto di vista più pratico:

Se un sito web rimanda a te solo tramite link nofollow, non aumenterai il tuo DR.
Solo il primo link da un dominio aumenterà il tuo DR: tutti i link successivi non influiranno sul DR.
Se un sito web (che in precedenza rimandava al tuo sito) continua a rimandare a sempre più nuovi siti web, la quantità di "DR juice" che ti invia diminuirà nel tempo. Pertanto, è possibile che, col tempo, anche il tuo DR diminuisca.
Man mano che il DR di un sito web che linka al tuo aumenta, quel sito web inizierà a inviare più "DR juice" al tuo sito. Di conseguenza, anche il tuo DR potrebbe aumentare.

Tieni presente che la metrica DR di Ahrefs si basa esclusivamente sui link . Non consideriamo aspetti come il traffico di ricerca di un determinato sito web, l'età del dominio o la popolarità del brand.

È anche importante notare che il DR non tiene conto dello spam di backlink . Infatti, molti backlink di bassa qualità possono effettivamente aumentare il DR, non diminuirlo.

Negli ultimi anni, alcuni SEO black-hat hanno trovato il modo di gonfiare il DR di Ahrefs con link spam e hanno sfruttato questa falla per trarne profitto. Tuttavia, li abbiamo identificati e ci siamo assicurati che non possano più essere sfruttati.

Il Domain Rating è importante per aumentare il traffico di ricerca?

Sebbene il DR sia strettamente correlato al traffico di ricerca di un sito web, non è una buona idea concentrare tutta l'attenzione sull'aumento di questa metrica in particolare.

Google classifica le pagine, non i siti web. Pertanto, attenzione e impegno devono essere concentrati sulla produzione di contenuti di qualità e sull'acquisizione di backlink eccellenti che puntino direttamente a tali contenuti.

Sia il DR che il traffico di ricerca cresceranno in modo organico.

Quali sono i principali casi d'uso del Domain Rating ?

Mi piace pensare al DR come a una misura della "link popularity" di un sito web, ovvero il numero di riferimenti alle pagine di un determinato sito web su Internet. Misurare questa "link popularity" ha due utilizzi diretti nella SEO.

1. Calibrare il “potenziale di posizionamento”

Se hai più o meno lo stesso DR del tuo concorrente, puoi inserire il suo sito web nello strumento Content Gap di Ahrefs e cercare le parole chiave che gli portano traffico ma per le quali non sei ancora in classifica. Probabilmente riuscirai a posizionarti per loro.

Ad esempio, basecamp.com ha quasi lo stesso DR di asana.com (rispettivamente 88 e 89). Pertanto, gli utenti di Basecamp potrebbero provare a cercare le stesse parole chiave di Asana, poiché è probabile che il loro sito ottenga un buon posizionamento.

Ma se il tuo DR è solo 20, cercare parole chiave per cui un sito web con un DR di 80 si posiziona non è ragionevole. Dovresti invece cercare siti web con un DR inferiore da cui puoi trarre spunti per contenuti "posizionabili".

Naturalmente, non è garantito che il posizionamento per una determinata parola chiave sia garantito solo perché un sito con un DR simile si posiziona per essa. In ogni caso, ottenere spunti per i contenuti da siti web con una "link popularity" simile è una strategia sensata.

2. Ricerca di link

Una volta che hai un elenco di siti web pertinenti da cui potresti potenzialmente acquisire un backlink, il DR di questi siti web ti aiuterà a determinare quale può fornire il link "più forte".

Non fraintendetemi, però. Non vi sto dicendo di evitare i siti con un basso DR e di concentrarvi solo su quelli più grandi. Se è rilevante, anche un link con un basso DR vi aiuterà a ottenere un posizionamento più alto. Ma valutare il valore relativo di un link da un determinato sito web vi aiuterà a dare priorità alle vostre risorse.

Ad esempio, supponiamo che il tuo amico abbia un blog con un DR di 25 e sia interessato a pubblicare un tuo guest post. D'altra parte, tu hai fatto domanda per un sito con un DR di 80, che è anch'esso interessato a pubblicare un tuo guest post.

Di norma, è preferibile ottenere un link da un blog di grandi dimensioni. Questo perché il valore del loro link sarà probabilmente molto più alto di quello del blog molto piccolo del tuo amico (senza offesa).

Ovviamente, ci sono molti più aspetti da considerare nel link building rispetto a quelli menzionati sopra . Sono molti i fattori che determinano quanto un link contribuisca a un posizionamento più alto di una pagina su Google. Tuttavia, come regola generale, i link provenienti da siti web con un DR elevato tendono a fornire più valore rispetto ai link provenienti da siti web con un DR basso.

Tutti i sottodomini hanno lo stesso DR dei rispettivi domini radice?

No, ma ci sono alcune eccezioni.

I punteggi DR per wordpress.org e il suo sottodominio codex.wordpress.org mostrano entrambi DR 98.

D'altro canto, wordpress.com e discover.wordpress.com hanno rispettivamente DR 93 e DR 66.

Qual è la differenza tra i due casi?

WordPress.com è quello che chiamiamo un "dominio radice di servizio". Chiunque può creare un sottodominio su wordpress.com e inserirvi contenuti. Inoltre, poiché i "sottodomini" risultanti apparterranno a persone diverse e avranno contenuti e scopi completamente diversi, non dovrebbero ereditare l'elevato DR del loro sito web radice.

WordPress.org, d'altra parte, non consente la creazione libera di sottodomini. Solo i proprietari del sito web possono farlo, quindi il DR del dominio principale viene trasferito ai suoi sottodomini.

Ecco altri esempi di domini che non passano il loro DR ai sottodomini:

wordpress.com
typepad.com
squarespace.com
blogspot.com
tumblr.com
webs.com
hubpages.com
wikispaces.com

Domain Rating e Ahrefs Rank sono correlati ?

Entrambe le metriche indicano la forza del profilo backlink di un dato sito web , ma ciascuna metrica lo misura in modo diverso.

DR assegna un valore da 0 a 100 in base alla dimensione e alla qualità del profilo backlink di un sito web . Ahrefs Rank (AR) classifica semplicemente tutti i siti web in base alla forza dei loro profili backlink .

Spieghiamolo con un esempio.

Huffingtonpost.com, techcrunch.com e salesforce.com hanno tutti lo stesso DR di 92, ma i loro profili di backlink non sono identici.

Ecco questi siti web ordinati per AR :

AR 316 – huffingtonpost.com
AR 317 – techcrunch.com
AR 346 – salesforce.com

Questi dati indicano che huffingtonpost.com ha un profilo di backlink leggermente superiore a quello di techcrunch.com, senza altri siti web intermedi. Tuttavia, ci sono 29 siti web con un profilo di backlink più forte di salesforce.com (AR 346), ma più debole di techcrunch.com (AR 317).

Questo tipo di granularità può aiutarti a confrontare i siti web con lo stesso punteggio DR e a classificarli in base alla popolarità dei link.

Domande frequenti

Le informazioni che ho condiviso sopra dovrebbero darti un'idea molto chiara delle nostre metriche DR e rispondere a molte delle domande che potresti avere.

In ogni caso, ecco una selezione di alcune delle domande più frequenti che il team di supporto di Ahrefs riceve:

Non ho perso nessun backlink . Perché il mio DR è calato?

Ciò potrebbe essere dovuto al fatto che molti altri siti nel nostro database stanno ottenendo molti backlink. Pensatela in questo modo: quando un sito con un DR di 100 riceve più backlink, non possiamo portarlo a DR 101. Quindi, abbassiamo tutti gli altri siti di 1. Questa è una spiegazione molto semplice del perché potreste vedere un calo del vostro DR anche se non avete perso alcun backlink .

Un'altra possibile ragione è che i siti che linkano al tuo sito hanno perso backlink e i loro punteggi DR sono diminuiti, oppure hanno iniziato a linkare più siti. In entrambi i casi, diminuirà anche la quantità di "DR juice" che trasferiscono al tuo sito web.

Il mio concorrente non ha link da siti con un DR elevato, ma il suo DR è più alto del mio. Perché?

Non hai bisogno di link da siti con un DR elevato per aumentare il tuo. Anzi, puoi ottenere un DR molto alto semplicemente utilizzando link da siti con un DR basso... Basta che ne servano molti.

Ho un link da techcrunch.com che ha un DR molto alto, pari a 93. Com'è possibile che il mio DR non abbia generato nulla?

Come abbiamo già spiegato, la quantità di "DR juice" che TechCrunch trasmette al tuo sito web è divisa per il numero di siti web a cui techcrunch.com rimanda (con link seguiti ). Secondo Ahrefs, Techcrunch.com rimanda a oltre 100.000 siti web. Pertanto, la quantità di "DR juice" che fornisce al tuo sito è relativamente bassa.

I link della homepage trasmettono più DR rispetto ai deep link?

Questo non fa alcuna differenza per il tuo DR. Entrambi i tipi di link contribuiranno in egual misura al tuo DR.

Ahrefs utilizza Domain Rating per dare priorità alla scansione dei siti web?

Sì, il DR è uno dei fattori che inseriamo nel nostro crawler. Ci aiuta a decidere quante pagine di un determinato sito web vogliamo analizzare (e a quale profondità).

Il web non è uno spazio ordinato, strutturato o logico. Ci sono tonnellate di siti web che generano milioni di pagine inutili, per errore o intenzionalmente. Pertanto, avere questo tipo di criteri ci permette di evitare di sprecare risorse setacciando tutta quella spazzatura.

fonte

Ti presentiamo i controlli di blocco per Authorized Buyers

2026-05-09T22:48:00.000+02:00

Questo nuovo controllo non includerà le reti pubblicitarie inattive, le reti pubblicitarie di prova e le reti Display & Video 360 (DV360).

Nell'ambito di queste modifiche, rimuoveremo anche il controllo Autorizza automaticamente nuove reti pubblicitarie certificate da Google. In futuro, i nuovi acquirenti autorizzati saranno consentiti per impostazione predefinita.

Tieni presente che le reti pubblicitarie attualmente bloccate non subiranno modifiche e non è richiesta alcuna azione da parte tua.

Quali controlli sono disponibili nella nuova pagina Authorized Buyers?

Puoi consentire o impedire a determinati acquirenti autorizzati di fare offerte per l'inventario sul tuo sito. Avrai anche una migliore visibilità delle relazioni di elementi principali e secondari tra gli acquirenti autorizzati.

Tempistiche

Lanceremo queste modifiche a partire dal giorno 6 novembre 2025.

Fino al lancio:

•

Puoi continuare a utilizzare il controllo Autorizza automaticamente nuove reti pubblicitarie certificate da Google. Se al momento questo controllo è disattivato, ti consigliamo di attivarlo ora per abituarti alla modifica imminente.

•

Puoi accedere a una versione di sola visualizzazione della pagina Authorized Buyers. Per accedere alla pagina:

Accedi al tuo account AdSense.

Fai clic su Sicurezza del brand.

Fai clic su Contenuti.

Fai clic su Controlli di blocco.

Fai clic su Authorized Buyers.

Nota: non potrai usare i controlli fino al lancio.

•

Potrai comunque modificare lo stato delle reti pubblicitarie in Controlli di blocco -> Reti pubblicitarie. Tutte le modifiche apportate fino all'ultimo giorno prima del lancio verranno mantenute e saranno visibili in Sicurezza del brand > Contenuti > Controlli di blocco > Authorized Buyers.

Dopo il lancio:

•

La nuova pagina Authorized Buyers diventa attiva e puoi utilizzarla per consentire e bloccare gli acquirenti autorizzati. Per farlo:

Accedi al tuo account AdSense.

Fai clic su Sicurezza del brand.

Fai clic su Contenuti.

Fai clic su Controlli di blocco.

Fai clic su Authorized Buyers.

Nell'elenco di acquirenti autorizzati, utilizza il controllo per consentire o bloccare un acquirente autorizzato.

Suggerimento: usa la ricerca e/o i filtri per trovare un acquirente autorizzato specifico.

•

Tutti i nuovi acquirenti autorizzati saranno ora consentiti per impostazione predefinita.

•

Puoi continuare a consentire e bloccare gli account inserzionista Google dalla sezione Inserzionista nella vista dettagliata del tuo Centro revisione annunci. Questo vale anche per gli account DV360.

•

Non potrai più gestire gli acquirenti autorizzati dal Centro revisione annunci.

Meta tag in Blogger: ne ho bisogno?

2026-05-02T22:34:00.000+02:00

Se hai un blog o un sito web, probabilmente qualcuno ha parlato o letto dei meta tag, e potresti chiederti a cosa servono e se ne hai davvero bisogno. O forse pensi che sia un argomento molto tecnico che non capisci. In questo articolo, ti aiuteremo a comprenderne l'importanza e i vantaggi che puoi ottenere con essi.

Cosa sono i meta tag?

I meta tag non sono altro che etichette virtuali che i robot utilizzano per identificare e classificare le informazioni che pubblichiamo sul nostro blog. Usare correttamente questi tag aiuterà il nostro sito web perché sono importanti per i motori di ricerca e, di conseguenza, miglioreranno il nostro posizionamento.

Dati quali il titolo del blog, l'autore, la lingua, la descrizione del blog e altro ancora sono le intestazioni che consentiranno al nostro blog di essere correttamente indicizzato nei motori di ricerca.

I principali meta-tag di cui dovresti tenere conto sono i seguenti:

Meta Description : descrive il tuo blog, di cosa tratta e cosa offre. Non deve mai superare i 156 caratteri (spazi inclusi).
Meta Keywords : questo tag contiene parole chiave o frasi, ovvero il modo in cui gli utenti possono trovarci sui motori di ricerca. Supponendo che il nostro blog riguardi i film, gli utenti di Internet potrebbero trovarci utilizzando frasi come "recensioni di film", "film di Woody Allen" o "film romantici recenti", ecc. IMPORTANTE: i motori di ricerca ignorano da anni le meta keyword come fattore di ranking rilevante. Ciò che fanno è penalizzarle se vengono utilizzate in modo improprio. Ad esempio, utilizzando parole chiave che non hanno nulla a che fare con il testo del sito web o bombardandole con molte parole chiave correlate (quello che chiamiamo Keyword Stuffing).
Meta robot : questo tag è responsabile di consentire o negare ai robot dei motori di ricerca l'accesso al nostro blog.

Naturalmente, i meta tag non garantiscono che il tuo blog avrà un buon posizionamento, ma sono uno dei passaggi che puoi intraprendere per migliorare il posizionamento del tuo blog.

Come faccio a impostare i meta tag in Blogger?

Potresti non capire nulla di HTML o di tutto ciò che è nascosto nel codice del tuo blog, ma in realtà è piuttosto semplice da fare. Ecco i passaggi:

Nella dashboard del tuo blog, vedrai la parola "Gestisci" sulla destra, seguita da tre schede: Email, Impostazioni e Design. Fai clic sulla scheda Design .
Sotto le opzioni dell'intestazione nella scheda Progettazione, vedrai elencate quattro opzioni. Fai clic sulla scheda Modifica HTML .
A questo punto, è consigliabile creare una copia di backup del modello. In questo modo, potrai correggere rapidamente eventuali errori commessi durante la modifica dell'HTML del tuo blog. Una volta creato il backup, salvalo sul tuo computer.

Ora sei pronto per inserire il codice HTML. Lo faremo seguendo le istruzioni presenti in questa pagina , che abbiamo tradotto in spagnolo per facilitarne la comprensione. Basta copiare il codice e inserirlo nell'HTML.

PASSAGGIO 1: Installa i tag Title ottimizzati

<b:include data='blog' name='all-head-content'/>
<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>
<b:skin><![CDATA[/*

PASSAGGIO 2: Aggiungi meta descrizione e meta parole chiave

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content=' descrizione della tua pagina ' name='description'/>
<meta content=' le tue parole chiave, keyword1, keyword2 ' name='keywords'/>
</b:if>

<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageTitle' name='Description'/>
<meta expr:content='data:blog.pageName + ", le tue parole chiave, keyword1, keyword2 "' name='keywords'/>
</b:if>

PASSAGGIO 3: Sostituisci il testo blu con i tuoi dati.

Dopo aver copiato quanto sopra, devi sostituire le sezioni blu con le informazioni specifiche della pagina: URL, descrizione, parole chiave, ecc.

PASSAGGIO 4: Il codice finale che vedrai dovrebbe apparire così:

<b:skin><![CDATA[/*

È molto importante utilizzare il codice appropriato perché questo garantisce che la Meta Description e le Meta Keywords siano separate per ogni pagina del blog. Altrimenti, la stessa description verrà utilizzata di default per tutte le pagine, il che è errato dal punto di vista SEO e non migliorerà il posizionamento.

Non essere timido: usa i meta tag in Blogger!

Come puoi vedere, non è necessario essere un esperto di HTML per modificare i tag del tuo blog, ma è molto importante avere concetti chiari che ti aiuteranno a ottimizzarlo in modo che sia meglio posizionato dai motori di ricerca.

Ad esempio, è essenziale definire bene le parole chiave più adatte al tuo blog, perché questo ti consentirà di essere trovato in modo più efficace.

I meta tag potrebbero non essere più un argomento popolare come un tempo, ma sono comunque un argomento su cui vale la pena investire tempo e impegno. Meta tag efficaci sono essenziali se vuoi garantire che i motori di ricerca trovino il tuo sito più rapidamente e lo indicizzino bene.

Abbiamo provato la modalità AI di Google ed ecco cosa abbiamo scoperto

2026-04-25T14:09:00.000+02:00

Google ha fatto un ulteriore passo avanti con la ricerca conversazionale.

Sebbene non sia ancora disponibile in Italia a causa delle restrizioni dell'Unione Europea, siamo riusciti ad accedere alla Modalità AI tramite una VPN per provarla in prima persona.

Per chi non la conoscesse ancora: la Modalità AI consente di interagire con il motore di ricerca come se fosse un assistente, invece di visualizzare semplicemente un elenco di risultati.

Dopo diversi giorni di test, queste sono le nostre conclusioni:

La SEO è più attiva che mai: le risposte includono numerosi link a fonti esterne. La battaglia non sarà più solo per il posizionamento tradizionale, ma anche per essere citati all'interno della risposta generata.

Forte enfasi sui contenuti locali: nelle query geolocalizzate, la Modalità AI collega principalmente alle schede di Google Maps e ai profili aziendali, rafforzando l'importanza di ottimizzare la propria presenza locale.

Fonti combinate: nelle query più generali, costruisce la risposta a partire da frammenti provenienti da diversi media e pagine. In questo caso, i testi chiari, affidabili e ben strutturati vincono. Più i media autorevoli parlano di te, più è probabile che tu compaia per queste domande generali.

⏩ Coinvolgimento continuo: ogni domanda di follow-up amplia la risposta con nuovi link correlati, moltiplicando le tue opportunità di visibilità.

Risultati personalizzati: quando accedi, la Modalità AI sfrutta la tua cronologia e le tue attività su altri servizi Google per personalizzare i risultati in base ai tuoi interessi.

Un altro aspetto interessante scoperto da diversi utenti che hanno provato la Modalità AI è che molti dei link che utilizza alle fonti includono lo snippet (#) del testo citato nell'URL, proprio come accade nelle Panoramiche AI o nei risultati degli snippet in primo piano.

Questo traffico può essere facilmente misurato configurando Google Tag Manager e analizzando i dati in Google Analytics. Ecco una guida passo passo per farlo.

In breve: la Modalità AI non elimina la SEO, la trasforma. La sfida non è più solo guadagnare posizioni nelle SERP, ma diventare una fonte citata dall'intelligenza artificiale di Google.

Pulsanti dei social media con sprite e transizioni CSS3

2026-04-18T17:26:00.000+02:00

Molti lettori di questo blog me l'hanno chiesto, e si tratta dei pulsanti per le piattaforme social che utilizzo attualmente. Dato che una promessa è una promessa e non voglio indebitarmi ulteriormente, eccolo qui.

Questi pulsanti servono per collegarsi ai social network : Facebook , Twitter , Google+ , Feed RSS e abbonamento via email .
Ciò che molti trovano interessante è l'effetto hover che si crea quando ci si passa sopra, poiché l'icona si sposta verso l'alto mentre lo sfondo cambia colore.

Vedremo questo gadget in due versioni: una con cinque piccoli pulsanti allineati orizzontalmente e un'altra con quattro pulsanti leggermente più grandi allineati su due colonne. Sono realizzati con sprite e transizioni CSS3.
Aggiungeremo entrambe le versioni in un unico passaggio, ovvero incollando sia gli stili che la struttura HTML in un gadget. Perché? Solo per pigrizia, ma chiunque voglia inserire gli stili nella posizione corrispondente nel template può farlo senza problemi.
Quindi, per aggiungerli al tuo blog, vai su Design | Aggiungi un gadget | HTML/Javascript e incolla il codice per i pulsanti che preferisci.

Questa è la prima versione a 5 pulsanti.

E questo è il codice che devi incollare nel tuo gadget:

<style>
/* Pulsanti dei social network - Ciudad Blogger */
.social_bookmarks_container {
width:100%;
height:65px;
padding:0;
position:relative;
}
.social_bookmarks {
position:relative;
float:left;
margin:0;
padding:0;
}
.social_bookmarks li {
margin:0 0 1px 1px;
height:57px;
width:57px;
list-style:none;
float:left;
padding:0;
-webkit-transition: tutti gli ease-in-out da 0,4 s;
-moz-transition: tutti gli ease-in-out da 0,4 s;
-o-transition: tutti gli ease-in-out da 0,4 s;
-ms-transition: tutti gli ease-in-out da 0,4 s;
transition: tutti gli ease-in-out da 0,4 s;
}
.social_bookmarks li a {
float:left;
larghezza:57px;
altezza riga:24px;
visualizzazione: blocco;
rientro testo: -99999px;
margine:0px;
contorno: nessuno;
spaziatura:0;
altezza minima:57px;
altezza:100%;
decorazione testo:nessuna;
}
.social_bookmarks .iconrss{background: #A4A4A4 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ8Kbt-uhIorlVidc2YJ9HNSHhOHizEH64tru9lPKzmoeA1go GDzfflP64SXOV8_wcOtJQiSWvlEUIcPuOE4Te3zkflsjHaXP_skhSGPOt2MDsoYumv5VzNc_UgZB-Y_-Fu-yqc58EG_pn/s114/icon-rss.png) in alto a sinistra senza ripetizione;}
.social_bookmarks .iconrssmail{background: #BDBDBD url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZxzZ9WBDmn-wY5zVTJXn4oM_xiB5QQtBb-bYbUujnEeCBpNPsq LAdWU5INBe5naJU3CLsa87UR9MLM5tDuIKH0RzYgg_dg2T4Yh-Qr4Gl8wJI9XjFuz6YZ7D58aUBz_yydSAVeaTwyYpj/s114/icon-rssmail.png) in alto a sinistra no-repeat;} .social_bookmarks .icontwitter{background: #D8D8D8 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz_lGB3qFKnLoqdr5TVAP0qG1umN5dEJnzHw2FIq7zOX4F-lePT vRN0ulGC4VB_ujN8uQpRPPDzC2aV7owD0oMsF2IhKBF3JTL26CMc4x0aLnwTK88mfLSJh7vevshzcR8eNh6Lwf4GJO0/s114/icon-twitter.png) in alto a sinistra no-repeat;} .social_bookmarks .iconfacebook{background: #E6E6E6

url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWKuFaylNawHkw2x-8SBNyFdqtTop2BLGGvNNHvB6mt6hmVfSo2 7u9-z_EKRzxx1sEtPr0I5LSaef-a6S8TztDTMcR2noTULqL2-jh0X1tAgk2pyoJUS-2zl3Mjflpl68EDlgCL5K3cxU0/s114/icon-facebook.png) in alto a sinistra no-repeat;}
.social_bookmarks .icongplus{background: #F1F1F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnb6hyphenhyphen8423G0Y4atMdWIK_R0OWkwvMn-FPTKsI9HZTTV- YnpmOEYcfwg8f2UckeWWP7XW7rpaF-jvdJYfyV3TlwjQyknNaTQhsECTH8shArnzYvVaVOfEJoR-cqJ5ewt8YRu4TvAwzvn_i/s114/icon-gplus.png) in alto a sinistra no-repeat;} .social_bookmarks .iconfacebook:hover{background-position:center -57px; background-color: #37589b ;} .social_bookmarks .icontwitter:hover { background-position:center -57px; colore di sfondo: #46d4fe ;} .social_bookmarks .icongplus:hover {posizione di sfondo:centro -57px; colore di sfondo: #de5a49 ;} .social_bookmarks .iconrss:hover{posizione di sfondo:centro -57px; colore di sfondo: #ff6600 ;} .social_bookmarks .iconrssmail:hover{posizione di sfondo:centro -57px; background-color: #FFDE00 ;} .social_bookmarks li:hover a{background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXl3v0GbEqIl9AYJLAlJb-bnAW4NBZaJtkJjZpuGZmWoe4qpGm2vj_ 5MKrqtDitgLlujjGO6HW_O-0PR_FG__iVHnBbDfqyj44j7NQgJ_hDpEWqF7eYEYVje1t0P0Jw5CtSziDWYevQMnh/s57/icon-social-reflect.png) no-repeat; } </style> <div class='social_bookmarks_container'> <ul class='social_bookmarks'> <li class='iconrss'> <a href='/atom.xml'> RSS </a> </li> <li class='iconrssmail'> <a href='http://feedburner.google.com/fb/a/mailverify?uri= FeedName '> RSS Posta </a> </li> <li class='icontwitter'> <a href='http://twitter.com/ user '> Twitter </a> </li> <li class='iconfacebook'> <a href='http://facebook.com/ utente '> Facebook </a> </li> <li class='icongplus'> <a href='http://plus.google.com/+ utente

/about'>
Google Plus
</a>
</li>
</ul>
</div>

Questa è l'altra versione, quella a 4 pulsanti.

E questo è il codice che dovresti incollare nel tuo gadget HTML/Javascript .

<style>
/* Pulsanti dei social network - Ciudad Blogger */
.social_bookmarks_container {
width:176px;
height:176px;
padding:0;
position:relative;
}
.social_bookmarks {
position:relative;
float:right;
margin:0;
padding:0;
}
.social_bookmarks li{
margin:0 0 1px 1px;
height:77px;
width:77px;
list-style:none;
float:left;
padding:0;
-webkit-transition: tutti gli ease-in-out da 0,4 s;
-moz-transition: tutti gli ease-in-out da 0,4 s;
-o-transition: tutti gli ease-in-out da 0,4 s;
-ms-transition: tutti gli ease-in-out da 0,4 s;
transition: tutti gli ease-in-out da 0,4 s;
}
.social_bookmarks li a {
float:left;
larghezza:77px;
altezza riga:24px;
visualizzazione: blocco;
rientro testo: -99999px;
margine:0px;
contorno: nessuno;
spaziatura:0;
altezza minima:77px;
altezza:100%;
decorazione testo:nessuna;
}
.social_bookmarks .iconrss{background: #A4A4A4 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ8Kbt-uhIorlVidc2YJ9HNSHhOHizEH64tru9lPKzmoeA1g oGDzfflP64SXOV8_wcOtJQiSWvlEUIcPuOE4Te3zkflsjHaXP_skhSGPOt2MDsoYumv5VzNc_UgZB-Y_-Fu-yqc58EG_pn/s0/icon-rss.png) in alto a sinistra senza ripetizione;}
.social_bookmarks .icontwitter{background: #D8D8D8 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz_lGB3qFKnLoqdr5TVAP0qG1umN5dEJnzHw2FIq7zOX4F-leP TvRN0ulGC4VB_ujN8uQpRPPDzC2aV7owD0oMsF2IhKBF3JTL26CMc4x0aLnwTK88mfLSJh7vevshzcR8eNh6Lwf4GJO0/s0/icon-twitter.png) in alto a sinistra no-repeat;}
.social_bookmarks .iconfacebook{background: #E6E6E6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWKuFaylNawHkw2x-8SBNyFdqtTop2BLGGvNNHvB6mt6hmVfSo 27u9-z_EKRzxx1sEtPr0I5LSaef-a6S8TztDTMcR2noTULqL2-jh0X1tAgk2pyoJUS-2zl3Mjflpl68EDlgCL5K3cxU0/s0/icon-facebook.png) in alto a sinistra no-repeat;}
.social_bookmarks .icongplus{background: #F1F1F1url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnb6hyphenhyphen8423G0Y4atMdWIK_R0OWkwvMn-FPTKsI9HZTTV -YnpmOEYcfwg8f2UckeWWP7XW7rpaF-jvdJYfyV3TlwjQyknNaTQhsECTH8shArnzYvVaVOfEJoR-cqJ5ewt8YRu4TvAwzvn_i/s0/icon-gplus.png) in alto a sinistra no-repeat;}
.social_bookmarks .iconfacebook:hover{background-position:center -77px; background-color: #37589b; }
.social_bookmarks .icontwitter:hover {background-position:center -77px; colore di sfondo: #46d4fe ;}
.social_bookmarks .icongplus:hover {posizione di sfondo:centro -77px; colore di sfondo: #de5a49 ;}
.social_bookmarks .iconrss:hover{posizione di sfondo:centro -77px; background-color: #ff6600 ;}
.social_bookmarks li:hover a{background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXl3v0GbEqIl9AYJLAlJb-bnAW4NBZaJtkJjZpuGZmWoe4qpGm2vj _5MKrqtDitgLlujjGO6HW_O-0PR_FG__iVHnBbDfqyj44j7NQgJ_hDpEWqF7eYEYVje1t0P0Jw5CtSziDWYevQMnh/s0/icon-social-reflect.png) no-repeat;
}
</style>
<div class='social_bookmarks_container'>
<ul class='social_bookmarks'>
<li class='iconrss'>
<a href='/atom.xml'>
RSS
</a>
</li>
<li class='icontwitter'> <a href='http://twitter.com/ utente '>
Twitter </a> </li> <li class='iconfacebook'> <a href='http://facebook.com/ utente '> Facebook </a> </li> <li class='icongplus'> <a href='http://plus.google.com/+ utente /about'> Google Plus </a> </li> </ul> </div>

Facile e veloce, vero? Tutto quello che resta da fare è inserire i tuoi nomi utente per ogni social network dove indicato in rosso .
Nella prima versione, dovrai inserire il nome del tuo feed Feedburner dove indicato e, naturalmente, abilitare le iscrizioni via email in Feedburner .

E se i colori non ti piacciono, puoi anche cambiarli. I codici esadecimali in grassetto sono i colori normali, mentre quelli in arancione sono i colori che si attivano al passaggio del mouse.
E questo è tutto.

fonte

Collega più tag di Blogger in un unico collegamento

2026-04-11T17:25:00.000+02:00

Questo post è breve, ma non per questo meno utile. Vediamo come collegare più tag del blog in un unico link . In altre parole, cliccando su un link verranno visualizzati i post di entrambi i tag, anche se non condividono lo stesso tag.

Ad esempio, il seguente link mostrerà post su AdSense, Generatori e App:

Apri il collegamento

Come abbiamo fatto? Semplice, basta usare questo URL nei tuoi menu o dove vuoi:

http:// nome-del-mio-blog .blogspot.com/search/?q=label: Etichetta1 |etichetta: Etichetta2

Qui devi cambiare il nome del tuo blog e aggiungere i tag che vuoi che appaiano nello stesso risultato.
Se vuoi aggiungere altri tag, aggiungi semplicemente questo alla fine dell'URL: |label: Tag3
Ecco come apparirebbe se aggiungessi 3 tag:

http:// nome-del-mio-blog .blogspot.com/search/?q=label: Etichetta1 |etichetta: Etichetta2 |etichetta: Etichetta3

Nella maggior parte dei blog, questo non sarà un problema, tuttavia, in alcuni casi (non so perché) non funzionerà se i tag contengono spazi, accenti o caratteri speciali.
Se vuoi sapere come collegare un solo tag nel tuo menu, visita il seguente link:
Come creare un menu di categoria per il tuo blog.

fonte

Modello Blogger Citlali

2026-04-09T17:29:00.000+02:00

Dopo un po', ho deciso di scrollarmi di dosso le ragnatele di VIM (il mio editor di codice preferito) e di mettermi al lavoro su un modello che avevo iniziato qualche mese prima. Citlali è la parola nahuatl che significa "stella" ed è un nome proprio femminile comune in Messico.

Basato sulla nuova versione di Bootstrap, l'idea è un design semplice ma in grado di visualizzare una quantità significativa di contenuti sulla homepage. Un design che trasmette un'immagine fresca, pur rimanendo piacevole da leggere e compatibile con un'ampia gamma di risoluzioni dello schermo. Forse la novità più importante è l'aggiunta della modalità scura e del relativo pulsante per selezionare la modalità preferita.

Citlali è disponibile nella sua versione CSS originale e per Blogger nella versione normale (completamente funzionale) e nella versione Pro, con funzionalità di personalizzazione aggiuntive.

Nascondi contenuto

1 Documentazione

1.1 Opzioni modello

1.2 Menu a discesa principale

1.2.1 Menu a discesa a un livello.

1.2.2 Menu a discesa a due livelli.

1.2.3 Menu a discesa con elenco dei post.

1.3 Titolo e logo del blog.

1.4 Descrizione nei gadget.

1.5 Citazioni con citazioni a blocchi

1.6 Codice

1.7 Elenco dei post nella pagina principale.

1.8 Elenchi di post all'interno del contenuto del post.

1.9 Elenchi di post nei gadget (piè di pagina)

1.10 Galleria dei tag

1.11 Icone social nel piè di pagina o nell'intestazione

1.12 Modalità scura

1.13 Post correlati

1.14 Pagina di errore 404

1.15 Carattere/tipo di carattere e colori principali.

Supporto RTL 1.16 .

2 Registro delle modifiche

Documentazione

Opzioni modello

In questo modello troverai un gadget "Opzioni modello" relativo agli elementi all'interno del modello. Queste opzioni sono:

Mostra l'effetto particelle nell'intestazione. Per visualizzare o nascondere l'effetto particelle bianche fluttuanti nell'intestazione. Nel campo URL, puoi digitare: trueo false.
Menu principale sempre visibile (menu fisso) . Qui puoi decidere se desideri che il menu principale sia sempre visibile o meno. Nel campo URL, puoi digitare: true(per visualizzarlo sempre) o false.
Forza l'uso delle maiuscole nei titoli. Converti i titoli dei post, della barra laterale e di altri titoli in maiuscolo. Nel campo URL, puoi digitare: trueo false.

Menu a discesa principale

Il menu principale supporta voci a discesa. Questo menu si basa sul gadget Elenco Link. Per aggiungere un collegamento normale (senza visualizzare un sottomenu), aggiungilo come qualsiasi altro collegamento in questi gadget, ad esempio:

Menu a discesa a un livello.

Per aggiungere una voce di sottomenu a discesa di UN LIVELLO :

1. Crea un collegamento normale, ma il collegamento non è importante.

2. Crea un secondo collegamento, ma questa volta aggiungi un trattino all'inizio del Nome/Titolo del collegamento e aggiungi il collegamento come di consueto. Questo sarà il primo elemento del sottomenu.

3. Aggiungi tutti i link di cui hai bisogno, ma ricorda di aggiungere un trattino all'inizio di ogni titolo.

Esempio completo di questo gadget:

Il risultato sarebbe:

Menu a discesa a due livelli.

Per aggiungere un elemento con un sottomenu a discesa A DUE LIVELLI :

1. Crea un collegamento normale, ma il collegamento non è importante.

2. Crea un secondo collegamento, aggiungendo un trattino all'inizio del Nome/Titolo del collegamento e aggiungendo il collegamento come di consueto. Questo sarà il primo elemento del sottomenu.

3. Crea un terzo collegamento, ma questa volta aggiungi DUE trattini all'inizio del Nome/Titolo del collegamento e aggiungi il collegamento normalmente.

Esempio completo di questo gadget:

Risultato:

Menu a discesa con elenco dei post.

Questo menu segue una logica diversa rispetto ai precedenti. In questo caso, è necessario aggiungere il seguente formato come testo del collegamento:

tag:TagName-NumberOfPost-DisplayImage

Dove:

TagName– Questo è il nome del tag da cui verranno presi i post.
NumberOfPost– Questo è il numero di post che desideri visualizzare.
DisplayImage– Questa è l'opzione per visualizzare o meno un'immagine del post accanto al titolo. Opzioni: trueo false.

Esempio:

Mostra gli ultimi 3 post nel tag "Tech":

tag:Tech-3-true

Risultato:

Titolo e logo del blog.

Per modificare il titolo o aggiungere un logo, puoi andare alla dashboard di Blogger, quindi su Design e cercare i rispettivi gadget:

Descrizione nei gadget.

La maggior parte dei gadget in Blogger non dispone di un campo per aggiungere una descrizione o altri contenuti. In questo modello, puoi aggiungere una descrizione a qualsiasi gadget semplicemente modificando il titolo del gadget nel seguente schema:

Titulo-desc:Descripción

Dove:

Titolo: questo è il titolo standard del tuo gadget.
Descrizione: questa è la descrizione che vuoi aggiungere subito sotto il titolo.

Ad esempio, il gadget "Segui via email" non ha un campo descrizione, ma è un ottimo posto per aggiungere un messaggio per convincere i tuoi lettori a iscriversi. Per aggiungere una descrizione a questo gadget, puoi modificare il titolo in:

SUBSCRIBE-desc:Subscribe for Free to get all newest tutorials and lessons.

E il risultato sarebbe:

Nota : il gadget per l'iscrizione via email è stato rimosso da Blogger, ma la descrizione dei gadget segue la stessa logica.

Citazioni con citazioni a blocchi

Per visualizzare correttamente le citazioni formattate all'interno di un post, è necessario utilizzare l'editor dei post in modalità HTML:

E usa la seguente struttura:

<blockquote><p>Contenido de mi cita</p></blockquote>

Codice

Per visualizzare il codice all'interno di un post con il formato corretto, è necessario utilizzare l'editor dei post in modalità HTML (vedere citazioni) e utilizzare la seguente struttura HTML:

<code><span>Este es mi c&oacute;digo &amp; luce genial</span></code>

Elenco dei post nella pagina principale.

Nella homepage sono presenti due sezioni con elenchi di post (nella demo, si chiamano "Post in evidenza" e "Ultime notizie") e uno slider (chiamato anche "Slider" nella demo). Queste tre sezioni funzionano con un gadget HTML e mostrano per impostazione predefinita gli ultimi post del blog, ma possono essere configurate per visualizzare il contenuto di qualsiasi tag. Per fare ciò, il contenuto del gadget HTML deve seguire la seguente struttura:

NúmeroDePosts-TipoDePosts-TamañoDeMiniatura-EstiloDeFormato

Dove:

NúmeroDePostsè il numero di post che vuoi visualizzare.
TipoDePostspotrebbe essere:
- latestposts– Per visualizzare gli ultimi post del blog indipendentemente dai loro tag
- tag:Etiqueta– Per visualizzare gli ultimi post con un tag specifico. Dove "Tag" è il nome esatto del tag desiderato così come appare nei tuoi post.
TamañoDeMiniatura– È la dimensione in pixel dell'immagine in miniatura.
EstiloDeFormato– Può assumere i valori:
- slider– Per visualizzarlo come cursore.
- composition1– Per visualizzare una galleria di post. Utilizzato nella sezione "Post in evidenza" della demo. Nota: per questo formato, il NúmeroDePostsvalore ideale è 5, ma è possibile utilizzare 9 o 13 se si desidera visualizzare più contenuti.
- bloglist– Per visualizzare un elenco di post. Utilizzato nella sezione "Ultime notizie" della demo.

Esempio 1 : per visualizzare 5 post nel primo elenco di post (post in evidenza) del tag "Viaggi", si utilizzerebbe la seguente struttura:

5-Tag:Travel-800px-composition1

Esempio 2 : Per visualizzare 5 post nello slider del tag "Lingue", si utilizzerebbe la seguente struttura:

5-tag:Languages-800px-slider

Esempio 3 : Per visualizzare gli ultimi 4 post del blog nel secondo elenco di post (Ultime notizie), si utilizzerebbe la seguente struttura:

4-latest-400px-bloglist

Nota: per visualizzare gli ultimi post del blog, non è necessario includere il suffisso tag:.

Elenchi di post all'interno del contenuto del post.

A volte è molto utile elencare i post relativi a un evento o a una persona che sono già stati definiti da un tag specifico. In questo modello, puoi utilizzare una riga di testo molto simile agli shortcode di WordPress.

Ad esempio, per visualizzare gli ultimi 50 post all'interno del tag "Viaggi", all'interno dei post scrivi la seguente riga:

[posts--tag:Travel--50]

Elenchi di post nei gadget (piè di pagina)

Analogamente allo slider, puoi creare elenchi con gli ultimi post del blog o post di un tag specifico, sia nella barra laterale che nel piè di pagina. Per creare un nuovo elenco di post:

1. Vai su Blogger/Design e crea un nuovo gadget HTML. Puoi usare il titolo che preferisci.

2. Nel campo contenuto: per visualizzare gli ultimi post del blog utilizzare:

3-latest-65px

E per mostrare gli ultimi post in un dato tag usa:

3-tag:Nombre de la etiqueta-65px

Dove "Nome tag" è il nome esatto del tag che vuoi usare.

In entrambi i casi puoi sostituire il numero “3” con il numero di post che vuoi visualizzare.

Galleria di tag

Le gallerie di tag funzionano nella versione Pro del modello. Queste gallerie utilizzano il gadget Tag e mostrano un elenco di tag più accattivante con un'immagine di anteprima. Questa immagine corrisponde al post più recente all'interno di quel tag.

Queste gallerie rendono la navigazione più intuitiva per i lettori e rendono l'aspetto del blog più dinamico, poiché vengono aggiornate ogni volta che un post viene pubblicato all'interno di un tag.

Nella demo, è la sezione "Sezioni" nella pagina principale. E come gadget nel piè di pagina, sempre chiamata "Sezioni".

Come per qualsiasi gadget etichetta, è possibile visualizzare solo le etichette desiderate.

Nella versione gratuita , la sezione "Sezioni" nella pagina principale è sostituita da un gadget HTML. Qui, è possibile aggiungere manualmente una galleria modificando il codice HTML per ciascun elemento, come segue:

<a class="bt-tag" href="URL" alt=""><div class="tag-thumb"><img src="IMAGE URL"></div><h4>NAME</h4></a>

Icone social nel piè di pagina o nell'intestazione

Con questo modello, puoi aggiungere facilmente le icone dei social media all'intestazione o al piè di pagina. Basta modificare o creare un gadget Elenco Link e aggiungere ciascuno dei tuoi account social con i rispettivi link. Salva le modifiche e diventeranno automaticamente icone.

Esempio:

La stessa operazione si applica alla barra con le icone social nell'intestazione:

Poiché su Mastodon vengono utilizzati un'ampia varietà di server e nomi di dominio , è necessario aggiungere ?icon=mastodonal tuo profilo un collegamento alla fine del collegamento, ad esempio:

https://fosstodon.org/fcovicente?icon=mastodon

Modalità scura

La modalità scura è disponibile nella versione Pro.

Questa funzionalità utilizza JavaScript per rilevare se l'utente preferisce una versione chiara (predefinita) o una modalità scura. Una volta rilevato, la applica al design.

I lettori possono impostare le proprie preferenze di design, indipendentemente da quelle attualmente configurate sul loro sistema, utilizzando l'interruttore a levetta situato nel menu principale. Questa preferenza verrà memorizzata per le visite future.

Post correlati

I post correlati sono disponibili nella versione Pro e vengono visualizzati automaticamente sotto il contenuto dei singoli post. Questi post si basano sul primo tag del post.

Pagina di errore 404

La pagina di errore 404 può essere personalizzata dalla dashboard di Blogger. Basta individuare la sezione corrispondente nella sezione "Design". Lì troverai un gadget immagine e un gadget HTML.

Carattere/tipo di carattere e colori principali.

Per modificare il font principale e la tavolozza dei colori, basta andare alla sezione Modelli e cercare il link "Progettazione Modelli" . Una volta lì, vai su "Regola Larghezza" , dove potrai apportare le modifiche necessarie.

Supporto RTL.

Il modello offre un supporto parziale per l'allineamento RTL (da destra a sinistra), utilizzato in lingue come l'arabo. Per abilitarlo, cerca:

<html b:css='false'

E sostituiscilo con:

<html lang="ar" dir="rtl" b:css='false'

Dov'è aril codice della lingua araba?

Ora cerca:

bootstrap.min.css

E sostituiscilo con:

bootstrap.rtl.min.css

Registro delle modifiche

Versione 1.0 – 30-01-2023 – Versione iniziale.

fonte

Personalizza i link dei commenti di Blogger (Rispondi, Elimina, Risposte, Aggiungi commento e Carica altro)

2026-04-04T17:23:00.000+02:00

In questo post vedremo come personalizzare i link per i commenti nidificati , ovvero i link Rispondi, Elimina, Risposte, Aggiungi commento e Carica altro .

Molti modelli trascurano questi collegamenti e talvolta sono appena visibili. Se vuoi evidenziarli o decorarli, in questo post scoprirai come fare.

Ho preparato 5 stili diversi da copiare e incollare, ma naturalmente puoi modificarli e personalizzarli a tuo piacimento.

Per aggiungere uno qualsiasi di questi 5 design, vai su Template | HTML Edit e incolla il codice per gli stili che preferisci prima ]]></b:skin> .

/* Collegamenti ai commenti
----------------------------------------------- */
.comments .comment .comment-actions a, .comments .thread-toggle a, .comments .continue a, .comments .comments-content .loadmore a {
width: 100%;
display: inline;
color: #666; /* Colore del collegamento */
background: #f5f5f5; /* Colore dello sfondo */
border-left: 2px solid #009ecf; /* Colore del bordo sinistro */
border-radius: 10px; /* Bordo arrotondato */
text-decoration: none;
padding: 4px 8px;
margin-right: 5px;
white-space: nowrap;
vertical-align: middle;
font-size: 11px;
font-weight: bold;
font-family: Arial;
}
.comments .continue {border-top:none}
.comments .comment .comment-actions a:hover, .comments .thread-toggle a:hover, .comments .continue a:hover {
text-decoration:none;
position:relative;
top: 1px;
left: 1px;
}
.comments .comments-content .loadmore a {
display:block;
text-align: center;
font-size: 26px;
font-weight: normal;
font-family: Arial;
margin-right:auto;
margin-left:auto;
margin-top:0px;
max-width:180px;
}

/* Collegamenti ai commenti
----------------------------------------------- */
.comments .comment .comment-actions a, .comments .thread-toggle a, .comments .continue a, .comments .comments-content .loadmore a {
width: 100%;
display: inline;
color: #fff; /* Colore del collegamento */
background: #009ecf; /* Colore dello sfondo */
border-radius: 2px; /* Bordo arrotondato */
text-decoration: none;
padding: 3px 6px;
margin-right: 5px;
white-space: nowrap;
vertical-align: middle;
font-size: 11px;
font-weight: normal;
font-family: Arial;
}
.comments .continue {border-top:none}
.comments .comment .comment-actions a:hover, .comments .thread-toggle a:hover, .comments .continue a:hover {
text-decoration:none;
position:relative;
top: 1px;
left: 1px;
}
.comments .comments-content .loadmore a {
display:block;
text-align: center;
font-size: 22px;
font-weight: bold;
font-family: Arial;
margin-right:auto;
margin-left:auto;
margin-top:0px;
max-width:180px;
}

/* Collegamenti ai commenti
----------------------------------------------- */
.comments .comment .comment-actions a, .comments .thread-toggle a, .comments .continue a, .comments .comments-content .loadmore a {
width: 100%;
display: inline;
color: #777; /* Colore del collegamento */
/* Sfondo sfumato */
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #eded), color-stop(1, #d6d6d6) );
background:-moz-linear-gradient( center top, #eded 5%, #d6d6d6 100% );

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#d6d6d6');
background-color:#eded; /* Colore di sfondo */
border:1px solid #d6d6d6; /* Colore del bordo */
border-radius: 4px; /* Bordo arrotondato */
box-shadow:inset 0px 0px 3px 0px #fff;
text-shadow:1px 1px 0px #fff;
text-decoration: none;
padding: 3px 7px;
margin-right: 5px;
white-space: nowrap;
vertical-align: middle;
font-size: 11px;
font-weight: normal;
font-family: Arial;
}
.comments .continue {border-top:none}
.comments .comment .comment-actions a:hover, .comments .thread-toggle a:hover, .comments .continue a:hover {
text-decoration:none;
position:relative;
top: 1px;
left: 1px;
}
.comments .comments-content .loadmore a {
display:block;
text-align: center;
font-size: 24px;
font-weight: bold;
font-family: Arial;
margin-right:auto;
margin-left:auto;
margin-top:0px;
max-width:180px;
}

/* Collegamenti ai commenti
----------------------------------------------- */
.comments .comment .comment-actions a, .comments .thread-toggle a, .comments .continue a, .comments .comments-content .loadmore a {
width: 100%;
display: inline;
color: #fff; /* Colore del collegamento */
background-color:#ff5bb0; /* Colore dello sfondo */
border:1px solid #ee1eb5; /* Colore del bordo */
border-top-left-radius:37px; /* Bordo arrotondato */
border-top-right-radius:0px;
border-bottom-right-radius:37px; /* Bordo arrotondato */
border-bottom-left-radius:0px;
text-decoration: none;
padding: 3px 12px;
margin-right: 5px;
white-space: nowrap;
vertical-align: middle;
font-family:Times New Roman;
font-size:13px;
font-weight:bold;
font-style:italic;
}
.comments .continue {border-top:none}
.comments .comment .comment-actions a:hover, .comments .thread-toggle a:hover, .comments .continue a:hover {
text-decoration:none;
position:relative;
top: 1px;
left: 1px;
}
.comments .comments-content .loadmore a {
display:block;
text-align: center;
font-family:Times New Roman;
font-size:24px;
font-weight:bold;
font-style:italic;
margin-right:auto;
margin-left:auto;
margin-top:0px;
max-width:180px;
}

/* Collegamenti ai commenti
----------------------------------------------- */
.comments .comment .comment-actions a, .comments .thread-toggle a, .comments .continue a, .comments .comments-content .loadmore a {
width: 100%;
display: inline;
color: #fff; /* Colore del collegamento */
/* Colore del collegamento */
background:linear-gradient(to bottom, #fe1a00 5%, #ce0100 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe1a00', endColorstr='#ce0100',GradientType=0);
background-color:#fe1a00; /* Colore di sfondo */
border:1px solid #d83526; /* Colore del bordo */
border-radius:4px; /* Bordo arrotondato */
box-shadow: 0px 10px 14px -7px #f29c93;
text-decoration: none;
text-shadow:0px 1px 0px #b23e35;
padding: 5px 9px;
margin-right: 5px;
white-space: nowrap;
vertical-align: middle;
font-family:Times New Roman;
font-size:13px;
font-weight:bold;
font-style:italic;
}
.comments .continue {border-top:none}
.comments .comment .comment-actions a:hover, .comments .thread-toggle a:hover, .comments .continue a:hover {
text-decoration:none;
position:relative;
top: 1px;
left: 1px;
}
.comments .comments-content .loadmore a {
display:block;
text-align: center;
dimensione carattere: 24px;
peso carattere: grassetto;
famiglia carattere: Arial;
margine destro:auto;
margine sinistro:auto;
margine superiore:0px;
larghezza massima:180px;
}

All'interno dei codici vedrai in verde dove potrai modificare gli stili principali.

In ogni caso, i pulsanti avranno un effetto "spinta" quando il cursore del mouse passa sopra di essi. Se desideri aggiungere altri stili al passaggio del mouse, puoi farlo aggiungendo gli stili seguenti:

.commenti .commento .commento-azioni a:hover, .commenti .thread-toggle a:hover, .commenti .continua a:hover {

Qui puoi cambiare tutto ciò che vuoi, che si tratti del colore dello sfondo, del colore del testo, ecc.

Se desideri personalizzare ogni link singolarmente, puoi farlo. Ad esempio, se desideri solo i link " Rispondi " ed " Elimina " (ricorda che il link "Elimina" è visibile solo agli amministratori del blog), puoi farlo in questo modo:

.comments .comment .comment-actions a {
... Qui gli stili ...
}

Per il link " Risposte " sarebbe così:

.comments .thread-toggle a {
... Ecco gli stili ...
}

Per il link " Aggiungi commento " sarebbe così:

.commenti .continua a {
... Qui gli stili ...
}

E per il link " Carica altro " come questo:

.comments .comments-content .loadmore a {
... Ecco gli stili ...
}

In questo modo semplice possiamo personalizzare quei piccoli dettagli del modello a cui spesso non prestiamo la massima attenzione, ma che sono una parte importante per chi vuole attirare commentatori sul proprio blog.

fonte

Come Implementare i Meta Tag

2026-03-28T17:46:00.001+01:00

Per implementare i meta tag, devi inserire o modificare il codice HTML della tua pagina, specificamente all'interno della sezione <head>, utilizzando un editor di testo, il file manager del tuo hosting o, più semplicemente, tramite le impostazioni SEO del tuo CMS come WordPress o le funzioni di un editor come Wix. I meta tag più importanti includono: il title (titolo della pagina), la meta description (sintesi del contenuto), il meta robots (per il controllo dell'indicizzazione), e altri specifici per i social media (Open Graph, Twitter Cards) e il mobile (viewport).
Dove inserire i Meta Tag
Individua la sezione <head>: Accedi al codice HTML della pagina web che vuoi modificare e individua la sezione <head>.
Inserisci il tag: Inserisci il codice HTML dei meta tag all'interno della sezione <head>.
Come inserire i Meta Tag
A seconda del tuo sito, puoi scegliere uno di questi metodi:
Con un CMS
: Usa plugin come Yoast o SEOPress per aggiungere e gestire facilmente meta tag senza intervenire direttamente nel codice HTML, dice Leonardo Spada.
Con un sito basato su piattaforme
: Accedi all'Editor, vai su Pagine e menu > Altre azioni > SEO base, e poi alla scheda SEO avanzata per inserire tag personalizzati nel campo Codice HTML, come spiegato da Wix.com.
Modifica diretta del codice
: Se sei uno sviluppatore, puoi scaricare il file HTML, modificarlo con un editor di testo, o usare il cPanel File Manager per inserire i tag direttamente nel codice della pagina, spiega Mailchimp.
Esempi di Meta Tag da Implementare
Meta Title
: Il titolo che appare nella scheda del browser e nei risultati di ricerca.
Meta Description
: Una breve descrizione del contenuto della pagina.
Meta Robots
: Istruzioni per i motori di ricerca su indicizzare (index/noindex) e seguire (follow/nofollow) i link.
Open Graph / Twitter Cards
: Tag per ottimizzare la condivisione sui social media
Viewport Meta Tag
: Determina la visualizzazione ottimale della pagina sui dispositivi mobili.
Meta Language
: Specifica la lingua della pagina.
Meta Author
: Indica chi ha creato il documento.

Guida a GSC: di recente una pagina ha ricevuto meno impressioni del solito

2026-03-21T21:04:00.000+01:00

Se una pagina riceve meno traffico in Google Search Console (GSC), controlla le sezioni "Problemi di sicurezza" e "Azioni manuali" in GSC, poiché un calo può indicare penalizzazioni o minacce alla sicurezza. Altre cause possibili includono problemi con l'indicizzazione, un peggioramento della qualità dei contenuti, l'ottimizzazione SEO insufficiente, o un blocco del file robots.txt.

<?XML:NAMESPACE PREFIX = "[default] http://www.w3.org/2000/svg" NS = "http://www.w3.org/2000/svg" />

Verifiche immediate in Google Search Console:

Sezione Azioni manuali:

Cerca eventuali azioni manuali di Google che potrebbero influenzare il ranking della tua pagina.

Sezione Problemi di sicurezza:

Controlla se ci sono avvisi relativi a malware o minacce alla sicurezza che potrebbero bloccare l'accesso degli utenti al sito.

Rapporto sul traffico:

Confronta il traffico della pagina con i periodi precedenti per capire l'entità del calo e identificare eventuali pattern.

Sezione Indicizzazione:

Se la pagina è stata pubblicata di recente, potrebbe non essere ancora stata indicizzata. Controlla lo stato di indicizzazione della pagina.

Possibili cause tecniche e di contenuti:

Errori tecnici:

Problemi nel codice del sito, caricamento lento o incompatibilità con dispositivi mobili possono influire negativamente sul traffico.
Contenuti di bassa qualità:

Contenuti poco pertinenti o di scarso valore possono ridurre il posizionamento e il traffico.
Ottimizzazione SEO:

Una mancanza di ottimizzazione o un'ottimizzazione errata per i motori di ricerca può rendere difficile la visibilità della pagina.
Blocco da robots.txt:

Verifica che il file robots.txt non stia bloccando l'indicizzazione o la scansione della pagina da parte di Google.

Cosa fare:

Segui le indicazioni di Google:

Se trovi azioni manuali o problemi di sicurezza, correggi i problemi e richiedi un riesame.

Ottimizza i contenuti:

Migliora la qualità e la pertinenza dei contenuti per attrarre e mantenere gli utenti.

Migliora la velocità del sito:

Assicurati che la pagina si carichi velocemente su tutti i dispositivi.

Considera l'aiuto di un professionista SEO:

Se non riesci a risolvere il problema, un esperto SEO può offrire supporto per migliorare il posizionamento del sito.

Come aggiungere un link per tradurre un post di Blogger in italiano in fondo al post.

2026-03-14T17:01:00.001+01:00

Per aggiungere un link per tradurre un post di Blogger in italiano, devi inserire manualmente il codice HTML del link nel contenuto del post, puntando all'URL del tuo post preceduto dall'URL di Google Traduttore, oppure integrare un gadget di traduzione dal menu di layout del tuo blog per una soluzione più automatica e visibile a tutti. <?XML:NAMESPACE PREFIX = "[default] http://www.w3.org/2000/svg" NS = "http://www.w3.org/2000/svg" />

Metodo 1: Aggiungere un link manuale al post
Questo metodo ti permette di aggiungere un link specifico a ogni post che desideri rendere traducibile.

Copia il link del post che vuoi tradurre.
Crea il link di Google Traduttore: aggiungi https://translate.google.com/translate?sl=auto&tl=it&u= all'inizio del link del tuo post.
- Esempio: Se il tuo post è http://mioprofile.blogspot.com/2025/09/titolo-post.html, il link per la traduzione sarà https://translate.google.com/translate?sl=auto&tl=it&u=http://mioprofile.blogspot.com/2025/09/titolo-post.html.
Aggiungi il link al post: Nel tuo editor di Blogger, vai alla sezione di modifica di quel post e incolla il link dove vuoi che appaia, per esempio alla fine del testo.

<p>Puoi tradurre questo post in italiano: <a href=https://trucchieconsigliperblogger-blogspot-com.translate.goog/2025/09/modifica-delle-icone-dei-gadget-nelle.html?_x_tr_sl=es&_x_tr_tl=it&_x_tr_hl=it&_x_tr_pto=wapptarget="_blank>Traduci in italiano</a></p>

Metodo 2: Aggiungere un gadget di traduzione al blog
Questo è un modo più automatico e integrato, ideale se vuoi che tutti i tuoi post possano essere tradotti.

Accedi alla dashboard di Blogger.
Vai su "Layout" nel menu a sinistra.
Fai clic su "Aggiungi un gadget" nella sezione del layout dove vuoi che appaia il selettore di lingua (ad esempio, nel footer, nella sidebar, ecc.).
Trova e seleziona "Traduci" o "HTML/JavaScript" dalla lista dei gadget disponibili.
Configura il gadget:
- Se usi il gadget "Traduci", ti basterà abilitare l'opzione di traduzione e selezionare le lingue, tra cui l'italiano.
- Se usi il gadget HTML/JavaScript, dovrai copiare e incollare il codice fornito da Google Translate Widgets (o una soluzione simile) nel campo di testo fornito dal gadget.
Salva il gadget e poi salva le modifiche al layout del tuo blog.

Dopo questi passaggi, vedrai un selettore di lingua che i tuoi lettori possono utilizzare per tradurre il tuo blog nella lingua desiderata.

Espandi e comprimi i gadget con jQuery

2026-03-07T20:43:00.000+01:00

Qualche tempo fa abbiamo visto come espandere e comprimere i gadget utilizzando Scriptaculous e Prototype , è un metodo che funziona bene, ma c'è chi usa jQuery e non vuole caricare altre librerie sul proprio blog, quindi in questo post vedremo come ottenere lo stesso risultato ma utilizzando jQuery.

Espandere e comprimere i gadget può essere utile per chi ne ha molti e desidera che la barra laterale abbia un aspetto più ordinato, mostrando solo i titoli dei gadget e i contenuti solo quando l'utente li desidera. Potete vedere un esempio in questo post di blog di prova ; cliccando sul titolo del gadget, questo si espanderà.

Per aggiungere questi gadget espandibili, ti serve solo jQuery. Se non lo hai ancora, vai su Template | Modifica HTML e dopo <head> aggiungi questa riga:

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

E ora, per applicare l'effetto espandibile e scorrevole a un gadget, individua il gadget a cui desideri applicarlo nell'editor HTML . Ad esempio, un gadget HTML/Javascript si presenterebbe così:

<b:widget id='HTML1' locked='false' title='Titolo gadget' type='HTML'>
<b:includable id='main'>

<b:if cond='data:title != ""'>
<h2 class='title'>
<span id=' expandGadget1 ' style='cursor:hand;cursor:pointer;'>
▼▲
<data:title/>
</span>
</h2>
</b:if>
<div class='widget-content'>
<div class=' expand1 ' style='display: none;'>
<data:content/>
</div>
<script>$(document).ready(function(){$('# expandGadget1 ').click(function(){$('. expand1 ').slideToggle("slow")})});</script>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

Aggiungi ciò che è in rosso e il gioco è fatto.

Per guidarti su dove inserire i codici:

Il primo codice in rosso circonda il tag <data:title/>.
L'altra parte in rosso va dopo <div class='widget-content'>
e l'ultima va prima.

</div>

<b:include name='quickedit'/>

Nota che in blu vedrai un ID e una classe, entrambi visualizzati due volte. Se dovessi aggiungere un altro gadget espandibile, dovresti modificare sia gli ID che le classi, ad esempio expandGadget2 ed expand2.
Nel primo frammento che abbiamo aggiunto vedrai apparire questi caratteri: ▼▲
Queste sono le frecce su e giù ▼▲, puoi sostituirle con un altro carattere, un altro testo o persino un'immagine:

<img src=' URL immagine ' bordo='0' larghezza='14px'/>

Il codice di esempio è per i gadget HTML/Javascript , ma può essere applicato a qualsiasi altro gadget. È sufficiente identificare il tag <data:title/> del gadget (dove va inserito il primo codice) e il contenuto del gadget (dove va inserito il secondo codice).
Forse dovrei chiarire che questo non velocizza il caricamento del blog, poiché il contenuto continua a caricarsi anche quando è nascosto all'utente. Serve solo a mostrare meno spazio nella barra laterale, poiché a volte abbiamo gadget che occupano troppo spazio, e questo è un buon modo per rendere il blog più ordinato.

fonte

4 modi per mettere uno spoiler sul tuo blog

2026-02-28T20:42:00.000+01:00

Gli spoiler vengono utilizzati per nascondere determinati contenuti da un post del blog, per motivi strategici o estetici. Questi spoiler nascondono i contenuti e li rivelano solo quando l'utente lo richiede.
In questo post, esamineremo quattro metodi per aggiungere uno spoiler , così potrai scegliere quello più adatto alle tue esigenze.

Spoiler solo con CSS

Con questo metodo, sfrutteremo i vantaggi del CSS senza dover ricorrere a script: solo CSS e nient'altro. Tuttavia, presenta due svantaggi: il primo è che sono necessari due pulsanti: uno per mostrare il contenuto e uno per nasconderlo. L'altro è che quando il contenuto viene visualizzato, la pagina scorre leggermente fino a raggiungere la pagina in cui si trova il contenuto.

Il codice che useresti nei tuoi post per questo tipo di spoiler CSS sarebbe il seguente:

<input onclick="window.location='# show1 ';" type="button" value="Mostra"/>
<input onclick="window.location='#';" type="button" value="Nascondi" />
<div id=" spoiler1 ">
<div id=" show1 ">
...Ecco il contenuto che vuoi nascondere...
</div>
</div>
<style>
#spoiler1 > div {display: none;}
#spoiler1 > div:target {display: block;}
</style>

In rosso, dovresti contrassegnare il contenuto che verrà nascosto. Dovresti cambiare il colore blu ogni volta che aggiungi uno spoiler. Ad esempio, se ne aggiungi un altro, cambia spoiler1 in spoiler2 e mostra1 in mostra2.

Spoiler che utilizza Javascript

Questo tipo di spoiler è simile allo spoiler che abbiamo visto qualche anno fa, solo leggermente modificato. Richiede pochissimo JavaScript per essere utilizzato. Praticamente fa la stessa cosa dello spoiler CSS, ma richiama gli stili tramite JavaScript.

<input type="button" onclick="if(document.getElementById(' spoiler1 ') .style.display=='none') {document.getElementById(' spoiler1 ') .style.display=''; this.value = 'Nascondi'; }else{document.getElementById(' spoiler1 ') .style.display='none';this.value = 'Mostra'; }" value="Mostra"/><div id=" spoiler1 " style="display:none">
...Ecco il contenuto che vuoi nascondere...
</div>

Allo stesso modo, dovrai cambiare l'ID spoiler1 (ogni volta che appare) ogni volta che vuoi aggiungerne uno nuovo.

Spoiler usando Scriptaculous

Abbiamo già visto questo metodo nel post " Espandere e comprimere parti di un post ". A differenza dei metodi precedenti, questo metodo visualizza i contenuti nascosti con un effetto scorrevole, conferendogli un aspetto più accattivante.

Per utilizzarlo dobbiamo avere Scriptaculous, se non lo hai ancora aggiungilo prima </head>

<script src='http://ajax.googleapis.com/ajax/libs/prototype/1/prototype.js'/>
<script src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1/scriptaculous.js'/>

E quando vuoi mettere lo spoiler in un post usa questo codice:

<input onclick='Effect.toggle(" spoiler1 ", "slide"); return false' type='button' value='Show'/><div id=' spoiler1 ' style='display: none;'>
...Ecco il contenuto che vuoi nascondere...
</div>

In questo caso dovrai cambiare anche le parti blu ogni volta che vorrai aggiungerne altre.

Spoiler usando jQuery

Infine, vediamo come nascondere i contenuti con jQuery, che ci permette anche di ottenere un effetto scorrevole mostrando o nascondendo il contenuto spoiler.

Se non hai jQuery, mettilo dopo <head>

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

E nel tuo contributo usa questo codice ogni volta che vuoi inserire uno spoiler:

<input type="button" id=" spoiler1 " value="Mostra"/>
<div class=" show1 " style="display: none;">
...Ecco il contenuto che vuoi nascondere...
</div>
<script>jQuery.noConflict();jQuery(document).ready(function(){jQuery('# spoiler1 ').click(function(){jQuery('. show1 ').slideToggle("slow");});});</script>

Anche in questo caso devi cambiare ciò che è in blu ogni volta che vuoi aggiungerne uno nuovo, ad esempio spoiler1 in spoiler2 e show1 in show2

Ed è semplicissimo nascondere i contenuti nei post del tuo blog , anche in un gadget HTML/Javascript. Come puoi vedere, i codici sono super brevi e facili da applicare. Puoi nascondere qualsiasi contenuto: un'immagine, un testo, un player, video, ecc.

fonte

Come conoscere il mio ID Facebook e X (ex- Twitter)

2026-02-21T20:40:00.000+01:00

A volte, per vari motivi, potresti aver bisogno di conoscere l'ID utente di un social network a cui partecipi, per creare un widget, creare i tuoi meta tag o per qualsiasi altra necessità.
In questo post, vedremo come ottenere l'ID Facebook , l'ID Twitter e l'ID Google+ , sia per i tuoi profili che per le tue pagine.

ID Facebook

Se il tuo profilo o la tua pagina Facebook non ha un URL personalizzato, vai semplicemente alla tua pagina o al tuo profilo e copia l'URL che appare nella barra degli indirizzi. Quella serie di numeri è il tuo ID.

Se hai già un URL personalizzato, usa questo strumento. Inserisci il tuo nome utente o il nome della Pagina, clicca su "Test " e otterrai il tuo ID Facebook e alcune informazioni aggiuntive.

https://graph.facebook.com/ Ottenere

ID Google+

Nel caso del social network di Google, se non hai un URL personalizzato, vai semplicemente sul tuo profilo e copia l'URL dalla barra degli indirizzi; i numeri che compaiono lì sono il tuo ID.

Se hai già un URL personalizzato, puoi utilizzare l'API di Google+ per trovare il tuo ID. Per farlo, vai alla pagina API Explorer .
In userId, aggiungi il nome utente della tua pagina o profilo, preceduto dal segno +.
Nei campi, digita id.

Clicca su Esegui e otterrai il tuo ID.

ID Twitter

Nel caso di Twitter, la nuova API rende le cose un po' più complicate, ma fortunatamente esistono alcuni strumenti online che ci permettono di trovare il nostro ID Twitter in un solo passaggio.
"My Twitter ID" è uno di questi. Basta inserire il tuo nome utente Twitter e otterrai immediatamente il tuo ID.

fonte