728x90 AdSpace

Pagseguro

  • Novidades

    segunda-feira, 15 de setembro de 2014

    COMO COLOCAR WIDGET ÚLTIMAS NOVIDADES NO BLOGGER

    Widget de novidades, exibe de maneira automática as postagens recentes do blog e com ícones das principais redes sociais.

    COMO COLOCAR WIDGET ÚLTIMAS NOVIDADES NO BLOGGER
    Um dos widgets de destaque mais procurados pelos blogueiros é o “Últimas Novidades” ou muitas vezes encontrados em templates profissionais intitulado de “Breaking News”. Esse código, por ser um pouco complexo, nem sempre é disponibilizado pela questão de estarem em templates pagos e praticamente “forçando” os donos de blogs a adquiri-los para poder usufruir dessa funcionalidade.

    WIDGET ÚLTIMAS NOVIDADES (BREAKING NEWS) EM SEU BLOG

    Com essa ferramenta, serão exibidas as postagens recentes “passando em fila” para que sejam apreciadas pelos visitantes e os mesmos possam saber que aqueles são novos artigos publicados em seu blog. Além disso, nesse widget você ainda poderá adicionar suas páginas e/ou perfis nas redes sociais e uma opção de contato, complementados com um atrativo efeito visual ao passar o mouse sobre os ícones, deixando-os com cor de fundo predominante de cada rede social.


    COMO COLOCAR WIDGET ÚLTIMAS NOVIDADES NO BLOGGER

    Colocar widget últimas novidades no Blog


    1. Acesse seu Blogger, vá em "Modelo" e depois "Editar HTML".

    2. Clique no código do template, pressione "CTRL+F" e pesquise por ]]></b:skin>

    3. Logo ACIMA da tag encontrada, cole o seguinte código:
     /*BREAKING NEWS BLOGGER WIDGET-------------*/
    .head_brnews{
    height:30px;background:#fff;width:100%;max-width:1160px;margin:0 auto;border-style: solid ;
    border-width: 1px;border-color: #cccccc;overflow: hidden;width: 938px;margin-top:20px;}
    .breaking-news{
    float:left;
    height:30px;
    position:relative;
    overflow:hidden;
    margin-bottom:20px;
    }
    .breaking-news {
    width:648px;font-family: 'Bree Serif', serif;}
    .breaking-news marquee {
    padding-top:5px;
    }
    .samazhlo {
    background: #4371CF;position:absolute;
    float: left;
    padding: 0 10px;
    height: 32px;
    line-height: 30px;
    color: #FFF;
    font-family: Oswald,arial,Georgia,serif;
    text-transform: uppercase;
    font-size: 10pt;
    margin-right: 10px;}
    .breaking-news h4{
    background: #9EC22D;
    display:block;
    float:left;
    padding:0 10px;
    height:32px;
    line-height:30px;
    color:#FFF;
    font-family: Oswald,arial,Georgia,serif;
    text-transform:uppercase;
    font-size:10pt;
    margin-right:10px
    }
    .breaking-news ul{
    float:left
    }
    .breaking-news a:hover{
    color:#333;
    }
    .breaking-news ul li{
    float:left;
    display:block;
    list-style:none;
    }
    .breaking-news ul a{
    padding:1px;
    display:block;
    color:#333;
    white-space:nowrap;
    float:left;
    line-height:30px;
    font-size:13px;
    font-family: 'Droid Serif', serif;
    display:hidden;
    }
    .breaking-news span{
    display:block;
    float:left;
    padding:1px 10px;
    color:#333;
    font-size:12px;
    line-height:30px;
    }
    #social { height:30px; float: right; }
    #social .social_header { margin-bottom: 10px; }
    #social a { border-left: 1px solid #ccc; transition: all 0.6s; -moz-transition: all 0.6s; -ms-transition: all 0.6s; -o-transition: all 0.6s; -webkit-transition: all 0.6s; }
    #social a:hover {transition: all 0.6s; -moz-transition: all 0.6s; -ms-transition: all 0.6s; -o-transition: all 0.6s; -webkit-transition: all 0.6s; }
    #social a.facebook { display:block; float:left; height:30px; width:30px; text-indent:-9999px; background-image:url('http://4.bp.blogspot.com/-2x-LERJnjqU/UqDWg5jizyI/AAAAAAAACpI/0s2QrfsHkwc/s1600/socials@2x.png'); background-position:0px -30px; background-size: 270px 60px; }
    #social a:hover.facebook { background-image:url('http://4.bp.blogspot.com/-2x-LERJnjqU/UqDWg5jizyI/AAAAAAAACpI/0s2QrfsHkwc/s1600/socials@2x.png'); background-position:0px 0px; background-size: 270px 60px; background-color:#436eac; }
    #social a.twitter { display:block; float:left; height:30px; width:30px; text-indent:-9999px; background-image:url('http://4.bp.blogspot.com/-2x-LERJnjqU/UqDWg5jizyI/AAAAAAAACpI/0s2QrfsHkwc/s1600/socials@2x.png'); background-position:-30px -30px; background-size: 270px 60px; }
    #social a:hover.twitter { background-image:url('http://4.bp.blogspot.com/-2x-LERJnjqU/UqDWg5jizyI/AAAAAAAACpI/0s2QrfsHkwc/s1600/socials@2x.png'); background-position:-30px 0px; background-size: 270px 60px; background-color:#0598c9; }
    #social a.flickr { display:block; float:left; height:30px; width:30px; text-indent:-9999px; background-image:url('http://4.bp.blogspot.com/-2x-LERJnjqU/UqDWg5jizyI/AAAAAAAACpI/0s2QrfsHkwc/s1600/socials@2x.png'); background-position:-60px -30px; background-size: 270px 60px; }
    #social a:hover.flickr { background-image:url('http://4.bp.blogspot.com/-2x-LERJnjqU/UqDWg5jizyI/AAAAAAAACpI/0s2QrfsHkwc/s1600/socials@2x.png'); background-position:-60px 0px; background-size: 270px 60px; background-color:#e33b7e; }
    #social a.pinterest{ display:block; float:left; height:30px; width:30px; text-indent:-9999px; background-image:url('http://4.bp.blogspot.com/-2x-LERJnjqU/UqDWg5jizyI/AAAAAAAACpI/0s2QrfsHkwc/s1600/socials@2x.png'); background-position:-90px -30px; background-size: 270px 60px; }
    #social a:hover.pinterest { background-image:url('http://4.bp.blogspot.com/-2x-LERJnjqU/UqDWg5jizyI/AAAAAAAACpI/0s2QrfsHkwc/s1600/socials@2x.png'); background-position:-90px 0px; background-size: 270px 60px; background-color:#cb2027; }
    #social a.googleplus { display:block; float:left; height:30px; width:30px; text-indent:-9999px; background-image:url('http://4.bp.blogspot.com/-2x-LERJnjqU/UqDWg5jizyI/AAAAAAAACpI/0s2QrfsHkwc/s1600/socials@2x.png'); background-position:-120px -30px; background-size: 270px 60px; }
    #social a:hover.googleplus { background-image:url('http://4.bp.blogspot.com/-2x-LERJnjqU/UqDWg5jizyI/AAAAAAAACpI/0s2QrfsHkwc/s1600/socials@2x.png'); background-position:-120px 0px; background-size: 270px 60px; background-color:#d64b2e; }
    #social a.vimeo { display:block; float:left; height:30px; width:30px; text-indent:-9999px; background-image:url('http://4.bp.blogspot.com/-2x-LERJnjqU/UqDWg5jizyI/AAAAAAAACpI/0s2QrfsHkwc/s1600/socials@2x.png'); background-position:-150px -30px; background-size: 270px 60px; }
    #social a:hover.vimeo { background-image:url('http://4.bp.blogspot.com/-2x-LERJnjqU/UqDWg5jizyI/AAAAAAAACpI/0s2QrfsHkwc/s1600/socials@2x.png'); background-position:-150px 0px; background-size: 270px 60px; background-color:#86ae24;}
    #social a.youtube { display:block; float:left; height:30px; width:60px; text-indent:-9999px; background-image:url('http://4.bp.blogspot.com/-2x-LERJnjqU/UqDWg5jizyI/AAAAAAAACpI/0s2QrfsHkwc/s1600/socials@2x.png'); background-position:-180px -30px; background-size: 270px 60px; }
    #social a:hover.youtube { background-image:url('http://4.bp.blogspot.com/-2x-LERJnjqU/UqDWg5jizyI/AAAAAAAACpI/0s2QrfsHkwc/s1600/socials@2x.png'); background-position:-180px 0px; background-size: 270px 60px; background-color:#e32114;}
    #social a.mail { display:block;float:left; height:30px; width:32px; text-indent:-9999px; background-image:url('http://4.bp.blogspot.com/-2x-LERJnjqU/UqDWg5jizyI/AAAAAAAACpI/0s2QrfsHkwc/s1600/socials@2x.png'); background-position:-240px -30px; background-size: 270px 60px; }
    #social a:hover.mail { background-image:url('http://4.bp.blogspot.com/-2x-LERJnjqU/UqDWg5jizyI/AAAAAAAACpI/0s2QrfsHkwc/s1600/socials@2x.png'); background-position:-240px 0px; background-size: 270px 60px; background-color:#bc75d6;} 

    Para ajustar a largura total é necessário que configure em conjunto os trechos hidden;width: 938px; .breaking-news { width:648px

    O trecho .samazhlo { background: #4371CF; é referente a cor de fundo do título "Últimas Novidades", altere caso desejar.

    5.  Feito isso procure por </head>

    6. Logo ACIMA da tag encontrada, cole o seguinte código:
     <link href="http://fonts.googleapis.com/css?family=Bree+Serif" rel="stylesheet" type="text/css"></link> 
    7. Pesquise agora por </header>

    8. Logo ABAIXO da tag encontrada, cole o seguinte código:
     <div class='head_brnews'>
    <div class='breaking-news'><div class='samazhlo'>Ultimas Novidades</div> 
    <script type='text/javascript'>
    //<![CDATA[
    function RecentPostsScrollerv2(json) {
    var sHeadLines;
    var sPostURL;
    var objPost;
    var sMoqueeHTMLStart;
    var sMoqueeHTMLEnd;
    var sHeadlineTerminator;
    var sPostLinkLocation;
    try {
    sMoqueeHTMLStart = "\<MARQUEE behavior=\"scroll\" onmouseover=\"this.stop();\" onmouseout=\"this.start();\" ";
    if (nWidth) {
    sMoqueeHTMLStart = sMoqueeHTMLStart + " width = \"" + nWidth + "%\"";
    } else {
    sMoqueeHTMLStart = sMoqueeHTMLStart + " width = \"100%\"";
    }
    if (nScrollDelay) {
    sMoqueeHTMLStart = sMoqueeHTMLStart + " scrolldelay = \"" + nScrollDelay + "\"";
    }
    if (sDirection) {
    sMoqueeHTMLStart = sMoqueeHTMLStart + " direction = \"" + sDirection + "\"\>";
    if (sDirection == "left" || sDirection == "right") {
    sHeadlineTerminator = "  ";
    } else {
    sHeadlineTerminator = "\<br/\>";
    }
    }
    if (sOpenLinkLocation == "N") {
    sPostLinkLocation = " target= \"_blank\" ";
    } else {
    sPostLinkLocation = " ";
    }
    sMoqueeHTMLEnd = "\</MARQUEE\>"
    sHeadLines = "";
    for (var nFeedCounter = 0; nFeedCounter < nMaxPosts; nFeedCounter++) {
    var objPost = json.feed.entry[nFeedCounter];
    if (nFeedCounter == json.feed.entry.length) break;
    for (var nCounter = 0; nCounter < objPost.link.length; nCounter++) {
    if (objPost.link[nCounter].rel == 'alternate') {
    sPostURL = objPost.link[nCounter].href;
    break;
    }
    }
    sHeadLines = sHeadLines + "\<b\>" + sBulletChar + "\</b\> \<a " + sPostLinkLocation + " href=\"" + sPostURL + "\">" + objPost.title.$t + "\</a\>" + sHeadlineTerminator;
    }
    
    if (sDirection == "left") {
    sHeadLines = sHeadLines + "  ";
    } else if (sDirection == "right") {
    sHeadLines = "  " + sHeadLines;
    } else if (sDirection == "up") {
    sHeadLines = sHeadLines + "\<br/\>";
    } else {
    sHeadLines = "\<br/\>" + sHeadLines;
    }
    document.write(sMoqueeHTMLStart + sHeadLines + sMoqueeHTMLEnd)
    } catch (exception) {
    alert(exception);
    }
    }
    //]]>
    </script>
    <script type='text/javascript'>
    var nMaxPosts =6;
    var nWidth = 100;
    var nScrollDelay = 90;
    var sDirection = "left";
    var sOpenLinkLocation = "N";
    var sBulletChar = ">>";
    </script>
    <script src='/feeds/posts/default?alt=json-in-script&callback=RecentPostsScrollerv2&max-results=6' type='text/javascript'/>
    </div>
    <!--Social Icons Started -->
    <div id='social'>
    <a class='facebook' href='SEU-FACEBOOK' /><a class='twitter' href='SEU-TWITTER' /><a class='flickr' href='SEU-FLICKER' /><a class='pinterest' href='SEU-PINTEREST' /><a class='googleplus' href='SEU-GOOGLE-PLUS' /><a class='vimeo' href='SEU-VIMEO' /><a class='youtube' href='SEU-YOUTUE' /><a class='mail' href='mailto:'SEU-E-
    ' /></div>
    <!--Social Icons End-->
    </div> 

    Substitua as frases por suas redes sociais

    Pronto! se você seguiu os passos já tem um "Breaking News” no seu blog, essa ferramenta lhe trará um maior destaque aos seus post recém publicados em seu blog, e possibilitará uma maior interatividade com seus leitores.

    Você que conseguiu fazer, deixe seu comentário aí em baixo....se não conseguiu diga sua dificuldade....
    • Comentarios Blog
    • Comentarios Facebook

    2 comentários:

    1. Como que vamos copiar se tu ta bloqueando p ñ copiarmos? legal essa

      ResponderExcluir
      Respostas
      1. Olá Ricardo Tudo bem?
        Para copiar os código basta passar no mouse na parte superior da caixa, e clicar no botão view source e só copiar o código que aparecer.
        Muito obrigado pelo contato, espero que dê certo, abraço!

        Excluir

    Item Reviewed: COMO COLOCAR WIDGET ÚLTIMAS NOVIDADES NO BLOGGER Rating: 5 Reviewed By: Miguel Araujo
    Scroll to Top