Blogger come creare pagine statiche con singole categorie

Aggiornamento 2014
Blogger ha modificato il modo di collegare il link ad una categoria perciò andate a questo link per l’aggiornamento.

Abbinare pagine a singole categorie e creare una rubrica.

In questo tutorial per Blogger rispondo ad un quesito di Jimmi, mi chiedeva come creare delle pagine statiche sotto forma di Menu associate a singole categorie.

Questo tutorial prevede una certa dimestichezza con il concetto delle etichette perciò vi rimando alla lettura di questi post =>
Il miglior modo per associare le etichette ai post.

ATTENZIONE: salvate il vostro template prima di iniziare, dalla bacheca Blogger, DESIGN > MODIFICA HTML e cliccate su SCARICA MODELLO COMPLETO. Salvate e mettete in salvo, non si sa mai, che non combiniate pasticci, dei quali non mi ritengo responsabile! 😉

Step 1 – In primis decidete le categorie del vostro blog a seconda del tema che avete scelto. Siate essenziali, schematici in modo da riassumere subito a colpo d’occhio cosa troverà il lettore cliccando su quella categoria. Ad esempio nel mio blog ho suddiviso tra Blogger, WordPress, Facebook etc.

Step 2 – Il secondo, ma indispensabile punto è quello di scrivere i vostri post!! Moltissimi di voi mi fanno mille domande e poi non incominciano mai a scrivere e questo mi dispiace un sacco, vorrei linkarvi tutti, ma se non vi buttate! 🙂 Eh eh!

Pubblicando il post, ricordatevi di aggiungere le etichette (dette anche tag o label) dovranno corrispondere con le categorie che avete scelto al punto 1, ma io vi suggerisco di aggiungerne altre come parole chiave per trovare il vostro articolo.

Aggiungere etichette label tag sui post blogger by Blogghidee

 

Affinché gli articoli si visualizzino con il read more, basterà che clicchiate in un punto del vostro post in cui volete “tagliarlo” e cliccate sull’icona a forma di doppio rettangolo sovrapposto tagliato a metà. Si creerà una linea grigia che delimiterà l’area.

Cliccate su PUBBLICA POST. Una volta introdotte le etichette, nel successivo post basterà che clicchiate su MOSTRA TUTTO e si visualizzeranno tutte le etichette che avete aggiunto fino a quel momento.

Step 3 – Ora aggiungiamo un gadget con le etichette, che verrà aggiunto alla colonna del vostro blog. Questo gadget ci permette di vedere tutte le etichette che sono state aggiunte. Per aggiungere il gadget dal menu a sinistra >

cliccate su LAYOUT (NON SI CHIAMA PIU’ ELEMENTI PAGINA) > uscirà la pagina con la visualizzazione dei componenti.

Layout - elementi pagina nuova interfaccia blogger by Blogghidee

Dalla pagina che si apre cliccate su AGGIUNGI GADGET >

Layout   aggiungi gadget by Blogghidee

Infine cercate dal box che si apre il gadget che vi servirà, ossia ETICHETTE.

Gadget etichette blogger by Blogghidee

CONFIGURATE IL GADGET come da immagine sottostante >

Aggiungere gadget etichette Blogger by Blogghidee

Potete anche spuntare “Tutte le etichette“. Oppure selezionare tra le tante etichette solo quelle che volete che si visualizzino.

Cliccate su Salva e andate a verificare su VISUALIZZA BLOG se c’è la vostra lista di etichette.  Questo di seguito è un esempio di come potrebbe essere visualizzato.

Immagine gadget etichette su Blogger blog by Blogghidee

Step 4 – Siamo sempre nella pagina LAYOUT > cliccate di nuovo su > AGGIUNGI GADGET, questa volta scegliete il gadget dal titolo AGGIUNGI JAVA HTML e apritelo.

Incollateci dentro tutto questo codice, le parti colorate vanno sostituite con i vostri link, etichette e categorie, vedi prossimo step.
Per ora incollate tutto il codice seguente nel box => bubu

<style type=”text/css” media=”screen”> ul#menu {background:#fff; padding:0; margin:0; list-style:none; height:2.75em; } ul#menu li {float:left;} ul#menu li a {display:block; color:#fff; background:#b5c9bb;; bfont-size:1.1em; line-height:2.5em; padding:0 1.5em; text-decoration:none; font-family:arial, sans-serif; font-weight:bold;} ul#menu li a.current {background:#FFDDC1;} ul#menu li a:hover {background:#000; font-size: 1.2 em; } </style>

