Inserire una gif accanto al titolo del post modalità nr 2 - Tutorial

giovedì, luglio 07, 2011


Avevo già parlato di come inserire una piccola immagine accanto al titolo del post:
Ma adesso con l'avvento di Blogger in Draft esiste anche un secondo modo che forse troverete più veloce, vogliamo vederlo insieme?
Andiamo a cominciare!


  • Design
  • Design modelli
  • Avanzato
  • Aggiungi css














  • Incollare i codice nella finiestrina bianca
  • Applica al blog

  • Il codice da incollare è:

h3.post-title {

margin: 0;

font: $(post.title.font);

background:url(INDIRIZZO IMMAGINE) no-repeat;

padding:0 0 0 40px

Sostituerete INDIRIZZO IMMAGINE in rosso con l'url della gif che volete appaia accanto al titolo.
Trovate la mia collezione di gif al seguente link:
 potete regolare la visualizzazzione semplicemnte regolando l edimensioni del titolo del post

    You Might Also Like

    18 scarabocchi

    1. Ciao Azzurra, ho seguito le tue istruzioni, ed è tutto spiegato molto bene, ma l'immagine viene sovrapposta al titolo del post. come posso fare per evitarlo? ( la mia immagine è di 40 x 40 pixel )

      RispondiElimina
    2. ciao muccachicca,
      hai due possibilità:
      1 - ridurre l'immagine
      2 - ingrandire la scritta
      :)
      azzurra

      RispondiElimina
    3. niente da fare... me lo sovrappone comunque, non si può dare l'imput che il titolo parta che so io 5 10 pixel più a destra?
      altrimenti devo mettere ogni volta il codice <a href="https: ...bla bla bla /></a> nel campo titolo... però ho paura di dimenticarmene!!!
      grazie cara comunque dell'aiuto prezioso che dai a tutti noi imbranati!

      RispondiElimina
    4. ciao muccachicca...io ho centrato il tiotlo dei post (ma se è lungo, se fai caso, certe volte si assoprella lo stesso), leggi al seguente link:

      http://blogetemplate.blogspot.com/2010/10/come-centrare-titolo-post-blogger-con.html

      azzurra

      RispondiElimina
    5. grazie Azzurra. per il mopmento l'ho allineato al centro, anche se non mi piace del tutto, ma è sempre meglio che sovrapposto.
      sei stata molto gentile ad aiutarmi!
      un abbraccio
      Muccachicca

      RispondiElimina
    6. azzzzzuuuurra!!!! ho trovato la soluzione e te la riporto
      ho inserito questa stringa css ( non so se si dice stringa )

      .post h3{
      text-indent:40px}

      nella fattispece la mia imaginetta è larga 40 pixel quindi io ho messo quel valore, che si cambia a seconda dell'utilità.

      a dire il vero l'indent non serve proprio a questo scopo, ma a creare il rientro del paragrafo, ma si adattava bene alla mia esigenza e visto che i titoli non saranno mai lunghissimi ho creduto opportuno fartelo sapere.
      un bacio grande e grazie!
      mucca

      RispondiElimina
    7. nel mio piccolo se posso...+ che volentieri!
      azzurra

      RispondiElimina
    8. ..e ti ricngrazio chicca...spero solo d itrovare il tempo per dare il giusto risalto al tuo aiuto...spero proprio di farlo
      gazie ancora
      azzurra

      RispondiElimina
    9. ciao Azzurra, ho usato il tuo post per inserire un immagine ad angolo che purtroppo per inserirla ho dovuto aumentare la scritta del titolo post. Ho provato anzichè metterla nel titolo a metterla in post-outer ma toglie il background bianco e lo fa trasparente e così non mi piaceva si puo' fare in un altro modo? Grazie mille per i mille suggerimenti e i mille file che metti a disposizione. Un abbraccio grande :D

      RispondiElimina
    10. vero...in effetti è un incoveniente sul quale dovrai trovare il tempo dipensare....ma ...non trovo mai il tempo!
      :(
      azzurra

      RispondiElimina
    11. Ciao!! ho provato ad inserirne uno da avanzate e poi css con il codice, ma nel blog non appare nulla!!come mai?

      RispondiElimina
    12. Ciao Giuly,
      potrebbe dipendere dalle dimensioni...la tua iconcina che dimensioni ha?
      azzurra

      RispondiElimina
    13. Grazie Azzurra, brava come sempre!
      Sandra

      RispondiElimina
    14. ciao! splendida idea! ho provato a seguire il tuo tutorial inserendo nell' apposito spazio qst codice:

      h3.post-title {

      margin: 0;

      font: $(post.title.font);

      background:url(http://i44.tinypic.com/4q1w0m.gif) no-repeat;

      padding:0 0 0 40px

      ..purtroppo non mi succede nulla - uffy - puoi aiutarmi? grazie mille. bacione e tanti auguri di Buona Pasqua!

      RispondiElimina
    15. Ciao Sirenelisa,
      allora...prova a fare come descritto QUA!

      RispondiElimina

    Grazie della visita e del tuo commento...♥♥♥
    è un piacere leggervi!
    Sorrisone!
    :)

    Nota. Solo i membri di questo blog possono postare un commento.

    Circa Grafic Scribbles








    modificare foto

    Paperblog : le migliori informazioni in diretta dai blog

    Mr.Webmaster


    Motori ricerca

    SEO


    BlogItalia.it - La directory italiana dei blog

    siti
    sito internetBlog d'argento



    Ebuzzing - Top dei blog - Blog creativi


    Visite

    eXTReMe Tracker

    Views

    © 2011 - 2016 Grafic Scribbles, AllRightsReserved.. Powered by Blogger.

    on line