1. Manual de pràctica amb Blogger
1

2. Sumari
1. Com crear un bloc ...........................................................................................................................................................2
2. Personalització del bloc...................................................................................................................................................7
2.1 Modificar la plantilla..................................................................................................................................................8
2.2 Modificar el disseny.................................................................................................................................................15
2.3 Alguns Gadgets........................................................................................................................................................17
2.3.1 Informació textual............................................................................................................................................19
2.3.2 Presentació d’imatges.......................................................................................................................................20
3.2.3 Vídeo.................................................................................................................................................................22
2.3.4 Enquestes.........................................................................................................................................................26
3. Crear entrades...............................................................................................................................................................29
4. Crear pàgines.................................................................................................................................................................33
4.1 Afegir una imatge....................................................................................................................................................35
4.1.1 Afegir un enllaç del catàleg Aladí a una imatge................................................................................................36
4.2 Afegir un vídeo........................................................................................................................................................38
4.3 Afegir àudio.............................................................................................................................................................45
5. Crear un menú de navegació.........................................................................................................................................50
1. Com crear un bloc
El primer que necessitem per crear un bloc amb Blogger és disposar d’un compte de correu de Gmail. Una
vegada el tenim, ens validem i anem a buscar la pestanya “Més” en la que trobarem l’opció de “Blogger”:
2

3. Arribem a una interfície similar a la següent, en la que clicarem a “Nou bloc”. Podeu veure que quan hagueu
creat més d’un bloc us apareixerà un llistat amb tots ells, des d’on podrem veure’ls i editar-los:
3

4. A continuació hem de triar el nom del bloc, la URL i un disseny, que podrem canviar més endavant, per tant no
ens preocuparem per això ara.
Nosaltres crearem un club de lectura juvenil de còmic o manga a mode d’exemple.
Veieu que, en el camp “Adreça” apareix un símbol que ens indica que el nom que hem triat pel bloc està
lliure Si apareix en canvi una creu vermella voldrà dir que ja està agafat i n’haurem de pensar un altre.
4

5. 5

6. Com podeu veure ja ens apareix el bloc que acabem de crear en el nostre llistat:
Si cliquem a “Veure bloc”, podem veure que ja tenim el bloc creat!
6

7. Ara mateix l’aparença del bloc és molt senzilla i poc atractiva. Per tant, anem a personalitzar el nostre bloc i
omplir-lo de continguts!
2. Personalització del bloc
Tornem a la pantalla inicial que hem vist abans, però ara clicarem a sobre del nom del bloc.
La primera interfície que ens apareix és la de la visió general, amb algunes dades estadístiques, una mica de
publicitat i una secció d’ajuda.
7

8. No ens aturarem massa en aquesta part. Passem a modificar la plantilla.
2.1 Modificar la plantilla
Cliquem a “Plantilla” i arribem a una interfície en la que seleccionarem l’opció de “Personalitzar”.
8

9. Aquí podrem tornar a triar quina imatge de fons volem posar, el tema, el color i definir l’estructura que tindran
les nostres pàgines.
La primera opció és la de triar els “Templates” o temes pel nostre bloc. Això ens permetrà canviar-ne l’estil de
presentació. Proveu vàries opcions fins que trobeu la que més us agradi.
9

10. Seleccionem per exemple el tema “Etereo” i el color blau, que quedarà millor amb la imatge de capçalera que
hem creat amb el Gimp.
10

11. Una vegada hem triat l’estil del bloc podem canviar el color i la imatge de fons que millor s’adaptin al nostre
estil. Anem a la secció de “Fons”.
Abans de continuar cal que sapigueu que perquè tots els canvis que anem fent s’apliquin al bloc i es desin
haurem d’enrecordar-nos de clicar a la part de dalt a la dreta a “Aplicar al blog”. Ho podem fer en qualsevol
moment per evitar que es perdi per algun accident o bé quan ja haguem fet tots els canvis.
11

12. Si cliquem a la part de “Imatge de fons”:
Se’ns desplegaran un munt de possibilitats per triar, si mireu a l’apartat d’Art trobareu imatges amb llibres. Una
vegada l’hagueu triat clicarem a “Finalitzar”.
* Recordeu de triar un tema i una imatge d’acord amb la capçalera que haguem creat
12

13. Teniu l’opció també de dissenyar la vostra pròpia imatge i carregar-la des del vostre ordinador utilitzant la
primera opció del llistat “Uploaded image”. D’aquesta manera podeu aconseguir un bloc únic i del tot
personalitzat:
A continuació se’ns presenta l’opció de modificar l’amplada de les columnes de les pàgines. És l’opció de
“Adjust widths”. En principi no cal que ho toquem, ja està bé com surt per defecte.
13

