Ejemplo
Como instalar este widget sharing/bookmarking
Paso 1: Agregar codigo CSS- Ir a las pestañas de blogger > Pestaña Diseño > Editar HTML
- Click en el checkbox Expandir plantilla de artilugios
- Busca la etiqueta ]]> y pongan este codigo antes de la etiqueta
#w2b-share ul {list-style: none;clear: none;padding: 0px 0px ;margin: 5px 0;} #w2b-share ul li {display: inline;background:none;margin:0;padding:0;} #w2b-share ul li a {display: block;float: left;width: 32px;height:32px;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnhbQCS3BMmDifMI9DeNb4wrHZA0anH7ufJKQ7y0c1_fQSflBOCA9WYckKaGoFxlSblCWQ_eUnF_PyYp7PMGSGO2mvKKZ0zoGryGJ4SSN6u7-xa_ieSTPeRngCiplw7hBG3OYoE1CQuN8/s1600/share-icons-sprite.png') ;margin-left:3px;background-repeat: no-repeat;margin-right: 2px;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } #w2b-share ul li a.twitter {background-position: -0px -0px; } #w2b-share ul li a.twitter:hover {background-position: -0px -33px; } #w2b-share ul li a.facebook {background-position: -32px -0px; } #w2b-share ul li a.facebook:hover {background-position: -32px -33px; } #w2b-share ul li a.stumbleupon {background-position: -64px -0px; } #w2b-share ul li a.stumbleupon:hover{background-position: -64px -33px; } #w2b-share ul li a.digg {background-position: -192px -0px; } #w2b-share ul li a.digg:hover {background-position: -192px -33px;} #w2b-share ul li a.reddit {background-position: -160px -0px; } #w2b-share ul li a.reddit:hover {background-position: -160px -33px;} #w2b-share ul li a.google {background-position: -128px -0px; } #w2b-share ul li a.google:hover {background-position: -128px -33px;} #w2b-share ul li a.del-icio-us {background-position: -480px -0px; } #w2b-share ul li a.del-icio-us:hover{background-position: -480px -33px;} #w2b-share ul li a.mixx {background-position: -96px -0px; } #w2b-share ul li a.mixx:hover {background-position: -96px -33px; } #w2b-share ul li a.technorati {background-position: -416px -0px; } #w2b-share ul li a.technorati:hover {background-position: -416px -33px;} #w2b-share ul li a.linkin {background-position: -256px -0px; } #w2b-share ul li a.linkin:hover {background-position: -256px -33px;} #w2b-share ul li a.yahoobuzz {background-position: -448px -0px; } #w2b-share ul li a.yahoobuzz:hover {background-position: -448px -33px;} #w2b-share ul li a.myspace {background-position: -512px -0px; } #w2b-share ul li a.myspace:hover {background-position: -512px -33px;} #w2b-share ul li a.more {background-position: -576px -0px; } #w2b-share ul li a.more:hover {background-position: -576px -33px;}Step 2: Agregar codigo al widget
- Busca la etiqueta
- Coloca este codigo despues de la etiqueta. y guarda tu template (por si no les funcione antes de este guarden su template en caso de errores)
<b:if cond='data:blog.pageType == "item"'> <div id='w2b-share'> <ul> <li><a class='twitter' expr:href='"http://twitter.com/?status=" + data:post.title + " - " + data:post.url ' rel='nofollow' target='_blank' title='Share this post on twitter'/></li> <li><a class='facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share this post on Facebook'/></li> <li><a class='stumbleupon' expr:href='" http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share this post on Stunbleupon'/></li> <li><a class='digg' expr:href='"http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share this post on Digg'/></li> <li><a class='reddit' expr:href='" http://www.reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share this post on Reddit'/></li> <li><a class='google' expr:href='"http://www.google.com/bookmarks/mark?op=add&bkmk=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Bookmark this post on Google'/></li> <li><a class='del-icio-us' expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share this post on delicious'/></li> <li><a class='mixx' expr:href='"http://www.mixx.com/submit?page_url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' target='_blank' title='Share this post on Mixx'/></li> <li><a class='technorati' expr:href='" http://technorati.com/faves?add=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Fav on Technorati'/></li> <li><a class='yahoobuzz' expr:href='"http://buzz.yahoo.com/submit/?url="+ data:post.url' rel='nofollow' target='_blank' title='Share this post on Yahoo!Buzz'/></li> <li><a class='myspace' expr:href='"http://www.myspace.com/Modules/PostTo/Pages/?u="+ data:post.url + "&t=" + data:post.title' rel='nofollow' target='_blank' title='Sahre this post on Myspace'/></li> <li><a class='a2a_dd more' expr:href='"http://www.addtoany.com/share_save?url=" + data:post.url + "&title=" + data:post.title '/><script src='http://static.addtoany.com/menu/page.js' type='text/javascript'/></li> </ul> </div> </b:if>
0 comentarios:
Publicar un comentario