Trucs et astuces pour OverBlog
Je ne dis pas que j'ai la science infuse. Loin de là.
Mais j'ai tellement galéré pour comprendre certains trucs, que je me suis dit, c'est bête de pas en faire profiter les autres.
Par exemple.
Sur de très nombreux blogs (dont le mien) vous trouverez des boutons images.
On clique dessus et hop c'est magique, on est redirigé.
Mais savez vous comment on fait ?
L'importer dans les fichiers d'image d'overblog.
Passer dans la partie configurer (si c'est pour le mettre ailleurs que dans un article).
Ouvrir le module dans lequels vous désirez ajouter le bouton.
Importer l'image.
!! Attention ce qui suit ne marche qu'avec firefox, chrome lui veut pas le faire!!
Ne pas cocher "lien vers l'image originale"
Choississez votre taille.
Validez.
Cliquer sur l'image, elle se verra entouré d'un cadre avec des points blancs aux coins.
Là vous pouvez la réduire/augmenter si vous voulez.
Cliquez sur "Ajouter un lien"
Paramétrer le lien vers où votre image devra pointer.
Valider.
Valider.
C'est fini :)
C'est fini ^^
Qu'on passe trop plombe à chercher tellement que c'est pas très visible? ^^
Et bien, vous avez deux moyens : soit faire un bouton soit un "contact" manuscrit plus visible et mieux placé au sein de l'un de vos modules.
Comme pour les boutons images vous allez devoir rajouter l'url de votre contact perso :
Rendez vous donc sur votre propre blog et cliquez sur contact.
Là une nouvelle fenetre s'ouvre avec l'url écrite, par exemple pour moi c'est :
http://ann.over-blog.com/blog-contact.php?ref=1706583
Il n'y a plus qu'à valider et vous êtes encore plus visible :)
Le CSS c'est une série de balise qui permet de mettre en forme sa page, que ce soit au niveau des couleurs, de la place laissés pour les differents blocs (par exemple le bloc à droite/gauche et le bloc ou se trouve vos articles).
Tout d'abord, voici la bible du CSS :
http://www.w3schools.com/css/css_reference.asp
Pour trifouiller le CSS rendez vous dans "design > mode CSS"
Quelques balises/sigles à connaitre pour over-blog :
- #cl_1_1 correspondant à la case 1 de la ligne 1 et de la colonne 1.
Pour mon cas, là où vous trouvez les articles.
Plusieurs réclinaisons de chiffre pour les cl :
0_0 : c'est l'entête (la banière et les boutons pour moi)
1_0 : correspond chez moi aux modules de droite (qui peut se trouver à gauche)
2_0 : le bas de page (méréthide inc)
Vous aurrez surrement à triffouiller pour ça au niveau de la taille des blocs = width.
Il s'exprime en % si sur une même ligne vous touchez le pourcentage d'une des cellules, vous devrez modifier la seconde cellule de façon à ce que le total n'excede pas 100%
Exemple :
#cl_1_0{margin:0 1% 0 0; width:22%;}
#cl_1_1 {margin:0px; width:74%; padding:0.5%;}
- les couleurs :
Vous pouvez changer toutes les couleurs de votre blog et ce sans trop de mal.
Pour cela il vous faut un outil très très pratique : "la boite à couleurs"
/http%3A%2F%2Fimg.clubic.com%2Fphoto%2F01310932.jpg)
Cet outil vous permetra avec la pipette de pointer les couleurs qui vous interesse, et de vous donner directement la valeur en RGB (le code en #e8e8e8).
En css vous pouvez soit dire "purple" soit donner le code RGB correspondant.
Pour ma part je vous conseil d'user de ce dernier, la palette est bien plus importante.
Le plus simple est de faire ctrl+F de taper color et de checker toutes les possibilités de couleur possible ^^
background-color = permet de modifier la couleur du fond.
color = correspond à la couleur de la police
"a" étant le code css pour dire lien, vous pouvez modifier jusqu'à ce détail là.
"a:hover" correspondant au lien surligné vous pouvez donc vous amusez à faire deux tons très differents suivant que votre souris se trouve ou pas sur le lien à cliquer.
"body" : c'est le corps de votre page HTML (page de blog) modifier le background-color dans le body modifiera la couleur de fond de votre blog.
#top : haut de page (là ou se trouve la bannière en générale)
#footer : le bas de page
ATTENTION : avant de commencer tout bidouillage, créez vous un bloc note dans lequel vous aurez copié collé le code CSS initial ... Vaut mieux éviter les boulettes irrémédiables :)
Voila pour le CSS, c'est un peu lourd et brutal ... Va falloir faire une mise en pli plus joli je crois ^^
Mais j'ai tellement galéré pour comprendre certains trucs, que je me suis dit, c'est bête de pas en faire profiter les autres.
Par exemple.
Sur de très nombreux blogs (dont le mien) vous trouverez des boutons images.
On clique dessus et hop c'est magique, on est redirigé.
Mais savez vous comment on fait ?
Boutons images :
D'abord préparer, choisir le "bouton".L'importer dans les fichiers d'image d'overblog.
Passer dans la partie configurer (si c'est pour le mettre ailleurs que dans un article).
Ouvrir le module dans lequels vous désirez ajouter le bouton.
Importer l'image.
!! Attention ce qui suit ne marche qu'avec firefox, chrome lui veut pas le faire!!
Ne pas cocher "lien vers l'image originale"
Choississez votre taille.
Validez.
Cliquer sur l'image, elle se verra entouré d'un cadre avec des points blancs aux coins.
Là vous pouvez la réduire/augmenter si vous voulez.
Cliquez sur "Ajouter un lien"
Paramétrer le lien vers où votre image devra pointer.
Valider.
Valider.
C'est fini :)
Enlever le titre de module :
remplacer tout caractère par une pression de la touche espace.C'est fini ^^
Rendre visible le lien "contact":
Vous savez le tout petit lien blanc "contact" en bas des blogs ?Qu'on passe trop plombe à chercher tellement que c'est pas très visible? ^^
Et bien, vous avez deux moyens : soit faire un bouton soit un "contact" manuscrit plus visible et mieux placé au sein de l'un de vos modules.
Comme pour les boutons images vous allez devoir rajouter l'url de votre contact perso :
Rendez vous donc sur votre propre blog et cliquez sur contact.
Là une nouvelle fenetre s'ouvre avec l'url écrite, par exemple pour moi c'est :
http://ann.over-blog.com/blog-contact.php?ref=1706583
Il n'y a plus qu'à valider et vous êtes encore plus visible :)
Bidouiller le CSS :
Tout d'abord le css qu'est ce que c'est : "séquence d'instructions de rendu visuel, auditif ou tactile d'une ressource HTML ou XML" (merci Wiki).Le CSS c'est une série de balise qui permet de mettre en forme sa page, que ce soit au niveau des couleurs, de la place laissés pour les differents blocs (par exemple le bloc à droite/gauche et le bloc ou se trouve vos articles).
Tout d'abord, voici la bible du CSS :
http://www.w3schools.com/css/css_reference.asp
Pour trifouiller le CSS rendez vous dans "design > mode CSS"
Quelques balises/sigles à connaitre pour over-blog :
- #cl_1_1 correspondant à la case 1 de la ligne 1 et de la colonne 1.
Pour mon cas, là où vous trouvez les articles.
Plusieurs réclinaisons de chiffre pour les cl :
0_0 : c'est l'entête (la banière et les boutons pour moi)
1_0 : correspond chez moi aux modules de droite (qui peut se trouver à gauche)
2_0 : le bas de page (méréthide inc)
Vous aurrez surrement à triffouiller pour ça au niveau de la taille des blocs = width.
Il s'exprime en % si sur une même ligne vous touchez le pourcentage d'une des cellules, vous devrez modifier la seconde cellule de façon à ce que le total n'excede pas 100%
Exemple :
#cl_1_0{margin:0 1% 0 0; width:22%;}
#cl_1_1 {margin:0px; width:74%; padding:0.5%;}
- les couleurs :
Vous pouvez changer toutes les couleurs de votre blog et ce sans trop de mal.
Pour cela il vous faut un outil très très pratique : "la boite à couleurs"
Cet outil vous permetra avec la pipette de pointer les couleurs qui vous interesse, et de vous donner directement la valeur en RGB (le code en #e8e8e8).
En css vous pouvez soit dire "purple" soit donner le code RGB correspondant.
Pour ma part je vous conseil d'user de ce dernier, la palette est bien plus importante.
Le plus simple est de faire ctrl+F de taper color et de checker toutes les possibilités de couleur possible ^^
background-color = permet de modifier la couleur du fond.
color = correspond à la couleur de la police
"a" étant le code css pour dire lien, vous pouvez modifier jusqu'à ce détail là.
"a:hover" correspondant au lien surligné vous pouvez donc vous amusez à faire deux tons très differents suivant que votre souris se trouve ou pas sur le lien à cliquer.
"body" : c'est le corps de votre page HTML (page de blog) modifier le background-color dans le body modifiera la couleur de fond de votre blog.
#top : haut de page (là ou se trouve la bannière en générale)
#footer : le bas de page
ATTENTION : avant de commencer tout bidouillage, créez vous un bloc note dans lequel vous aurez copié collé le code CSS initial ... Vaut mieux éviter les boulettes irrémédiables :)
Voila pour le CSS, c'est un peu lourd et brutal ... Va falloir faire une mise en pli plus joli je crois ^^
Publicité