sábado, julio 25, 2015

[ TutosBlogs ] ¿Como diseñar plantillas de blogger? ( Parte 6 )

By: Ghaaby Captor | Fecha: 7/25/2015 |
 mis loqueros!! aquí vengo con mas tutorial esta vez me enfoque en redes sociales!





<style> 
#stp-bg{ 
            display:none; 
            position:fixed; 
            _position:absolute;
            height:100%; 
            width:100%; 
            top:0; 
            left:0; 
            background:#000000; 
            z-index:998; 
#stp-main{              position:fixed;              top:220px;              _position:absolute; /* hack for IE 6*/              display:none;              width:450px;              border:7px solid #2f2f2f;              background:#fff;              z-index:999;          border-radius: 9px;              -moz-border-radius: 9px;              -webkit-border-radius: 9px;              margin:0pt;              padding:0pt;              color:#333333;              text-align:left;              font-family:arial,sans-serif !important;              font-size:13px;  } #stp-title{              font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif !important;              font-size:18px;              padding:13px 0 13px 15px;  } #stp-close{              float:right;              font-size:14px;              font-weight:bold;              font-family:Verdana, Geneva, sans-serif;              color:#777777 !important;              margin:0 13px 0 0;              border-bottom:0px !important;              text-decoration:none !important;  } #stp-close:hover{              text-decoration:none !important;  } #stp-msg{              background:#4074CF;              padding:10px 15px;              color:#ffffff;  } #stp-bg {     background: #000 none repeat scroll 0 0;     display: none;     height: 100%;     left: 0;     position: fixed;     top: 0;     width: 100%;     z-index: 998; } #stp-main {     background: #eee none repeat scroll 0 0;     border: 2px solid #802daf;     border-radius: 5px;     box-shadow: 0 0 10px #530580;     color: #333333;     display: none;     font-family: arial,sans-serif !important;     font-size: 13px;     padding-bottom: 0;     padding-right: 0;     padding-top: 0;     position: fixed;     text-align: left;     top: 220px;     width: 480px;     z-index: 999; } #stp-title {     background: #cd9cff none repeat scroll 0 0;     color: #fff;     font-family: "Lucida Sans Unicode","Lucida Grande",sans-serif !important;     font-size: 25px;     padding: 13px 0 13px 15px;     text-shadow: 0 0 2px #6605ca;     text-transform: uppercase; } #stp-close {     border-bottom: 0 none !important;     color: #000 !important;     float: right;     font-family: Verdana,Geneva,sans-serif;     font-size: 14px;     font-weight: bold;     margin: 0 13px 0 0;     text-decoration: none !important;     text-shadow: 0 0 0 #fff; } #stp-close:hover {     text-decoration: none !important; } #stp-msg {     background: #713bba none repeat scroll 0 0;     color: #ffffff;     font-family: Arial,Helvetica,sans-serif !important;     font-weight: bold;     line-height: 20px;     padding: 10px 15px; } #stp-buttons {     margin: 25px 0 25px 120px;     padding: 0 0 0 15px; height: 80px; } #stp-bottom {     background: #cd9cff none repeat scroll 0 0;     border-top: 1px solid #dde0e8;     color: #000;     padding: 15px 10px; } #stp-counter {     font-size: 11px !important;     font-weight: bold;     text-align: right; } .stp-button {     float: left;     width: 120px; } .stp-clear {     clear: both !important; } </style>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>  <script src="http://connect.facebook.net/es_LA/all.js#xfbml=1"></script>  <script src="http://platform.twitter.com/widgets.js" type="text/javascript">  </script>  <script type="text/javascript" src="http://yourjavascript.com/114356611/jquery-stp-min.js">  </script>         <script>       $(document).ready(function(){                                                           $().socialTrafficPop({  timeout: 30,   /*tiempo de espera*/ title: "Bienvenido a mi blog",    /* Titulo*/                   /* Mensaje*/  message: 'No te olvides de Recomendarnos  <em> en las redes sociales</em>! ',                    /* boton de google+*/  google_url: "http://ghaabycaptor.blogspot.com/", google_size: "tall",                    /* boton de facebook*/  fb_url: "https://www.facebook.com/holamisloqueros",   fb_layout: "box_count",                     closeable: true,  advancedClose: false,                     opacity: '0.45',  /* boton twitter*/  twitter_on: true               });                   });       </script>


<!-- REDES SOCIALES -->



<div class="widget-content">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> &nbsp; <script type="text/javascript">$(window).scroll(function(){if($(document).scrollTop()>=$(document).height()/4)$("#IGsocialslide").show("slow");else $("#IGsocialslide").hide("slow");});function closeIGsocialslide(){$('#IGsocialslide').remove();$.ajax({type:"POST",url:"/facebookpage.php"});}</script>  



<style type="text/css">  #IGsocialslide{  background:#A9E2F3;  border-radius:9px;  -moz-border-radius:8px;  -webkit-border-radius:8px;  -moz-box-shadow:inset 0 0 4px #333;  -webkit-box-shadow:inset 0 0 4px #333;  box-shadow:inner 0 0 3px #333;  padding:12px 14px 12px 14px;  width:300px; box-shadow: 1px 1px 10px #2E9AFE; position:fixed;  bottom:13px;  left:2px;  display:none;  z-index:3;  height:100px;}  </style>





<div style="display: block;" id="IGsocialslide"> <a style="position:absolute;top:20px;right:10px;color:#000;font-size:10px;font-weight:bold;" href="javascript:void(0);" onclick="return closeIGsocialslide();">X</a><div style="text-align: center;">

<img border="0" style="margin-bottom: -10px;"src="http://2.bp.blogspot.com/-AObBf2sK_Ws/VYX6R4vYcrI/AAAAAAAAZjU/-Qd_JjInT-4/s1600/AVISO.png" /></div>

 <div style="float:left; margin:15px;">





<table>

  <tr>









<td>



<a href="//plus.google.com/u/0/115179348130901215254?prsrc=3"

   rel="publisher" target="_top" style="text-decoration:none;">

<img src="//ssl.gstatic.com/images/icons/gplus-64.png" alt="Google+" style="border:0;width:64px;height:64px;  margin-left: -20px;"/>

</a>



</td>











    <td>



<div class="fb-like" data-href="https://www.facebook.com/holamisloqueros" data-width="300px" data-layout="box_count" data-action="like" data-show-faces="false" data-share="false"></div>



</td>











 

<td>



<script src="https://apis.google.com/js/platform.js"></script>



<div class="g-ytsubscribe" data-channelid="UC1CEJvsU8cQW6zlKIPg8Mzw" data-layout="full" data-count="default"></div>



</td>







  </tr>

</table>







 <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></div> </div>   <div class="clear"></div> 

</div>



Botón Youtube
https://developers.google.com/youtube/youtube_subscribe_button?hl=es


Botón Facebook
https://developers.facebook.com/docs/plugins/like-button?locale=es_LA


Botón Google+
https://developers.google.com/+/web/+1button/?hl=es






  
avatar
Bam
Admin
25 de julio de 2015, 7:57

Yo soy pesima en esto, así que muchas gracias por ponerlo n.n
Besos!

avatar
S4ku-Chan
Admin
25 de julio de 2015, 10:09

genial el tuto!!! yo con el diseño de plantillas blogger no doy siempre estoy en plantillas basicas XDDD

avatar
25 de julio de 2015, 12:43

Hola!
Ayy gracias por continuar con los tutoriales.
Besos

avatar
Natalia
Admin
25 de julio de 2015, 14:55

Hola Ghaby: Mil gracias por estos post vienen fenomenal. De hecho acabo de cambiar la configuración del blog a ver que te parece, muchas bloggers me habéis ayudado entre ellas Isa de Believe inyourself gracias a ti. Por cierto he descubierto la web pinkmonkey para hacer encabezamientos es genial no requiere ni registrarte por si te puede interesar aunque igual ya la conoces jeje. Bss

avatar
25 de julio de 2015, 16:20

No conocía esta faceta tuya de ediciones de blogs, es algo que yo estoy aprendiendo y siempre se agradece un apoyo.

Un abrazo
Paola.

avatar
25 de julio de 2015, 16:23

Tengo que asimilar bien la información, esto es algo complicado para mi XD se agradece mucho el tutorial! ^^
Saludosss!

avatar
26 de julio de 2015, 1:58

No te lo he dicho antes, pero me gustan mucho tus tutoriales para diseñar plantillas de blogger, incluso me inscribí a tu canal de youtube.

avatar
Lee Rae Mi
Admin
26 de julio de 2015, 5:27

waaa me encanta este tipo de entrada~~~gracias~
saludos

avatar
Shine
Admin
26 de julio de 2015, 8:32

Interesante entrada!!
besitos

avatar
Pam Sandoval
Admin
26 de julio de 2015, 13:49

Genial :) me encantooo !

avatar
26 de julio de 2015, 19:08

Yo siempre me pierdo con el lenguaje html, pero gracias tal vez lo aplique si me animo

avatar
28 de julio de 2015, 21:15

o muchas gracias gran aporte :3

avatar
Bunny Aship
Admin
29 de julio de 2015, 21:06

Muchas gracias por el post yo no cacho mucho sobre enchular el blogger mi pololo generalmente me lo deja bonito asi que se agradece
Cariños

avatar
Arual Maddox
Admin
31 de julio de 2015, 6:17

Hola!!!, esta entrada es ideal para comenzar a diseñar.
besos

avatar
6 de agosto de 2015, 3:25

¡Hola! Algún día me animaré a crear mi propia plantilla pero por ahora no, que es mucho trabajo.
Gracias por el tutorial :)
¡Un beso!

avatar
6 de agosto de 2015, 4:57

¡Hola!
Muchas gracias por el tutorial. Por ahora no creo que lo use ya que soy una patata con estas cosas, me voy valiendo de las plantillas de google y de las que veo gratis en internet.
Un beso^^

avatar
S4ku-Chan
Admin
6 de agosto de 2015, 6:15

Genial tutorial aunque nyo no tengo redes sociales en el blog XDDDD gracias!

avatar
Zaebe
Admin
6 de agosto de 2015, 7:58

Muy buena entrada!!
Lástima que no tenga mucho tiempo ni paciencia para hacerlo... pero me encanta.

Un saludo!

avatar
7 de agosto de 2015, 7:00

Holaaa! Se ve genial el tutorial. Lo tendré en cuenta cuando me canse del estilo que tengo ahora ^^
¡Un besazo!

avatar
10 de agosto de 2015, 3:44

Muy bueno el tutorial! Bonito blog guapa, te espero por el mío aver si te parece que nos sigamos por gfc?Saludos! ☺

avatar
Arual Maddox
Admin
17 de agosto de 2015, 4:36

¡Hola guapa! me gusta bastante el tutorial, también me gustaría saber como pones el cartelito que sale en tu blog después de un rato y dice "Suscribete", podrías hacer un tutorial? actualmente no tengo pensado usarlo pero si tengo pensado utilizar algo así para promocionar mi próximo blog nuevo que tengo en mente.
Espero que tengas una buena semana!!, un beso guapa.

avatar
Yukii
Admin
19 de agosto de 2015, 17:35

Hola!
Me encantan tus tutoriales!! siempre son de muchísima ayuda!! tal vez lo use próximamente!!
Muchas gracias por compartirlo!!
Muchos besitos!~

avatar
21 de agosto de 2015, 3:09

¡Buenas! He llegado a tu blog por casualidad y me interesa quedarme como seguidora si estás de acuerdo en hacer lo mismo con mi blog :) Si es así dímelo en un comentario y volveré para seguirte! :)

avatar
Lyra
Admin
28 de agosto de 2015, 16:25

Es genial para empezar a diseñar ^_^¡Gracias por hacer estos tutoriales! Son geniales ^_^

avatar
Rukii Holic
Admin
2 de septiembre de 2015, 19:15

Hola!
esto es algo que debi haber aprendedido cuando comence blogger :c
pero que tuve que aprender a la mala que bueno que aqui puedas ayudar a todas las niñas que estan iniciando en estoo *A
millones de saludos linda c: y me gustaria leer mas entradas de ayuda como esta! *A*

avatar
genesis
Admin
11 de septiembre de 2015, 16:48

Excelente entrada :D
me ha ayudado n.n
Saludoss <3

avatar
Wayra Monroy
Admin
27 de septiembre de 2015, 16:53

Muy util la info:)
un besto:
wayra♥
pd;estoy de vueltaaaa

avatar
Rei Osaki:
Admin
28 de septiembre de 2015, 5:35

Holaaa! Buen tutorial, es muy bueno, gracias!! ^^

Besos!

avatar
Esther H
Admin
29 de septiembre de 2015, 5:10

Hola Ghaaby

esta muy bueno el tuto, pero yo soy pésima en códigos y esas cosas ...

saluditos

avatar
20 de octubre de 2015, 8:58

I totally enjoyed this post! Happy Wednesday dear! :)

xoxo;
STYLEFORMANKIND.COM
Facebook
Instagram
Bloglovin