14. 14

15. 2.2 Modificar el disseny
Ara toca decidir si volem estructurar el bloc en una sola columna, dues, tres o combinacions vàries. La més
típica és la d’una columna central gran i una de més petita a la dreta.
A la “Capçalera” podem afegir la imatge que hem creat amb el Gimp com a capçalera del bloc, d’aquesta
manera el farem més atractiu i original.
Per fer-ho cliquem a “Edita” en el quadre de “Capçalera” i se’ns obre una finestra emergent com la següent.
L’única cosa que hem de fer és seleccionar la imatge que està desada en el nostre ordinador, designar-li la
ubicació “En lugar del título y la descripción” i clicar a “Desar”.
15

16. Si anem ara a “Veure bloc” podem veure com ha millorat força l’aspecte respecte del disseny bàsic que teníem
al començament.
16

17. 2.3 Alguns Gadgets
Més coses sobre el disseny. Si tornem a la pàgina inicial de Blogger i anem a la pestanya de “Disseny” veureu
que tenim més opcions, com ara afegir gadgets (petita aplicació o programa que és executat per un motor i que
dóna fàcil accés a certs continguts que són utilitzats més freqüentment o simplement per proporcionar
informació visual).
Per defecte ens apareixen els gadgets de l’arxiu del bloc o de la informació personal. Veureu que alguns no es
poden eliminar ja que es consideren obligatoris però d’altres si. La recomanació és que només n’afegiu a la
columna lateral, per no saturar la pàgina. Tot i això no és cap obligació i trobarem casos en que serà millor
posar-los al mig.
Mireu també de que continguin informació transversal a tot el bloc ja que apareixeran a totes les pàgines que
creeu. Com per exemple, el gadget de l’Arxiu del bloc amb el llistat a totes les entrades, o bé el del calendari
que marqui el dia, o informació sobre la ubicació de la biblioteca, un àlbum d’imatges, o un vídeo entre d’altres,
però que sigui informació genèrica, no pròpia d’una pàgina en concret. Hi ha infinitat d’opcions, només heu
d’anar remenant i cercant les que més us interessin.
17

18. Si anem a “Afegir un gadget” ens apareix una finestra emergent en la que podem triar els gadgets. Estan
classificats entre: bàsics, populars, destacats i més gadgets. A l’última opció teniu un cercador en el que buscar
gadgets per paraula clau i un llistat amb tots els que hi ha disponibles.
18

19. 2.3.1 Informació textual
Per començar veurem un gadget que pot ser molt útil per afegir informació de tipus text com per exemple
l’horari del club de lectura, la ubicació o informació variada sobre el Club del lectura.
Cliquem a la creueta i apareix una altra finestra en la que podem afegir un títol i una informació de tipus text
enriquit.
19

20. Desem i ja tenim el gadget afegit.
2.3.2 Presentació d’imatges
Un altre gadget interessant pot ser el d’afegir una galeria d’imatges en forma de presentació. Procedim de la
mateixa manera.
20

21. Aquí podrem aprofitar per posar els àlbums de fotos que tenim a Picasa, com ara fotos del propi club o imatges
relacionades amb la temàtica del bloc o del llibre que estiguem llegint.
Només cal donar un nom a la presentació d’imatges, triar l’opció d’àlbum, posar el nostre nom d’usuari de
Picasa i triar l’àlbum que desitgem.
Desem i ja ho tenim actualitzat en el bloc. Recordeu que des de la mateixa interfície de disseny podeu canviar
l’ordre i la posició dels gadgets, per defecte, l’últim que afegim apareix en primer lloc.
21

22. 3.2.3 Vídeo
Un altre gadget molt interessant és el del vídeo. Podem per exemple ensenyar els vídeos de la nostra activitat
del canal propi de Youtube, o de varis canals alhora, o fins i tot que mostri vídeos que continguin unes paraules
clau concretes i que no formin part de cap canal en concret.
Pel nostre exemple, volem fer difusió d’uns vídeos que ensenyen a dibuixar manga perquè hem detectat un
interès dins del nostre club de lectura en el tema. Com que no tenim vídeos propis hem triat un canal extern
(markcrilley) que ofereix el producte que ens interessa.
22

23. Veiem com queda publicat.
23

24. Seria un dels casos en que podria ser més interessant posar el gadget a la part central i no en el lateral ja que
fa baixar molt a la resta de gadgets.
Per fer-ho no més hem d’arrossegar el gadget fins a on volem.
24

25. Després cliquem a “Desa l’organització” i ja apareix publicat.
25

