Le pied de page de ce blog à 3 colonnes avec bords arrondis pour chacune d’elles. Quelqu’un m’avait demandé comment mettre des bords arrondis pour une partie quelconque de son blog. Cette astuce trouvé grâce à Beta Blogger for Dummies avait été enseignée par Amanda de Blogger Buster.
1. Aller sur le site Cornershop. Choisir les couleurs dans les boîtes prévues. Pour les codes hexadécimaux de couleurs, voir cette page.
2. Choisir l’arrondissement de vos coins : avec 10 c’est à peine arrondi tandis qu’avec 20 c’est vraiment arrondi.
3. Cliquer sur "create graphics" pour générer les bouts arrondis et codes HTML/CSS dont vous avez besoins pour arrondir les coins de certains parties de votre blog.
5. Sauvegarder les 4 images des bordures arrondies dans son ordi puis héberger sur Google pagecreator, Photobucket ou imageshack. Ensuite, prendre l’url complète de chaque image dans le compte où elle a été hébergée et garder celui-ci dans un fichier notepad, wordpad ou word pour une utilisation future (dans la suite de ce processus). Faire de même pour les codes CSS et HTML pris sur Cornershop.
6. Dans le code CSS pourvu par Cornershop, inserer l’url complète de toutes les images. Par exemple, pour le fichier NE.gif , l’url complète peut être celle-ci : "http://www.quidam.googlepagecreator.com/ne.gif" .
7. Copier et coller le code css modifié juste avant la balise </b:skin>
Si vous voulez mettre des bords arrondis à votre entête, suivre les étapes suivantes :
* Se connecter à son compte, Aller sur “ Mise en page ” puis sur “ Modifier le code HTML ”
* Trouver cet balise dans votre modèle:
<div id="header-wrapper>
* Immédiatement après cette ligne, coller le code suivant :
<div class='box'> <div class='boxtop'><div></div></div> <div class='boxcontent'>
* Ensuite, trouvez ces lignes :
</div> <div id='main-wrapper'>
Immédiatement avant ces lignes, mettre les codes suivant :
</div> <div class='boxbottom'><div></div></div> </div>
* Vous pouvez prévisualiser pour voir ce que ça donne puis enregistrez les modifications et régalez-vous!
Pour arrondir les bords de la barre latérale :
* Trouver cet balise dans votre modèle:
<div id='sidebar-wrapper'>
* Immédiatement après cette ligne, coller le code suivant :
<div class='box'> <div class='boxtop'><div></div></div> <div class='boxcontent'>
* Trouvez la balise </div> qui clôture le sidebar wrapper. Immédiatement avant cette balise, collez le code suivant :
</div> <div class='boxbottom'><div></div></div> </div>
Vous pouvez utiliser plus d’une marque de bord arrondi pour votre modèle (par exemple, un pour l’entête et un autre différent pour la barre latérale. Si par contre vous voulez utiliser des bords arrondis de différentes couleurs pour l’entête et la barre latérale, vous faire que les fichiers images, les codes css et les DIV soient uniques aux parties concernées.
Par exemple :
* le fichier image ne.gif quand il sera utilisé pour la barre latérale (sidebar) peut être renommé sidebar-ne.gif
* Dans le code CSS , les éléments .box et .boxtop peuvent être renommé comme .sidebar-box et .sidebar-boxtop
*Dans le code HTML à insérer, vous devrez écrire <div class="sidebar-box"> pour différencier le code de la barre latérale de celui de l’entête ( <div class="box">)
1. Aller sur le site Cornershop. Choisir les couleurs dans les boîtes prévues. Pour les codes hexadécimaux de couleurs, voir cette page.
2. Choisir l’arrondissement de vos coins : avec 10 c’est à peine arrondi tandis qu’avec 20 c’est vraiment arrondi.
3. Cliquer sur "create graphics" pour générer les bouts arrondis et codes HTML/CSS dont vous avez besoins pour arrondir les coins de certains parties de votre blog.
5. Sauvegarder les 4 images des bordures arrondies dans son ordi puis héberger sur Google pagecreator, Photobucket ou imageshack. Ensuite, prendre l’url complète de chaque image dans le compte où elle a été hébergée et garder celui-ci dans un fichier notepad, wordpad ou word pour une utilisation future (dans la suite de ce processus). Faire de même pour les codes CSS et HTML pris sur Cornershop.
6. Dans le code CSS pourvu par Cornershop, inserer l’url complète de toutes les images. Par exemple, pour le fichier NE.gif , l’url complète peut être celle-ci : "http://www.quidam.googlepagecreator.com/ne.gif" .
7. Copier et coller le code css modifié juste avant la balise </b:skin>
Si vous voulez mettre des bords arrondis à votre entête, suivre les étapes suivantes :
* Se connecter à son compte, Aller sur “ Mise en page ” puis sur “ Modifier le code HTML ”
* Trouver cet balise dans votre modèle:
<div id="header-wrapper>
* Immédiatement après cette ligne, coller le code suivant :
<div class='box'> <div class='boxtop'><div></div></div> <div class='boxcontent'>
* Ensuite, trouvez ces lignes :
</div> <div id='main-wrapper'>
Immédiatement avant ces lignes, mettre les codes suivant :
</div> <div class='boxbottom'><div></div></div> </div>
* Vous pouvez prévisualiser pour voir ce que ça donne puis enregistrez les modifications et régalez-vous!
Pour arrondir les bords de la barre latérale :
* Trouver cet balise dans votre modèle:
<div id='sidebar-wrapper'>
* Immédiatement après cette ligne, coller le code suivant :
<div class='box'> <div class='boxtop'><div></div></div> <div class='boxcontent'>
* Trouvez la balise </div> qui clôture le sidebar wrapper. Immédiatement avant cette balise, collez le code suivant :
</div> <div class='boxbottom'><div></div></div> </div>
Vous pouvez utiliser plus d’une marque de bord arrondi pour votre modèle (par exemple, un pour l’entête et un autre différent pour la barre latérale. Si par contre vous voulez utiliser des bords arrondis de différentes couleurs pour l’entête et la barre latérale, vous faire que les fichiers images, les codes css et les DIV soient uniques aux parties concernées.
Par exemple :
* le fichier image ne.gif quand il sera utilisé pour la barre latérale (sidebar) peut être renommé sidebar-ne.gif
* Dans le code CSS , les éléments .box et .boxtop peuvent être renommé comme .sidebar-box et .sidebar-boxtop
*Dans le code HTML à insérer, vous devrez écrire <div class="sidebar-box"> pour différencier le code de la barre latérale de celui de l’entête ( <div class="box">)
Si cet article vous a plus, vous pouvez souscrire à mon feed rss ou à ma newsletter pour rester à jour ou encore rejoindre ma communauté sur Blogcatolog. N'oubliez pas d'ajouter ce blog à vos favoris sur Technorati.
0 commentaires:
Enregistrer un commentaire
Salut Cher Lecteur.
Bien que les commentaires ne sont pas modérés en amont, ne perdez pas votre temps à mettre des commentaires sans aucun lien avec l'article. Ils seront effacés.
Ne venez surtout pas mettre des commentaires bidons pour promouvoir les sciences occultes ici (voyance, magie, etc.), vérifiez le blog, aucun commentaire de ce genre n'a résisté à la gomme de l'administrateur.
Bon, ceci étant dit, puissiez-vous respecter les lois de votre pays, les lois universelles ainsi que le bon sens en postant votre commentaire sur ce blog.
Remarque : Seul un membre de ce blog est autorisé à enregistrer un commentaire.