<ul id=”menu”> <li><a href=”http://NOMETUOBLOG.blogspot.it/“>HOME</a></li>
<li><a href=”http://NOMETUOBLOG.blogspot.it/search/label/ETICHETTA“>TITOLO ETICHETTA</a> </li>
<li><a href=”http://NOMETUOBLOG.blogspot.it/search/label/ETICHETTA“>TITOLO ETICHETTA</a> </li> </ul>

Ora andiamo ad analizzare il codice, la prima parte corrisponde allo stile del menu, sulla seconda parte occorre fare dei cambiamenti.

<ul id=”menu”>

<li><a href=”http://www.nometuoblog.blogspot.it“>Home</a></li>
<li> <li><a href=”http://nometuoblog.blogspot.it/search/label/etichetta“>Titolo Etichetta</a> </li>
<li><a href=”http://nometuoblog.blogspot.it/search/label/etichetta“>Titolo Etichetta</a> </li> </ul>

Questo codice ci serve per realizzare il nostro menu di navigazione con le categorie

Sostituite le parti in arancione “TITOLO ETICHETTA” con la vostra categoria che corrisponde all’etichetta assegnata al post.
Ad esempio se avete scritto un articolo sulle torte avrete assegnato al post l’etichetta TORTE e in questo step aggiungerete TORTE come “TITOLO ETICHETTA“.

La parte in viola dopo “search/label/etichetta   => corrisponderà all’etichetta in questo caso TORTE. perciò verrà

http://www.nomevostroblog.it/search/label/torte

Quando avrete sostituito tutto il codice colorato potete salvare.

 

Copiare il link delle etichette tag di Blogger BY BLOGGHIDEE

STEP 5 – Questo è uno step di controllo sulle etichette dei vostri post. Se volete avere il link della parte rosa del codice sopra, potete anche seguire questo step.

Andate fisicamente nel vostro blog, digitando l’indirizzo sul browser cercate il vostro gadget etichette, posizionatevi con il mouse sulla prima categoria e premete il tasto destro del mouse, si visualizzerà una finestrella, cliccate su COPIA INDIRIZZO LINK.

Così avrete copiato il link da inserire nello spazio  dell ‘url della categoria del blog evidenziato in ROSA del codice del menu sopra.

Al posto di ETICHETTA in VIOLA inserite il nome della categoria che avete scelto ad esempio come da immagine, scriverete Bambini. Ok!?!

E il TITOLO in verde che corrisponde al titolo del menu in ARANCIONE.

Quindi il codice potrebbe risultare più o meno così:

<ul id “menu”> <li><a href=”http://nometuoblog.blogspot.it/search/label/bambini“>Bambini</a> </li> <li><a href=”nometuoblog.blogspot.it/search/label/nonni“>Nonni</a> </li> </ul>

Step 6 – Salvate e vedrete il vostro gadget nella sidebar, potete trascinarlo sotto l’intestazione, semplicemente posizionandovi con il mouse sopra e tenendo premuto il tasto del mouse, trascinare dove volete.

Step 7 – Il risultato finale è questo:

Menu con singole categorie By Blogghidee

Ora cliccando sui corrispondenti link si aprirà una pagina con tutti gli articoli salvati e pubblicati con quella etichetta.

Step  8 – Potreste vedere un rettangolo grigio tutt’intorno al vostro menu, per eliminare quella linea, andate nel codice Html, dal menu a sinistra cliccate su MODELLO > PROCEDI >MODIFICA HTML > spuntate la casella ESPANDI MODELLI WIDGET e cercate tabs inner, cambiate il colore da grigio a bianco #000; così non si vedrà più nulla. Naturalmente dovrete cambiare con il colore di sfondo del vostro blog.

.tabs-inner .section:first-child ul { margin-top: -1px; border-top: 1px solid white; border-left: 1px solid white; border-right: 1px solid white; } .
tabs-inner .widget ul { background: transparent none repeat-x scroll 0 -800px; _background-image: none; border-bottom: 1px solid white; margin-top: 0; margin-left: -30px; margin-right: -30px; }

Step 9 – Potete anche variare il menu, se copiate il codice Css, inserendolo in Designer Modelli, nella sezione Avanzato, vedrete le modifiche direttamente in anteprima.

Credo di aver fatto un bel lavoro, magari c’è un modo più semplice, ma è stato più il tempo di scrivere il tutorial che la realizzazione che mi ha occupata!
Fatemi sapere se vi è stato utile, anche commentando, please!!! 😉

La dritta del “search label” Interestingwebs.blogspot.it: grazie mille!!!

A presto,

By BLOGGHIDEE 

 

Spread the love

Discussion

  1. admin
  2. admin
  3. admin
  4. admin
  5. admin
  6. admin
  7. admin
  8. admin
  9. MICHELA
  10. admin
  11. fra

Leave a Reply

This blog is kept spam free by WP-SpamFree.