Hace poco recorriendo blogs de tutoriales descubri dos tipos de ''Marcadores Sociales'' (botones para compartir) que me gustrón mucho. El problema era que no sabia cual de los dos elegir para mi Blog.
Asi que, decidi combinarlos y crear estos.
Enlace eliminado
Como pueden ver, los marcadores que combine son de Ciudad Blogger y Way2Blogging.
Aca pueden ver un Enlace eliminado de como quedarian los marcadores.
Primero lo que vamos a hacer es seguir los pasos del el post de ''Ciudad Blogger''.
Nos dirijimos a Diseño - Edición de HTML - Expandir plantillas de artilugios y buscamos la etiqueta:
Y justo antes pegamos el script:
Y ahora antes de
agregamos el CSS:
Ahora buscamos la linea:
Y justo arriba pegamos lo siguiente:
Lo que esta resaltado en negrita y cursiva, lo remplazaremos por esto:
Recuerda que:
Asi que, decidi combinarlos y crear estos.
Enlace eliminado
Como pueden ver, los marcadores que combine son de Ciudad Blogger y Way2Blogging.
Aca pueden ver un Enlace eliminado de como quedarian los marcadores.
EL TUTORIAL
Primero lo que vamos a hacer es seguir los pasos del el post de ''Ciudad Blogger''.
Nos dirijimos a Diseño - Edición de HTML - Expandir plantillas de artilugios y buscamos la etiqueta:
Insertar CODE, HTML o PHP:
</head>
Y justo antes pegamos el script:
Insertar CODE, HTML o PHP:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery.noConflict();
jQuery(function()
{
jQuery("#msg-compartir").click(function(event) {
event.preventDefault();
jQuery("#btns-compartir").slideToggle();
});
});
</script>
Y ahora antes de
Insertar CODE, HTML o PHP:
]]></b:skin>
Insertar CODE, HTML o PHP:
/* Botones para compartir
----------------------------------------------- */
.msg-compartir {
width:140px; /* Ancho de la burbuja */
position:relative;
padding:10px;
margin:1em 0 3em;
text-align:center;
color:#000; /* Color del texto */
background:#F3961C; /* Color de fondo de la burbuja en navegadores que no soporten CSS3 */
/* Color de fondo gradiente de la burbuja */
background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9d835), to(#f3961c));
background:-moz-linear-gradient(#f9d835, [B]Enlace eliminado[/B]
background:-o-linear-gradient(#f9d835, [B]Enlace eliminado[/B]
background:linear-gradient(#f9d835, [B]Enlace eliminado[/B]
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
.msg-compartir::after {
content: "";
position: absolute;
bottom: -15px;
left: 67px;
border-width: 15px 15px 0;
border-style: solid;
border-color: #F3961C transparent; /* Color de fondo del triángulo de la burbuja */
display: block;
width: 0;
}
.btns-compartir {
display: none;
margin-top:-10px;
background:#F2F2F2; /* Color de fondo del contenedor de los botones */
border:1px solid [B]Enlace eliminado[/B]
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
margin-bottom:20px;
}
ul.way2blogging-social { padding:0;list-style:none; margin:15px auto !important;display:inline-block;width:100%; text-align:center;}
ul.way2blogging-social li { padding:0;display:inline-block; background-repeat:no-repeat; }
ul.way2blogging-social li a { display:block; width:48px; height:48px; padding-right:10px; position:relative; text-decoration:none; }
ul.way2blogging-social li a strong { font-weight:normal; position:absolute; left:20px; top:-1px; color:#fff; padding:3px; z-index:9999; text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:rgba(0, 0, 0, 0.7); -moz-border-radius:3px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-border-radius:3px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius:3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);}
ul.way2blogging-social li.way2blogging-facebook { background-image:url("http://1.bp.blogspot.com/-g7iysrErmVQ/Tzt2z_deDEI/AAAAAAAAE-Q/glYbzMAsd_k/s000/way2blogging-facebook.png"); }
ul.way2blogging-social li.way2blogging-twitter { background-image:url("http://1.bp.blogspot.com/-X5zmTGbE78I/Tzt20D1asxI/AAAAAAAAE-Y/ovkCBF7yt1I/s000/way2blogging-twitter.png"); }
ul.way2blogging-social li.way2blogging-googlebuzz { background-image:url("http://1.bp.blogspot.com/-el-xYhf5mlU/Tzt20USD-AI/AAAAAAAAE-g/L9dZNcxVwOs/s000/way2blogging-googlebuzz.png"); }
ul.way2blogging-social li.way2blogging-stumbleupon { background-image:url("http://3.bp.blogspot.com/-EBDiqP13hhQ/Tzt20eie_ZI/AAAAAAAAE-o/5xonEYjdmbA/s000/way2blogging-stumbleupon.png"); }
ul.way2blogging-social li.way2blogging-digg { background-image:url("http://4.bp.blogspot.com/-Ehx0v-Z5oqc/Tzt20uB4WSI/AAAAAAAAE-w/7U5Z5iuZk6M/s000/way2blogging-digg.png"); }
ul.way2blogging-social li.way2blogging-delicious { background-image:url("http://4.bp.blogspot.com/-9vbIFSJhWXc/Tzt20j5q8wI/AAAAAAAAE-4/3WDG8LYQ6xQ/s000/way2blogging-delicious.png"); }
ul.way2blogging-social li.way2blogging-linkedin { background-image:url("http://2.bp.blogspot.com/-urRLmxRJ_zM/Tzt205EvoNI/AAAAAAAAE_A/vl6SzWnqOnA/s000/way2blogging-linkedin.png"); }
ul.way2blogging-social li.way2blogging-reddit { background-image:url("http://1.bp.blogspot.com/-SQCcz1DFS6s/Tzt20xzEhQI/AAAAAAAAE_I/U_f-xJYpmEI/s000/way2blogging-reddit.png"); }
ul.way2blogging-social li.way2blogging-technorati { background-image:url("http://3.bp.blogspot.com/-V68yZAYqCvE/Tzt21Gsdt3I/AAAAAAAAE_Q/Xg-qbtrF3fk/s000/way2blogging-technorati.png"); }
#way2blogging-cssanime:hover li { opacity:0.2; }
#way2blogging-cssanime li { -webkit-transition-property: opacity; -webkit-transition-duration: 500ms;-moz-transition-property: opacity; -moz-transition-duration: 500ms; }
#way2blogging-cssanime li a strong { opacity:0; -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms; -moz-transition-property: opacity, top; -moz-transition-duration: 300ms; }
#way2blogging-cssanime li:hover { opacity:1; }
#way2blogging-cssanime li:hover a strong { opacity:1; top:-10px; }
Ahora buscamos la linea:
Insertar CODE, HTML o PHP:
<div class='post-footer'>
Y justo arriba pegamos lo siguiente:
Insertar CODE, HTML o PHP:
<b:if cond='data:blog.pageType == "item"'>
<center><a href='#' id='msg-compartir' style='text-decoration:none'><p class='msg-compartir'>Comparte esta entrada</p></a></center>
<center>
[B][I] <div class='btns-compartir' id='btns-compartir'>
<table border='0' cellpadding='7'>
<tr>
<td><iframe allowTransparency='true' expr:src='"[B]Enlace eliminado[/B] + data:post.url+ "&layout=box_count&show_faces=false&width=73&height=63&action=like&font=tahoma&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:73px; height:63px;'/></td>
<td><a class='twitter-share-button' data-count='vertical' data-lang='es' href='https://twitter.com/share'>Tweet</a><script src='//platform.twitter.com/widgets.js' type='text/javascript'/></td>
<td><script type='text/javascript'>(function(){var x=document.createElement('script'), s=document.getElementsByTagName('script')[0];x.async=true;x.src='http://widgets.itaringa.net/share.js';s.parentNode.insertBefore(x,s)})()</script>
<t:sharer data-layout='big'/></td>
<td><script src='http://apis.google.com/js/plusone.js' type='text/javascript'/><g:plusone expr:href='data:post.url' size='tall'/></td>
<td><a expr:href='"[url=http://bitacoras.com/anotaciones/"]Enviar post en Bitacoras.com[/url] + data:post.url'><img alt='votar' expr:src='"[B]Enlace eliminado[/B] + data:post.url' style='vertical-align:middle;border:0;float:right; margin-left:10px;' title='Votar este artículo en Bitacoras.com'/></a></td>
</tr>
</table>[/I][/B]
</div>
</center>
</b:if>
Lo que esta resaltado en negrita y cursiva, lo remplazaremos por esto:
Insertar CODE, HTML o PHP:
<b:if cond='data:blog.pageType == "item"'>
<ul class='way2blogging-social' id='way2blogging-cssanime'>
<li class='way2blogging-facebook'>
<a expr:href='"[url=http://www.facebook.com/share.php?v=4&src=bm&u="]Log In | Facebook[/url] + data:post.url + "&t=" + data:post.title ' onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;' rel='nofollow' title='Share this on Facebook'><strong>Facebook</strong></a>
</li>
<li class='way2blogging-twitter'>
<a expr:href='"[url=http://twitter.com/home?status="]Sign in to Twitter[/url] + data:post.title + " -- " + data:post.url ' rel='nofollow' title='Tweet This!'><strong>Twitter</strong></a>
</li>
<li class='way2blogging-googlebuzz'>
<a expr:href='"[B]Enlace eliminado[/B] + data:post.url + "&imageurl="' rel='nofollow' title='Post on GoogleBuzz'><strong>Google Buzz</strong></a>
</li>
<li class='way2blogging-stumbleupon'>
<a expr:href='"[B]Enlace eliminado[/B] + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'><strong>StumbleUpon</strong></a>
</li>
<li class='way2blogging-digg'>
<a expr:href='"[url=http://digg.com/submit?phase=2&url="]Digg - Submit a link[/url] + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Digg this!'><strong>Digg</strong></a>
</li>
<li class='way2blogging-delicious'>
<a expr:href='"[B]Enlace eliminado[/B] + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Share this on del.icio.us'><strong>Delicious</strong></a>
</li>
<li class='way2blogging-linkedin'>
<a expr:href='"[url]http://www.linkedin.com/shareArticle?mini=true&url="[/url] + data:post.url + "&title=" + data:post.title + "&summary=&source="' rel='nofollow' title='Share this on LinkedIn'><strong>LinkedIn</strong></a>
</li>
<li class='way2blogging-reddit'>
<a expr:href='"[url=http://reddit.com/submit?url="]reddit.com: login or register[/url] + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Share this on Reddit'><strong>Reddit</strong></a>
</li>
<li class='way2blogging-technorati'>
<a expr:href='"[B]Enlace eliminado[/B] + data:post.url ' rel='nofollow' title='Share this on Technorati'><strong>Technorati</strong></a>
</li>
</ul>
</b:if>
Recuerda que:
- Tal vez no funcione con todos los servidores.
- Sólo será visible en las entradas individuales, NO en la portada.
- La burbuja está hecha con CSS3, así que si usas un navegador viejo como Internet Explorer 8 sólo verás un rectángulo.