Tudo Mais
![[Tutorial] Como instalar Widget Barra fixa no topo blog com postagens recentes](tudo-mais/tudo-mais-5707341f94bc9.png?imgmax=800 "[Tutorial] Como instalar Widget Barra fixa no topo blog com postagens recentes")
Nesse tutória iremos ensinar a você a colocar uma barra fixa no topo do blog com as postagens mais recentes do blog, Para instalar esse Widget em seu blog é muito simples basta seguir o tutoria passo a passo que que esta logo abaixo.
1º Vá no Painel do Blogger, clique na guia Modelo, Editar Html e procure pela tag </head> e antes dela cole o código a seguir e salve .
<script type='text/javascript'>
//<![CDATA[
function RecentPostsScrollerv2(json) {
var sHeadLines;
var sPostURL;
var objPost;
var sMoqueeHTMLStart;
var sMoqueeHTMLEnd;
var sPoweredBy;
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;
}
sPoweredBy = "<a tareget =\"_blank\" href=\"http://gj37765.blogspot.com/2011/06/auto-scrolling-recent-posts-widget-for.html\"\>Instale esse Widget\</a\> - \<a tareget =\"_blank\" href=\"http://www.personalizaroblogger.com.br\"\>Personalizar o Blogger\</a\>";
if (sDirection == "left") {
sHeadLines = sHeadLines + " " + sPoweredBy;
} else if (sDirection == "right") {
sHeadLines = sPoweredBy + " " + sHeadLines;
} else if (sDirection == "up") {
sHeadLines = sHeadLines + "\<br/\>" + sPoweredBy;
} else {
sHeadLines = sPoweredBy + "\<br/\>" + sHeadLines;
}
document.write(sMoqueeHTMLStart + sHeadLines + sMoqueeHTMLEnd)
} catch (exception) {
alert(exception);
}
}
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function() {
function makingdifferent_stickybar() {
var mdwh = jQuery(window).height();
var mdpph = jQuery("#md-stickybar").height();
var mdfromTop = jQuery(window).scrollTop()+0;
jQuery("#pb-stickybar").css({"top":mdfromTop});
}jQuery(window)
.scroll(makingdifferent_stickybar)
.resize(makingdifferent_stickybar)
//alert(jQuery.cookie('sreqshown'));
//var mdww = jQuery(window).width();
//var mdppw = jQuery("#md-stickybar").width();
//var mdleftm = (mdww-mdppw)/2;
var mdleftm = 0;
//var mdwh = jQuery(window).height();
//var mdpph = jQuery("#md-stickybar").height();
//var mdfromTop = (jQuery(window).scrollTop()+mdwh-mdpph) / 2;
jQuery("#pb-stickybar").animate({opacity: "1", left: "0" , left: mdleftm}, 0).show();
jQuery("#pbclose").click(function() {
jQuery("#pb-stickybar").animate({opacity: "0", left: "-1500"}, 1500).show(); });});
//]]>
</script>
<style>#pb-stickybar{background:#000000 url('http://3.bp.blogspot.com/-zQeUG7PU9Uw/TmkiptyZ1eI/AAAAAAAAE98/At4tRBC9HQc/s400/stickybar.png')repeat-x;width:100%;margin:0 auto;text-align:center;padding:0px 0;top:0px;color:#F40045;border-bottom:2px solid #000;/*box-shadow*/-webkit-box-shadow:#666666 0px 1px 3px;-moz-box-shadow:#666666 0px 1px 3px;box-shadow:#666666 0px 1px 3px;z-index:999;display:none;height:28px;position:absolute;line-height:1.85em;vertical-align:baseline;letter-spacing:1px;}#pb-stickybar a{text-decoration:none;color:#FFFFFF;font-size:13px;font-weight:bold;font-family:arial,"Helvetica",sans-serif;line-height:24px;}#pb-stickybar a:hover{text-decoration:underline;}#pb-stickybar p{margin:0;list-style:none;}#pb-stickybar img{vertical-align:middle;margin-right:6px;}#pbclose{padding:0px;float:right;cursor:hand;cursor:pointer;color:#ddd!important;}</style>
<div id='pb-stickybar'><script>var nMaxPosts = 10;var nWidth = 95;var nScrollDelay = 175;var sDirection = "left";var sOpenLinkLocation = "N";var sBulletChar = ">>";</script><script src="LINK DO BLOG SEU BLOGfeeds/posts/default?alt=json-in-script&callback=RecentPostsScrollerv2&max-results=10 " ></script> <noscript></noscript><a href="#" id="pbclose" onclick="return false;"><img src="http://1.bp.blogspot.com/-MSEzL6EtjrM/Tt-hrSkKVnI/AAAAAAAAFiQ/AGUGFpnSUHk/s400/cancel.png"/></a></div id='md-stickybar'>
Importante: Não esqueça de colocar o link do seu blog no local destacado em vermelho, dentro do código que você copiou, lembrando que o link deve conter o http:// e aquela barrinha do final.
Exemplo: Link errado: www.seublog.com.br
Link correto: http://www.seublog.com.br/
- [tutorial] Como Colocar "botão Subir Ao Topo No Blogger"
Nesse artigo ensinaremos uma maneira bem fácil é simples de colocar um botão para "Subir ao Topo no Blogger" 1º Passo: Vá no "Layout do seu Blogger"2º Passo: Agora Adicione um Gadget >> HTML/JavaScript.3º Passo:...
- [tutorial] Com Colocar Comentários Do Facebook E Blogger Juntos
Olá pessoa nesse tutorial estarei ensinando a mais nova forma de se colocar os comentários do Facebook juntos com os de seu blog tornando assim seu blog cada vez mais dinâmico não só no conteúdo mas também na forma de interação de seus...
- [tutórial] Como Colocar Mensagem De Boas Vindas No Blogger
Como colocar uma mensagem de boas vindas bem amigável para que entra em seu blogger, a mensagem pode ser editada e até por um link dentro dela.Contudo ela é uma mensagem simples e quem não atrapalha na navegação do Blogger. Tutorial: ...
- Como Colocar Widgets Redes Sociais Com Efeito Hover?
1- Acesse seu Blogger e no menu lateral clique em "Layout".2- Clique em "Adicionar um gadget" e escolha por "HTML/Javascript".3- Dentro do conteúdo do gadget cole o código do Widget que você escolheu.4- Clique...
- Barra De Progresso Ou Carregamento Igual Do Youtube
Aprenda a deixa a Barra de Carregamento de seu Blog Igual a do Youtube! 1º Passo: Acesse o painel de edição do seu Blog, clique na opção Modelo >> depois em Editar HTML. 2º Passo: Agora, clique em qualquer parte do código,...
Tudo Mais
[Tutorial] Como instalar Widget Barra fixa no topo blog com postagens recentes
Nesse tutória iremos ensinar a você a colocar uma barra fixa no topo do blog com as postagens mais recentes do blog, Para instalar esse Widget em seu blog é muito simples basta seguir o tutoria passo a passo que que esta logo abaixo.
1º Vá no Painel do Blogger
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'type='text/javascript'></script>
2º Agora vamos Instalar o recurso
Acesse mais uma vez o painel do blogger, clique na guia Layout, adicionar Gadget do tipo Html/JavaScript e cole todo o código a seguir e salve.<script type='text/javascript'>
//<![CDATA[
function RecentPostsScrollerv2(json) {
var sHeadLines;
var sPostURL;
var objPost;
var sMoqueeHTMLStart;
var sMoqueeHTMLEnd;
var sPoweredBy;
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;
}
sPoweredBy = "<a tareget =\"_blank\" href=\"http://gj37765.blogspot.com/2011/06/auto-scrolling-recent-posts-widget-for.html\"\>Instale esse Widget\</a\> - \<a tareget =\"_blank\" href=\"http://www.personalizaroblogger.com.br\"\>Personalizar o Blogger\</a\>";
if (sDirection == "left") {
sHeadLines = sHeadLines + " " + sPoweredBy;
} else if (sDirection == "right") {
sHeadLines = sPoweredBy + " " + sHeadLines;
} else if (sDirection == "up") {
sHeadLines = sHeadLines + "\<br/\>" + sPoweredBy;
} else {
sHeadLines = sPoweredBy + "\<br/\>" + sHeadLines;
}
document.write(sMoqueeHTMLStart + sHeadLines + sMoqueeHTMLEnd)
} catch (exception) {
alert(exception);
}
}
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function() {
function makingdifferent_stickybar() {
var mdwh = jQuery(window).height();
var mdpph = jQuery("#md-stickybar").height();
var mdfromTop = jQuery(window).scrollTop()+0;
jQuery("#pb-stickybar").css({"top":mdfromTop});
}jQuery(window)
.scroll(makingdifferent_stickybar)
.resize(makingdifferent_stickybar)
//alert(jQuery.cookie('sreqshown'));
//var mdww = jQuery(window).width();
//var mdppw = jQuery("#md-stickybar").width();
//var mdleftm = (mdww-mdppw)/2;
var mdleftm = 0;
//var mdwh = jQuery(window).height();
//var mdpph = jQuery("#md-stickybar").height();
//var mdfromTop = (jQuery(window).scrollTop()+mdwh-mdpph) / 2;
jQuery("#pb-stickybar").animate({opacity: "1", left: "0" , left: mdleftm}, 0).show();
jQuery("#pbclose").click(function() {
jQuery("#pb-stickybar").animate({opacity: "0", left: "-1500"}, 1500).show(); });});
//]]>
</script>
<style>#pb-stickybar{background:#000000 url('http://3.bp.blogspot.com/-zQeUG7PU9Uw/TmkiptyZ1eI/AAAAAAAAE98/At4tRBC9HQc/s400/stickybar.png')repeat-x;width:100%;margin:0 auto;text-align:center;padding:0px 0;top:0px;color:#F40045;border-bottom:2px solid #000;/*box-shadow*/-webkit-box-shadow:#666666 0px 1px 3px;-moz-box-shadow:#666666 0px 1px 3px;box-shadow:#666666 0px 1px 3px;z-index:999;display:none;height:28px;position:absolute;line-height:1.85em;vertical-align:baseline;letter-spacing:1px;}#pb-stickybar a{text-decoration:none;color:#FFFFFF;font-size:13px;font-weight:bold;font-family:arial,"Helvetica",sans-serif;line-height:24px;}#pb-stickybar a:hover{text-decoration:underline;}#pb-stickybar p{margin:0;list-style:none;}#pb-stickybar img{vertical-align:middle;margin-right:6px;}#pbclose{padding:0px;float:right;cursor:hand;cursor:pointer;color:#ddd!important;}</style>
<div id='pb-stickybar'><script>var nMaxPosts = 10;var nWidth = 95;var nScrollDelay = 175;var sDirection = "left";var sOpenLinkLocation = "N";var sBulletChar = ">>";</script><script src="LINK DO BLOG SEU BLOGfeeds/posts/default?alt=json-in-script&callback=RecentPostsScrollerv2&max-results=10 " ></script> <noscript></noscript><a href="#" id="pbclose" onclick="return false;"><img src="http://1.bp.blogspot.com/-MSEzL6EtjrM/Tt-hrSkKVnI/AAAAAAAAFiQ/AGUGFpnSUHk/s400/cancel.png"/></a></div id='md-stickybar'>
Importante: Não esqueça de colocar o link do seu blog no local destacado em vermelho, dentro do código que você copiou, lembrando que o link deve conter o http:// e aquela barrinha do final.
Exemplo: Link errado: www.seublog.com.br
Link correto: http://www.seublog.com.br/
Gostou? Deixe seu comentário e compartilhe com seus amigos
- [tutorial] Como Colocar "botão Subir Ao Topo No Blogger"
Nesse artigo ensinaremos uma maneira bem fácil é simples de colocar um botão para "Subir ao Topo no Blogger" 1º Passo: Vá no "Layout do seu Blogger"2º Passo: Agora Adicione um Gadget >> HTML/JavaScript.3º Passo:...
- [tutorial] Com Colocar Comentários Do Facebook E Blogger Juntos
Olá pessoa nesse tutorial estarei ensinando a mais nova forma de se colocar os comentários do Facebook juntos com os de seu blog tornando assim seu blog cada vez mais dinâmico não só no conteúdo mas também na forma de interação de seus...
- [tutórial] Como Colocar Mensagem De Boas Vindas No Blogger
Como colocar uma mensagem de boas vindas bem amigável para que entra em seu blogger, a mensagem pode ser editada e até por um link dentro dela.Contudo ela é uma mensagem simples e quem não atrapalha na navegação do Blogger. Tutorial: ...
- Como Colocar Widgets Redes Sociais Com Efeito Hover?
1- Acesse seu Blogger e no menu lateral clique em "Layout".2- Clique em "Adicionar um gadget" e escolha por "HTML/Javascript".3- Dentro do conteúdo do gadget cole o código do Widget que você escolheu.4- Clique...
- Barra De Progresso Ou Carregamento Igual Do Youtube
Aprenda a deixa a Barra de Carregamento de seu Blog Igual a do Youtube! 1º Passo: Acesse o painel de edição do seu Blog, clique na opção Modelo >> depois em Editar HTML. 2º Passo: Agora, clique em qualquer parte do código,...