Tutiorial: Come inserire i banner delle collaborazioni in modo ordinato nella sidebar

sabato, settembre 28, 2013

Le collaborazioni sono una cosa che molti food blogger praticano e giustamente espongono da qualche parte nella sidebar i banner relativi ad ogni azienda con la quale collaborano.
I banner delle collaborazioni però non hanno tutti le solite dimensioni e soprattutto non hanno le dimensioni della vostra sidebar.
Con il tempo e con l'aumento delle collaborazioni questi banner diventano una fila in verticale sconclusionata e disordinata
Ho visto banner che invadevano persino l'area dei post tanto erano grandi.
Il blog ne risente tantissimo esteticamente ma anche in leggibilità e facilità di consultazione o navigazione che dir si voglia.
Mi sono quindi decisa a questo post nella speranza possa servirvi per fare un pò d'ordine là dove c'è bisogno.


Affrontiamo il primo problema, la larghezza della sidebar.
Per conoscere la larghezza della vostra sidebar fate così:
  • Design (in alto a destra)
  • Personalizza (tasto arancione)
  • Modifica le larghezze, e potete qua verificare la larghezza della vostra (o vostre, dipende da quante ne avete) sidebar come da immagine sotto:


tutorial,sidebar,gadget,banner, collaborazioni

Quindi se per esempio ho una larghezza sidebar di 270 px i banner delle collaborazioni non dovranno superare i 270 px, altrimenti straborderanno a destra della sidebar, e nel caso la sidebar sia a sinistra del template, i banner andranno a finire sopra i post.
Come evitare il danno?
Semplicemente ridimensionando ogni volta il banner delle collaborazioni a 270 px in modo da avere tutti i banner della solita dimensione; se la vostra sidebar misura 200 px i banner non dovranno superare i 200 px e così via.
Per fare questo potete avvalervi dei numerosi tool online che permettono di gestire le immagini in un attimo.
Ho parlato ampiamente in questo blog dell'argomento e potete quindi leggere alcuni tutorial qua:


Ho anche notato che per l'inserimento dei banner delle collaborazioni sovente i food blogger ricorrono al gadget di Blogger denominato "immagini" che è quello sotto:
tutorial,sidebar,gadget,banner, collaborazioni

Allora, non è certo un errore, ma così dovrete inserire il titolo e comunque avrete tutta una lunga lista del gadegt immagini.
Per ovviare a questo si può usare un solo gadget dove inserire un codice semplicissimo.
Il gadget in questione è denominato "htlm/javascript" ed è questo sotto:

tutorial,sidebar,gadget,banner, collaborazioni

il codice che c'interessa è questo:


Codice
<a href="QUI VA IL LINK DELL'AZIENDA della collaborazione"><img src="QUI VA IL LINK DEL BANNER" align=center></a>

Quindi faremo la sostituzione come indicato nelle righe in rosso e aprendo il Gadget htlm/javascript inseiremo il codice, ogni banner un  nuovo codice sempre di seguito, ricordando sempre di cliccare su Salva per pubblicare sul blog.
Quindi non un nuovo gadget per ogni collaborazione, solo aggiungere sempre al solito

Per ricavare il link dell'immagine, una volta che l'avrete ridimensionata potete appoggiarla ad un hosting, leggete qua:


Ricapitolando:


  1. Ridimensionare l'immagine
  2. Appoggiarla all'hosting
  3. Creare il codice
  4. Aggiungerlo in un box Htlm/javascript


Sembra molto complicato ma non lo è e finalmente avrete una sezione per le collaborazioni ordinata, cosa che andrà a sicuro vantaggio del vostro blog.
Per ogni dubbio sempre qua sono!
→Potrebbe interessarti:



You Might Also Like

2 scarabocchi

  1. Cara Lucia, molto interessante quanto hai detto, a me sembra un po complicato ma credo che tutti possano capire con chiarezza. tempo fa avevo detto alla cara Mary, di questo blog! http://filigranaedintorni.blogspot.ch/ che un banner allegato copriva una grande parte del posto per commentare, e quando si voleva pubblicare il commento non andava ma si apriva il blog del banner in questione. da poco per fortuna a cambiato tutto e si può fare tutto normale...
    Scusa se ti ho raccontato tutto questo, ma se che te sei molto brava e capisci!!!
    Il mio blog devo essere sincero va sempre bene con il tuo sfondo! Le larghezze le ho bene disposte che credo che vada bene così. Se dai una sguardo lo potrai confermare.
    Un abbraccio augurandoti un buon fine settimana cara amica.
    Tomaso

    RispondiElimina
    Risposte
    1. Ciao Tommy,
      sono un pò iun ritardo con la pubblicazione dei commenti
      :(
      stata da te e mi sembra tt a posto
      :)
      abbraccio

      Elimina

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