Tabla de las redes sociales widget

Tabla de las redes sociales widget



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 :
 <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&amp;width=285&amp;height=180&amp;colorscheme=light&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false&amp;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&amp;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&amp;width=285&amp;height=180&amp;colorscheme=light&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false&amp;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&amp;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
Comentar