jueves, 16 de enero de 2014

Widgets para blogger flotante de caja seguidores de Google +



Obtener una caja buena de seguidores de Google + en tu pagina blog de blogger, es lo que  te ayudare a implementarlo, es un simple código javascript, el cual esta diseñado para que se muestre a la derecha de tu pagina

Para instalarlo :

1 Ir a blogger

2 Dar un clic en “Diseño


3 Abre un gadget “Añadir un gadget



4 Busca el widget que dice “HTML/Javascript” y pega  las siguientes líneas de código en su interior



<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<!--
$(document).ready(function() {$(".gplusbox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-330"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.gplusbox{
background: url("http://4.bp.blogspot.com/-okzPzWuiDGg/UMOGvgAcgAI/AAAAAAAABpQ/8Q8oTKkyA6Q/s400/g%252B%2Bsoftglad.png") no-repeat scroll left center transparent !important;
display: block;
float: right;
height: 275px;
padding: 0 0px 0 46px;
width: 325px;
z-index: 99999;
position:fixed;
right:-330px;
top:20%;
}
.gplusbox div{
padding: 8px;
background: white;
border: 2px solid #D64937;
border-radius: 15px;
border-right: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
</style>
<div class="gplusbox"><div>
<div class="g-plus" data-action="followers" data-height="300" data-href="https://plus.google.com/114283163993086871162" data-source="blogger:blog:followers" data-width="320">
</div>
<script type="text/javascript">
      (function() {
        window.___gcfg = {'lang': 'en'};
        var po = document.createElement('script');
        po.type = 'text/javascript';
        po.async = true;
        po.src = 'https://apis.google.com/js/plusone.js';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(po, s);
      })();
    </script>
</div></div>


Realiza el siguiente cambio:

Borra el link que esta marcado de color azul https://plus.google.com/114283163993086871162 y pon ahí el link de tu perfil de Google +

Eso es todo ahora dale un click en “Guardar” y ubícalo donde tu quieras no olvides comentar






Como agregar Comentarios de Google+, Blogger y Facebook en Blogger

Hola esta vez les traego  un nuevo tutorial de como agregar a tu blog los sistemas de comentarios de Google+, Facebook y Blogger dándole así al usuario muchas mas posibilidades para comentar.



Para agregar este truco a tu pagina blog ve a Plantilla, Editar HTML  (* Presionar CTRL + F dentro del editor para activar el cuadro de búsqueda) y busca el siguiente código:

<b:include data='post' name='post'/>


Debajo del anterior código colocas pega lo siguiente:


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='com-header'>
<div align='center' style='padding-top: 5px;font-size: 16px;'><b>Para Comentar Elige el Sistema de Comentario de tu Agrado:</b></div>
</div>
<div class='commentacon'>
<script language='javascript' type='text/javascript'>
function show(id) {
var oc = document.getElementById(id).style;
hide();
oc.display = &quot;block&quot;;
}
function hide() {
document.getElementById(&#39;gpluscomments&#39;).style.display = &quot;none&quot;;
document.getElementById(&#39;comments&#39;).style.display = &quot;none&quot;;
document.getElementById(&#39;comentariosFacebook&#39;).style.display = &quot;none&quot;;
}
</script>
<style type='text/css'>
#com-header {width: 550px;margin-left:10px;padding: 2px;float:left;margin-bottom: 10px;text-align: center; }
.commentacon {width: 550px;margin-left:10px; background:#edeaea ;margin-top: 5px; border: 1px solid rgb(229, 229, 229);
border-radius: 3px; }#comments, #comentariosFacebook, #gpluscomments {display:none;}#goog{margin-left:65px;display:block;}#blog{margin-left:210px;margin-top:-45px;} #face{margin-left:355px;margin-top:-45px;}#comentariosFacebook{margin-left:15px;margin-top:10px;}</style>
<div id='goog'>
<a class='googl' href='javascript:show(&apos;gpluscomments&apos;)'><img alt='comentarios google' border='0' src='http://3.bp.blogspot.com/-0ydXXdbASA4/UlbMP6XctDI/AAAAAAAANBE/w9z9FF3y5ps/s1600/comentarios-google.gif'/></a></div>
<div id='blog'>
<a class='blogg' href='javascript:show(&apos;comments&apos;)'><img alt='comentarios blogger' border='0' src='http://2.bp.blogspot.com/-tFYhYwlbXUA/UlbMNa9qTjI/AAAAAAAANA4/D-SOu2qRGiU/s1600/comentarios-blogger.gif'/></a></div>
<div id='face'>
<a class='faceb' href='javascript:show(&apos;comentariosFacebook&apos;)'><img alt='comentarios facebook' border='0' src='http://4.bp.blogspot.com/-y9s-D8JTI3Q/UlbMPgX-o2I/AAAAAAAANBA/yZEUpHOR9KU/s1600/comentarios-facebook.gif'/></a></div>
<div class='comentarios' id='gpluscomments'>
<div class='g-comments' data-first_party_property='BLOGGER' data-view_type='FILTERED_POSTMOD' data-width='550' expr:data-href='data:post.url'/>
</div>
<div class='comentarios' id='comentariosFacebook'>
<div class='fb-comments' data-colorscheme='light' data-num-posts='5' data-width='520' expr:href='data:post.canonicalUrl'/></div>
</div>
</b:if>
Ahora Cerca del anterior código se vera otro código similar al siguiente codigo:


<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:include data='post' name='comment_picker'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='comment_picker'/>
</b:if>

 Ahora coloca Justo debajo del anterior código pega lo siguiente:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='comentarios' id='comentariosFacebook'>
<div class='fb-comments' data-colorscheme='light' data-num-posts='1' data-width='540' expr:href='data:post.url'/></div> </b:if> 

 Ahora coloca debajo de  <body> agrega lo siguiente:


<div id="fb-root"></div><script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/es_ES/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script>



miércoles, 15 de enero de 2014

Pagina de error 404 estilo Facebook Para tu pagina

Como veran el aspecto es casi igual a la página de error de Facebook, con un estilo sencillo pero muy funcional esta página esta hermosamente diseñada.

Para agregar este truco a tu pagina, blog entra en Configuración | Preferencias de búsqueda  y en donde vez que diga  Mensaje de página no encontrada personalizado y haz click en Editar,allí pega lo siguiente:



<h2 class="_4-dp" style="background-color: white; color: #333333; font-family: Helvetica, Arial, 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 24px; line-height: 28px; margin: 40px 0px 20px; padding: 0px; text-align: center;">
Lo sentimos; esta página no está disponible</h2>
<h3 class="_4-dq" style="background-color: white; color: #333333; font-family: Helvetica, Arial, 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 16px; line-height: 20px; margin: 20px 0px; padding: 0px; text-align: center;">
Es posible que el enlace que seguiste esté roto o se haya eliminado la página.</h3>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="http://4.bp.blogspot.com/-3GyiPk15CWI/UngQtrjIsGI/AAAAAAAADUY/_gS590VH448/s1600/pagina+de+error+estilo+facebook.png" /></div>
<div class="separator" style="clear: both; text-align: center;">
<a data-gt="{&quot;target&quot;:&quot;back&quot;,&quot;marketing_page_click&quot;:&quot;1&quot;,&quot;conversion&quot;:&quot;1&quot;}" href="URL A COLOCAR" role="button" style="background-color: white; color: #3b5998; cursor: pointer; font-family: Helvetica, Arial, 'lucida grande', tahoma, verdana, arial, sans-serif; line-height: 19.987503051757813px; text-align: center; text-decoration: none;">Volver a la página anterior</a><span style="background-color: white; color: grey; font-family: Helvetica, Arial, 'lucida grande', tahoma, verdana, arial, sans-serif; line-height: 19.987503051757813px; text-align: center;">&nbsp; · &nbsp;</span><a data-gt="{&quot;target&quot;:&quot;home&quot;,&quot;marketing_page_click&quot;:&quot;1&quot;,&quot;conversion&quot;:&quot;1&quot;}" href="URL A COLOCAR" style="background-color: white; color: #3b5998; cursor: pointer; font-family: Helvetica, Arial, 'lucida grande', tahoma, verdana, arial, sans-serif; line-height: 19.987503051757813px; text-align: center; text-decoration: none;">Ir a la página de inicio de Facebook</a><span style="background-color: white; color: grey; font-family: Helvetica, Arial, 'lucida grande', tahoma, verdana, arial, sans-serif; line-height: 19.987503051757813px; text-align: center;">&nbsp; · &nbsp;</span><a data-gt="{&quot;target&quot;:&quot;help&quot;,&quot;marketing_page_click&quot;:&quot;1&quot;,&quot;conversion&quot;:&quot;1&quot;}" href="URL A COLOCAR" style="background-color: white; color: #3b5998; cursor: pointer; font-family: Helvetica, Arial, 'lucida grande', tahoma, verdana, arial, sans-serif; line-height: 19.987503051757813px; text-align: center; text-decoration: none;">Visita el Servicio de ayuda</a>
</div>
<div>
<br /></div>
<b:include data='top' name='status-message'/>
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<style type='text/css'>
.status-msg-wrap { position: relative; width: 100%; margin: 30px auto; padding: 10px;font-size: 100%; }
.status-msg-wrap a { padding: none; text-decoration: inherit; }
.status-msg-border {display:none; }
.status-msg-body { position: relative; width: 100%; padding: 0; text-align: inherit; z-index: auto; }
.status-msg-body h1 { font-size:150%; }
.status-msg-body li { list-style-type: circle;margin-left:50px; }
</style>
</b:if>
El color azul están resaltadas las URL'S que estan colocada al final de la página, las cuales puedes reemplazar por tus URL de tu blog pagina, respectivamente también resalte en negrita los nombres con los cuales se visualizan los enlaces.


 

©2011 Trucos Gadgets Para Blogger | FuuTheme diseñado por Fuutec | Ir arriba ↑