avatar
» Kat.
Admin
21 de octubre de 2015, 0:03

Qué entrada más útil :) Yo antes modificaba todo lo que podía las plantillas de blogger, ahora siempre me descargo alguna que encuentro por ahí e intento personalizarla un poco.

Saludos linda ^^

avatar
bea c:
Admin
22 de octubre de 2015, 17:57

Muchas gracias por compartir este tuto <3 está buenísima lo tomaré en cuenta par mi próxima plantilla , saludos Saku <3 ya extrañaba pasarme por aquí.

avatar
24 de octubre de 2015, 3:09

:O tu yo ya nos seguiamos desde hac mil pero pfff!! en que pedazo de blogera te has converido!! :OO!!
enorabuena!!!

avatar
Eva Fraile
Admin
25 de octubre de 2015, 14:42

¡Qué blog tan bonito acabo de descubrir! Soy nueva y ya estoy sumada a tus seguidores. Me encanta tu estilo, y la forma en que hacer las entradas. Además me molaaaaa un montón que nos traigas tuto de esta clase, para los que como yo, no tenemos mucha ideaaaaa de las herramientas de blogger, y menos de html.

Espero que te pases por mi blog y te quedes entre mis seguidores, para que podamos seguir conociéndonos. Te mando un abrazo.

Eva.

avatar
Lee Rae Mi
Admin
25 de octubre de 2015, 15:53

esta entrada es muy buena, espero que este genial~
saludos

avatar
Angy
Admin
29 de octubre de 2015, 10:38

¡Muy útil! =D Muchas gracias por la entrada, aunque se me dan fatal estas cosas..

un besooo

avatar
Kat
Admin
18 de diciembre de 2015, 2:21

Hola linda. Siempre tan útiles tus tutos. Me ha encantado.
Como estaré unas semanas ausente del blog te deseo felices navidades y próspero año nuevo! Saludos~ ^^

Kat
www.moshaool.blogspot.com

avatar
Kat
Admin
18 de diciembre de 2015, 2:23

Hola linda. Siempre tan útiles tus tutos. Me ha encantado.
Como estaré unas semanas ausente del blog te deseo felices navidades y próspero año nuevo! Saludos~ ^^

Kat
www.moshaool.blogspot.com

avatar
Lyra
Admin
11 de enero de 2016, 4:26

¡Hola! Como siempre tutoriales super útiles, aunque por ahora me quedo con mi plantilla.

¡Saludos!

avatar
17 de enero de 2016, 7:57

Hola! Muchas gracias por el tutorial!! Me viene genial, porque soy muy mala en estas cosas, jejeje.
Besos!

avatar
17 de enero de 2016, 10:39

¡Hola!

Me parece una entrada muy útil, no dudaré en seguir el tutorial cuando cambie el diseño de mi blog^^
Un beso enorme♥

avatar
Sofía Prior
Admin
17 de enero de 2016, 10:51

¡Hola! Me ha encantado la entrada, soy nueva en blogger, así que me encantaría que te pasases por mi blog literario para ver qué te parece y si te gusta, quédate porfa. http://tintasobrepapelmojado.blogspot.com.es/

Un beso y muchísimas gracias.

avatar
LadyIsabella
Admin
18 de enero de 2016, 11:50

Hola, muy interesante y lo tendré en cuenta y alguna vez me lanzo a adentrarme en el tema técnico del blog, porque por ahora esa parte lo lleva mi compi de blog.
Un beso.

avatar
23 de enero de 2016, 7:20

Muchas gracias por el tutorial! Nos salva de muchas esto!
SEgui subiendo entradas asi, son geniales!

avatar
23 de mayo de 2016, 6:58

¡Hola!
Que interesante jeje, me gustan muchos tus tutoriales *u*

¡Qué tengas un buen Comienzo de semana!,
Un abrazo.

avatar
NATALIA RICO
Admin
29 de mayo de 2016, 6:06

A mi me encanta el diseño en general y no tenia ni idea. Me ha parecido muy interesante ¡¡buen trabajo bonita!! Mil besos, estamos en contacto y ¡disfruta de este domingo soleado!

avatar
5 de junio de 2016, 19:30

Hola Gaby,
Me gusta el look del blog y el tutorial que compartiste está bastante interesante.
Besos***

avatar
6 de junio de 2016, 3:56

Muchísimas gracias por el tutorial.
Un beso ^_^