Añadir un widget propio

nomasvenenosencanarias · Miembro · mayo 12, 2011 at 7:41 pm
Copiar enlace

Añadir tema a favoritos
Hola compis

He iniciado una petición de firmas online y tengo el código, dado por la página que gestiona la petición, para añadir el widget al blog. Pero sin embargo, no sé cómo hacerlo ya que los widgets ya vienen predefinidos! He intentado meter el código en un widget de texto pero no ha funcionado.

Por favor, ayuda! Gracias……

El blog con el que necesito ayuda es (visible solo para usuarios conectados).
galois · Moderador · mayo 12, 2011 at 8:13 pm
Copiar enlace
a) efectivamente los wigdets que puedes usar en WordPress.com son los que tienes disponibles en la sección correspondiente.

b) el widget de texto no acepta cualquier tipo de código ya que hay algunos que no están permitidos en WordPress.com por motivos de seguridad.

c) lo mejor en estos casos es que copies y pegues aquí en el foro el códio que estás intentando usar para que te podamos ayudar si existe una solución.

Debes poner el código entre acentos graves, uno al comienzo, otro al final. Si no sabes cuál es el el acento grave, te lo copio a continuación entre paréntesis (`)

nomasvenenosencanarias · Miembro · mayo 12, 2011 at 8:48 pm

Gracias Galois

Te copio el código aquí:

<!-- WIDGET ACTUABLE - T1.1 -->
<style>
.act_wid_1 { font: 16px Arial; margin: 0 0 2em 0;}
.act_wid_1 * { border: none; margin: 0; padding: 0;}
.act_wid_1 .act_wid_img { margin: 0; padding: 0; height: 150px; overflow: hidden; }
.act_wid_1 img { border: none; margin: 0;}
.act_wid_1 .act_wid_title h1 { text-transform: none; margin: 0; padding: .4em .5em; font: normal 1.5em Helvetica; border: none; border-bottom: 1px solid;}
.act_wid_1 .act_wid_title h1 a { text-decoration: none; background: none; text-indent: 0; width: auto; height: auto; display:block;}
.act_wid_1 .act_wid_title h1 a:hover { text-decoration: underline;}

/* widget sign */
/*
.act_wid_1 .widget_sign { min-height: 420px; overflow: hidden; margin: 0 0 2em 0;}
.act_wid_1 .progress_bar { border-top: 1px solid; border-bottom: 1px solid; }
.act_wid_1 .progress_bar .pb_cont { position: relative; height: 18px; }
.act_wid_1 .progress_bar .pb_bkg { width: 100%; position: absolute; height: 18px; background: #FFF; opacity: .5; }
.act_wid_1 .progress_bar .pb_prog { position: absolute; height: 18px; background: #FFF; opacity:; .9; }
.act_wid_1 .progress_bar table { margin: 0 0 .75em 0; font-size: .85em;}
.act_wid_1 .progress_bar td { padding: 0; width: 22%; text-align: center;}
.act_wid_1 .progress_bar td.f { width: 17%; text-align: left;}
.act_wid_1 .progress_bar td.l { width: 17%; text-align: right;}
*/
.act_wid_1 .widget_sign { min-height: 0; }
.act_wid_1 .widget_sign .wc { padding: .5em 0.8em; }
.act_wid_1 .widget_sign .wc p { margin: 0 0 .2em 0; }
.act_wid_1 .widget_sign .wc .box { padding: 0; background: none; padding: 1em 0 8em 0;}

.act_wid_1 .widget_sign .signs_info { position: relative;  }
.act_wid_1 .people_count { position: relative; width: 50%; }
.act_wid_1 .people_count, .act_wid_1 .signs_left { font: bold 1em Helvetica; }
.act_wid_1 .signs_info  small { font: bold .65em Arial; display: block;}
.act_wid_1 .signs_left { width: 50%; position: absolute; left: 50%; top: .5em;}

.act_wid_1 .act_now { font-size: .75em;}
.act_wid_1 .act_now h3 { text-transform: uppercase; font: bold 1.7em Helvetica; margin: .25em 0;}
.act_wid_1 .act_now table { width: 100%;}
.act_wid_1 .act_now th, .act_now td { padding: 1px 5px 1px 5px; background: none;}
.act_wid_1 .act_now th { text-align: right; font-weight: normal; width: 6em;}
.act_wid_1 .act_now td input { width: 95%; }
.act_wid_1 .act_now tr.accept_conds td input { width: auto; font: .75em Arial;}
.act_wid_1 .act_now tr.accept_conds td { font: .75em Arial;}

.act_wid_1 .act_now .submit { padding: 1em 0 1.5em 0; margin: 0; border: none; text-align: center; }
.act_wid_1 .act_now .submit input { font: bold 1.4em Helvetica; vertical-align: top; height: 38px; padding: 8px 20px 6px 20px; text-transform: uppercase; border: none; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; -moz-box-shadow: 2px 2px 2px #666; -webkit-box-shadow: 2px 2px 2px #666; box-shadow: 2px 2px 2px #666;}
.act_wid_1 .act_now .submit input:hover { opacity: .9; cursor: pointer;}

.act_wid_1 .act_now .submit a { text-decoration: none; display: inline-block; font: bold 1.4em Helvetica; vertical-align: top; padding: 16px 18px 9px; text-transform: uppercase; border: none; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; -moz-box-shadow: 2px 2px 2px #666; -webkit-box-shadow: 2px 2px 2px #666; box-shadow: 2px 2px 2px #666;}
.act_wid_1 .act_now .submit a:hover { opacity: .9; }

/* widget sign theme */
.act_wid_1 .act_wid_img { background: #8CDEEF url("/images/widget_bkgd_blue.png");}
.act_wid_1 .wtheme_blue .act_wid_title { border-color: #FFF;}
.act_wid_1 .wtheme_blue .act_wid_title h1 { border-color: #FFF;}
.act_wid_1 .wtheme_blue .act_wid_title h1 a { color: #FFF; }
.act_wid_1 .wtheme_blue .widget_sign { background: #169FB9; color: #FFF;}
.act_wid_1 .wtheme_blue .progress_bar { border-color: #FFF; }
.act_wid_1 .wtheme_blue .people_count { color: #FFF;}
.act_wid_1 .wtheme_blue .signs_info small { opacity: .6;}
.act_wid_1 .wtheme_blue .act_now { background: #8CDEEF; color: #08738B;}
.act_wid_1 .wtheme_blue .act_now h3 { color: #08738B;}
.act_wid_1 .wtheme_blue .act_now .submit input {
  background: #08738B;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#086E85), to(#128CA5));
  background: -moz-linear-gradient(100% 0% 270deg,#086E85, #128CA5);
  color: #FFF;
}
.act_wid_1 .wtheme_blue .act_now .submit a {
  background: #08738B;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#086E85), to(#128CA5));
  background: -moz-linear-gradient(100% 0% 270deg,#086E85, #128CA5);
  color: #FFF;
}
</style>

<div class="act_wid_1">
  <div class="wtheme_blue" id="widget_box">
    <div class="widget_sign" id="widget_cont">
      <div class="act_wid_img"><a href="http://actuable.es/peticiones/peticinn-prohibicinn-del-uso-del-glifosato-y-otros-herbicida-2" target="_blank"><img alt="Logo peticion" height="195" src="http://actuable.es/system/images/980/medium/logo peticion.jpg" width="300" /></a></div>
      <div class="act_wid_title">
        <h1><a href="http://actuable.es/peticiones/peticinn-prohibicinn-del-uso-del-glifosato-y-otros-herbicida-2" target="_blank">PETICIÓN de PROHIBICIÓN DEL USO DEL GLIFOSATO y otros herbicida en todo tipo de lugares públicos, sustituyéndolo por MÉTODOS MECÁNICOS Y/O TÉRMICOS</a></h1>
      </div>
      <div class="wc signs_info">
        <div class="people_count">
          <small>Han actuado</small>
          <span id="actuable_signs_count_980">0 personas</span>
        </div>
        <div class="signs_left">
          <small>Nos faltan</small>
          <span id="actuable_signs_left_980">0 firmas</span>
        </div>
      </div><!-- .wc -->

      <div class="act_now">
        <div class="wc" id="act_now_not_acted">
          <div class="widget_form">
            <h3>Actúa ahora</h3>
            <form accept-charset="UTF-8" action="http://actuable.es/actions/980/supports" method="post">
            <div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" />
              <input name="authenticity_token" id="actuable_authenticity_token" type="hidden" value="" /></div>
            <table>
              <tr>
                <th>Tu nombre</th>
                <td><input class="text" id="user_name" name="user[name]" size="30" type="text" /></td>
              </tr>
              <tr>
                <th>Tu apellido</th>
                <td><input class="text" id="user_surname" name="user[surname]" size="30" type="text" /></td>
              </tr>
              <tr>
                <th>Tu correo-e</th>
                <td><input class="text" id="user_email" name="user[email]" size="30" type="text" /></td>
              </tr>
              <tr>
                <th>Cód. Postal</th>
                <td><input class="text" id="user_postal_code" name="user[postal_code]" size="30" type="text" /></td>
              </tr>
              <tr class="accept_conds">
                <th></th>
                <td>
                  <label for="user_terms_of_service">
                  <input name="user[terms_of_service]" type="hidden" value="0" /><input id="user_terms_of_service" name="user[terms_of_service]" type="checkbox" value="1" />
                  Acepto las <a href="http://actuable.es/s/condiciones-de-uso" target="_blank">Norm. de Uso</a> y <a href="http://actuable.es/s/privacidad" target="_blank">Pol. de Priv.</a></label>
                </td>
              </tr>
            </table>
            <div class="submit">
              <input type="submit" value="Firma la petición" />
            </div>
            </form>
          </div>
          <div class="submit submit_link" style="display:none">
            <a href="http://actuable.es/peticiones/peticinn-prohibicinn-del-uso-del-glifosato-y-otros-herbicida-2" target="_blank">Firma la petición</a>
          </div>
        </div><!-- .act_now -->
      </div><!-- .wc -->
    </div><!-- .widget_sign -->
  </div><!-- .wtheme -->
</div><!-- #act_wid_1 -->
<script type="text/javascript" src="http://actuable.es/a/peticinn-prohibicinn-del-uso-del-glifosato-y-otros-herbicida-2/js"></script>
<script>
document.getElementById("actuable_signs_count_980").innerHTML = supporters_count + " persona" + (supporters_count == 1 ? '' : 's');
document.getElementById("actuable_signs_left_980").innerHTML = suppors_pending + " firma" + (suppors_pending == 1 ? '' : 's');
document.getElementById("actuable_authenticity_token").value = auth_token;
</script>
<!-- /WIDGET ACTUABLE - T1.1 --><!-- WIDGET ACTUABLE - T1.1 -->
<style>
.act_wid_1 { font: 16px Arial; margin: 0 0 2em 0;}
.act_wid_1 * { border: none; margin: 0; padding: 0;}
.act_wid_1 .act_wid_img { margin: 0; padding: 0; height: 150px; overflow: hidden; }
.act_wid_1 img { border: none; margin: 0;}
.act_wid_1 .act_wid_title h1 { text-transform: none; margin: 0; padding: .4em .5em; font: normal 1.5em Helvetica; border: none; border-bottom: 1px solid;}
.act_wid_1 .act_wid_title h1 a { text-decoration: none; background: none; text-indent: 0; width: auto; height: auto; display:block;}
.act_wid_1 .act_wid_title h1 a:hover { text-decoration: underline;}

/* widget sign */
/*
.act_wid_1 .widget_sign { min-height: 420px; overflow: hidden; margin: 0 0 2em 0;}
.act_wid_1 .progress_bar { border-top: 1px solid; border-bottom: 1px solid; }
.act_wid_1 .progress_bar .pb_cont { position: relative; height: 18px; }
.act_wid_1 .progress_bar .pb_bkg { width: 100%; position: absolute; height: 18px; background: #FFF; opacity: .5; }
.act_wid_1 .progress_bar .pb_prog { position: absolute; height: 18px; background: #FFF; opacity:; .9; }
.act_wid_1 .progress_bar table { margin: 0 0 .75em 0; font-size: .85em;}
.act_wid_1 .progress_bar td { padding: 0; width: 22%; text-align: center;}
.act_wid_1 .progress_bar td.f { width: 17%; text-align: left;}
.act_wid_1 .progress_bar td.l { width: 17%; text-align: right;}
*/
.act_wid_1 .widget_sign { min-height: 0; }
.act_wid_1 .widget_sign .wc { padding: .5em 0.8em; }
.act_wid_1 .widget_sign .wc p { margin: 0 0 .2em 0; }
.act_wid_1 .widget_sign .wc .box { padding: 0; background: none; padding: 1em 0 8em 0;}

.act_wid_1 .widget_sign .signs_info { position: relative;  }
.act_wid_1 .people_count { position: relative; width: 50%; }
.act_wid_1 .people_count, .act_wid_1 .signs_left { font: bold 1em Helvetica; }
.act_wid_1 .signs_info  small { font: bold .65em Arial; display: block;}
.act_wid_1 .signs_left { width: 50%; position: absolute; left: 50%; top: .5em;}

.act_wid_1 .act_now { font-size: .75em;}
.act_wid_1 .act_now h3 { text-transform: uppercase; font: bold 1.7em Helvetica; margin: .25em 0;}
.act_wid_1 .act_now table { width: 100%;}
.act_wid_1 .act_now th, .act_now td { padding: 1px 5px 1px 5px; background: none;}
.act_wid_1 .act_now th { text-align: right; font-weight: normal; width: 6em;}
.act_wid_1 .act_now td input { width: 95%; }
.act_wid_1 .act_now tr.accept_conds td input { width: auto; font: .75em Arial;}
.act_wid_1 .act_now tr.accept_conds td { font: .75em Arial;}

.act_wid_1 .act_now .submit { padding: 1em 0 1.5em 0; margin: 0; border: none; text-align: center; }
.act_wid_1 .act_now .submit input { font: bold 1.4em Helvetica; vertical-align: top; height: 38px; padding: 8px 20px 6px 20px; text-transform: uppercase; border: none; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; -moz-box-shadow: 2px 2px 2px #666; -webkit-box-shadow: 2px 2px 2px #666; box-shadow: 2px 2px 2px #666;}
.act_wid_1 .act_now .submit input:hover { opacity: .9; cursor: pointer;}

.act_wid_1 .act_now .submit a { text-decoration: none; display: inline-block; font: bold 1.4em Helvetica; vertical-align: top; padding: 16px 18px 9px; text-transform: uppercase; border: none; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; -moz-box-shadow: 2px 2px 2px #666; -webkit-box-shadow: 2px 2px 2px #666; box-shadow: 2px 2px 2px #666;}
.act_wid_1 .act_now .submit a:hover { opacity: .9; }

/* widget sign theme */
.act_wid_1 .act_wid_img { background: #8CDEEF url("/images/widget_bkgd_blue.png");}
.act_wid_1 .wtheme_blue .act_wid_title { border-color: #FFF;}
.act_wid_1 .wtheme_blue .act_wid_title h1 { border-color: #FFF;}
.act_wid_1 .wtheme_blue .act_wid_title h1 a { color: #FFF; }
.act_wid_1 .wtheme_blue .widget_sign { background: #169FB9; color: #FFF;}
.act_wid_1 .wtheme_blue .progress_bar { border-color: #FFF; }
.act_wid_1 .wtheme_blue .people_count { color: #FFF;}
.act_wid_1 .wtheme_blue .signs_info small { opacity: .6;}
.act_wid_1 .wtheme_blue .act_now { background: #8CDEEF; color: #08738B;}
.act_wid_1 .wtheme_blue .act_now h3 { color: #08738B;}
.act_wid_1 .wtheme_blue .act_now .submit input {
  background: #08738B;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#086E85), to(#128CA5));
  background: -moz-linear-gradient(100% 0% 270deg,#086E85, #128CA5);
  color: #FFF;
}
.act_wid_1 .wtheme_blue .act_now .submit a {
  background: #08738B;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#086E85), to(#128CA5));
  background: -moz-linear-gradient(100% 0% 270deg,#086E85, #128CA5);
  color: #FFF;
}
</style>

<div class="act_wid_1">
  <div class="wtheme_blue" id="widget_box">
    <div class="widget_sign" id="widget_cont">
      <div class="act_wid_img"><a href="http://actuable.es/peticiones/peticinn-prohibicinn-del-uso-del-glifosato-y-otros-herbicida-2" target="_blank"><img alt="Logo peticion" height="195" src="http://actuable.es/system/images/980/medium/logo peticion.jpg" width="300" /></a></div>
      <div class="act_wid_title">
        <h1><a href="http://actuable.es/peticiones/peticinn-prohibicinn-del-uso-del-glifosato-y-otros-herbicida-2" target="_blank">PETICIÓN de PROHIBICIÓN DEL USO DEL GLIFOSATO y otros herbicida en todo tipo de lugares públicos, sustituyéndolo por MÉTODOS MECÁNICOS Y/O TÉRMICOS</a></h1>
      </div>
      <div class="wc signs_info">
        <div class="people_count">
          <small>Han actuado</small>
          <span id="actuable_signs_count_980">0 personas</span>
        </div>
        <div class="signs_left">
          <small>Nos faltan</small>
          <span id="actuable_signs_left_980">0 firmas</span>
        </div>
      </div><!-- .wc -->

      <div class="act_now">
        <div class="wc" id="act_now_not_acted">
          <div class="widget_form">
            <h3>Actúa ahora</h3>
            <form accept-charset="UTF-8" action="http://actuable.es/actions/980/supports" method="post">
            <div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" />
              <input name="authenticity_token" id="actuable_authenticity_token" type="hidden" value="" /></div>
            <table>
              <tr>
                <th>Tu nombre</th>
                <td><input class="text" id="user_name" name="user[name]" size="30" type="text" /></td>
              </tr>
              <tr>
                <th>Tu apellido</th>
                <td><input class="text" id="user_surname" name="user[surname]" size="30" type="text" /></td>
              </tr>
              <tr>
                <th>Tu correo-e</th>
                <td><input class="text" id="user_email" name="user[email]" size="30" type="text" /></td>
              </tr>
              <tr>
                <th>Cód. Postal</th>
                <td><input class="text" id="user_postal_code" name="user[postal_code]" size="30" type="text" /></td>
              </tr>
              <tr class="accept_conds">
                <th></th>
                <td>
                  <label for="user_terms_of_service">
                  <input name="user[terms_of_service]" type="hidden" value="0" /><input id="user_terms_of_service" name="user[terms_of_service]" type="checkbox" value="1" />
                  Acepto las <a href="http://actuable.es/s/condiciones-de-uso" target="_blank">Norm. de Uso</a> y <a href="http://actuable.es/s/privacidad" target="_blank">Pol. de Priv.</a></label>
                </td>
              </tr>
            </table>
            <div class="submit">
              <input type="submit" value="Firma la petición" />
            </div>
            </form>
          </div>
          <div class="submit submit_link" style="display:none">
            <a href="http://actuable.es/peticiones/peticinn-prohibicinn-del-uso-del-glifosato-y-otros-herbicida-2" target="_blank">Firma la petición</a>
          </div>
        </div><!-- .act_now -->
      </div><!-- .wc -->
    </div><!-- .widget_sign -->
  </div><!-- .wtheme -->
</div><!-- #act_wid_1 -->
<script type="text/javascript" src="http://actuable.es/a/peticinn-prohibicinn-del-uso-del-glifosato-y-otros-herbicida-2/js"></script>
<script>
document.getElementById("actuable_signs_count_980").innerHTML = supporters_count + " persona" + (supporters_count == 1 ? '' : 's');
document.getElementById("actuable_signs_left_980").innerHTML = suppors_pending + " firma" + (suppors_pending == 1 ? '' : 's');
document.getElementById("actuable_authenticity_token").value = auth_token;
</script>
<!-- /WIDGET ACTUABLE - T1.1 -->

Muchísimas gracias.

galois · Moderador · mayo 12, 2011 at 9:44 pm
Copiar enlace
No, definitivamente no se puede usar ese código en WordPress.com porque contiene varios tipos de códigos no permitidos. Entre ellos, JavaScript.
http://en.support.wordpress.com/code/#javascript

Pero como veo que se trata de un formulario, lo que podrías hacer es poner un enlace en tu blog que lleve a la página en donde se gestiona.
O mejor aún, puedes poner una imagen que guarde relación con la petición y usarla como enlace a dicha página.

También puedes poner una encuesta, etc.
nomasvenenosencanarias · Miembro · mayo 12, 2011 at 10:32 pm
Copiar enlace
Muy buena idea lo de poner la imagen relacionada con la petición… Gracias.

Ahora que ya sé que no se puede poner ya no me duele tanto la cabeza jajaja así que gracias por eso también.

Lo de la encuenta ya lo probé en otro blog que tengo de wordpress asociado a otra dirección de email y no se publicó. Sabes porqué puede ser que no se publique? Porque parece que varias personas han tenido el mismo problema….

Un saludo afectuoso!

Victoria
galois · Moderador · mayo 13, 2011 at 9:44 am
Copiar enlace
Me alegro de que te haya servido. :-)
Un saludo afectuoso para ti también!

P.S.: si quieres abre un tema nuevo por lo de la encuesta y vemos si se puede resolver.

El debate ‘Añadir un widget propio’ está cerrado y no admite más respuestas.

Añadir un widget propio

¿No has encontrado lo que necesitabas?

Ponte en contacto con nosotros

Explorar nuestras guías

Aplicaciones móviles

Redes sociales