miércoles, 12 de junio de 2013

Añadir Widget Social Media Slide Out En Tu Blog De Blogger

By andante77 4:44 a.m. , , , , , , Leave a Comment
Añadir Widget Social Media Slide Out En Tu Blog De Blogger
En este tutorial te incluire un widget muy especial para compartir tus entradas o articulos en las redes sociales.Este se esconde en el lado de la pantalla .Cuando el lector o visitantes ponen el cursor del raton sobre las mismas este se desplazara hacia afuera y una vez quitemos el cursor se desplaza hacia adentro o se escondera. 

Tiene varios elementos o folder donde se muestra la pagina principal nuestra de esas paginas como twitter,you tube,google plus,facebook y subscripcion Rss.




Muy recomendado si deseas estar adelante en propagar tus articulos atraves del mundo de la internet.Para instalarlo es muy simple solo siguie estos pasos.  


1.Entra cuenta de tu Blogger 
2.Selecciona Plantilla
3.Da Clic en Editar HTML
4.Encuentre el siguiente codigo ]]></b:skin> puedes usar teclas dentro editor para buscarlo(Ctrl + F)   
5.Copie el codigo de abajo y peguelo antes/arriba de ]]></b:skin>  
 


#on {visibility:visible;}
#off {visibility:hidden;}
#facebook_div {width:196px;height: 353px;overflow: hidden;}
#twitter_div {width:246px;height: 353px;overflow: hidden;}
#google_plus_div {width:200px;height: 143px;overflow: hidden;}
#knfeedburner_div {width:300px;height: 97px;overflow: hidden;}
#facebook_right {z-index: 10005;border:2px solid #3c95d9;background-color: #fff;width:196px;height: 353px;position: fixed;right: -200px;}
#facebook_right img {position: absolute;top: -2px;left: -35px;}
#facebook_right iframe {border:0px solid #3c95d9;overflow: hidden;position: static;height: 360px;left:-2px;top:-3px;}
#twitter_right {z-index: 10004;border:2px solid #6CC5FF;background-color: #6CC5FF;width:246px;height: 353px;position: fixed;right: -250px;}
#twitter_right_img {position: absolute;top: -2px;left: -35px;border: 0;}
#google_plus_right {z-index: 10003;background-color: #006ec9;border:2px solid #006ec9;border-top:2px solid #0056a0;border-bottom: 2px solid #0056a0;border-right:2px solid #0056a0;border-left: hidden;width:200px;height: 143px;position: fixed;right: -203px;}
#google_plus_right_img {position: absolute;top: -2px;left: -33px;border: 0;}
#feedburner_right {z-index: 10002;background-color: #fefefe;border:2px solid #5b5b5b;border-top:2px solid #5b5b5b;border-bottom: 2px solid #5b5b5b;border-right:2px solid #5b5b5b;border-left: hidden;width:300px;height: 97px;position: fixed;right: -303px;}
#feedburner_right_img {position: absolute;top: -2px;left: -33px;border: 0;}
#youtube_right {z-index: 10001;background-color: #fefefe;border:2px solid #ff0000;border-top:2px solid #5b5b5b;border-bottom: 2px solid #5b5b5b;border-right:2px solid #5b5b5b;border-left: hidden;width:301px;height: 106px;position: fixed;right: -303px;}
#youtube_right_img {position: absolute;top: -2px;left: -33px;border: 0;}


6.Otra vez busca la etiqueta </head> (CTRL+F)   
7.Ahora copie el codigo de abajo y peguelo antes de </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
jQuery(document).ready (
function(){jQuery("#facebook_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },
function(){ jQuery("#facebook_right").stop(true,false).animate({right: -200}, 500); });
jQuery("#twitter_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },
function(){ jQuery("#twitter_right").stop(true,false).animate({right: -250}, 500); });
jQuery("#google_plus_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },
function(){ jQuery("#google_plus_right").stop(true,false).animate({right: -203}, 500); });
jQuery("#feedburner_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },
function(){ jQuery("#feedburner_right").stop(true,false).animate({right: -303}, 500); });
jQuery("#youtube_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },
function(){ jQuery("#youtube_right").stop(true,false).animate({right: -303}, 500); });
});
</script>


     8.Guarde Plantilla.
     9.Vaya ahora a Diseno.
    10.Ahora da Clic en Anadir un Gadget.
    11.Seleccione la opcion HTML/Javascript
    12. Copie el codigo de abajo y peguelo en espacio de contenido.