26. 2.3.4 Enquestes
També pot ser d’utilitat el gadget per publicar enquestes i preguntar directament als nostres lectors, per
exemple sobre quin llibre volen que tractem properament en el nostre club de lectura.
És molt senzill, només hem de triar la pregunta, les opcions de resposta, decidir si volem que triïn una o més
respostes i la data en la que acabarà l’enquesta.
26

27. 27

28. 28

29. 3. Crear entrades
Les entrades seran la principal font d’alimentació del nostre bloc i la primera via de comunicació amb els
usuaris. Totes les entrades que creem es visualitzaran només a la pàgina inicial del bloc i no a la resta.
Apareixeran en ordre cronològic invers, per tant, les últimes que publiquem es veuran en primer lloc.
Per crear una entrada ens situem a la secció “Entradas” o “Escrits” del menú de l’esquerra de la interfície
d’edició del bloc.
Sempre ens apareix una primera entrada per defecte que podem editar clicant a sobre del títol. Les entrades
posteriors les crearem clicant a “Entrada nova” . Les podem deixar com a esborrany, llavors no seran visibles
pel públic, només ho seran quan decidim publicar-les, i evidentment tenim l’opció d’eliminar-les en qualsevol
moment a través de la icona de la paperera.
Editem la primera entrada. Sempre hem de posar un títol i un cos de text en el que hi podrem afegir imatges i
vídeos o afegir el codi HTML que nosaltres vulguem.
29

30. Com veieu disposem també d’unes opcions a la part lateral de la dreta on, entre d’altres coses, podem designar
etiquetes que facilitaran la recuperació de la informació.
Publiquem l’entrada i automàticament apareix en el bloc.
30

31. Per acabar amb el tema de les entrades dir que, per afegir comentaris sobre cada entrada és suficient clicant a
on posa “Cap comentari” a la part inferior, juntament amb la informació de l’autor, les opcions de compartir a les
xarxes socials i les etiquetes.
31

32. Cliquem a “Publica” i ja ens apareix el comentari a sota de l’entrada.
Després podem respondre el comentari o afegir-ne de nous.
32

33. 4. Crear pàgines
Blogger ens ofereix la possibilitat de crear pàgines independents de la plana inicial. Aquestes pàgines no seran
visibles a simple vista quan les publiquem, a diferència de les entrades que apareixen automàticament a la
home.
Quan es crea una pàgina se li assigna una URL única que ens permetrà cridar a aquesta pàgina des d’una de
les entrades que haguem creat a la part central, des d’un gadget lateral o bé quan creem un menú de
navegació superior com veurem en el següent apartat del manual.
Per defecte, quan entrem a “Pàgines” només surt la pàgina d’inici de la que no podem modificar res més que el
nom.
Per crear-ne una de nova clicarem a “Pàgina nova”. Veurem que ens apareixen dues opcions: pàgina en blanc
o adreça web. Amb la primera crearem una pàgina web que tindrà el format i l’aspecte de la resta del bloc i
amb la segona l’únic que fem és crear un enllaç a una pàgina externa al nostre bloc. Ens centrarem en la
primera opció.
33

34. Si us fixeu en la següent imatge veureu que la interfície d’edició és idèntica a la que trobem quan creem una
entrada, per tant no suposarà cap dificultat afegida.
Imaginem que en el nostre bloc volem recomanar altres còmics que no estem llegint però que hi tenen relació i
poden interessar als nostres lectors. Crearem per tant una pàgina de recomanacions.
34

35. Comencem introduint el text i el títol de la pàgina.
A continuació veurem com afegir una imatge, un vídeo i com crear enllaços que portin al catàleg.
4.1 Afegir una imatge.
Primer hem de tenir la imatge tractada amb Gimp i desada en el nostre ordinador. A continuació cliquem la
icona de la imatge i la seleccionem.
Veureu que hi ha altres maneres de seleccionar la imatge, com ara triar-ne d’altres que ja haguem utilitzat en el
bloc, o bé a través dels nostres àlbums de Picasa, des del mòbil, directament d’una webcam o posant la URL
d’una imatge d’Internet. Nosaltres expliquem la primera, la resta són iguals de senzilles.
35

36. Una vegada s’ha carregat, cliquem a sobre de la imatge i després a “Afegeix selecció”.
4.1.1 Afegir un enllaç del catàleg Aladí a una imatge
Una vegada tenim la imatge, farem que aquesta enllaci a una cerca del catàleg. Primer anem al catàleg a on
agafarem la URL que volem que enllaci.
36

37. Copiarem l’enllaç permanent al registre clicant el botó dret i a “Copia l’enllaç”.
37

