Curta Nossa Página do Facebook!


  • Desenvolvido Por Iago Melanias

    Redes Sociais na lateral da tela

    Estava zanzando na net e achei um tutorial bem legal e interessante, um que todas as redes sociais ficam coladas na lateral da tela. Aqui vai a demonstração:Demonstração
    Então vamos lá:

    Primeiro vá normalmente no blog e vá em editar HTML. Chegando lá procure por ]]></b:skin> e ACIMA dela cole o código:


    /* Page-Navigation - Ryuuzaki
    ----------------------------------------------- */
    .showpageArea {
    font-family:verdana,arial,helvetica;
    color: #000;
    font-size:11px;
    margin:10px;
    }

    .showpageArea a {
    color: #fff;
    }

    .showpageNum a {
    padding: 3px 8px;
    margin:0 4px;
    text-decoration: none;
    background: #333 url(http://3.bp.blogspot.com/_McxL-_3YYuM/TBG_wCOTrOI/AAAAAAAAAA0/MaANtQYQwgg/s1600/wp5.jpg) 0 -50px repeat-x;
    }

    .showpageNum a:hover {
    background: #666 url(http://3.bp.blogspot.com/_McxL-_3YYuM/TBG_wCOTrOI/AAAAAAAAAA0/MaANtQYQwgg/s1600/wp5.jpg) 0 -25px repeat-x;
    }

    .showpagePoint {
    color:#fff;
    padding: 3px 8px;
    margin: 2px;
    font-weight: 700;
    background: #06a2b9 url(http://3.bp.blogspot.com/_McxL-_3YYuM/TBG_wCOTrOI/AAAAAAAAAA0/MaANtQYQwgg/s1600/wp5.jpg) 0 0 repeat-x;
    text-decoration: none;
    }

    .showpageOf{
    margin:0 8px 0 0;
    }

    ul#menusisi {
    position:fixed;
    margin:0;
    padding:0;
    top:80px;
    left:0;
    list-style:none;
    z-index:9999;
    }
    ul#menusisi li {
    width:100px;
    }
    ul#menusisi li a {
    display:block;
    margin-left:-50px;
    width:100px;
    height:55px;
    background-color:#141414; /* Cor de fundo do botão */
    background-repeat:no-repeat;
    background-position:48px center;
    border:1px solid #cfcfcf; /* Cor da borda do botão*/
    -moz-border-radius:0px 10px 10px 0px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-top-right-radius: 10px;
    /*-moz-box-shadow: 0px 4px 3px #000;
    -webkit-box-shadow: 0px 4px 3px #000;
    */
    opacity:0.8;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
    }
    ul#menusisi .home a {
    background-image:url(http://lh6.ggpht.com/_xcD4JK_dIjU/S9BJaBfhOhI/AAAAAAAAD_0/nV3ITEV9d3M/d/nav_home.png);
    }
    ul#menusisi .twitter a {
    background-image:url(https://www.coderesort.com/p/epicode/export/1390/FV.ShareIt/trunk/Install/FV.ShareIt/Images/twitter-48x48.png);
    }
    ul#menusisi .youtube a {
    background-image:url(http://www.cornealdystrophyfoundation.org/assets/images/youtube-48x48.png);
    }
    ul#menusisi .facebook a {
    background-image:url(https://www.coderesort.com/p/epicode/export/1390/FV.ShareIt/trunk/FV.ShareIt/FV.ShareIt/Images/facebook-48x48.png);
    }
    ul#menusisi .orkut a {
    background-image:url(http://static.wix.com/media/0d3caec202c11a5904b9cb4f697c2a3f.wix_mp_256);
    }
    ul#menusisi .rssfeed a {
    background-image:url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJaabJhzI/AAAAAAAAEAA/Oo4mhwCwzbI/d/nav_rss.png);

    }
    #toTop {
    width:50px; /* Largura do botão * /
    background: #000000; /* Cor do botão*/
    border:1px solid #FFF; /* Cor da borda */
    text-align:center; /* Alinhamento do texto */
    padding:5px; /* Distancia entre texto e borda */
    position:fixed; /* Posição que faz com que ele corra por toda a página*/
    bottom:5px;
    right:5px;
    cursor:pointer;
    color:#FFFFFF; /* Cor da letra */
    text-decoration:none;
    font-weight:700; /* Tamanho da letra */
    -moz-border-radius:5px; /* Definições para o angulo do botão */
    -khtml-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    }
    #blog-pager-newer-link {
    float: left;
    text-transform: capitalize;
    font: bold 14px arial;
    color: #fff;
    }
    #blog-pager-older-link {
    float: right;
    text-transform: capitalize;
    font: bold 14px arial;
    color: #fff;
    }
    #blog-pager {
    text-align: center;
    text-transform: capitalize;
    font: bold 12px arial;
    padding: 10px 0;
    }
    .showpageArea {
    font-family:"Oswald", Lucida Sans Unicode, Helvetica, Arial, sans-serif;
    color: #353131;
    font-size:15px;
    margin:20px;
    }
    .showpageNum a,
    .showpage a{
    padding:0px 8px;
    margin:0 3px;
    text-decoration:none;
    background:#fff;
    border:1px solid #353131;
    font-size:16px;
    color:#000000;
    -webkit-border-radius:5px;-moz-border-radius:8px;
    }
    .showpageNum a:hover{
    background:#353131;
    color:#000;
    }
    .showpagePoint{
    color:#000;
    font-size:17px;
    padding:0 8px;
    margin:2px;
    -webkit-border-radius:5px;-moz-border-radius:8px;
    border:1px solid #353131;
    background:#353131;
    text-decoration:none;
    }
    .showpageOf{
    display:none !important;
    visibility:hidden !important
    }

    #gb {
    position:fixed;
    top:150px;
    z-index:+1000;
    right:-610px;
    }

    * html #gb {
    position:relative;
    }

    .gbtab {
    height:161px;
    width:47px;
    float:left;
    cursor:pointer;
    background:url('http://4.bp.blogspot.com/-JwNTvG-mTrI/T5XW8oBi4OI/AAAAAAAAAEY/AvOs18rFwgE/s1600/bot%C3%A3o+do+xat+c%C3%B3pia.png') no-repeat;
    margin-top:20px;
    }

    .gbcontent {
    float:right;
    border:2px solid #8c00c1;
    background:#fff;
    opacity:0.80;
    -moz-opacity: 0.80;
    filter: alpha(opacity=80);
    -webkit-border-radius: 20px;
    border-radius: 20px;
    -khtml-border-radius: 20px;
    padding:8px;
    }



    Feito isso, pressione CTRL + F e procure por </body>

    e ACIMA dela cole o seguinte código:

    Download do código

    PS: Coloque seu link onde estiver escrito "LINK (TWITTER, FACBEOOK, ORKUT, ETC)" e para editar fundo do botão altere aqui: background-color:#141414;


    NÃO SE ESQUEÇAM, FALTAM 3 DIAS PARA O FIM DO CONCURSO: SEU LAYOUT NOSSO TEMPLATE Õ/

    Um comentário: