Menu social: 2 modelos profissionai

Esses dois modelos de widgets de botões sociais foram desenvolvidos pelo blog BloggingeHow. Ambos são fáceis de aplicar já que são colocados no HTML/Javascript e depois inseridos os links.

Salve. Agora clique em Layout

Clique em Adicionar um Gadget

Ao abrir, clique em  HTML/Javascript

Cole então o próximo código fazendo as modificações necessárias, trocando os links que estão destacados em vermelho, pelo endereço de suas páginas sociais.

Modelo 1

<div class="sidebarContainer" id="sidebarSubscribe">
            <a target="_blank" href="http://feeds.feedburner.com/TemplatesEAcessrios/" class="subscribeSidebarBox" id="subscribeRSS">
                <span class="icon"></span>
                <span class="title">Assine nosso Feed</span>
                <span class="count">Subscreva RSS+</span>
            </a>
         
            <a target="_blank" href="https://twitter.com/elkedibarros1" class="subscribeSidebarBox" id="followTwitter">
                <span class="icon"></span>
                <span class="title">Siga-me no Twitter</span>
                <span class="count">Seguidores no Twitter+</span>
            </a>
         
            <a target="_blank" href="http://www.facebook.com/pages/Templates-e-Acessórios/" class="subscribeSidebarBox" id="likeFacebook">
                <span class="icon"></span>
                <span class="title">Curta meu Facebook</span>
                <span class="count">Fãs no Facebook+</span>
            </a>
<span style=" line-height:0px; font-size:8px; font-weight:bold; align:right;
  ">
<a style="color:#D3D3D3;" href="http://www.bloggingehow.com">widgets</a></span>
        </div>

<style>
#sidebarSubscribe {
    padding: 25px 30px 20px;
}
a.subscribeSidebarBox {
    border: medium none;
    cursor: pointer;
    display: block;
    height: 60px;
    margin-bottom: 8px;
    position: relative;
    width: 285px;
}
#sidebarSubscribe span {
    color: #6E6E6E;
    display: block;
    padding: 3px;
    position: absolute;
    text-shadow: 1px 1px 0 white;
}
#sidebarSubscribe .icon {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBbdBvYA6tHc8vEGKmMIOIgBniMv9oekvxXHyMMOXRW-LUaObj-rFTbbIKovdMDjQ5QobMNK7Bj2yvExDe1Hkd0acHTLgwJi0UHcKdNicoy3wyPtMdrJt8r5eIO2Cq_dGEE3YcJwKz36U/s1600/tzine_sprite.png") no-repeat scroll 0 0 transparent;
    height: 45px;
    left: 10px;
    top: 10px;
    width: 55px;
}
#sidebarSubscribe .title {
    font-size: 12px;
    left: 70px;
    top: 8px;
}
#sidebarSubscribe .count {
    font: bold 16px/20px 'Myriad Pro',Tahoma,Arialm,sans-serif;
    left: 70px;
    top: 23px;
}
#subscribeRSS .icon {
    background-position: 0 -50px;
}
#followTwitter .icon {
    background-position: -100px -50px;
}
#likeFacebook .icon {
    background-position: -200px -50px;
}
a.subscribeSidebarBox {
    background-color: #FAFAFA;
    border-radius: 10px 10px 10px 10px;
}
a.subscribeSidebarBox:hover {
    background-color: #FDFDFD;
}

a, a:active {
   text-decoration: none;
}

</style>

Modelo 2

