Adblock Detectado

Nuestro sitio se mantiene gracias a la publicidad, por favor Desactiva Adblock para seguir navegando

He desactivado Adblock
En este tutorial veremos como agregar una caja de suscripción para tu barra lateral o gadget. Esta caja de Suscripcion tendra Facebook, Twitter, Google +, Feedburner Email. y un lindo recuadro animado de feed.


Ante de comenzar veremos una demostración:
(La demostracion la encontraras en nuestro blog) 


Comencemos:

  • Paso 1: Vamos a Blogger>>Diceño>>Añadir nuevo gadget>> HTML/Javscript
  • Paso 2: Dentro del gadget agregaremos el siguiente código HTML
<style>
.bssubsboxfull{
width:255px;margin-left:5px;background:#f7f7f7;
padding-top:10px;
padding-right:10px;
padding-bottom:15px;
padding-left:10px;
color:#333;
height:110px;
border:1px solid#ddd;
margin-bottom:0px;
}
.bsrss-boxicon{padding-left:10px;margin-right:1em;font-size:13px;font-weight:bold;}
.bsrss-boxicon a:hover{color:#555btext-decoration:none}
.bsemail-boxicon{padding-left:0px;font-size:13px;font-weight: bold;}
.bsemail-boxicon a:hover{color:#555; text-decoration:none}
.bstopbaricons{float:right;width:246px;margin:0 0 0px 0;padding-left:3px;margin-top:2px;margin-right:4px}
.bstopbaricons ul{margin:0;padding:0}
.bstopbaricons li{float:left;list-style:none;margin:0 10px 0 0;padding:0}
li.last{float:right;margin:5px 0 0 0;padding:0}
.bstopbaricons li:hover{opacity:0.8;filter:alpha(opacity='80');}
.bsfeedmail{float:left;margin:0 0 0px 0;padding-left:160px;margin-top:-140px}
<!--http://www.tutoriales-blogger.info/-->
</style>
<div style='margin-top:10px; margin-left:-2px;'>
<div class='bssubsboxfull'>
<div class='bstopbaricons'>
<ul>
<li>
<a href='https://www.facebook.com/TutorialesBlogger' rel='nofollow' target='_blank'><img height='25' src='http://2.bp.blogspot.com/-7Vg0Q9TCoK8/UTL0FyFJIvI/AAAAAAAAB5Q/ZHae6oJ54r0/s320/BS+facebook.png' title='Facebook' width='25'/></a></li>
<li><a href='https://twitter.com/TutorialesBlogg' rel='nofollow' target='_blank'><img height='25' src='http://1.bp.blogspot.com/-RrTwHeIltCg/UTL0G4gnoeI/AAAAAAAAB5k/5-ts5vENUQY/s320/BS+twitter.png' title='Twitter' width='25'/></a></li>
<li><a href='https://plus.google.com/u/0/102309934171768207604' rel='nofollow' target='_blank'><img height='25' src='http://2.bp.blogspot.com/-V0o6lIJuCh4/UTL0F3QCNXI/AAAAAAAAB5M/lmpAYxVO2eU/s320/BS+googleplus.png' title='Google Plus' width='25'/></a></li>
<li><a href='http://feeds.feedburner.com/tuto/blogger' rel='nofollow' target='_blank'><img height='25' src='http://4.bp.blogspot.com/-yjQ59MiZT7c/UTL0GouW1FI/AAAAAAAAB5Y/92BmKE5ujD8/s320/BS+rss.png' title='RSS Feed' width='25'/></a></li>
<li><a href='http://feedburner.google.com/fb/a/mailverify?uri=/tuto/blogger' rel='nofollow' target='_blank'><img height='25' src='http://4.bp.blogspot.com/-5iseT4RONFM/UVCATOFU5nI/AAAAAAAACQQ/CSukAkIMkLQ/s320/BS+Email+Contact.png' title='Mail' width='25'/></a></li>
</ul>
</div>
<div style='padding-top:10px;'>
</div>
<form action='http://feedburner.google.com/fb/a/mailverify?uri=tuto/blogger' method='post' onsubmit='window.open(\'http://feedburner.google.com/fb/a/mailverify?uri=/tuto/blogger', \'popupwindow\', \'scrollbars=yes,width=550,height=520\');return true' target='popupwindow'><p><input name="email" style="width:222px; border: 1px solid #e5e5e5;margin-left:6px; padding: 6px; font-size:13px; color: #333; font-weight: bold;" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Ingresa tu Email&quot;;}" onfocus="if (this.value == &quot;Ingresa tu Email&quot;) {this.value = &quot;&quot;;}" type="text" value="Ingresa tu Email" /></p><input name="uri" type="hidden" value="/tuto/blogger" /><input name="loc" type="hidden" value="en_US" /></form>
<div style='padding-top:10px;'></div>
<a class='bsrss-boxicon' href='http://feeds.feedburner.com/tuto/blogger' rel='nofollow' target='_blank'><img src="http://3.bp.blogspot.com/-nJuflZiFasA/UVCATXbtiLI/AAAAAAAACQM/pvQekvQpxjU/s320/BS+feed.png"/> Feed</a>
<a class='bsemail-boxicon' href='http://feedburner.google.com/fb/a/mailverify?uri=tuto/blogger' rel='nofollow' target='_blank'><img src="http://4.bp.blogspot.com/-6WyyGT0tD5A/UVCATGtD45I/AAAAAAAACQI/UwwIchNRE0k/s320/BS+email.png"/>Email</a>
<div style="float:right;margin-right:5px;">
<a href="http://feeds.feedburner.com/tuto/blogger"><img src="http://feeds.feedburner.com/~fc/tuto/blogger?bg=000000&amp;fg=ffffff&amp;anim=1&amp;label=listeners" height="26" width="88" style="border:0" alt="" /></a>
</div>
</div></div>

Nota:- Solo debes de cambiar ROJO por las de tu ID 
- - 1 Comentarios
Tag

Comentarios (1)

:))
:((
:D
:(
:)
:-)
;)
=))
:p
=.=
==
^_^
/=he
:*
/=r
/=l
:v
/=ok
/=clap
(y)
(yy)
/=hi
/=j
/=hup
/=hd
/=hl
/=hr
/=s
<3

Instrucciones Para omentar

Incertar Enlace

Utilice el codigo <a href='LINK'> EJEMPLO </a>

Cargar Imagen

[img] LINK_ANH [/img] -Use el codigo para cargar una imagen.

Formato Word

<b> negrita </b>
<i> cursiva </i>
<u> texto subrayado </u>
<strike> texto tachado </strike>

Insertar un Fragmento de codigo

Primero use esta herramienta para codificar el codigo que quiera agregar.
Luego utilice el codigo [code] CODIGO HTML [/code]

Cerrar