38. Ara tornem al bloc, cliquem a sobre de la imatge i després a “Enllaç” ( ). Enganxem l’enllaç que havíem
copiat en el requadre i la nostra imatge ja enllaça al registre del catàleg!
4.2 Afegir un vídeo
També podem acompanyar la recomanació amb algun vídeo. Per afegir-ne clicarem a la icona de la pel·lícula
. Hi ha vàries opcions, des de pujar el vídeo des del nostre ordinador, des d’una cerca de Youtube,
directament des del nostre canal de Youtube, del mòbil o des de la webcam.
Pel nostre exemple triarem un vídeo d’una cerca de Youtube (Comte que si no és nostre pot ser eliminat i
llavors deixarà de veure’s i donarà error.)
38

39. I ja ens apareix el vídeo que hem triat.
39

40. Existeix encara una altra manera d’afegir un vídeo de Youtube o de qualsevol altra plataforma i és incrustant el
codi del vídeo a la nostra pàgina.
Des de la pàgina de Youtube per exemple podem fer el següent.
Clicar a Comparteix Insereixcopiar el codi que ens apareix en el requadre i enganxar-lo a la nostra pàgina.
Fixeu-vos que a sota ens donen diferents opcions de tamany pel vídeo.
40

41. Per fer-ho tornem a la pàgina, triem la visualització de disseny HTML i enganxem el codi allà on vulguem que
aparegui.
Quan acabem de posar tota la informació clicarem a publicar i ja tindrem la pàgina creada.
41

42. Però com dèiem aquesta pàgina no és visible si anem al blog. El que farem serà crear una nova entrada i
enllaçar-la des d’allà.
Primer clicarem a “Visualització” i ens copiarem l’enllaç que apareix al navegador i que necessitarem més
endavant.
42

43. A la barra de navegació trobem l’enllaç que ens interessa.
43

44. Creem una entrada nova de la mateixa manera que hem vist abans i aprofitarem també per explicar com
inserir un àudio en una publicació.
Primer preparem el text.
Per enllaçar amb la pàgina que havíem creat seleccionarem el text que vulguem enllaçar i com hem fet abans
amb les imatges enganxem l’enllaç clicant a “Enllaç”.
44

45. Si anem a la pàgina inicial, a sobre de l’entrada que hem creat i cliquemt a sobre d’aquest text “podeu consultar
les recomanacions” anirem a parar a la pàgina que hem creat de Recomanacions
4.3 Afegir àudio
Per inserir un àudio que tinguem guardat en el nostre compte de Ivoox treballarem amb la versió HTML d’edició
que ens permetrà copiar el codi “object” del fitxer.
Anem a Ivoox, triem el fitxer i cliquem la icona de compartir.
45

46. Després triem l’opció “Llévate este audio a tu web o blog”.
I copiem el codi del que més ens interessi per enganxar en el nostre bloc.
46

47. Tornem al bloc, triem la visualització de disseny en HTML per veure el codi, i l’enganxem allà a on volem que
es vegi. Fixeu-vos que el codi comença per <object> i acaba per </object>.
47

48. 48

49. Publiquem i ja ho tenim visible per tots els usuaris.
49

50. 5. Crear un menú de navegació
Per crear un menú de navegació superior primer haurem de crear les pàgines de la mateixa manera que hem
vist a l’apartat anterior. Un cop les tinguem creades copiarem les URL que necessitarem més endavant.
Ja tenim creades les pàgines i anem a la secció de “Disseny o Format” i afegim un gadget de tipus
HTML/Javascript.
50

51. Per crear un menú bàsic haurem de crear un llistat en codi HTML, és molt senzill. No caldrà que aprengueu a
programar amb HTML, només haureu de copiar un codi molt curt. El codi que necessitem és el següent:
<ul>
<li><a href=”url de la pàgina que hem creat”>Text que volem que surti a cada pestanya del menú</a></li>
<li><a href=”url de la pàgina que hem creat”>Text que volem que surti a cada pestanya del menú</a></li>
<li><a href=”url de la pàgina que hem creat”>Text que volem que surti a cada pestanya del menú</a></li>
</ul>
Només heu de copiar aquest codi en el gadget canviant el text en vermell per les URLs i els noms de les
pestanyes del menú. Veieu que el conjunt <li>....</li> es va repetint per cada pestanya, tampoc cal abusar i
crear un menú massa llarg.
Vegem un exemple. Copiem el codi del requadre, canviem el text en vermell per les URLs i els títols del menú, i
desem.
51

52. Cliquem a “Desa l’organització” i ja tenim el menú creat.
52

53. 53