Comment fonctionne mon blogue sur blogger.com?

Je vous décrirai, premièrement, les détails pour arriver à ajouter un "juke-box". Dans un second temps, je vous ferai part des étapes nécessaires pour arriver à plusieurs petites modifications de l'apparence du blogue; dont changer l'entête et l'image d'arrière-plan de la section latérale où sont situés les liens. Beaucoup d'expérimentations se sont soldées par des échecs, je prendrai le temps de vous en raconter quelques-unes pour que vous puissiez rire un peu de moi!!

"Juke-box"

Quoi de plus divertissant qu'une petite banque de pièces musicales pour égayer nos journées dans le sombre local 1611! Attachez vos...écouteurs! Grâce aux conseils de Roy et en parcourant un site de rêve pour les nouvelles découvertes soit dreamland1186.blogspot.com, j'ai déniché une petite trouvaille vraiment intéressante. Un générateur de script pour lecteur de mp3! SCM Player . Pour profiter de cette merveille, vous devez en premier lieu "uploader" votre musique afin d'accorder une adresse URL à chacune des pièces! Un excellent site pour "héberger" votre musique m'a été référé par Martin Michaud : Mediamax Ce site est vraiment génial si vous n'avez pas d'espace sur le web pour mettre vos documents! Une fois que vous avec mis l'URL de chaque pièce musicale comme décrit dans l'image ci-dessous, vous appuyez sur "Done!" Le programme générera un script que vous devrez copier puisqu'on l'ajoutera à un endroit de notre code html de notre blogue.

Pour avoir le "jukebox" en dessous de l'entête, j'ai inséré le script au début de la section suivante:


Ce n'est pas plus compliqué que cela!

Maintenant, passons aux choses plus sérieuses. Il y a à peine 2 semaines, j'étais une néophyte du CSS qui se demandait ce que ces lettres pouvaient bien manger en hiver! J'avais décidé, il y a environ 3-4 semaines, de m'attaquer à cette bête afin de remodeler sa figure, une vraie transformation extrême... Quel désastre! Faisant fie de la plupart des signes de $ et en changeant la plupart des paramètres qui m'apparaissaient sympathiques (je croyais avoir un don divin et pouvoir décoder les 'wraps'et les multiples 'sidebars' dans le code source html avec mon sixième sens féminin...), je suis arrivée avec une interface certes remodelée mais aucunement en lien avec le reste du corps (à vrai dire, je n'avais plus accès à mes anciens blogues...petite panique!) J'ai donc pris mon courage à deux mains et, après quelques sueurs froides, j'ai retrouvé mon code source initial que j'avais heureusement gardé! Mon seul bon coup dans ce premier essai!

3 bonnes respirations et 2 semaines plus tard, le combat était prêt à recommencer. Mais par prudence, j'ai laissé une semaine s'écouler afin de digérer mes premières notions de CSS. Et me voilà maintenant à prendre partie pour le CSS. "Vive le CSS!" Franchement quel merveilleux outil de "programmation".

Je vous décrirai maintenant les changements que j'ai réussi à apporter à mon site. L'étape initiale de tous ces changements, après avoir enregistré le code source initial en lieu sûr, a été de copier dans Dreamweaver le code source HTML du blogue présent dans la section Modèle du tableau de bord. Une fois dans Dreamweaver, comme je savais maintenant comment nourrir la palette CSS, je me suis mise à l'alimenter de nouvelles propriétés à mon plus grand bonheur!!

J'ai d'abord changé la couleur de la date d'affichage de mes messages! Comme vous le voyez ci-dessous, j'ai changé la couleur en gris dans les propriétés du style ".date-header". Pour vérifier que le tout fonctionnait bien, j'ai regardé les modifications apportées à mon code source dans la fenêtre gauche de Dreamweaver (le code de la couleur avait changé dans la section ".date-header") et j'ai recopié ce changement dans mon code source html de blogger. Par la suite, j'ai fait un "aperçu" (de l'affichage) et j'ai constaté que CSS était merveilleux! Ma belle petite transformation avait fonctionné!!


Je dois vous avouer que les titres avec des lettres toutes en minuscules dans la barre latérale m'énervaient beaucoup. En allant dans le style ".sidebar-title" j'ai changé la propriété "text-transform" en "uppercase" comme vous voyez ci-dessous. J'ai testé le tout que comme décrit précédemment. Talam!! Bye bye les minuscules.


J'ai également changé la largeur de l'espace réservé au texte de mes messages en modifiant directement dans le code source la propriété "width" dans le style "main" comme décrit ci-dessous. Je dois vous avouer que pour reconnaître facilement les sections que je voulais modifier, j'avais ouvert sur un autre écran l'interface de mon blogue. Cela me permettait de déduire rapidement à quelles sections appartenaient les styles que j'explorais selon les diverses propriétés décrites dans chacun de ces styles.

Dans le code source, j'ai également changé directement la couleur du background de la partie centrale de mon blogue à l'endroit mis en évidence ci-dessous. (C'était seulement un autre exemple pour montrer qu'on peut changer les propriétés des styles tant au niveau de la palette que directement dans le code!)

Pour terminer, comme vous l'avez sûrement remarqué j'ai modifié l'arrière-plan de ma barre latérale. Pour ce faire, j'ai dû "uploader" l' image que je voulais insérer et ensuite, j'ai pu copier son adresse URL à l'endroit approprié dans le code, comme ci-dessous (je suis désolée, on ne voit pas bien dans cette capture d'écran.) Comme décrit précédemment, on peut également aller inscrire le lien URL dans la palette de propriétés du style "sidebar".

J'ai également ajouté une image d'arrière-plan à l'entête en suivant la même procédure pour le style correspondant à cette dernière!

Petite note: Regarder la taille de l'image et celle de l'endroit où vous voulez l'insérer pour ne pas arriver avec de mauvaises surprises...c'est-à-dire ne voir qu'une partie de votre image!

Voilà! Je vous souhaite une bonne semaine!!