• Créer un curseur et l'utiliser

    Aujourd'hui, un tuto pour créer son propre curseur et l'utiliser sur son blog. Vous avez besoins donc de:

    ☻Un logiciel de graphisme

    En premier lieu, je vous conseille pour votre curseur un render (une image sans fond en png), pour en télécharger, rendez-vous sur Render Graphique (vous pouvez trouver les render en vous baladant dans les rubriques, ou en allant dans le menu "Recherche"(recommendé)

    Une fois votre render téléchargé (si vous prenez un render), ouvrez votre logiciel de graphisme. Créer un nouveau fichier de petite taille (si vous vous apercevez que la taille du fichier est trop petite ou trop grande, poffinez un peu la taille) Collez dans le fond votre render (vous pouvez le redimensionner aussi). Créez ensuite un nouveau calque et créer un triangle Rectangle. Donnez lui ensuite une petite taille et collez le dans ce nouveau calque. Appliquez ensuite au triangle un rotation de manière à ce que l'angle soit en haut à gauche. Poffinez ensuite les réglages de votre image (lueur externe, ombre porté, etc...) puis, enregistrez la au format png et si vous voulez la modifier par la suite au format psd (ce qui voudront la modifier par la suite doivent d'abord enregistrer en psd et ensuite, réenregistrer en ong, ou vice-versa)

    En va maintenant travailler sur le blog, allez dans contenu>gérer les fichiers>choisissez un fichier>sélectionné l'image png>Ouvrir>Envoyer. Votre curseur est enregistré sur le blog.

    Passons au css:

    HTML,BODY {
    cursor: url("URL DE VOTRE CURSEUR"), auto;
    }
    A:hover {
    cursor: url("URL DE VOTRE CURSEUR"), auto;
    }

    "html, body" va servir à choisir le curseur utilisé par défaut sur votre blog, et "A:hover" sert à choisir le curseur au survol d'un lien, vous pouvez bien sur en mettre un autre au survol. Pour connaitre l'url de votre icone, il faut aller dans gérer les fichiers, cliquer sur votre icone, et en bas, faire un clic-droit sur "Ouvrir" et cliquer sur "Copier l'url du lien"


    Tags Tags : , , , ,
  • Commentaires

    1
    Dimanche 24 Juin 2012 à 17:38

    woua c'est cool tout ce que tu fait !

    et les tuto sont clair 

    2
    Mercredi 27 Juin 2012 à 17:09

    Merci, mais honnetement, je pensais que ce tuto ne serait pas très clair, mais le résultats est convenable! ^^

    3
    Mercredi 23 Janvier 2013 à 16:01

    je conprend rien je suis nul

    4
    Mercredi 23 Janvier 2013 à 19:22

    mais non, replonge toi dedans attentivement et tu y arrivera

    5
    Jmlou Profil de Jmlou
    Dimanche 27 Janvier 2013 à 14:25

    comment faire une forme triangle réctangulaire avec Gimp2.8.2

    6
    Dimanche 27 Janvier 2013 à 14:51

    je n'utilise pas gimp, désolé

    7
    Jmlou Profil de Jmlou
    Dimanche 27 Janvier 2013 à 18:24

    tu utilises quoi?

    8
    Dimanche 27 Janvier 2013 à 19:16

    photoshop cs6

    9
    Lundi 28 Janvier 2013 à 18:07

    bon j'ai trouver mais j'ai toujours pas compris --'

    10
    Jmlou Profil de Jmlou
    Lundi 28 Janvier 2013 à 20:51
    11
    Jmlou Profil de Jmlou
    Mercredi 6 Février 2013 à 19:00

     Marche pas je remplace.....:URL DE VOTRE CURSEUR PAR?JE LAISSE LES GUILLEMETS?

    12
    Jmlou Profil de Jmlou
    Mercredi 6 Février 2013 à 19:02

    regarde:HTML,BODY {

    cursorurl(http://ekladata.com/jmlou-univers.eklablog.com/perso/cursor.png)auto;
    }
    A:hover {
    cursorurl(http://ekladata.com/jmlou-univers.eklablog.com/perso/cursor.png)auto;
    }

    13
    Jeudi 7 Février 2013 à 18:11

    ou as tu mit ce code? Dans CSS ou dans HTML?

    14
    Jmlou Profil de Jmlou
    Jeudi 7 Février 2013 à 20:32

    css...

    15
    Jeudi 7 Février 2013 à 20:35

    essaye comme ça alors:

    cursorurl("http://ekladata.com/jmlou-univers.eklablog.com/perso/cursor.png")auto;
    }
    A:hover {
    cursorurl("http://ekladata.com/jmlou-univers.eklablog.com/perso/cursor.png")auto;
    }

    mais il faut bien que le code ne soit pas collé aux autres, laisse une ou deux lignes entre chaque code différent

    16
    Jmlou Profil de Jmlou
    Jeudi 7 Février 2013 à 20:42

    ça met erreur...

    17
    Jeudi 7 Février 2013 à 20:45

    bon, t'es sur quel blog?

    18
    Jmlou Profil de Jmlou
    Jeudi 7 Février 2013 à 20:47

    Mon univers!

    19
    Jeudi 7 Février 2013 à 20:48

    met moi la perm3 dessus et je te règlerai ça ce soir ou demain

    20
    Jmlou Profil de Jmlou
    Jeudi 7 Février 2013 à 20:51
    21
    Jmlou Profil de Jmlou
    Jeudi 7 Février 2013 à 20:51

    Tu sais,jle met en blog test....

    22
    Vendredi 8 Février 2013 à 18:19

    je ne sais pas, on dirait que ton blog ne veut pas du css, j'ai essayé de mettre un petit code parci parla, voir si ct le blog ou le code qui buggé, et il semble que ce soit le blog

    23
    Jmlou Profil de Jmlou
    Vendredi 8 Février 2013 à 19:10

    J'ai retiré le blog..

    24
    vanille110 Profil de vanille110
    Dimanche 28 Avril 2013 à 20:09

    j'ai bien tous compris sauf a la fin ... où mt ton le code que tu nous a donné ???

    25
    Dimanche 28 Avril 2013 à 20:16

    Dans ajouter du css

    26
    vanille110 Profil de vanille110
    Lundi 29 Avril 2013 à 10:22

    ah daccord --' je suis vraiment bet -_-

    27
    vanille110 Profil de vanille110
    Lundi 29 Avril 2013 à 10:28

    j'ai fait tous se que ta dit mais mon curseur n'apparait pas :/


    *je suis embetante avec toutes ces questions* -_-

    28
    Jmlou Profil de Jmlou
    Lundi 29 Avril 2013 à 10:36

    MMMDDRR

    29
    Lundi 29 Avril 2013 à 11:11

    Ben heu... donne moi l'url de l'image que tu souhaite avoir comme curseur...

    30
    vanille110 Profil de vanille110
    Lundi 29 Avril 2013 à 15:00
    31
    Mardi 30 Avril 2013 à 10:48
    32
    Jmlou Profil de Jmlou
    Mardi 30 Avril 2013 à 13:28

    J'y arrive pas là..

    33
    Mardi 30 Avril 2013 à 13:37

    Ben... je sais pas, tu arrive pas à quoi?

    34
    Jmlou Profil de Jmlou
    Mardi 30 Avril 2013 à 13:41

    Non c'est bon en fait il faut juste que l'image  sois a 100x100px voici le code:   

     

    HTML,BODY{cursorurl("URL DU CURSEUR")auto;}

    35
    vanille110 Profil de vanille110
    Mardi 30 Avril 2013 à 14:13

    egotilt: j'ai copier le code que tu ma donné mais ca me dit quil y a une erreur quand je valide :/

    36
    Mercredi 1er Mai 2013 à 22:39

    Ben tu n'as pas du tout copié. Vérifie que le code ne chevauche pas un autre code et vérifie que tu as bien tout le code

    37
    vanille110 Profil de vanille110
    Jeudi 2 Mai 2013 à 10:34

    ah merci !! ca y est ca me dit plus que j'ai une erreur enfaite moi j'avait copier que ca:


    HTML,BODY {
    cursor: url("http://ekladata.com/u1J-7lE_z2u5EQeB7NudnvVS2Fw.png"), auto;

    38
    Vendredi 31 Mai 2013 à 19:06

    ca marche passs

    39
    Dimanche 2 Juin 2013 à 10:33

    Rajoute } à la fin de ton code.

    40
    Dimanche 2 Juin 2013 à 10:54

    chez moi il y a des images qui marche et d'autre non . je ne voix pas ou est le probleme car elles sont de la mm taille

    41
    Dimanche 2 Juin 2013 à 10:56

    Vérifie le type de l'image (.jpg .png .gif etc...)

    42
    Dimanche 2 Juin 2013 à 11:08

    ils sont tous png tiens voici le code et tu me dit ce qui ne vas pas                

        BODY{cursorurl("http://ekladata.com/ddViJZSj74R3bhM7sezNHN16P-g/images-26.png")auto;}      

    43
    vanille110 Profil de vanille110
    Dimanche 2 Juin 2013 à 12:53

    eu je croit quil faut que tu m'etre le "  }  "  a la ligne ne dessous 

    (peut-être que c'est ca ou pas XD )

    44
    Dimanche 2 Juin 2013 à 13:24

    jai pas compris ce que tu veux dire

    45
    vanille110 Profil de vanille110
    Dimanche 2 Juin 2013 à 13:28

    enfaite sur ce code (le tien)  

    BODY{cursorurl("http://ekladata.com/ddViJZSj74R3bhM7sezNHN16P-g/images-26.png")auto;}   

    au lieu de faire celui làil faut que tu mette dans "ajouter du css" le signe }

    en dessous de ca:

    url("http://ekladata.com/ddViJZSj74R3bhM7sezNHN16P-g/images-26.png")auto;

     

     

    et en gros le code sera:

    url("http://ekladata.com/ddViJZSj74R3bhM7sezNHN16P-g/images-26.png")auto;
    }

     

    voilà tu voit le signe en dessous ?? ^

                                         ^

     

     

    46
    Dimanche 2 Juin 2013 à 13:32

    nn ca marche toujours pas

    47
    vanille110 Profil de vanille110
    Dimanche 2 Juin 2013 à 15:06

    :/ ba je sais pas :/ dsl... faut attendre egotilt ^^

    48
    Jmlou Profil de Jmlou
    Dimanche 2 Juin 2013 à 16:55

    Non c'est bon en fait il faut juste que l'image  sois a 100x100px voici le code:   

     

    HTML,BODY{cursorurl("URL DU CURSEUR")auto;}

    49
    Dimanche 2 Juin 2013 à 19:10

    ca marche pas

    50
    Jmlou Profil de Jmlou
    Lundi 3 Juin 2013 à 17:55

    Il faut juste que l'image ne soit pas plus grande ni plus petite que 100px100px .Px=Pixel

    51
    Vendredi 30 Août 2013 à 17:56

     sa marche pas vous pouver m'aider ???

    52
    Vendredi 30 Août 2013 à 18:03

    comment on fait pour savoir la taille de l'image ??

    53
    Samedi 31 Août 2013 à 22:51

    Tu Choisis ton logiciel de graphisme (moi cest photofiltre) tu clique sur importation en image et tu choisis la taille que tu veux

    54
    Samedi 31 Août 2013 à 22:57
    55
    Samedi 14 Septembre 2013 à 18:29

    j'ai beau essayer, le code ne marche pas et je ne vois pas ce qui cloche...

    56
    Mercredi 2 Octobre 2013 à 00:36

    Merci pour tous tes tutos, ils sont super explicites, faciles à comprendre et très rapides à utiliser. :3

    57
    Lundi 6 Janvier 2014 à 18:15

    J'ai réussi ! :D Merci énormément ^^ c'est trop stylé ! ^^

    58
    Samedi 19 Avril 2014 à 18:10

    j'ai tout compris sauf le début avec les renders

    59
    Jeudi 2 Avril 2015 à 17:24

    bjr j'ai crée curseur mais comment avoir adresse url de mon image.Et ajouter fichier sur mon blog faut être membre premium alors impossible.

    60
    Dimanche 12 Avril 2015 à 16:24

    Bon bah chez moi, ça ne fonctionne pas....

    voici l'url de mon image : http://ekladata.com/94PXsPr5mogA0qeTXQJI6OWSNPw/mage2.gif, j'ai essayé en .png, rien non plus ... :-(

    61
    Mardi 10 Novembre 2015 à 16:14

     Je peux essayer de te le faire validées.



    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :