Olá Pessoal, hoje estarei compartilhando com vocês um efeito bastante pedido , hoje ensinarei como adicionar essa barra do topo para assinar feed que eu uso aqui a bastante tempo, a barra pode ser vista em uso aqui mesmo no PB, localizada no topo do blog, essa barra sem dúvida é bem elegante e chama bastante atenção dos seus leitores para a assinatura dos feeds.
Se você deseja instalar essa elegante barra em seu blog e sem duvida conquistar mais assinantes de feeds, basta seguir o tutorial abaixo.
Alerta! Antes de fazer qualquer modificação, faça um backup do seu modelo.
Vá em modelo ► Fazer backup/Restaurar ► Fazer download do modelo completo.
Vá em modelo ► Fazer backup/Restaurar ► Fazer download do modelo completo.
/*----Barra Assinar feed no topo by http://www.personalizaroblogger.com.br----*/
.note-bar{display:none;overflow: hidden;background: #2780c7;height: 38px;border-bottom: 4px solid #fff;}.note-bar p {color: #FFFFFF;float: center;font-size: 14px;line-height: 36px;margin: 0 0 0 10px;padding: 0;text-shadow: none;font-weight: bold;}.note-bar p a {color: #000;background-color: #fff;padding: 2px;border-radius: 2px;font-weight: bold;}.note-bar p a:hover{color: #E39204;}.close{margin: -25px 10px 0 0;float: right;}.open-button {padding-top: 7px;width: 30px;background: #2780c7;border: 4px solid #fff;border-top: 0px;position: fixed;top: 0;right: 20px;display: none;}
/*----Barra Assinar feed no topo by http://www.personalizaroblogger.com.br----*/Ainda dentro do Html do seu blog, procure pela tag </head> e antes dela cole o código a seguir.
<!-- barra de notificação --> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js'/><script>
$(document).ready(function(){$(".note-bar").slideDown(300);
$("#showbar").click(function(){
$(".open-button").slideUp(300, function(){
$(".note-bar").slideDown(300);
});
return false;
});
$("#hidebar").click(function(){
$(".note-bar").slideUp(300, function(){
$(".open-button").slideDown(300);
});
return false;
});
});
</script>
<!-- barra de notificação -->
Ainda dentro do seu template procure por <body> e depois desse trecho cole o código a seguir, clique em visualizar para ver se esta tudo ok e salve.
<div class='note-bar'>
<p><img align='absmiddle' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOMusIGYC4xF8-hqiEiYRKwEqpKXfkU5HdsGiAnN2D73gkYg9AGZFxEdJo15bTkUQQLCYyfW4ROrXXLMWuMmqvUhXy1B2IPnmE1I2XCM5qMFl0DrTHQ6USelxaIzKIr_r27O5ZmFcctDHs/s32/feedtopo.png'/> Assine nosso Feed e receba novos post em seu E-mail.
<script language="JavaScript">
function abrir(URL) {
var width = 550;
var height = 550;
var left = 99;
var top = 99;
window.open(URL,'janela', 'width='+width+', height='+height+', top='+top+', left='+left+', scrollbars=yes, status=no, toolbar=no, location=no, directories=no, menubar=no, resizable=no, fullscreen=no');
}
</script>
<a href="javascript:abrir('http://feedburner.google.com/fb/a/mailverify?uri=NOME DO FEED&loc=pt_BR');">Assine Aqui</a></p>
<a class='close' href='#' id='hidebar'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg81ZipZLc7MXCo3YvIswVp5ZmMqqghwdtu5T-jFNcO9sb5wo7BxAngd8MrfckiTNQMUy28GUmrYpz08rMjOCp1zZ1CXt2VSBTNhFoxJzmB0uXGXqbnWj3-2_8a4374TY1cs7kyAB_-ezk/h120/icon-close.png'/>
</a>
</div>
<!-- Button to open notification bar -->
<div class='open-button'>
<a href='#' id='showbar'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4KkSpOlZIoONbJIYOW-K58ToeElWpOqu7AcVQpsD8silKmGgRiGdepOW7oIUUACgECcJ43PccPLnhd_AmEAZCtsB3JpyJ58jeB55bTOs6E6VUgxgl_xI2DGYAi_l1XE7O7DDeWDYEfjQ/h120/icon-open.png'/>
</a>
</div>
OBS: Não esqueça de alterar a parte destacada e, vermelho pelo nome do seu feed.
Nenhum comentário:
Postar um comentário