<!--BloggingeHow Subscription Widget-->

     <style>
    body {
        color: #434343;
        font: 12px/20px Arial,Helvetica,sans-serif;
    }
    #sidebar .widget {
        background-color: #F5F5F5;
        margin: 15px 0;
        padding: 4px;
        position: relative;
    }


    #sidebar .widget .head {
        text-shadow: 0 1px 0 #FFFFFF;
    }
    #sidebar .widget .box {
        background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRAgvXKa3Pe9E-nDvmX4Gltw1y64hO4NBbEXoZGXRx6yxrrC_3wmJTDwegBK9KCW6jxjA1bYa7h5h0dDYP8UFeITlfGKY-MT9NvYUvHMHq00n6JRJ2Yu7xLFuvzrBWj69H0fjMt3NUSNo/s1600/sidebar_bg.png") repeat-x scroll left bottom transparent;
        padding: 8px;
    }
    #sidebar .widget .box-out {
        background-color: #FFFFFF;
        border-bottom: 1px solid #E5E5E5;
        padding: 1px;
    }
    .clearfix:after {
        clear: both;
        content: " ";
        display: block;
        font-size: 0;
        height: 0;
        line-height: 0;
        visibility: hidden;
        width: 0;
    }
    #sidebar .widget .box {
        background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRAgvXKa3Pe9E-nDvmX4Gltw1y64hO4NBbEXoZGXRx6yxrrC_3wmJTDwegBK9KCW6jxjA1bYa7h5h0dDYP8UFeITlfGKY-MT9NvYUvHMHq00n6JRJ2Yu7xLFuvzrBWj69H0fjMt3NUSNo/s1600/sidebar_bg.png") repeat-x scroll left bottom transparent;
        padding: 8px;
    }
    .clearfix {
        display: block;
    }
    .clearfix {
        display: inline-block;
    }
    .clearfix:after {
        clear: both;
        content: " ";
        display: block;
        font-size: 0;
        height: 0;
        line-height: 0;
        visibility: hidden;
        width: 0;
    }
    .email_rss {
        border-bottom: 1px solid #E5E5E5;
        margin-bottom: 5px;
        position: relative;
    }
    .social_links, .email_rss {
        padding: 5px 0 10px;
        width: 100%;
    }
    .clearfix {
        display: block;
    }
    .fan_box {
        background-color: #F5F5F5;
        margin: 15px 0;
        padding: 4px;
        position: relative;
    }
    .fan_box .full_widget {
        background-color: #FFFFFF;
        border: 1px solid #E5E5E5;
    }
    .fan_box .full_widget .connect_top {
        background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRAgvXKa3Pe9E-nDvmX4Gltw1y64hO4NBbEXoZGXRx6yxrrC_3wmJTDwegBK9KCW6jxjA1bYa7h5h0dDYP8UFeITlfGKY-MT9NvYUvHMHq00n6JRJ2Yu7xLFuvzrBWj69H0fjMt3NUSNo/s1600/sidebar_bg.png") repeat-x scroll left bottom transparent;
        padding: 8px;
    }
    .fan_box .full_widget .connections {
        background-color: #FFFFFF;
        border-bottom: 1px solid #E5E5E5;
        padding: 5px 1px 1px;
    }
    .fan_box .full_widget .connections_grid {
        background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRAgvXKa3Pe9E-nDvmX4Gltw1y64hO4NBbEXoZGXRx6yxrrC_3wmJTDwegBK9KCW6jxjA1bYa7h5h0dDYP8UFeITlfGKY-MT9NvYUvHMHq00n6JRJ2Yu7xLFuvzrBWj69H0fjMt3NUSNo/s1600/sidebar_bg.png") repeat-x scroll left bottom transparent;
        padding: 6px;
    }
    .fan_box .full_widget .connections .total {
        margin: 4px 0 4px 8px;
    }
    .fan_box .profileimage {
        background-color: #FFFFFF;
        border: 1px solid #E5E5E5;
        display: inline;
        margin-right: 10px;
        padding: 5px;
    }
    .fan_box .full_widget .connections_grid a img {
        border: 1px solid #FFFFFF;
    }
    .fan_box .full_widget .connections_grid a img:hover {
        border: 1px solid #000000;
    }
    .social_links, .email_rss {
        padding: 5px 0 10px;
        width: 100%;
    }
    .social_links a {
        background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMxAHHMDGqARIRQA6TCzKVmnWQhcBUiGAVZJfXpM30fqvzp5DvujgdhHBXO-hmCOLjM7Et7PZZyydmboVw8OSZq0Gqfdfk6reYDFIzp7qJpV7_fAxXrKvManKBsDZ-yi6F7B6yEjHxHLw/s1600/social.png");
        background-repeat: no-repeat;
        color: #999999;
        display: inline;
        float: left;
        font-size: 11px;
        margin-bottom: 0;
        padding-top: 45px;
        text-align: center;
        text-decoration: none;
        width: 67px;
    }
    .social_links a:hover {
        color: #000000;
        text-decoration: underline;
    }
    a#side_fb {
        background-position: -173px 0;
    }
    a#side_tw {
        background-position: -81px 0;
    }
    a#side_rss {
        background-position: 8px 0;
    }
    a#side_email {
        background-position: -267px 0;
    }
    #geek {
        background: url("4.bp.blogspot.com/-JJL5i3WAtEA/UDip4G3DxhI/AAAAAAAAF7A/fa1vmnxMt38/s1600/social.png") no-repeat scroll -387px -363px transparent;
        bottom: -1px;
        display: block;
        height: 117px;
        position: absolute;
        right: -22px;
        text-indent: -9999em;
        width: 94px;
    }
    .email_rss {
        border-bottom: 1px solid #E5E5E5;
        margin-bottom: 5px;
        position: relative;
    }
    .email_rss span {
        font-size: 11px;
    }
    #subscribe-form {
        margin-top: 5px;
    }
    #subscribe-form #newsletter {
        border: 1px solid #CCCCCC;
        padding: 5px;
        width: 150px;
    }
    #subscribe-form #newsletter:focus {
        background-color: #F5F2D3;
        border: 1px solid #000000;
    }
    #subscribe-form .btn {
        background-color: #7EB4CF;
        border: 1px solid #2F6A89;
        box-shadow: 3px 3px 0 #6DA5C1 inset, -3px -3px 0 #6DA5C1 inset;
        color: #FFFFFF;
        cursor: pointer;
        display: inline;
        float: right;
        font-size: 12px;
        font-weight: 900;
        line-height: 12px;
        padding: 5px 8px;
        position: relative;
        text-shadow: 0 1px 0 #000000;
        z-index: 999;
    }
    #subscribe-form .btn:hover {
        background-color: #4E9CC4;
    }
    #subscribe-form span {
        background-color: #F5F5F5;
        display: inline;
        float: left;
        margin-right: 10px;
        padding: 3px;
    }

    h3 {
    font-family: MgOpenModata;
    
        font-weight: 400;
    }
    #sidebar .widget .head p {
        color: #999999;
        font-size: 11px;
        line-height: 15px;
        padding: 0;
    }
    </style>

 <div class='widget' id='counter'>
    <div class='inner clearfix'>
    <div class='box-out'>
    <div class='head box'>
    <h3>Assine</h3>
    <p>Inscreva-se e siga Templates e Acessórios</p>
    </div>
    </div>
    <div class='side_cont box-out clearfix'>
    <div class='box clearfix'>
    <div class='email_rss clearfix'>
    <span>Assine nossas atualizações</span>

    <form action='http://feedburner.google.com/fb/a/mailverify' class='clearfix' id='subscribe-form' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=&apos;bloggingehow&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
    <input class='txt' id='newsletter' name='email' type='text'/><input name='uri' type='hidden' value='bloggingehow'/><input name='loc' type='hidden' value='en_US'/><input class='btn' type='submit' value='Assinar'/></form>

    </div>


    <div class='social_links clearfix'>

    <a class='png_bg dysocial' href='http://www.facebook.com/pages/Templates-e-Acessórios' id='side_fb' rel='nofollow' title='Assine nossa página'>Facebook</a>

    <a class='png_bg dysocial' href='https://twitter.com/elkedibarros1' id='side_tw' rel='nofollow' title='Siga-nos'>Twitter</a>

    <a class='png_bg dysocial' href='http://feeds.feedburner.com/TemplatesEAcessrios/' id='side_rss' rel='nofollow' title='Inscreva-se via RSS'>RSS</a>

    <a class='png_bg dysocial' href='http://feeds.feedburner.com/TemplatesEAcessrios' id='side_email' rel='nofollow' title='Assine por email'>Email</a>

    </div></div></div></div></div>