Já tive uma barra dessas em um de meus blogs, acho que qualquer blog ela dá up e atrai seus leitores para que não se percam apenas lendo suas postagens antigas é um chama pra que eles vejam suas últimas postagens e assim você ganha sempre mais visualizações.
O efeito desta barra é que os títulos de suas últimas postagens vem de baixo para cima. É interessante e dá um charme pra quem quer ter um blog personalizado, instale e veja:
 |
| Este é um exemplo de como ficará a barra após instalada |
Antes de começar faça um backup do modelo do seu blog caso haja problemas é só voltar ao normal
A primeira coisa a fazer é ir até o seu modelo em TEMA depois em Editar HTML em seguida dê um click dentro da caixa de códigos e depois CTRL+F quando aparecer a caixa de busca e nela busque um local onde você achar melhor que fica esta barra de postagens recentes geralmente usamos na sessão </header> acima ou abaixo do seu menu isso é de sua preferencia, digo isso porque ele funcionará em qualquer parte de seu blog ou até mesmo se você quiser colocá-lo em HTML / Javascript, ok.
<div id='beakingnews'><span class='tulisbreaking'>Ultimas</span>
<div id='recentpostbreaking'>Carregando os posts...</div></div>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
var url_blog = 'URL-DO-SEU-BLOG', // Coloque a Url do Blog
numpostx = 20; // Numero Maximo de Posts
$.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>';
$('#recentpostbreaking').html(skeleton);
// kode untuk efek pada breaking news
function tick(){
$('#recentpostbreaking li:first').slideUp( function () { $(this).appendTo($('#recentpostbreaking ul')).slideDown(); });
}
setInterval(function(){ tick () }, 5000);
} else {
$('#recentpostbreaking').html('<span>No result!</span>');
}
},
error: function() {
$('#recentpostbreaking').html('<strong>Error Loading Feed!</strong>');
}
});
});
//]]>
</script>
<div class='clear'/>
Fazendo as alterações necessárias
Onde está "Ultimas" e "Carregando os posts" você pode mudar pro texto se sua preferência, ok.
No trecho URL-DO-SEU-BLOG você colocar a url do seu blog como por exemplo https://nomedoseublog.com.br
No trecho "numpostx = 20" o número 20 é o número máximo de postagens que aparecerão na barra por vez, ou seja se chegar a 20 aí começa tudo de novo desde o primeiro. Mude se necessário.
Personalizando a barra de postagens recentes
Agora vamos colocar o código CSS para personalização da barra, continuando na barra de busca da caixa de códigos agora procure por ]]></b:skin> e logo acima desse trecho cole o seguinte código:
#beakingnews {
background:#222;
float: left;
overflow: hidden;
width: 100%;
}
#recentpostbreaking li a {
color:#fff;
font-family: sans-serif;
}
#recentpostbreaking li a:hover {
color:#CD1713;
}
#beakingnews .tulisbreaking {
background:#5E5E5E;
}
#beakingnews {
float: left;
height: 30px;
line-height: 28px;
overflow: hidden;
width: 100%;
}
#recentpostbreaking li a {
color:#fff;
font-family: Open Sans,sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 32px;
}
#recentpostbreaking li a:hover {
color:#333;
}
#beakingnews .tulisbreaking {
background:#333;
}
#beakingnews .tulisbreaking{
color:$(mainbgfontcol.background.color) !important;
}
#beakingnews .tulisbreaking {
color: #FFFFFF;
display: block;
float: left;
font-family: sans-serif;
padding: 5px 10px;
position: absolute;
font-family: Open Sans,sans-serif;
font-size: 14px;
font-weight: 400;
}
#recentpostbreaking {
float: left;
margin-left: 74px;
}
#recentpostbreaking ul,#recentpostbreaking li{list-style:none;margin:0;padding:2px 0 0}
#beakingnews .tulisbreaking {
color: #FFFFFF;
display: block;
float: left;
font-family: sans-serif;
font-weight: bold;
padding: 1px 10px;
position: absolute;
}
#recentpostbreaking {
float: left;
margin-left: 74px;
}
#recentpostbreaking ul,#recentpostbreaking li{list-style:none;margin:0;padding:0}
Espero que tenha conseguido instalar em seu modelo, caso tenho tido problemas na instalação, fico a disposição. Até a próxima.
Nenhum comentário:
Postar um comentário