<div id="on"><div id="facebook_right"style="top:8%;"><div id="facebook_div"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7bNzSeA2EwTlvJtdhVqwNovKcxjC7q3iF1AivR1PMPTXHLOFl86CISO4_9fCJxOnWion4ZBVdVd2M-WRgoX6AJe0EQevDWc8N_eaDoqSEScLpyzeOF8cTQESOUxvXblkauGu2OVuqNg/s1600/Facebook.png"alt=""/><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2FTu Enlace de Pagina Fanaticos de FACEBOOK&amp;locale=en_GB&amp;width=200&amp;connections=9&amp;stream=&amp;header=false&amp;show_faces=0&amp;height=356"scrolling="no"></iframe></div></div></div><div id="on"><div id="twitter_right"style="top:25%;"><div id="twitter_div"><img id="twitter_right_img"src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyTSOFwJwby8wimAnuSCLEXN6GWEqS5GfrokyKroonVUzI9VT7IQALRnjpLATIY-yA5sMnV7vVWr0pi1bedP9ZdT6YvVF-zUVgfDxUEutmo7h50J7WIW-toR5ZiaHFoXkbxm0KhqdRBg/s1600/Twitter.png"/><script src="http://widgets.twimg.com/j/2/widget.js"></script><script>new TWTR.Widget({version:2,type:'profile',rpp:4,interval:1000,width:246,height:265,theme:{shell:{background:'#63BEFD',color:'#FFF'},tweets:{background:'#FFF',color:'#000',links:'#47a61e'}},features:{loop:false,live:true,scrollbar:false,hashtags:false,timestamp:true,avatars:true,behavior:'all'}}).render().setUser('YOUR-TWITTER-ID-Va aqui').start();</script></div></div></div><div id="on"><div id="google_plus_right"style="top:42%;"><div id="google_plus_div"><img id="google_plus_right_img"src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH0EnYGF4tg7-I_YxMxqqmnIxL3wYyU5E-dDU_qZLVlYSyvvL_T6nOhxgVMPRpvZDWactb8Tb6xGCVM-exyVxLLWxiFHpz9MQoyoGBeU_UbfPiJfZoG0JWZzG-Dipdu52XTEItqPQCxA/s1600/Google+Plus.png"/><div style="float:left;margin:1px 0px 0px 2px;"><script type="text/javascript">mbgc='006ec9';ww='200';mbc='006ec9';bbc='006ec9';bmobc='3b71c6';bbgc='006ec9';bmoc='3F79D5';bfc='FFFFFF';bmofc='ffffff';tlc='ffffff';tc='ffffff';nc='ffffff';bc='ffffff';l='y';t='Add_Me_To';fs='20';fsb='13';bw='3F79D5';ff='4';pc='4889F0';b='0';pid='102256859586166648016';</script><script type="text/javascript"src="http://widgetsplus.com/google_plus_widget.js"></script></div></div></div></div><div id="on"><div id="feedburner_right"style="top:59%;"><div id="knfeedburner_div"><center><br />&#9660;&#9660;&#9660;&#9660;&#9660;&#9660;&#9660;&#9660;&#9660;&#9660;&#9660;&#9660;<h4 style="color:#F66303;">Puedes Tambien Recibir Actualizaciones Gratis en E-Mail Updates:</h4><form action="http://feedburner.google.com/fb/a/mailverify"method="post"target="popupwindow"onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=El ID del-FEEDBURNER-Aqui','popupwindow','scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10"class="enteryouremail"name="email"value="Enter Your E-Mail Here..."onblur="if (this.value == &#39;&#39;){this.value = &#39;Enter Your E-Mail Here...&#39;}"onfocus="if (this.value == &#39;Enter Your E-Mail Here...&#39;){this.value = &#39;&#39;}"type="text"/><input value="Tu Nombre de FEED va aqui"name="uri"type="hidden"/><input value="Submit"class="submitbutton"type="submit"/></form></center><img id="feedburner_right_img"src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSVzx_q5ssjj9_WARCeKJSBPyBX6Oyn0H-dos6A0cD7HBgrLeudLq812dhNwnHBNmfGaIlJQegLW-zRLf5bR3Va6wuk_b4_P7qySli7OZqGLyPdVqEnOkSWvLQgRakrdrCSQwEigNitA/s1600/Subscribe.png"/></div></div></div><div id="on"><div id="youtube_right"style="top:76%;"><div id="youtube_div"><img id="youtube_right_img"src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzDsUOFy9guj_6xWw5WzLLJKArrJh1vlG2p120FZVrdTH_42WBusbXKyJ3OIl1maVei5otJGeHzH4hPNjwWVOB47Oxg-gv1zD4ELaWP09QR34NHih4bDoMgIvj6UwTG6xW4F0wMsC_5Q/s1600/YouTube.png "/><div style="float:left;margin:1px 0px 0px 2px;"><iframe src=http://www.youtube.com/subscribe_widget?p=Tu ID deYOUTUBE-ID-Aqui ="height:105px;width:300px;border:0;"scrolling="no"frameBorder="0"></iframe>
</div></div></div>
</div>
13.Guarda el gadget y chequea tu blog para que veas esta barra al lado derecho de tu pantalla.Listo.
Nota:Reemplaza lo que esta en ROJO en codigo anterior por direcciones y ID de tu cuenta en redes sociales  .
If You Enjoyed This, Take 5 Seconds To Share It

0 comentarios:

Publicar un comentario