19 de jan de 2013

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("http://3.bp.blogspot.com/-m_McCYf36ig/UHKKMtKImCI/AAAAAAAAG9s/2bTW3g4VvV0/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("http://3.bp.blogspot.com/-HRLwwHESa7E/UDipbPeTd6I/AAAAAAAAF64/JYE8V3mtgZs/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("http://3.bp.blogspot.com/-HRLwwHESa7E/UDipbPeTd6I/AAAAAAAAF64/JYE8V3mtgZs/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("http://3.bp.blogspot.com/-HRLwwHESa7E/UDipbPeTd6I/AAAAAAAAF64/JYE8V3mtgZs/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("http://3.bp.blogspot.com/-HRLwwHESa7E/UDipbPeTd6I/AAAAAAAAF64/JYE8V3mtgZs/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("http://4.bp.blogspot.com/-JJL5i3WAtEA/UDip4G3DxhI/AAAAAAAAF7A/fa1vmnxMt38/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>

Nenhum comentário:

Postar um comentário

A legislação brasileira prevê a possibilidade de se responsabilizar o blogueiro pelo conteúdo do blog, inclusive quanto a comentários; portanto, o autor deste blog reserva a si o direito de não publicar comentários que firam a lei, a ética ou quaisquer outros princípios da boa convivência. Não serão aceitos comentários anônimos ou que envolvam crimes de calúnia, ofensa, falsidade ideológica, multiplicidade de nomes para um mesmo IP ou invasão de privacidade pessoal / familiar a qualquer pessoa. Comentários sobre assuntos que não são tratados aqui também poderão ser suprimidos, bem como comentários com links. Este é um espaço público e coletivo e merece ser mantido limpo para o bem-estar de todos nós.


Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube