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 a nuestro blog un gadget con tus Redes Sociales. Como hemos dicho en muchos tutoriales que hemos creado sobre Redes Sociales sirven para aumentar el trafico en nuestro
blog, con este tutorial no aremos la acepción. Solamente le daremos un hermoso toque con estilo css a nuestra Redes Sociales

Antes de comenzar vemos una demostración: 


Comencemos

  • Paso 1: Vamos a Blogger>>Plantilla>> Edición HTML>>
  • Paso 2: Buscamos la siguiente linea (Ctrol + F) 
]]></b:skin>

  • Paso 3: Justo por encima de ]]></b:skin> pegamos el siguiente código HTML 
#contact {
margin:0 auto;
margin-top:-60px;
background:url(http://3.bp.blogspot.com/-7c_xDCUC4z8/Typx7XhvTOI/AAAAAAAAA_I/vNhRXYBtD3k/s1600/bgnav.png) repeat scroll 0% 0% padding-box rgb(14, 14, 14);
border:8px solid transparent;
overflow:hidden;
width:720px;
box-shadow:0pt 0pt 8px rgba(0, 0, 0, 0.5);
height:auto;
}
#contact a, #contact a:visited {
color:rgb(230, 230, 230);
text-decoration:none;
-webkit-transition: text-shadow .2s linear;
-moz-transition: text-shadow .2s linear;
-o-transition: text-shadow .2s linear;
transition: text-shadow .2s linear;
}
#contact a:hover {
color:rgb(230, 230, 230);
text-shadow:0pt 0pt 3px rgb(255, 255, 255);
text-decoration:none;
}
#contact-kolom-1 {
background:url(http://cdn1.iconfinder.com/data/icons/WPZOOM_Social_Networking_Icon_Set/24/rss.png) no-repeat right bottom transparent;
width:180px;
height:45px;
float:right;
display:inline;
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
-o-transition: all .2s linear;
transition: all .2s linear;
}
#contact-kolom-1:hover {
background:url(http://cdn1.iconfinder.com/data/icons/WPZOOM_Social_Networking_Icon_Set/24/rss.png) no-repeat right bottom #DF7401;
}
#contact-kolom-2 {
background:url(http://cdn1.iconfinder.com/data/icons/GooglePlus_IconSet/24x24/1.png) no-repeat right bottom transparent;
width:180px;
height:45px;
float:right;
display:inline;
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
-o-transition: all .2s linear;
transition: all .2s linear;
}
#contact-kolom-2:hover {
background:url(http://cdn1.iconfinder.com/data/icons/GooglePlus_IconSet/24x24/1.png) no-repeat right bottom #333333;
}
#contact-kolom-3 {
background:url(http://1.bp.blogspot.com/-NBH_jsbNQ90/Typyk4KdQjI/AAAAAAAAA_g/HOqBgRDTDPg/s1600/twitter-icon.png) no-repeat right bottom transparent;
width:180px;
height:45px;
float:right;
display:inline;
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
-o-transition: all .2s linear;
transition: all .2s linear;
}
#contact-kolom-3:hover {
background:url(http://1.bp.blogspot.com/-NBH_jsbNQ90/Typyk4KdQjI/AAAAAAAAA_g/HOqBgRDTDPg/s1600/twitter-icon.png) no-repeat right bottom #00ACBF;
}
#contact-kolom-4 {
background:url(http://2.bp.blogspot.com/-6qWUrf8tSFg/TypyuXWhiSI/AAAAAAAAA_o/0zmEVmjdV10/s1600/facebook-icon.png) no-repeat right bottom transparent;
width:180px;
height:45px;
float:right;
display:inline;
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
-o-transition: all .2s linear;
transition: all .2s linear;
}
#contact-kolom-4:hover {
background:url(http://2.bp.blogspot.com/-6qWUrf8tSFg/TypyuXWhiSI/AAAAAAAAA_o/0zmEVmjdV10/s1600/facebook-icon.png) no-repeat right bottom rgb(59, 89, 152);
}

  • Paso 4: Guardamos los cambios realizados en la plantilla.

Ahora agregaremos nuestro gadget de Redes Sociales en un gadget  

  • Paso 5: Vamos a Blogger>> Diseño>>Añadir un gadget.
  • Paso 6: Dentro de nuestro gadget pegamos el siguiente código HTML 
<div id="contact">
<div id="contact-kolom-1">
<a href="http://feeds.feedburner.com/tuto/blogger">RSS Feed<br /><span style="font-size: 10px; padding: 0px;">Suspcribete en RSS</span></a></div>
<div id="contact-kolom-2">
<a href="https://plus.google.com/u/0/102309934171768207604" target="_blank">Google +<br /><span style="font-size: 10px;"> Síguenos en Google+</span></a></div>
<div id="contact-kolom-3">
<a href="https://twitter.com/TutorialesBlogg" target="_blank">Twitter<br /><span style="font-size: 10px;"> Síguenos en Twitter</span></a></div>
<div id="contact-kolom-4">
<a href="https://www.facebook.com/TutorialesBlogger" target="_blank">Facebook<br /><span style="font-size: 10px;"> Síguenos en Facebook</span></a>
</div>
</div>
Nota:- Puedes cambiar lo que esta en rojo por las de tus Redes Sociales 
- - 0 Comentarios
Tag

Comentarios (0)

:))
:((
: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