crear un widget temporal
-
He firmado una petición virtual y quería compartirla en mi blog añadiendo un widget.
Tengo este codigo copiado
<!– 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»><img alt=»Incendio» height=»195″ src=»http://actuable.es/system/images/1734/medium/incendio.jpg» width=»300″ /></div>
<div class=»act_wid_title»>
<h1>Exige al Gobierno Valenciano que no permita construir en suelo quemado</h1>
</div>
<div class=»wc signs_info»>
<div class=»people_count»>
<small>Han actuado</small>
<span id=»actuable_signs_count_1734″>0 personas</span>
</div>
<div class=»signs_left»>
<small>Nos faltan</small>
<span id=»actuable_signs_left_1734″>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/1734/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 Norm. de Uso y Pol. de Priv.</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»>
Firma la petición
</div>
</div><!– .act_now –>
</div><!– .wc –>
</div><!– .widget_sign –>
</div><!– .wtheme –><script type=»text/javascript» src=»http://actuable.es/a/exige-al-gobierno-valenciano-no-permita-construir-suelo/js»></script>
<script>
document.getElementById(«actuable_signs_count_1734″).innerHTML = supporters_count + » persona» + (supporters_count == 1 ? » : ‘s’);
document.getElementById(«actuable_signs_left_1734″).innerHTML = suppors_pending + » firma» + (suppors_pending == 1 ? » : ‘s’);
document.getElementById(«actuable_authenticity_token»).value = auth_token;
</script>
<!– /WIDGET ACTUABLE – T1.1 –>
Pero no como ponerlo
Es posible instalarlo????
Como lo puedo hacer ?????El blog con el que necesito ayuda es (visible solo para usuarios conectados).
-
No puedes utilizar ese código en WordPress.com ya que contiene scripts.
Las opciones son dos:
a) fijarte si hay algún código que no contenga scripts (y en lo posible que diga que se puede usar en WordPress.com)b) incluir un enlace a la página donde está la petición
-
Gracias
Entonce tengo que poner el widget de texto con el enlace
O lo he entendido mal??? -
Puedes poner una imagen que sea un enlace a esa web utilizando el widget de texto o el widget de imagen.
O puedes poner un texto que sea un enlace a esa web utilizando el widget de texto -
- El debate ‘crear un widget temporal’ está cerrado y no admite más respuestas.
Foros WordPress.com en Español 