Nuevas entradas

Botones de redes Sociales con efecto deslizante para blogger

Botones de redes Sociales con efecto deslizante

  • Botones de redes sociales deslizantes...Ahora espacio en tu web.













1º Vamos a Diseño :


2º Añadimos un Gadget :




3º Seleccionamos y buscamos :




4º  Abrimos y pegamos el siguiente Código :

<style>
#iconptb1 {
position:fixed;
top:100px;
left  :-197px;
float:right;
width:300px;
display:block;
padding:0;
z-index:1004;
border-radius:10px;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}


#iconptb1:hover {
left:0px;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
div.likeboxwrap {
margin-top:-5px;
margin-left :-45px;
width:190px;
height:65px;
background-color:#fff;
overflow:hidden;
border-radius:10px;
}
</style>

<div id='iconptb1'>
<img src='http://picasion.com/pic70/2930529666647f669fb55884a46f26b3.gif' style='float:right ;'/>
<div style='background:background:#fff;  position: fixed;  width: 10%; opacity: 0.9; height:60px;  margin-right:38px;padding: 0px 0px 0pt 50px;border-radius: 0px 0px 0px 0px;'><span><span><div class='likeboxwrap'>
<style type='text/css'>
ul#m-soc6{  margin:19px 0 0 10px; padding:0; width:190px; height:55px}
ul#m-soc6 li{list-style:none; margin:4px; padding:0; float:left; border:none}
ul#m-soc6 li a{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOjW3f_MOjtOQ9VpkqITykN0ajHHRrD7NQaAuGvTmqaqX4DFDQ-0fxZ_3wPt6ztL12KU5TGC5Mk-Oar_dRGS5OZle63vQhjGp4S0sK3MbLNg-ouV6XGTEpy9RgunfqFedemkpvN1iAlbJa/s400/sprite6-compartidisimo.png) no-repeat 0 0; margin:0; padding:0; display:block; position:relative; width:32px; height:32px; overflow:visible}
ul#m-soc6 li a.twitter{background-position:0 0}
ul#m-soc6 li a.facebook{background-position:-32px 0}
ul#m-soc6 li a.google{background-position:-64px 0}
ul#m-soc6 li a.rss{background-position:-96px 0}
ul#m-soc6 li a.twitter:hover{background-position: 0 -32px;}
ul#m-soc6 li a.facebook:hover{background-position: -32px -32px;}
ul#m-soc6 li a.google:hover{background-position:-64px -32px;}
ul#m-soc6 li a.rss:hover{background-position:-96px -32px;}
ul#m-soc6 li a span{background:#555; position:absolute; top:-5px; left:-10px; width:auto;opacity:0; padding:3px; text-align:left; color:#fff; filter:alpha(opacity=0); white-space:nowrap;text-decoration:none; border-radius:3px; font-size:12px; -webkit-transition:all 0.25s ease-in-out; -moz-transition:all 0.25s ease-in-out; -o-transition:all 0.25s ease-in-out; -ms-transition:all 0.25s ease-in-out; transition:all 0.25s ease-in-out}
ul#m-soc6 li a:hover{text-decoration:none}ul#m-soc6 li a:hover span{opacity:.7; filter:alpha(opacity=70); top:-27px}
</style>
<ul id='m-soc6'><li><a class='twitter' href='Url Twitter'><span>Twitter</span></a></li><li><a class='facebook' href='Url Facebook'><span>Facebook</span></a></li><li><a class='google' href='Url Google+'><span>Google+</span></a></li><li><a class='rss' href='Url Rss'><span>Suscribete</span></a></li></ul>
<!-- by: www.paratusblogs.com -->
</div></span></span></div></div>




Donde nos pone Url... en rojo ponemos el url de nuestra red social

 Guardamos y listo!


Seguir Leyendo...

Poner Imagen de fondo a un post para blogger

Poner Imagen de fondo a un post

  • En este post  veremos lo fácil que es poner una imagen de fondo a cualquiera de nuestras entradas.







1º Vamos a Entradas :



2º Cambiamos a HTML:






3º Pegamos el siguiente código 
:
<div style="background-image: url(Url-De-La-Imagen); padding: 40px;">

