Widget últimas novidades que exibe de maneira automática as postagens recentes do blog e com ícones das principais redes sociais.
Colocar algo de destaque no blog pode ser um ponto crucial e fundamental para alcançar o objetivo desejado. Entre algumas opções que deparamos nem sempre são o que esperávamos e outras são muito complicadas para serem adaptadas às nossas exigências e, por isso, acabamos desistindo de colocar uma funcionalidade que tanto almejamos.
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
Aqui não te forçamos a nada e por isso trazemos esse sensacional Widget Últimas Novidades e ainda te ensinamos como colocar 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.
O tutorial é bem simples e prático, após a conclusão seu blog contará com esse atrativo tão desejado e procurado que agora está em fácil alcance de suas mãos.
Recomendamos que antes de qualquer alteração no código faça um backup do template. Caso ainda não saiba como proceder, acesse o artigo Como Fazer Backup do Blog.
Colocar widget últimas novidades no Blog
>> Acesse seu Blogger, vá em "Modelo" e depois "Editar HTML".
>> Clique no código do template, pressione "CTRL+F" e pesquise por ]]></b:skin>
>> 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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG9FwjTfrphXzg6Lz2OVwYysHEo-WPqJDKDCfXoAdli9HjRX1PJ9d5JyV2umvvfWGhMJR14ozinhCOj2hStl1rs0xjAIPFdf1-Ub3Z-FKLQe3ZybssTDK_H2BjcVFF7WHTH4G2_wwY__Tt/s1600/socials@2x.png'); background-position:0px -30px; background-size: 270px 60px; }
#social a:hover.facebook { background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG9FwjTfrphXzg6Lz2OVwYysHEo-WPqJDKDCfXoAdli9HjRX1PJ9d5JyV2umvvfWGhMJR14ozinhCOj2hStl1rs0xjAIPFdf1-Ub3Z-FKLQe3ZybssTDK_H2BjcVFF7WHTH4G2_wwY__Tt/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG9FwjTfrphXzg6Lz2OVwYysHEo-WPqJDKDCfXoAdli9HjRX1PJ9d5JyV2umvvfWGhMJR14ozinhCOj2hStl1rs0xjAIPFdf1-Ub3Z-FKLQe3ZybssTDK_H2BjcVFF7WHTH4G2_wwY__Tt/s1600/socials@2x.png'); background-position:-30px -30px; background-size: 270px 60px; }
#social a:hover.twitter { background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG9FwjTfrphXzg6Lz2OVwYysHEo-WPqJDKDCfXoAdli9HjRX1PJ9d5JyV2umvvfWGhMJR14ozinhCOj2hStl1rs0xjAIPFdf1-Ub3Z-FKLQe3ZybssTDK_H2BjcVFF7WHTH4G2_wwY__Tt/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG9FwjTfrphXzg6Lz2OVwYysHEo-WPqJDKDCfXoAdli9HjRX1PJ9d5JyV2umvvfWGhMJR14ozinhCOj2hStl1rs0xjAIPFdf1-Ub3Z-FKLQe3ZybssTDK_H2BjcVFF7WHTH4G2_wwY__Tt/s1600/socials@2x.png'); background-position:-60px -30px; background-size: 270px 60px; }
#social a:hover.flickr { background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG9FwjTfrphXzg6Lz2OVwYysHEo-WPqJDKDCfXoAdli9HjRX1PJ9d5JyV2umvvfWGhMJR14ozinhCOj2hStl1rs0xjAIPFdf1-Ub3Z-FKLQe3ZybssTDK_H2BjcVFF7WHTH4G2_wwY__Tt/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG9FwjTfrphXzg6Lz2OVwYysHEo-WPqJDKDCfXoAdli9HjRX1PJ9d5JyV2umvvfWGhMJR14ozinhCOj2hStl1rs0xjAIPFdf1-Ub3Z-FKLQe3ZybssTDK_H2BjcVFF7WHTH4G2_wwY__Tt/s1600/socials@2x.png'); background-position:-90px -30px; background-size: 270px 60px; }
#social a:hover.pinterest { background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG9FwjTfrphXzg6Lz2OVwYysHEo-WPqJDKDCfXoAdli9HjRX1PJ9d5JyV2umvvfWGhMJR14ozinhCOj2hStl1rs0xjAIPFdf1-Ub3Z-FKLQe3ZybssTDK_H2BjcVFF7WHTH4G2_wwY__Tt/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG9FwjTfrphXzg6Lz2OVwYysHEo-WPqJDKDCfXoAdli9HjRX1PJ9d5JyV2umvvfWGhMJR14ozinhCOj2hStl1rs0xjAIPFdf1-Ub3Z-FKLQe3ZybssTDK_H2BjcVFF7WHTH4G2_wwY__Tt/s1600/socials@2x.png'); background-position:-120px -30px; background-size: 270px 60px; }
#social a:hover.googleplus { background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG9FwjTfrphXzg6Lz2OVwYysHEo-WPqJDKDCfXoAdli9HjRX1PJ9d5JyV2umvvfWGhMJR14ozinhCOj2hStl1rs0xjAIPFdf1-Ub3Z-FKLQe3ZybssTDK_H2BjcVFF7WHTH4G2_wwY__Tt/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG9FwjTfrphXzg6Lz2OVwYysHEo-WPqJDKDCfXoAdli9HjRX1PJ9d5JyV2umvvfWGhMJR14ozinhCOj2hStl1rs0xjAIPFdf1-Ub3Z-FKLQe3ZybssTDK_H2BjcVFF7WHTH4G2_wwY__Tt/s1600/socials@2x.png'); background-position:-150px -30px; background-size: 270px 60px; }
#social a:hover.vimeo { background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG9FwjTfrphXzg6Lz2OVwYysHEo-WPqJDKDCfXoAdli9HjRX1PJ9d5JyV2umvvfWGhMJR14ozinhCOj2hStl1rs0xjAIPFdf1-Ub3Z-FKLQe3ZybssTDK_H2BjcVFF7WHTH4G2_wwY__Tt/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG9FwjTfrphXzg6Lz2OVwYysHEo-WPqJDKDCfXoAdli9HjRX1PJ9d5JyV2umvvfWGhMJR14ozinhCOj2hStl1rs0xjAIPFdf1-Ub3Z-FKLQe3ZybssTDK_H2BjcVFF7WHTH4G2_wwY__Tt/s1600/socials@2x.png'); background-position:-180px -30px; background-size: 270px 60px; }
#social a:hover.youtube { background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG9FwjTfrphXzg6Lz2OVwYysHEo-WPqJDKDCfXoAdli9HjRX1PJ9d5JyV2umvvfWGhMJR14ozinhCOj2hStl1rs0xjAIPFdf1-Ub3Z-FKLQe3ZybssTDK_H2BjcVFF7WHTH4G2_wwY__Tt/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG9FwjTfrphXzg6Lz2OVwYysHEo-WPqJDKDCfXoAdli9HjRX1PJ9d5JyV2umvvfWGhMJR14ozinhCOj2hStl1rs0xjAIPFdf1-Ub3Z-FKLQe3ZybssTDK_H2BjcVFF7WHTH4G2_wwY__Tt/s1600/socials@2x.png'); background-position:-240px -30px; background-size: 270px 60px; }
#social a:hover.mail { background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG9FwjTfrphXzg6Lz2OVwYysHEo-WPqJDKDCfXoAdli9HjRX1PJ9d5JyV2umvvfWGhMJR14ozinhCOj2hStl1rs0xjAIPFdf1-Ub3Z-FKLQe3ZybssTDK_H2BjcVFF7WHTH4G2_wwY__Tt/s1600/socials@2x.png'); background-position:-240px 0px; background-size: 270px 60px; background-color:#bc75d6;}
* Atenção: Para ajustar a largura total é necessário que configure em conjunto os dois trechos destacados em VERDE.
* Destacado em LARANJA, é a cor de fundo do título "Últimas Novidades", altere caso desejar.
>> Pesquise agora por </head>
>> 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'/>
>> Pesquise agora por </header> ou <div id='header-wrapper'>
>> 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='http://www.facebook.com/' />
<a class='twitter' href='https://twitter.com/' />
<a class='flickr' href='http://www.flickr.com/' />
<a class='pinterest' href='http://pinterest.com/' />
<a class='googleplus' href='https://plus.google.com/' />
<a class='vimeo' href='http://vimeo.com/' />
<a class='youtube' href='http://www.youtube.com/' />
<a class='mail' href='mailto:info@hhh.com' />
</div>
<!--Social Icons End-->
</div>
* Em VERMELHO, substitua pelos links nas redes sociais correspondentes.
* Em AZUL, substitua pelo seu endereço de E-mail.
>> Clique em "Visualizar", se estiver tudo normal clique em "Salvar Modelo".
>> Vá em seu blog e veja como ficou.
Tutorial concluído!! aproveite essa excelente ferramenta que trará um maior destaque aos posts recém publicados em seu blog e que possibilitará uma maior interatividade com seus leitores para que eles fiquem sempre bem informados com relação a atualizações.
Clique em "Leia Mais".
.gif)
