Cette fois, j'avais besoin d'afficher le "Sticker" de Weather Underground par dessus mon titre en "flottant". Ce qui est en gris pâle est ce qui apparaît avant mon code (qui est en noir et en rouge). Inconvénient, selon la taille de l'écran, le sticker va se balader plus ou moins vers le milieu. Je vais essayer de trouver une parade. Ce problème n'existe pas sur le titre de mon blog St Martin Meteo Weather car j'ai "fabriqué" de A à Z mon titre dans un Widget HTML/Javascript et non pas avec le Widget de titre standard de Blogger. Cette solution peut donc être un recours.
Ce qui peut être modifié est en rouge.
Il faut placer ce code directement dans le corps de la page. Pour cela, il faut aller dans Modèle > Modifier le code HTML > Développer des modèles de Gadget > Et rechercher <body
Le résultat est visible sur mon blog-site web: Blog Studio-St-Martin-Antilles et ici sur ce blog à droite du titre.
Les pixels peuvent être remplacés par de em ou des %. Remarque: on peut écrire 30.5% (c'est un point, pas une virgule). Le code est relativement long car il affiche une image avec un lien se lançant dans un pop-up.
<body expr:class='"loading" + data:blog.mobileClass'>
<div name='essai' style='position: absolute; top: 50px; right: 30%; visibility : visible;z-index : 1;'> <p>
<a href='http://meteo-weather3.blogspot.fr' onclick='window.open(this.href, 'met', 'resizable=yes,status=no,location=no,toolbar=no,menubar=no,fullscreen=no,scrollbars=no,dependent=no,width=640,left=10,height=800,top=10'); return false;' title='Meteo du webmaster - Webmaster's forecast'><img alt='' src='http://weathersticker.wunderground.com/weathersticker/cgi-bin/banner/ban/wxBanner?bannertype=wu_bluestripes_metric&airportcode=TNCM&ForcedCity=Juliana%20Airport&ForcedState=Saint-Martin&wmo=78866&language=FR' style='width: 160px; height: 90px;'/></a></p>
</div>
(Version modifiée pour afficher les températures en degrés Celsius)
Ci-dessous, une version plus simple (sans pop-up) qui permettra de mieux comprendre ce code:
<div name="essai" style="position: absolute; top: 50px; left: 30%; visibility : visible;z-index : 1;"><p style="text-align: center;">
<p><a href="http://monsite.com" target="_blank" title="Allez sur mon site!"><img alt="" src="http://monsite/image.jpg" style="width: 160px; height: 90px;" /></a></p></div>
title="Allez sur mon site!" permet d'afficher une bulle d'information au survol du lien.
Astuce toute bête: quand vous travaillez dans le HTML de votre blog et que vous insérez ce genre de code, ajoutez 1 ou 2 lignes vides avant et après votre code. Cela vous permettra de le retrouver plus facilement.
Pour info: le code du titre de mon blog St Martin Meteo Weather. C'est un tout simplement un iframe (le titre a été uploadé sur un serveur Nerim dans une page web classique) et ainsi les éléments dans les layers ne bougent pas:
<iframe name="wublst" src="http://st-martin-studio.com/wublast_titre_pr_iframe.htm" width="965" height="288" vspace="0" hspace="0" marginwidth="0" marginheight="0" frameborder="0" scrolling="no"></iframe>
Si on n'a pas de serveur de ce type, on peut utiliser une simple page HTML dans le dossier "Public" de sa Dropbox ou un blog blogger ultra-minimaliste, voire même Google Drive... Si vous voulez voir comment c'est ficelé, il suffit d'afficher le contenu de l'iframe (http://st-martin-studio.com/wublast_titre_pr_iframe.htm) en cliquant sur le lien et ensuite "Afficher le code source de la page".
Aucun commentaire:
Enregistrer un commentaire