Donde pone URL-DE-LA-IMAGEN  ponemos el url de la imagen que queremos poner de fondo.

  Y cuando terminamos de escribir nuestra entrada cambiamos otra vez a Html y al final del todo ponemos esto :

</div>


Seguir Leyendo...

Iconos de redes sociales tipo Boton con efecto 3D para Tumblr

Iconos de redes sociales tipo Boton con efecto 3D 

  • Fantásticos botones de redes sociales y fáciles de poner.











Vamos a: Personalizar



»Le damos a la opción :Editar HTML







3a)»Pulsamos Ctrl+F 

buscamos <head> 


3 b)»Y justo antes pegamos el siguiente codigo:




3b Y justo debajo pegamos este otro:

<ul id="m-soc6"><li><a class="twitter" href="Url Twitter"><span>Twitter</span></a></li><li><a class="facebook" href="Url Facebook"><span>Facebook</span></a></li><li><a class="google" href="Url Google+"><span>Google+</span></a></li><li><a class="rss" href="Url Rss"><span>Suscribete</span></a></li></ul>

Donde nos pone Url... en rojo ponemos el url de nuestro perfil.

 Guardamos y listo!
Seguir Leyendo...

Slider que nos enseña las ultimas entradas para Blogger (jQuery)


Slider que nos enseña las ultimas entradas


»Vamos al blogger



  • Con este Slider  podemos poner nuestras ultimas entradas a la vista, Abu Farhan fue el que adaptó del Easy Slider, es un  slider hecho con jQuery .












Luego seleccionamos plantilla


 2»Luego seleccionamos la opción “Editar HTML”

Después apretamos las teclas Ctrl + F



 Buscamos:  ]]></b:skin>

 Y justo esto antes de  ]]></b:skin> pegamos antes  lo siguiente:




 Buscamos </head> pegamos antes el siguiente script :



   Tambien buscamos </body> y antes pegamos :






8» Por último Vamos a Diseño :


9º Añadir Gadget :




10ºSeleccionamos y buscamos :









-------------------------------------------------------------------------------------------------
11º Abrimos y pegamos el siguiente Codigo :

<div id="slider">
<script style="text/javascript">
var numposts_gal = 10; // Cuantas entradas queremos que se vean
var numchars_gal = 130; // Cuantos  caracteres  queremos que aparezca 
var random_posts = false;
</script>
<script src="http://nombre_del_blog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script>
</div>
----------------------------------------------------------------------------------------------------

(Donde esta en azul ponemos el nombre de nuestro blog)
12º ¡Guardamos y listo!

Si quieres cambiar el tamaño tenemos que buscar ( width:480px     y    height:320px ) y cambiarlo por el tamaño que mejor nos venga.



Seguir Leyendo...

Un completo widget de suscripcion para blogger.

Completo Widget de suscripción .





  • Este widget es muy sencillo de agregar a su blog con el fin de darle un toque elegante y de diseño.









Vamos a diseño :



Le damos a añadir un gadget:


Seleccionamos y buscamos :



Abrimos y pegamos lo siguiente:


