Tabla de las redes sociales widget
TUTORIALES BLOGGER
Hola... en este artículo les compartiré este widget de las redes sociales 5 en uno. Este widget les permitirá a sus lectores a ver sus 5 redes sociales importantes que usted debe poner en esta tabla. Sol o se está usando en esta tabla de redes sociales, JavaScript que no ralentizara tu página web o blogs .
En esta tabla usted solamente va poner sus 5 redes sociales mas importante . Yo estoy usando Facebook , Twitter , Google Plus , Youtube , Dailymotion .
DEMO : lo ves al costado derecho ➜
Entonces usted va seguir estos pasos para ponerlo este widget a su pagina web o blogs :
1 .Entra a su Blogs de Blogger y ve a diseño y haz clic en añadir un gadget.
2. Elige HTML/Javascript
3. Ahora copia estos codigos :
1 .Entra a su Blogs de Blogger y ve a diseño y haz clic en añadir un gadget.
2. Elige HTML/Javascript
3. Ahora copia estos codigos :
<style>
/* Tabbed Social Widget By Helper Blogger - helperblogger.com */
/* CSS Code Start */
ul.tabs {
padding: 7px 0;
font-size: 0;
margin: 0;
list-style-type: none;
text-align: left;
}
ul.tabs li {
display: inline;
margin: 0;
margin-right: 3px;
/*distance between tabs*/
}
ul.tabs li a {
font: normal 12px Verdana;
text-decoration: none;
position: relative;
padding: 25px 10px 0px 10px;
border: 1px solid #CCC;
border-bottom-color: #B7B7B7;
color: #000;
background: #F0F0F0 url(tabbg.gif) 0 0 repeat-x;
border-radius: 3px 3px 0 0;
outline: none;
}
ul.tabs li a:visited {
color: #000;
}
ul.tabs li a:hover {
border: 1px solid #B7B7B7;
background: #F0F0F0 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZm-x72UnRhRnIt4w4qnBMO6HURdNzt-64MOG8YtXjFkpNB_NUpBpfvXY58ra8hM6DwBjCfk9MSKyljIElP2sKpOtcIQP9LSL2G_xxpwWbJgbwsHNdVWHarNoONnSTXwSu_vbnbDnthyQ/s1600/hb-tabbg.gif) 0 -50px repeat-x;
}
ul.tabs li.selected a,
ul.tabs li.selected a:hover {
position: relative;
top: 0px;
font-weight: bold;
background: white;
border: 1px solid #B7B7B7;
border-bottom-color: white;
}
ul.tabs li.selected a:hover {
text-decoration: none;
}
div.tabcontents {
border: 1px solid #B7B7B7;
padding: 10px;
background-color: #FFF;
border-radius: 0 3px 3px 3px;
margin-top: -7px;
}
/* Tabbed Social Widget By Helper Blogger - helperblogger.com */
/* End Code Start */
</style>
<script src="http://helperblogger.ucoz.com/code/hb-tabbed-social-widget.js" type="text/javascript"></script>
<ul class="tabs">
<li class="selected">
<a href="#view1">
<img src="http://icons.iconarchive.com/icons/sicons/basic-round-social/128/facebook-icon.png" height="32" width="32" />
</a>
</li>
<li>
<a href="#view2">
<img src="http://icons.iconarchive.com/icons/sicons/basic-round-social/128/twitter-icon.png" height="32" width="32" />
</a>
</li>
<li>
<a href="#view3">
<img src="http://icons.iconarchive.com/icons/sicons/basic-round-social/128/google-plus-icon.png" height="32" width="32" />
</a>
</li>
<li>
<a href="#view4">
<img src="http://icons.iconarchive.com/icons/sicons/basic-round-social/128/youtube-icon.png" height="32" width="32" />
</a>
</li>
<li>
<a href="#view5">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWNTBG7zsSiSVh7SNH0minjON18H5HcmEXWE0YyYGa2VpBQ5Xiod9hfnmC1sDXhPRqPk8j1XJKXqeMVK9Na3VJvAZ0IyLLXldSZkRi12hnOO-bGd2fa80zbsDQq_hZAcfTzBmy6HUxtzPZ/s1600/logo+-+dailymotion.png" height="32" width="32" />
</a>
</li>
</ul>
<div class="tabcontents">
<div id="view1">
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fdanydanielrt&width=285&height=180&colorscheme=light&show_faces=true&header=false&stream=false&show_border=false&appId=409936535724253" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:285px; height:180px;" allowtransparency="true"></iframe>
</div>
<div id="view2">
<a href="https://twitter.com/danydanielrt" class="twitter-follow-button" data-show-count="true" data-lang="es" data-size="large" data-dnt="true">Seguir a @danydanielrt</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
<div id="view3">
<div class="g-page" data-width="310" data-href="//plus.google.com/u/0/107958058838419475673" data-layout="landscape" data-rel="publisher"></div>
</div>
<div id="view4">
<iframe src=http://www.youtube.com/subscribe_widget?p=danydanielriveros style="overflow: hidden; height: 90px; width: 255px; border: 0;" scrolling="no" frameborder="0"></iframe>
</div>
<div id="view5">
<div style='border:1px solid #dfdfdf'>
<iframe width="300px" height="78px" scrolling="no" frameborder="0" src="http://www.dailymotion.com/badge/user/DanydanielrtTutoriales" __idm_frm__="287"></iframe><div style="font-family: Arial, Helvetica, Clean, sans-serif; font-size: 11px; color: #555; width: 300px; text-align: right;"><a href="http://www.dailymotion.com/DanydanielrtTutoriales" style="text-decoration: none; line-height: 12px; font-size: 11px; color: #555;" target="_blank">DanyDanielRT Tutoriales</a> en <a href="http://www.dailymotion.com?utm_campaign=widget_promote&utm_term=badge" rel="nofollow" target="_blank"><img src="http://www.dailymotion.com/images/user_widget/logo.svg" border="0" width="71" height="12" style="vertical-align: top;" /></a></div>
</div>
<div style="clear: both; text-align: right;">
<span style="font-size: xx-small;"><a href="http://www.helperblogger.com/" rel="nofollow" target="_blank">Blogger Widgets</a></span>
</div>
</div></div>
Usted puede cambiar los iconos de las redes sociales que deseas ponerlo busca esto :
<a href="#view1">
<img src="http://icons.iconarchive.com/icons/sicons/basic-round-social/128/facebook-icon.png" height="32" width="32" />
</a>
</li>
<li>
<a href="#view2">
<img src="http://icons.iconarchive.com/icons/sicons/basic-round-social/128/twitter-icon.png" height="32" width="32" />
</a>
</li>
<li>
<a href="#view3">
<img src="http://icons.iconarchive.com/icons/sicons/basic-round-social/128/google-plus-icon.png" height="32" width="32" />
</a>
</li>
<li>
<a href="#view4">
<img src="http://icons.iconarchive.com/icons/sicons/basic-round-social/128/youtube-icon.png" height="32" width="32" />
</a>
</li>
<li>
<a href="#view5">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWNTBG7zsSiSVh7SNH0minjON18H5HcmEXWE0YyYGa2VpBQ5Xiod9hfnmC1sDXhPRqPk8j1XJKXqeMVK9Na3VJvAZ0IyLLXldSZkRi12hnOO-bGd2fa80zbsDQq_hZAcfTzBmy6HUxtzPZ/s1600/logo+-+dailymotion.png" height="32" width="32" />
Para poner sus redes sociales solo cambien estos :
<div class="tabcontents">
<div id="view1">
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fdanydanielrt&width=285&height=180&colorscheme=light&show_faces=true&header=false&stream=false&show_border=false&appId=409936535724253" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:285px; height:180px;" allowtransparency="true"></iframe>
</div>
<div id="view2">
<a href="https://twitter.com/danydanielrt" class="twitter-follow-button" data-show-count="true" data-lang="es" data-size="large" data-dnt="true">Seguir a @danydanielrt</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
<div id="view3">
<div class="g-page" data-width="310" data-href="//plus.google.com/u/0/107958058838419475673" data-layout="landscape" data-rel="publisher"></div>
</div>
<div id="view4">
<iframe src=http://www.youtube.com/subscribe_widget?p=danydanielriveros style="overflow: hidden; height: 90px; width: 255px; border: 0;" scrolling="no" frameborder="0"></iframe>
</div>
<div id="view5">
<iframe width="300px" height="78px" scrolling="no" frameborder="0" src="http://www.dailymotion.com/badge/user/DanydanielrtTutoriales" __idm_frm__="287"></iframe><div style="font-family: Arial, Helvetica, Clean, sans-serif; font-size: 11px; color: #555; width: 300px; text-align: right;"><a href="http://www.dailymotion.com/DanydanielrtTutoriales" style="text-decoration: none; line-height: 12px; font-size: 11px; color: #555;" target="_blank">DanyDanielRT Tutoriales</a> en <a href="http://www.dailymotion.com?utm_campaign=widget_promote&utm_term=badge" rel="nofollow" target="_blank"><img src="http://www.dailymotion.com/images/user_widget/logo.svg" border="0" width="71" height="12" style="vertical-align: top;" /></a></div>
</div>
Eso es todo ...cualquier pregunta usted puede hacerlo y con gusto lo estaré ayudando .
Fuente : www.helperblogger.com
Danos Tu Reaccion Sobre el Articulo