Proc\u00e9s per a crear un bot\u00f3 en 2 passos: estructura HTML i estils amb CSS.<\/p>\n
Pas 1: Creem l’estructura HTML per al bot\u00f3<\/strong><\/p>\n T\u00e8cnicament un bot\u00f3 en desenvolupament web no \u00e9s m\u00e9s que un enlla\u00e7 bonic. Aix\u00ed que seguim aquests passos:<\/p>\n 1. Abans de tot, accedim a l’editor d’entrada o p\u00e0gina on volem inserir el bot\u00f3 i anem a la pestanya HTML, no Visual.<\/p>\n 2. El primer seria crear un enlla\u00e7 amb certes caracter\u00edstiques. Comencem posant el text del bot\u00f3 (per exemple \u201cVisita la meua p\u00e0gina\u201d) entre les etiquetes d’enlla\u00e7 .<\/p>\n 3. Li donem un ID a l’enlla\u00e7 per a poder estilitzar-lo amb CSS despr\u00e9s. L’ID podria ser \u201cboto-bonic\u201d per exemple i ho farem posant id=\u201dboto-bonic\u201d dins de la primera etiqueta.<\/p>\n 4. Indiquem la destinaci\u00f3 del bot\u00f3. \u00c9s a dir, on ens portar\u00e0, amb href=\u201dhttps:\/\/\u2026\u201d. Quedaria aix\u00ed:<\/p>\n I ja hem acabat amb HTML. Com veieu no t\u00e9 molta complicaci\u00f3. ara passem al CSS.<\/p>\n Pas 2: Estilitzem el bot\u00f3 amb CSS<\/strong><\/p>\n CSS ens servir\u00e0 per a donar estils al nostre enlla\u00e7 i deixar-lo m\u00e9s bonic. Fa poc vaig escriure un article sobre diferents m\u00e8todes d’afegir i modificar el CSS en WordPress aix\u00ed que pots consultar-ho si et fa falta. Aix\u00ed que ara accedirem a la nostra forma favorita d’afegir CSS i seguirem amb el disseny.<\/p>\n #boto-bonic { El que far\u00e0 aquest codi, en aquest mateix ordre, \u00e9s:<\/p>\n A m\u00e9s, perqu\u00e8 el bot\u00f3 tinga un efecte quan passem el ratol\u00ed per damunt, podem utilitzar l’etiqueta :hover i ens quedaria una cosa aix\u00ed:<\/p>\n #boton-bonic:hover { D’aquesta manera el color de fons del bot\u00f3 continuar\u00e0 sent taronja, per\u00f2 quan es passe el bot\u00f3 per damunt, es tornar\u00e0 negre.<\/p>\n Per ficar codi CSS m\u00e9s complicat https:\/\/cssgradientbutton.com\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":" Proc\u00e9s per a crear un bot\u00f3 en 2 passos: estructura HTML i estils amb CSS. Pas 1: Creem l’estructura HTML per al bot\u00f3 T\u00e8cnicament un bot\u00f3 en desenvolupament web no \u00e9s m\u00e9s que un enlla\u00e7 bonic. Aix\u00ed que seguim aquests passos: 1. Abans de tot, accedim a l’editor d’entrada o p\u00e0gina on volem inserir el … Llegiu m\u00e9s<\/a><\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"activitypub_content_warning":"","activitypub_content_visibility":"","activitypub_max_image_attachments":4,"activitypub_interaction_policy_quote":"anyone","activitypub_status":"","footnotes":""},"categories":[5],"tags":[],"class_list":["post-4040","post","type-post","status-publish","format-standard","hentry","category-tic"],"_links":{"self":[{"href":"https:\/\/edutictac.es\/blog\/sasogu\/wp-json\/wp\/v2\/posts\/4040","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/edutictac.es\/blog\/sasogu\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/edutictac.es\/blog\/sasogu\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/edutictac.es\/blog\/sasogu\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/edutictac.es\/blog\/sasogu\/wp-json\/wp\/v2\/comments?post=4040"}],"version-history":[{"count":0,"href":"https:\/\/edutictac.es\/blog\/sasogu\/wp-json\/wp\/v2\/posts\/4040\/revisions"}],"wp:attachment":[{"href":"https:\/\/edutictac.es\/blog\/sasogu\/wp-json\/wp\/v2\/media?parent=4040"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/edutictac.es\/blog\/sasogu\/wp-json\/wp\/v2\/categories?post=4040"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/edutictac.es\/blog\/sasogu\/wp-json\/wp\/v2\/tags?post=4040"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}<a id=\"boto-bonic\" href=\"https:\/\/sasogu.es\">Visita la meua p\u00e0gina<\/a><\/pre>\n
\ntext-decoration:none;
\ncolor:white;
\npadding:20px;
\nbackground-color:#dd9933;
\n}<\/p><\/blockquote>\n\n
\nbackground-color:#333333;
\n}<\/p><\/blockquote>\n