Breaking News: O que é e como usar!

milkshake, shoes, juice, design, luxury, ipad, healthy, interior, raspberry, breakfast, pink, girl, fashion, accessories

E aí galerinha tudo bem? Hoje vou ensinar este tutorial que eu procurei por bastante tempo porque eu simplesmente amo muito! Mas o que é isso? Clique em Leia Mais e descubra!


Você deve estar se perguntando o que diabos é Breakings News. Se você tem uma noção básica ou até mesmo avançada em Inglês, você já deve ter uma idéia certo? Mas chega de enrolação, vamos logo descobrir o que é ;)

Breaking News nada mas é do que uma barra que mostra as últimas notícias ou no nosso caso, últimas postagens do blogger com direito a botões de redes sociais. Veja o exemplo abaixo:

<br/><a href="http://oi58.tinypic.com/33ue68i.jpg" target="_blank">View Raw Image</a>

O legal é que nesta imagem gif que vocês podem ver acima, é que ao passar o mouse nos ícones das redes sociais elas ficam com fundos coloridos.

Mas então, vamos ao tutorial? Na verdade ele é bem simples e eu aprendi ele no blog mas-andes.blogspot.com.br.


TUTORIAL

Gente, eu não tenho certeza de onde é o certo colocar este código, mas eu recomendo que seja abaixo de:

 <div class='main-outer'> 

Ok? Então você cola:

<style type='text/css' scoped="scoped">
#news {
background: #transparent; /* FUNDO TRANSPARENTE */
display: block; /* NÃO ALTERE */
float: left; /* NÃO ALTERE */
height: 20px; /* ALTURA DO MENU */
line-height: 20px; /* NÃO ALTERE */
overflow: hidden; /* NÃO ALTERE */
padding: 5px 10px; /* NÃO ALTERE */
width: 900px; /* LARGURA DO MENU */
}
.titlenews {
background:#333; /* FUNDO DE "RECENTES" */
color: #fff; /* COR DA FONTE DE "RECENTES" */
margin-left:-10px; /* MARGEM ESQUERDA */
display: block; /* NÃO ALTERE */
float: left; /* NÃO ALTERE */
font: bold 12px/22px Tahoma; /* FONTE */
padding: 4px;  /* NÃO ALTERE */
margin-top: -5px; /* MARGEM DO TOPO */
position: absolute; /* NÃO ALTERE */
}
#ltsposts {
float: left; /* NÃO ALTERE */
margin-left: 60px; /* MARGEM ESQUERDA DAS POSTAGENS (ENTRE RECENTES E AS NOTÍCIAS) */
}
#ltsposts ul,#ltsposts li{
list-style:none;
margin:0;
padding:0;
}
#ltsposts li a {
background: none !important; /* FUNDO DAS NOTÍCIAS */
color:#333 !important; /* COR DA FONTE DAS NOTÍCIAS */
font: bold 12px/22px Tahoma; /* ESTILO DA FONTE */
text-decoration: none; /* NÃO ALTERE */
}
ul.shsocial {
float: right;
margin: -6px -10px 0px 0px;
}
ul.shsocial li {
float:left;
list-style: none outside none;
border:none;
}
ul.shsocial li a{background-color:transparent;background-image:url(http://4.bp.blogspot.com/-Pe-J5S7YCa0/UdXsJoN7GLI/AAAAAAAAL68/ongZAtcNF1E/s1600/spice-social-gadget-sprite.png);background-repeat:no-repeat;background-size:auto 96px;border:0 none;color:white;direction:ltr;display:block; height:32px;overflow:hidden;text-align:left;text-decoration:none;text-indent:-999em;transition:all 0.2s ease 0s;width:32px}
ul.shsocial li.fb a{ background-position:0 0}
ul.shsocial li.gp a{ background-position:-96px 0}
ul.shsocial li.rs a{ background-position:-192px 0}
ul.shsocial li.tw a{ background-position:-256px 0}
ul.shsocial li.fb a:hover{ background-position:0 -32px}
ul.shsocial li.gp a:hover{ background-position:-96px -32px}
ul.shsocial li.rs a:hover{ background-position:-192px -32px}
ul.shsocial li.tw a:hover{ background-position:-256px -32px}
</style>
<div id='news'><span class='titlenews'>Recentes</span>
<div id='ltsposts'>Carregando...</div>
<ul class='shsocial'>
<li class='fb'>
<a href='URL_DO_FACEBOOK' rel='nofollow' target='_blank' title='Facebook'>
</a></li>
<li class='gp'>
<a href='URL_DO_GOOGLE_PLUS' rel='nofollow' target='_blank' title='Google Plus'>
</a></li>
<li class='tw'>
<a href='URL_DO_TWITTER' rel='nofollow' target='_blank' title='Twitter'>
</a></li>
<li class='rs'>
<a href='URL_DO_FEED' rel='nofollow' target='_blank' title='RSS'>
</a></li>
</ul>
</div>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
var url_blog = 'http://galera-uprising.blogspot.com', // Cole o URL do seu blognumpostx     = 20; // Máximo de Posts Exibidos$.ajax({
    url: ''+url_blog+'/feeds/posts/default?alt=json-in-script&max-results=' + numpostx + '',
    type: 'get',
    dataType: "jsonp",
    success: function(data) {
        var posturl, posttitle, skeleton = '',
            entry = data.feed.entry;
        if (entry !== undefined) {
            skeleton = "<ul>";
        for (var i = 0; i < entry.length; i++) {
                for (var j=0; j < entry[i].link.length; j++)
                {
                     if (entry[i].link[j].rel == "alternate")
                        {
                            posturl = entry[i].link[j].href;
                            break;
                         }
                }              
            posttitle = entry[i].title.$t;
            skeleton += '<li><a href="' + posturl + '" target="_blank">' + posttitle + '</a></li>';
        }
            skeleton += '</ul>';
            $('#ltsposts').html(skeleton);
            function tick(){
            $('#ltsposts li:first').slideUp( function () { $(this).appendTo($('#ltsposts ul')).slideDown(); });
            }
        setInterval(function(){ tick () }, 5000);
        } else {
            $('#ltsposts').html('<span>Nenhum Resultado!</span>');
        }
    },
    error: function() {
            $('#ltsposts').html('<strong>Erro no Carregamento do Feed!</strong>');
       }
});
});
//]]>
</script>

Editem só o que está marcado certo gente? E façam o teste em um blog de testes é claro, para caso ocorra erros você possa concertá-los.

A propósito gente, entrem no  Fórum  do UT e comentem lá um dos temas da próxima edição Uprising. As melhores respostas vão aparecer na revista que posso dizer que vem com brindes bem legais, mas é necessário a sua participação ok?

Espero que tenham gostado gente, até a próxima ;)