Pubblicato il 17/01/11 - aggiornato il  | 42 commenti :

Come sostituire in Blogger Post più recente, Home e Post più vecchio con tre icone.

Se si apre un post di Blogger che non sia l'ultimo pubblicato, in fondo alla pagina, dopo tutta la sezione dei commenti, sono visualizzati tre link: Post più recente, Home page e Post più vecchio. Il loro significato è ovvio così come è ovvia la destinazione di ciascun collegamento. Per rendere più carina e usabile la parte finale dei post, si possono introdurre le pagine di navigazione
Questa personalizzazione con i nuovi modelli non sempre riesce. Vediamo come sia possibile sostituire questi anonimi link con tre immagini per rendere il nostro blog più originale. Per prima cosa si dovrebbero trovare delle icone che fanno al caso nostro. Ci sono un sacco di siti in cui cercarle: Iconspedia, Iconza e IconFinder. Quelle che ho utilizzato come prova per realizzare questo post le ho trovate su IconFinder
L'obiettivo è sostituire queste tre icone a questi link. Il consiglio è di provare questa personalizzazione con molta cautela e di farlo solo dopo che si è salvato e inserito in una cartella a futura memoria il modello iniziale, specie se si ha un template realizzato con il Designer Modelli.
più vecchio recente home page blogger
Caricate le tre icone su un hosting come Picasa, SkyDrive o analogo quindi acquisitene gli URL diretti. Ecco quelle che ho scelto
     icona freccia sinistra        icona home page         icona freccia destra
Cliccando sopra a ciascuna di esse potete acquisirne l'URL dalla barra del browser. Andate su Design > Modifica HTML e salvate il modello completo. Espandete i modelli widget e cercate questo codice
<b:includable id='nextprev'>
cancellatelo fino alla fine del blocco cioè fino alla riga
</b:includable>
Sostituitelo con quest'altro codice
<b:includable id='nextprev'>
<div id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<a expr:href='data:newerPageUrl' expr:title='data:newerPageTitle' id='blog-pager-newer-link'>
<img src='URL FRECCIA SINISTRA'/></a>
</b:if>
<b:if cond='data:olderPageUrl'>
<a expr:href='data:olderPageUrl' expr:title='data:olderPageTitle' id='blog-pager-older-link'>
<img src='URL FRECCIA DESTRA'/></a>
</b:if>
<a class='home-link' expr:href='data:blog.homepageUrl'>
<img src='URL HOME PAGE'/></a>
</div>
<div class='clear'/>
</b:includable>
Adesso cercate la linea
]]></b:skin>
e immediatamente sopra incollate queste nuove classi di stile
#blog-pager-older-link {
float: right;
}
#blog-pager-newer-link {
float: left;
}
#blog-pager {
text-align: center;
}
Salvate il template. Ecco come apparirà la parte finale di ciascun post
post vecchio recente icone blogger
Naturalmente voi visualizzerete le icone di cui avete immesso l'indirizzo. In ciascuna immagine ci sarà un collegamento che porterà rispettivamente al post precedente, alla homepage e al post successivo.



42 commenti :

  1. Che dire? hai sempre una soluzione per tutto. Grazie!

    RispondiElimina
  2. Funziona benissimo! GRAZIE!!!!
    (Ho inserito il tuo antipixel sul mio blog.)

    RispondiElimina
  3. @Via Vai
    Grazie. E' una cosa che apprezzo di più di mille ringraziamenti :)

    RispondiElimina
  4. Beh, il tuo antipixel nel ns. blog è stato inserito già da tempo...
    http://parcodeinebrodi.blogspot.com/

    RispondiElimina
  5. @parcodeinebrodi
    Vi ringrazio moltissimo. Quando rispondo a delle domande sul blog lo faccio comunque al meglio delle mie possibilità senza controllare se è stato inserito o meno l'antipixel :D

    RispondiElimina
  6. Buongiorno ...
    ... ho provato a seguire le vostre istruzioni riguardo a questo link
    http://www.ideepercomputeredinternet.com/2011/01/come-sostituire-in-blogger-piu-recente.html
    perché non mi restano in memoria le icone che carico con http://www.prodraw.net/favicon/index.php ???
    nel senso che son visibili per alcune ore ... dopodiché spariscono di nuovo ... nonostante il Template sia sempre lo stesso e siano ancora presenti i link relativi a loro ???
    (o_°)

    RispondiElimina
  7. Buongiorno ...
    ... ho provato a seguire le vostre istruzioni riguardo a questo link
    http://www.ideepercomputeredinternet.com/2011/01/come-sostituire-in-blogger-piu-recente.html
    perché non mi restano in memoria le icone che carico con http://www.prodraw.net/favicon/index.php ???
    nel senso che son visibili per alcune ore ... dopodiché spariscono di nuovo ... nonostante il Template sia sempre lo stesso e siano ancora presenti i link relativi a loro ???
    (o_°)

    RispondiElimina
  8. @The Moon
    NMell'articolo mi sembrava di aver scritto chiaramente che si potevano utilizzare anche gli indirizzi delle icone che avevo caricato su un mio spazio di Skydrive. Comunque ecco gli indirizzi delle tre immagini

    http://lh4.ggpht.com/_nT13UtBmmiU/TTRR0x6w3OI/AAAAAAAARY8/e-_FGgsAajI/icona-back.png
    http://lh6.ggpht.com/_nT13UtBmmiU/TTRR09k-9CI/AAAAAAAARY4/G01fQUXUoAk/home.png
    http://lh5.ggpht.com/_nT13UtBmmiU/TTRR1GucQJI/AAAAAAAARZA/USQU7QIM84g/icona-right.png

    Ciao

    RispondiElimina
  9. parsifal ho capito chiaramente ciò che hai scritto ... solamente che a me piacevano più le mie ... io son riuscita a caricarle tranquillamente seguendo le tue indicazioni ma il problema e che dopo qualche ora mi accorgo che non son più visualizzate sul mio blog ...
    può essere un problema causato da
    http://www.prodraw.net/favicon/index.php ???
    e sapresti indicarmi una soluzione tenendo conto che vorrei caricare le mie icone?

    RispondiElimina
  10. @The Moon
    Se per caricare le immagini hai usato quel generatore di favicon non mi stupisce che spariscono visto che sono tenute nei loro server per poche ore. Devi procedere in questo modo
    1)Creare le tue immagini in formato PNG, JPG o GIF
    2)Accedere al tuo account di Blogger
    3)Accedere a Picasa da questo indirizzo
    http://picasaweb.google.com/home
    4)Andare su Carica > Crea nuovo album
    5)Caricare le icone che desideri visualizzare
    6)Ottenerne l'URL attraverso le istruzioni di questo post
    http://www.ideepercomputeredinternet.com/2010/07/picasa-e-lo-strumento-piu-completo-per.html
    Ciao

    RispondiElimina
  11. Complimenti una guida veramente ben fatta!!!

    RispondiElimina
  12. Utilissimo post per dare ossigeno alla voglia di giocare :)
    grazie, ciao :)))

    RispondiElimina
  13. Questo commento è stato eliminato dall'autore.

    RispondiElimina
  14. @solofilm
    Nel post sono indicati i tre CSS per mettere una immagine a destra una a sinistra e una al centro. Si possono spostare quelle laterali inserendo delle righe come
    margin-left: 20px;
    oppure margin.right: 30px;
    per calibrare la distanza. Ovviamente devi fare delle prove.
    P.S. Non rispondere ai miei commenti usando il link se non è una cosa reale.

    RispondiElimina
  15. @Ernesto T. ciao ernesto volevo chiedere x,che a me esce il background nero ??
    e se nel caso volessi togliere come dovrei fare? grazie

    RispondiElimina
  16. @denny Nelle tre immagini che ho inserito qui? Non saprei potrebbe essere una eredità del tuo blog che mette lo sfondo alle immagini in PNG. Prova a scegliere altre immagini o salvale in JPG con uno sfondo uguale al background del tuo blog.

    RispondiElimina
  17. @Ernesto T.

    tempo fa cancellai le tre scritte home,post più vecchi e più recenti.E' Possibile ripristinarle?Se si come?

    RispondiElimina
  18. @TUTTI GLI SCANDALI DEL VATICANO Sì è possibile, sono tre blocchi di codice. Non so quanto possa interessare ma vedrò di farci un post

    RispondiElimina
  19. @Ernesto T.

    ti ringrazio!lo feci tanto tempo fa,andando alla cieca per eliminare iscriviti a post atom.ora che ho tanti post mi farebbe comodo ripristinarlo.ti ringrazio in anticipo!aspetto il tuo post con ansia!

    RispondiElimina
  20. Non sapevo dove postare la domanda: sai percaso se è possibile sostituire l'icona dei commenti anonimi? Nel mio caso relativa a quella piccolina nei commenti integrati sotto il post (senza la foto/immagine dell'autore). Non trovo una soluzione :(

    RispondiElimina
  21. @Auto ...
    Non mi aveva preso l'URL :(

    http://www.ideepercomputeredinternet.com/2009/09/inserire-un-avatar-nei-commenti-anonimi.html

    RispondiElimina
  22. @TobiaAlberti
    Non so se ho capito la domanda. Comunque puoi sostituire i tag del tipo
    data:newerPageUrl
    con un testo che si vedrà al posto di Post più recenti, ecc

    RispondiElimina
  23. Ciao ernesto come faccio ad invertire i pulsanti? mettendo la freccia "post più vecchi" a sinistra anzichè a destra?

    RispondiElimina
    Risposte
    1. @StefanoVinci
      Inverti float: right con float: left nel secondo codice

      Elimina
    2. non cambia nulla, rimane sempre a destra post più vecchi e a sinistra post più recenti...

      Elimina
    3. @StefanoVinci
      Non metto in dubbio la tua parola ma mi pare impossibile. Comunque il metodo è quello. Prova a usare Firebug forse nel tuo template ci sono altri CSS
      http://www.ideepercomputeredinternet.com/2011/05/firebug-e-una-estensione-di-firefox-per.html

      Elimina
  24. Salve molto utile questo tutorial, ma come faccio ad esempio a far si (una volta impostate delle immagini al posto di "post più vecchi/recenti" e "home") che al passaggio del mouse appaia un altra immagine? (Io ad esempio voglio usare dei bottoni viola che al passaggio diventino gialli)

    RispondiElimina
    Risposte
    1. Lavorandoci sopra potrebbe anche essere possibile ma bisognerebbe creare una nuova classe di stile con hover e due immagini per ogni link per mostrare una o l'altra a seconda che il mouse ci passi sopra o meno. Ti consiglio di provare solo se hai delle buone conoscenze di CSS e HTML
      @#

      Elimina
    2. sarebbero "a:link" e "a:hover" quindi poi come implementerei questo comando solo per i suddetti tre link "home, più vecchi/recenti"

      Elimina
    3. Non è così semplice. Se avessi avuto chiaro il procedimento te lo avrei detto. Si potrebbe provare a creare delle nuove classi di stile come ti ho detto ma bisognerebbe testare e non so neppure se sia possibile farlo.
      @#

      Elimina
  25. Spero davvero in una risposta :( .. ho inserito i codici con le mie icone ecc.. ne esce solo una quella della home e compare tutt a sinistra, mentre le altre due nn si vedono per niente.. cos'è potuto succedere?? preciso che qualche giorno fa avevo cancellato le scritte che comparivano.. ora volevo rimetterle con le icone..

    RispondiElimina
    Risposte
    1. Se le icone non si vedono significa che hai copiato male il loro link diretto nel codice del post. Prima di copiarlo icollalo nel browser per vedere se effettivamente si tratta della icona. Ci deve essere quella e nient'altro come p.e. in questo caso
      http://lh4.ggpht.com/_nT13UtBmmiU/TTRR0x6w3OI/AAAAAAAARY8/e-_FGgsAajI/icona-back.png

      Elimina
  26. ho seguito alla lettera le indicazioni ho inserito l'Url delle mie immagini ma mi da errore nella prima parte del codice.

    RispondiElimina
    Risposte
    1. Il codice è già stato usato da molte persone. Basta vedere il numero dei commenti. Non saprei perché ti dà errore
      @#

      Elimina
    2. scusami ma l'errore è mio non ho cliccato sulla freccetta a fianco del codice, ora ci sono riuscuta!
      grazie.

      Elimina
  27. Io non capisco perché ma dalla versione mobile sono scomparsi Home page e Visualizza post più vecchi. Dalla versione desktop, invece, li vedo senza problemi. L'unica cosa che avevo fatto era personalizzarne font e carattere. Quali stringhe devo aggiungere per reinserirli?

    RispondiElimina
    Risposte
    1. Tu pensi che abbia una risposta per tutto :)
      Purtroppo non è così. Non so perché ti sono scomparsi visto che io nella versione mobile non li ho mai avuti :D
      @#

      Elimina
    2. Non è così? ;)

      Non mi sono spiegata bene, scusa. Nella versione mobile del tuo blog, in fondo, c'è la scritta Home page e una freccia per andare ai post precedenti e, alla fine di ogni articolo posso decidere se usare la freccia di sinistra (e andare all'articolo più recente) o quella di destra (e andare a quello precedente). A me queste opzioni non appaiono.

      Elimina
    3. I selettori sono gli stessi desktop
      blog-pager
      blog-pager-older-link
      blog-pager-newer-link
      e i CSS si trovano nel blocco
      .mobile .blog-pager {
      altro non ti so dire
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy