Lavoriamo insieme ✨

Sei pronta a diventare la blogger che hai sempre sognato di essere?
Agire facendo il primo passo è un ottimo modo per cominciare ecco chi sono

Blogger in Azione

Blogger in Azione

Primi Passi

Primi Passi

F.A.Q.

F.A.Q.

blog design: Diminuire la distanza fra i widget

10.9.12
Simona S.
38 commenti
Si sa che i commenti alimentano i blog... soprattutto questo blog :)
Ed è per questo che nasce questo post, per aiutare un'amica blogger 'Il Gufo Creativo' che mi ha chiesto come si ridurre la distanza fra i widget presenti nella sidebar.

Per fare ciò dobbiamo fare quella che è sicuramente un'operazione che terrorizza chi non ha proprio dimestichezza con i codici: andare a modificare l'HTML... ma niente paura ;)

Selezionate 'Modello' dal menu a tendina accanto al nome del vostro blog, quindi cliccate su 'Modifica HTML'


Vi apparirà questa schermata che in un certo senso vi inibirà, dicendovi che dovrete procedere solo se sapete ciò che fate, beh noi lo sappiamo quindi clicchiamo 'Procedi' :)



Scendiamo giù con lo scrollbar, fino a quando troviamo la sezione del 'Widgets' (questo perchè è sempre bene tenere un po' d'ordine anche nei codici :D)




A questo punto, aggiungiamo il nostro codice, che ci permetterà di diminuire lo spazio fra i widget presenti nelle sidebar:
.sidebar .widget {
margin-top: -10px;
}

Con questo codice gli stiamo dicendo che per tutte le widget della sidebar il margine superiore deve diminuire di 10 pixel, se volete ridurlo ulteriormente dovete aumentare il valore dei pixel (essendo in negativo).




Fatto tutto ciò, potrete vedere un'anteprima e poi salvate le modifiche.



Come al solito spero tanto di essere stata chiara, ma in caso contrario chiedete pure chiarimenti.
:*


38 commenti in "blog design: Diminuire la distanza fra i widget"

  1. a che serve questo esattamente .. ??
    comunque ti ringrazio .. ho risolto per facebook ..
    grazie grazie ancora per il tuo aiuto ..
    io andavo da tutt'altra parte ^^
    grazie di cuore .. sei una persona gentilissima

    RispondiElimina
    Risposte
    1. a me fa tanto piacere dare una mano ^_^
      A volte quando inseriamo i 'widget' al lato del nostro blog hanno una distanza eccessiva uno dall'altro, questo tutorial ti aiuta a diminuire questa distanza, il più delle volte rende più gradevole la grafica ;)

      Elimina
    2. proverò a farlo .. così imparo .. ^^ qualcosa di nuovo .. ^^
      inoltre ho 2 cose da chiederti .. 1 è la stessa cosa che ti ha chiesto "la tata delle torte" io ho creato delle pagine ma quando vado a pubblicare il post mi esce solo nella home ..
      mi spiego meglio ( a volte non mi spiego bene hihih ) ..
      es. diciamo che ho creato 2 pagine..
      la prima è home la seconda è tutorial (nella quale diciamo che ho pubblicato un post)..
      ora nel momento che voglio pubblicare un tutorial e voglio che appaia nella pagina tutorial questo mi viene visualizzato solo nella home .. mentre su quello tutorial rimane come l'avevo lasciato all'inizio .. e se voglio scrivere li devo modificare il primo post(praticamente me lo considera come unico post e non mi fa fare come nella home ^^ .. spero di essermi spiegata ^^

      Elimina
    3. la seconda .. ^^ ho visto tempo fa che avevi realizzato i love comments ( i disegnim li chiamo così ) mi potresti aiutare a farne uno però più grande da mettere all'inizio al posto di quello che ho già ( sul blog dove c'è scritto mona , l'immagine in alto con i cuori .. ) ..
      spero di non averti disturbata troppo .. e se non puoi non preoccuparti .. ^^
      grazie ancora di tutto ..
      1 bacione

      Elimina
    4. per la prima domanda: purtroppo Blogger non dà la possibilità di 'personalizzare' i post visibili nella home (come invece la dà wordpress), però se tu vuoi catalogare i tutorial (come ho fatto io) in modo da averli ordinati allora segui questo tutorial http://sketchyourblog.blogspot.it/2012/09/creare-una-pagina-per-categoria.html

      Elimina
    5. per la seconda domanda: ho aggiunto una nuova immagine...spero ti piaccia, anche se per il momento di più non riesco a fare perchè mi ci vuole troppo tempo per creare qualcosa di decente ;)

      Elimina
    6. dov'è la nuova immagine .. ??

      Elimina
    7. le trovi qui http://sketchyourblog.blogspot.it/2012/01/gadget-i-comments.html
      oppure cliccando sulla coccinella 'i ♥ comment' ;)

      Elimina
  2. Mamma mia, tu non puoi capir quanto sono utili post come questo a una capra come me nell'uso di blogger! grazie davvero: pendo dalle tue labbra! Ooopppss, no, dai tuoi tasti!
    Posso chiedere un aiutino scemo scemo? Ho provato ad inserire delle pagine aggiuntive nel mio blog, ma una volta inserite queste - fin qui mi è riuscito- come faccio ad infilarci i post? Mi vengono tutti pubblicati nella home.....grazie davvero.Un abbraccio

    RispondiElimina
    Risposte
    1. Grazie Dani, sei gentilissima ♥
      Dunque non ho capito bene quello che cerchi: vorresti una pagina che racchiuda tutti i post della stessa categoria o una pagina in cui venga visualizzato una lista dei post che t'interessano?

      Elimina
  3. Grazie Simona! Sei chiarissima nelle tue spiegazioni, oltre che gentilissima nel condividere quello che sai! Sei un valido aiuto!
    Baci Federica

    RispondiElimina
    Risposte
    1. Wow...peró un pó di timore ce l'ho comunque.. Ma se mi dici che posso vedere l'anteprima e poi casomai annullare allora ci provo!
      Bacio

      Elimina
    2. se segui passo, passo non succede nulla ;) e poi con l'anteprima vai sul sicuro :)

      Elimina
  4. Grazie Simona!!!!
    Ho letto le istruzioni velocissimamente, in questo momento non sono in grado né di intendere né di volere.
    Domani mattina mi ci applico immediatamente e ti faccio sapere!

    Grazie, grazie, grazzissime!
    Un bacione!

    Mary

    RispondiElimina
  5. Eccomi!
    Ce l'ho fatta!
    Grazie! Il tutorial è chiarissimo!

    Sul mio blog volevo ridurre la dimensione dei tasti nella sidebar e compattarne i contenuti.
    Solo che non sapendo come agire,
    se riducevo la dimensione dei tasti e non compattavo il tutto, volavano sparsi per la sidebar.
    Ora è tutto più in ordine!

    Un bacione!
    Mary

    RispondiElimina
    Risposte
    1. anche io sono fissata con le disposizioni ordinate del blog :D

      Elimina
  6. Chairissimo e senza possibilità di sbaglio! grazie Michela

    RispondiElimina
  7. ciao! ho trvato molto interessante questo post, però volevo chiederti una cosa ulteriore: se io non volessi diminuire lo spazio tra tutti i widget ma solo tra alcuni? ho cercato anche in altri siti ma sembrava una cosa complicata, da fare con firebug (e io e firefox non siamo molto amici)...
    vorrei solo ridurre la distanza tra le prime 5 img della colonna destra del mio blog... le altre poi dovrebbero restare come sono...

    RispondiElimina
    Risposte
    1. ciao Francesca! In questo caso posso aiutarti dicendoti che se devi accorciare la distanza fra i widget 'immagini' ti basta aggiungere questo codice negli stili del tuo blog:
      .widget Image {margin-top: -10px;}
      Ovviamente aumenta il valore dei pixel se preferisci ridimensionare ulteriormente la distanza.
      Fammi sapere come è andata ;)

      Elimina
    2. grazie, sei gentilissima (e immensamente più "pratica" rispetto ad altri che richiedono che tu sia un genio della programmazione!!!)
      solo una domanda: in che punto dell'html devo inserirlo, questo codice?

      Elimina
    3. Grazie mille!!! Trovo sia inutile parlare con paroloni e far finta di sentirmi chissà chi, se poi chi voglio aiutare non mastica codici :)
      Comunque segui le indicazioni come nelle immagini sopra, poi devi solo incollare il codice che ti ho dato io, non importa dove, l'importante è che stia fra i 'suoi simili' :D

      Elimina
    4. ciao simona,
      io ho incollato il codice così:

      /* Widgets
      ----------------------------------------------- */
      .widget Image {
      margin-top: -20px;
      }

      però non ci sono cambiamenti... sbaglio qualcosa?

      Elimina
    5. allora sono andata un po' a sbirciare nel tuo codice e ho fatto alcune prove con un tool di Chrome, insomma in parole povere il codice è questo:

      .Image img {
      margin-top: -20px;
      }

      Elimina
    6. e comuque le tue illustrazioni sono spettacolari!!!!!!!!!!!

      Elimina
    7. grazie!!!! ora è perfetto!! :-) (e grazie anche per i complimenti!)

      Elimina
  8. Ciao Simona, sono qui di nuovo.
    Poiché ho fatto un patatrac ho ricostrui ex novo to il mpodello del Blog di foto.
    Per rifarlo simile al precedente mi basta riavvicinare i widget della sidebar,
    ma ora il codice è differente da quello dei modelli precedenti.
    Ho provato ad inserire il codice da te suggerito vicino a dove si trovano i Widget nel codice attuale,
    ma non accade nulla...

    Ti chiedo per l'ennesima volta un aiutino se puoi.

    Un bacio
    Mary

    RispondiElimina
  9. I tuoi tutorial sono sempre così belli e utili, che non saprei come ringraziarti..
    Comincio nel dirti..
    GRAZIEEEEEEEEEE
    un abbraccio grande
    Simona

    RispondiElimina
  10. Sei un angelo! Grazie a te sono riuscita a diminuire questa distanza tra tutti 😍 Magari mi puoi aiutare per un altro problema. Nel mio blog https://ylodibeautylife.blogspot.com se noti nella parte superiore c'è una striscia colorata perché diciamo che inizia un po' dopo e avrei bisogno di "portarlo su", mi puoi aiutare?

    RispondiElimina
    Risposte
    1. Grazie cara ♥
      Ascolta, non ho ben capito cosa intendi per 'portarlo su'... spiegami meglio :)

      Elimina

Grazie di aver commentato!
Solitamente rispondo ai commenti nelle prime 24 ore, se hai richieste urgenti puoi scrivermi usando il modulo dei contatti :)

Per favore NON lasciare link, a meno che non siano richiesti espressamente nel post stesso.
I commenti con link non richiesti o con link affiliati verranno considerati come SPAM e quindi subito cancellati.
So che capirai ;)