<style>
#sidebar-subscribe-box{width:300px;border:1px solid #aaa;border-radius:3px;padding:3px 0}
 .sidebar-subscribe-box-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYcX0G64HPvHI-i08GFoGeKDtNdzpI50bc6_vjIkoXTjPaN8fNZ_5r1LMqF1SXQdCv3eGWJXTh7nvn1X-NJVX-I2wCzfBpKeAZ1KTXIQRBHXfKm8AJjNG-R2yvv5Btkv7j3dmxP1SnsCo/s1600/background.png) repeat scroll 0 0 #f7f7f7;color:#111;font-size:14px;line-height:20px;padding:1px 20px  10px;text-align:center;text-transform:uppercase}
 .sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0}form.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0 0;width:auto}
 .sidebar-subscribe-box-email-field{-moz-border-radius:4px;-webkit-border-radius:4px;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1S7FVzgNW8I8mOQUepLcSNZbsmXqIHcdi5E3ECTtncLIacW96ZMLUiQLrbryvBTrMooEk-SbzJ8BdRDYO88ywuh1SYmgOYou302Zk7A7p0OxawXVwICZ5-MQASyh7OYsAeG7CggKMylM/s1600/icons.png) no-repeat 0 -27px;border:1px solid #ccc;border-radius:4px;color:#444;margin:0 0 15px;padding:10px 40px;width:68%}
 .sidebar-subscribe-box-email-button{background:#09f;border:1px solid #007fff;box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent;color:#fff;cursor:pointer;font-family:verdana;font-weight:700;padding:10px;text-shadow:1px 1px 0 rgba(0,0,0,.4);text-transform:uppercase;width:100%}
 .sidebar-subscribe-box-email-button:hover,.sidebar-subscribe-box-email-button:focus{background:#1ca4ff}
 .sidebar-subscribe-box-email-button:active{-moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;outline:0}iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table{width:100%}embed{border-radius:3px;-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);background:#FFF;border:1px solid #ddd;box-shadow:0 2px 4px rgba(0,0,0,0.2);margin:0;padding:4px 4px 4px}
 #footer-section{border-top:1px solid #aaa;box-shadow:inset 0 4px 6px -3px #aaa;font-family:cambria;font-size:14px;height:100px;margin:10px -30px 5px;padding:0 30px;text-align:center;width:100%}
a.social-icons{margin-right: 5px;height:45px;width:45px;}
a.social-icons:hover { opacity: .7; filter:alpha(opacity=70);}
</style>
<br />
<div id="sidebar-subscribe-box">
<div class="sidebar-subscribe-box-wrapper">
<br />
<a class="social-icons" href="https://facebook.com/Tu Pag FB"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn4x0f6-HMLGNdkAwXuIzQLWYDaBqGSZUbs5sGt3ugWUeUl06H8Cf0AMaVmHsUK4WsP2-vRhXZiCN26SCTOaKVY5pBeO7q-6hwT8utlo-ymIEyGnmOK99nmUJ7t1L-Tq2fCG2fXik2J-vs/s1600/Bloggertrix-facebook.png" /></a><a class="social-icons" href="https://twitter.com/UsuarioTwitter"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk1DeOe_-0MA6V_QscK1LRJG3ZRvRTTHJO6Ix86tASKSteuvGtTDvPeJQrIpSBh6FtLJr0XTPEJ6pMFQwruDUdknaBgKxshYQ1wKSgj9BNQIYerzzvP85T7P9Is2CkgDkPq-NS0iDnUOa7/s1600/bloggertrix-twitter.png" /></a><a class="social-icons" href="Url Google +"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAQFIEBjIgP_IBVThHld2H9Xs4AOf0F8vUrMvj_Osz4iMRKS7gVRyHhvjTdKBcLTKSkPLtdea33NElvqiJgZslF0duHsofel8MCsqwg5bmcUnLzq1bprKHr8LmiHs-R9F5yryOKJ9HKFD5/s1600/Bloggertrix-Googleplus.png" /></a><a class="social-icons" href="http://feeds.feedburner.com/TuFeedBurrner"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFMT4rdxNX_Tfp6lzocQuQJ7t7d7BJ-0AO6irQIWEOVnYseBO7ehaZkvpJy-M3MMPeYY5bSPKxqbgsBPhIRig2nUXqyvn2qhTvrfYNUJA5DiHBGQHstt7Ju2j_n1s88y-uGhamIKXXgw4i/s1600/Bloggertrix-Rss.png" /></a><br />
<br />
<div class="sidebar-subscribe-box-form">
<form action="http://feedburner.google.com/fb/a/mailverify?uri=id_Feed" class="sidebar-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Tu_id_Feedburner', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="uri" type="hidden" value="bloggertrix" /><input name="loc" type="hidden" value="en_US" /><input autocomplete="off" class="sidebar-subscribe-box-email-field" name="email" placeholder="Tu Email..." /><input class="sidebar-subscribe-box-email-button" title="" type="submit" value="! Enviar !" /></form>



Ahora solo tienes que cambiar lo que esta en azul por tus datos.

 Guardamos y listo!

Seguir Leyendo...