Come aggiungere CSS in Blogger – Conoscenza di CSS in Blogger

Vuoi aggiungere alcuni effetti per il tuo blog come la neve caduta, 3D, font, testi in neon, scatola di ombra o si vuole prendere il design del tuo blog al livello successivo, quindi è sufficiente inserire poche righe di codice CSS personalizzato per il tuo blog. CSS, che cos’è? CSS è noto come Cascading Style Sheet che in semplice usato per descrivere l’aspetto del tuo blog o in altre parole è usato per definire come gli elementi HTML devono essere visualizzati. Prima di conoscere i CSS è meglio conoscere l’HTML. Ci sono tonnellate di risorse su CSS e anche un principiante può facilmente capire gli elementi di base del CSS, ma mastering ci vorrà un sacco di tempo e conoscenze pratiche.

I CSS svolgono un ruolo importante nell’abbellimento degli elementi e tutti i modelli di Blogger per impostazione predefinita avranno il proprio codice CSS. In qualsiasi momento, se desideri abbellire ulteriormente il design del tuo blog, puoi aggiungere alcuni CSS personalizzati. In alcuni dei nostri tutorial blogger abbiamo menzionato i nostri visitatori per aggiungere codici CSS per esempio dare un’occhiata a questo post, ma la maggior parte dei principianti non sanno dove aggiungere il CSS. La maggior parte di loro semplicemente aprire i loro file di modello, scoprire il b:tag pelle e in qualche modo finalmente rovinare i loro codici modello. Blogger consente di aggiungere il proprio CSS personalizzato in template designer che sostituisce il codice CSS predefinito al fine di ottenere il look accattivante per il tuo blog. Qui vi mostreremo come inserire / aggiungere CSS in Blogger.

Come inserire / aggiungere CSS in Blogger – Capire i CSS in Blogger

Prima di aggiungere CSS devi scrivere CSS e prima di poter scrivere il codice di stile CSS devi trovare i selettori per i quali desideri cambiare lo stile. Puoi utilizzare gli strumenti dello sviluppatore del tuo browser per ispezionare l’elemento, qui non stiamo andando dettagli su questo. Ad esempio conosci i tag h1, h2, h3, h4, h5 e h6 in generale e per modificare quei font puoi aggiungere CSS come questo qui sotto.

h1 {font-family: "Times New Roman", Times, serif;font-size: 15px;font-weight: bold;color: rgb(56, 77, 187)}

Ma cosa farai per cambiare il layout di pagina, lo stile della scheda del menu, i collegamenti, la famiglia di font, l’allineamento, lo sfondo o il colore del testo quando non conosci la classe dell’elemento. Questo è dove si deve fare uso del vostro browser strumento di sviluppatori. Basta fare clic destro su un elemento e quindi fare clic su inspect element dove vedrai gli elementi a sinistra e CSS a destra. Modificare il codice CSS e vedere come i risultati delle modifiche, per esempio qui è il codice CSS per la scheda menu che troverete diverso sul modello.

.tabs-inner .widget li a:hover {color: #fff;background-color: #FF9900;text-decoration: underline;display: inline-block;padding: .6em 1em;font: normal normal 15px 'Trebuchet MS', Trebuchet, Verdana, sans-serif;border-left: 1px solid #ffffff;border-right: 1px solid #dddddd;}

Utilizzando lo strumento inspect element puoi visualizzare in anteprima le modifiche CSS per qualsiasi elemento e quando ottieni l’aspetto desiderato prendi il codice CSS ed eseguilo nel tuo blog.

Applicare CSS in Blogger

Ci sono due modi per implementare CSS in Blogger uno è modificando direttamente i file del modello e l’altro metodo più semplice è quello di utilizzare l’opzione Aggiungi CSS in Blogger template designer.

Aggiungi CSS usando Blogger template designer

L’aggiunta di CSS qui è il modo più semplice e sicuro in quanto non influisce sui file del modello principale. Oltre all’aggiunta di CSS personalizzati, Blogger template designer consente di modificare facilmente lo sfondo del blog, regolando la larghezza, il layout, gli stili di carattere, i colori, l’area del gadget, il contenuto del piè di pagina ecc.

• Accedi al tuo blog Blogger, vai su Modelli e quindi fai clic su personalizza
• Ora vedrai la pagina Blogger template designer con 5 alcune opzioni
• Fai clic sull’opzione Avanzata, scorri le voci secondarie verso il basso e quindi scegli Aggiungi CSS.
• Successivamente vedrai un campo alla tua destra ed è qui che devi aggiungere il tuo CSS personalizzato.

Aggiungi il codice CSS personalizzato sopra, vedi le modifiche qui sotto e quando tutto è fatto clicca su “Applica al blog” in alto.

Aggiunta di CSS modificando il modello di Blogger

L’altro modo per applicare i CSS è modificando direttamente il CSS principale o aggiungendo un CSS personalizzato al file del modello. Non suggeriamo questo metodo per i principianti perché un uso improprio può portare a rompere il modello. Quindi prima di aggiungere CSS usando questo metodo assicurati di eseguire il backup; ecco come eseguire il backup e il ripristino del modello Blogger.

• Nella dashboard di Blogger, vai su Modello e quindi fai clic su Modifica HTML
• Ora vedrai i tuoi codici modello, basta premere CTRL + F per cercare e quindi cercare < b:skin>
• Espandi < b:skin> e vedrai apparire il CSS per il tuo modello di blog.

Leggi anche: Come fare un backup completo del blog di Blogger

Inizia a modificare il CSS esistente o puoi aggiungere il tuo CSS personalizzato, ma qui non ottieni l’opzione di anteprima che ottieni in Blogger template designer. Infine salvare il modello quando fatto.

Spero che questo articolo ti abbia guidato ad aggiungere CSS in Blogger. Inizia abbellire il tuo blog e per ottenere più tali aggiornamenti iscriviti al nostro feed RSS.