Postagens Recentes
Mostrando postagens com marcador Acessórios. Mostrar todas as postagens
Mostrando postagens com marcador Acessórios. Mostrar todas as postagens

23 de jul. de 2016

Marcadores em forma de menu suspenso e postagens que se abrem na mesma página

Nenhum comentário:





 Dois hacks que vão dar um toque especial e bacana a seu blog, além de deixa-lo mais eficiente e economizar espaço.



Vá até o "Modelo de seu blog", clique em "Editar HTML"
  Hack para o template do Blogger, implementado em  abril de 2013.





Procure por <b:skin>...</b:skin>  se não encontrar procure por ]]></b:skin>






Abaixo dele, cole o próximo código:




<style>
.sidebar li{list-style-type:none; }
a.loadpost{
display:block;
padding:8px;
background-color:#cc0000;
color:white;
text-transform:capitalize;
text-decoration:none
}
.labelnyatas a{
list-style-type:none;
display:inline-block;
padding:0 5px;height:17px;
font-size:8px;
line-height:17px;
text-decoration:none;
background-color:#cc0000;
color:white
}
.bwh-title .comment-link:hover,a.loadpost:hover,.labelnyatas a:hover{
background-color:#cc0000}
</style>

<style>
/* Label =====================*/
.labelnyatas a{
 list-style-type:none;
display:inline-block;
padding:0 5px;
height:17px;
font-size:8px;
line-height:17px;
text-decoration:none;
background-color:#cc0000;
color:white
}
.bwh-title .comment-link:hover,a.loadpost:hover,.labelnyatas a:hover{
background-color:#cccccc;
font-family: Sans-serif Courier New;
font-size: 18px;
}
.bwh-title .comment-link::after{
content:&quot;&quot;;
width:0;
height:0;
border-width:2px 4px;
border-style:solid;
border-color:#808080 #808080 transparent transparent;
position:absolute;
top:100%;
right:0
}

.menu-xitem{
list-style-type:none;
font-size: 14px;
height:35px;
border-bottom:5px solid #000000;/*cor da linha */
margin-bottom:20px;
color:white
}
.menu-xitem .xitem1{
list-style-type:none;
height:30px;
position:relative;
float:left
}
.menu-xitem .liat{
font-size: 18px;
display:block;
line-height:35px;
padding:0 20px 0 10px;
float:left;
background-color:#cc0000; /*cor botão*/
text-transform:uppercase;
color:white;
position:relative;
text-decoration:none
}
#labelxnya{
list-style-type:none;
position:absolute;
width:230px;
top:100%;
z-index:3;
background-color:#000000;/* cor fundo menu*/
display:none
}
#labelxnya.hidden{display:none}
.menu-xitem .xitem1:hover #labelxnya.hidden{
display:block
}
#labelxnya a{
list-style-type:none;
color:white;text-decoration:none;
display:block;padding:0 10px;line-height:25px
}
#labelxnya a:hover{
border-left:4px solid #cc0000
}
.menu-xitem .liat::before,.menu-xitem .liat::after{
content:&quot;&quot;;width:0;height:0;
border-width:4px 4px;
border-style:solid;
border-color:white transparent transparent transparent;
position:absolute;
top:14px;
right:8px
}
.menu-xitem .liat::after{
border-width:15px 6px;
border-color:transparent transparent black black;
left:100%;
top:0;
right:auto
}

</style>

 <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
function resizeThumb(e,b){var c=document.getElementById(e),d=c.getElementsByTagName("img");for(var a=0;a<d.length;a++){d[a].src=d[a].src.replace(/\/s72\-c/,"/s"+b+"-c");}}

window.labelnyacx=(function(){var a=function(d){var e=d||{},c=e.url_blog||window.location.host,b=e.id_labelcontent||"#labelxnya";$.ajax({url:"http://"+c+"/feeds/posts/summary?max-results=0&alt=json-in-script",type:"get",dataType:"jsonp",success:function(h){var f=h.feed.category,j="";if(f!==undefined){j="<ul class='subnya-xitem'>";for(var g=0;g<f.length;g++){j+='<li><a href="/search/label/'+encodeURIComponent(f[g].term)+'" target="_blank">'+f[g].term+"</a></li>"}j+="</ul>";$(b).html(j)}else{$(b).html("<span>No Label!</span>")}},error:function(){$(b).html("<strong>Error Loading Feed!</strong>")}})};return function(b){a(b)}})();
//]]>
</script>
  </b:if> </b:if>



Salve !



Procure agora por </body>

Acima dele cole o próximo código.



<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
resizeThumb("main",250);
labelnyacx();
(function($) {
var loadingGif = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhejKBEc5a7_kVvZWr-zZV27l1Z7GQegzONtlQJQpWRdSjGJ8dbsZHNVz6Ql9A-5stwbD7T2qfn5tchmeUzFyv3-nWi9UHfGQcQ2hAP2BRI8sNH_sBxfSBh8VDJUVL71xLRrlTYovGeWwCy/s32/ajax-loader.gif';
var olderPostsLink = '';
var loadMoreDiv = null;
var postContainerSelector = 'div.blog-posts';
var loading = false;
var win = $(window);
var doc = $(document);
// Took from jQuery to avoid permission denied error in IE.
var rscript = /<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi;

function loadDisqusScript(domain) {
  $.getScript('http://' + domain + '.disqus.com/blogger_index.js');
}

function loadMore() {
  if (loading) {
    return;
  }
  loading = true;

  if (!olderPostsLink) {
    loadMoreDiv.hide();
    return;
  }

  loadMoreDiv.find('a').hide();
  loadMoreDiv.find('img').show();
  $.ajax(olderPostsLink, {
    'dataType': 'html'
  }).done(function(html) {
    var newDom = $('<div></div>').append(html.replace(rscript, ''));
    var newLink = newDom.find('a.blog-pager-older-link');
    if (newLink) {
      olderPostsLink = newLink.attr('href');
    } else {
      olderPostsLink = '';
      loadMoreDiv.hide();
    }

    var newPosts = newDom.find(postContainerSelector).children('.date-outer');
    $(postContainerSelector).append(newPosts);
resizeThumb("main",250);
    // Loaded more posts successfully.  Register this pageview with
    // Google Analytics.
    if (window._gaq) {
      window._gaq.push(['_trackPageview', olderPostsLink]);
    }
    // Render +1 buttons.
    if (window.gapi && window.gapi.plusone && window.gapi.plusone.go) {
      window.gapi.plusone.go();
    }
    // Render Disqus comments.
    if (window.disqus_shortname) {
      loadDisqusScript(window.disqus_shortname);
    }
    // Render Facebook buttons.
    if (window.FB && window.FB.XFBML && window.FB.XFBML.parse) {
      window.FB.XFBML.parse();
    }

    loadMoreDiv.find('img').hide();
    loadMoreDiv.find('a').show();

    loading = false;
  });
}


function init() {
  if (_WidgetManager._GetAllData().blog.pageType == 'item') {
    return;
  }

  olderPostsLink = $('a.blog-pager-older-link').attr('href');
  if (!olderPostsLink) {
    return;
  }

  var link = $('<a class="loadpost" href="javascript:;">Leia mais postagens</a>');
  link.click(loadMore);
  var img = $('<img src="' + loadingGif + '" style="display: none;">');

  loadMoreDiv = $('<div style="text-align: center; font-size: 140%;"></div>');
  loadMoreDiv.append(link);
  loadMoreDiv.append(img);
  loadMoreDiv.insertBefore($('#blog-pager'));
  $('#blog-pager').hide();
}

$(document).ready(init);

})(jQuery);
//]]>
</script>
</b:if></b:if>



Agora procure por:  <div class='columns-inner'>

Abaixo dele cole o próximo código


<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div class='menu-xitem'>
    <div><div class='xitem1'><a class='liat' href='#'><b:if cond='data:blog.url == data:blog.homepageUrl'>
Postagem por assunto
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<data:blog.pageName/>
<b:else/>
<b:if cond='data:blog.searchQuery'>
<data:blog.searchQuery/>
<b:else/>
<b:if cond='data:blog.searchLabel'>
<data:blog.searchLabel/>
</b:if>
</b:if>
</b:if>
</b:if></a>  
    <div class='hidden' id='labelxnya'/>
    </div></div>
    </div>
</b:if></b:if>  

Salve

19 de jul. de 2016

Imagem de carregamento, loading, em seu blog

Nenhum comentário:
Tem gente que adora um firula no blog, tipo eu, e gosta dessas imagens de carregamento no blog. Da um charme, uma impressão de site e podemos passar uma primeira impressão divertida aos nossos leitores, como essas imagens fofas de gatinhos. Bem facinho de utilizar no blog.




Vá até o "Modelo de seu blog", clique em "Editar HTML"
  Hack para o template do Blogger, implementado em  abril de 2013.





Clique no botão "Editar modelo" e depois nas teclas Ctrl e F. Ao abrir a janela, procure pelo seguinte trecho.









Procure por </head>


Acima dele cole este próximo código.


<script>function doload(){document.getElementById("load").style.display="none";}window.onload=doload;</script>










Clique em Adicionar um Gadget




Ao abrir, clique em  HTML/Javascript




Cole então o próximo código fazendo as modificações necessárias.


<div id="load" style="text-align:center;"><img src="AQUI O ENDEREÇO DA IMAGEM"/></div>














31 de mai. de 2014

Caixa de link-me para funcionar no Blogger

Nenhum comentário:
A caixinha de link-me não está mais aceitando o antigo código. Agora é necessário converte-lo, assim como fazemos com os códigos do Adsense quando queremos introduzi-los entre as postagens. Alguma mudança houve... O código novo está abaixo.





Clique em Adicionar um Gadget




Ao abrir, clique em  HTML/Javascript




Cole então o próximo código fazendo as modificações necessárias.


<div align="center"><a href='AQUI O ENDEREÇO DE SEU BLOG' title='ESCREVA ALGO'><img src="ENDEREÇO DA IMAGEM" alt="ESCREVA ALGO"  /></a><div style="background-color:#FFF;border: solid 1px #000; overflow:auto; width:130px; height:30px;" onmouseover="this.select()">&lt;a href='ENDEREÇO DE SEU BLOG' title='ESCREVA ALGO'&gt;&lt;img src='ENDEREÇO DA IMAGEM' alt='ESCREVA ALGO'&quot;&gt;&lt;/a&gt;</div></div>

3 de out. de 2013

Imagem de fundo no scroller

Um comentário:




Deixar o blog mais organizado, mais bonito, mais simétrico, mais personalizado. Quem não gosta ? Quem não quer ? Mais uma diquinha, scroller,  a barra de rolagem do Blogger,  com imagem de fundo. Fácinho de implementar e pode fazer aquela diferença no layout do blog.




Implementar CSS                                                                             



No modelo de seu blog", clique em "Personalizar"





Ao abrir essa janela, vá em Avançado  -------> Adicionar CSS 




Copie o código abaixo e cole no local indicado.




/*Scroller ------------------------------------*/

::-webkit-scrollbar-thumb:vertical {
background: #B7D3D3;
height:50px;
border: 2px solid #fff;
box-shadow: 2px 2px 4px #808080;
-moz-box-shadow: 2px 2px 4px #808080;
-webkit-box-shadow: 2px 2px 4px #808080;
-khtml-box-shadow: 2px 2px 4px #808080;
-moz-border-radius: 10px; /* Para Firefox */
-webkit-border-radius: 10px; /*Para Safari e Chrome */
border-radius: 10px; /* Para Opera 10.5+*/
}
::-webkit-scrollbar-thumb:horizontal {
background-color: #B7D3D3; height:10px;
border: 1px dashed #fff;
-webkit-box-shadow:0 0 1em #eee; }
::-webkit-scrollbar {height:10px; width:20px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO3DGuuotAMF6QAXXZJPmUn-tXSXobfGa7d046WAquCCy7SGps8uzOcm5I6AkGj1I7SRaO1IgDjJgoad0OmEvPIth08T0n9zrW-4eomSQa2j_bptwlIUASjqYMHYLaeuqPGfPeU7ZwgAlo/s1600/paisley-sweetheart-free-cute-twitter-background-404x288.jpg) repeat;
box-shadow: -3px -2px 10px #808080;
-moz-box-shadow: -3px -2px 10px #808080;
-webkit-box-shadow: -3px -2px 10px #808080;
-khtml-box-shadow: -3px -2px 10px #808080;}



Depois, clique em "Aplicar ao blog", no canto direito de seu monitor, na parte superior para salvar.




 Se quiser trocar a imagem de fundo, basta trocar o código em amarelo e para trocar a cor do botão, troque o código na cor verde.

11 de abr. de 2013

Personalizar a caixa de pesquisa nativa do Blogger

4 comentários:


Buscadores nos blogs são tão necessários e essenciais para seus leitores como o a roda é para o carro andar. Sem um buscador o leitor/visitante de seu blog poderá ficar de mãos atadas ao tentar navegar pelo seu blog e  não conseguir encontrar exatamente aquilo que gostaria. Por isso deixa-lo mais atraente e a vista é uma sábia decisão. Dê a ele o destaque que merece, personalizando e deixando com uma aparência harmoniosa ou mesmo contrastante com o layout de seu blog. Eis aqui um bom hack de deixa-lo digamos, fofo.Lembrando que é necessário habilitar o widget de buscador que vem nativo no  Blogger. Para isso vá até o layot, clique em adicionar um gadget e clicar no buscador.



Implementar CSS                                                                             



No modelo de seu blog", clique em "Personalizar"





Ao abrir essa janela, vá em Avançado  -------> Adicionar CSS 




Copie o código abaixo e cole no local indicado.

Copie o código abaixo e cole no local indicado.





/*Buscador ---------------------------------------------------------------*/
input.gsc-search-button {
margin:0 0 0 -13px !important;
color: #fff;
padding: 6px 5px;
background: #5D4330; /*cor do botão*/
border: 1px solid #E4DCD6!important;
-moz-border-radius: 0 15px 15px 0;-webkit-border-radius: 0 15px 15px 0;
}
input.gsc-input{
float:right;
width:200px !important;
color: #FFF;
background: #E4DCD6; /*cor do fundo da area de busca*/
border: 2px solid #5D4330 !important; /*cor da borda da área de busca*/
}
input.gsc-input {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmY6_sv2cz96dt8D8Ue1PEbaQu7w-AtgTNWiLFul_G40Wvvv0CrzIqM_PYCRZ3WQZDja2I-64SCm4y4Y9PWNydFEWzOQWoRTdglArjDLw1G4nFVF6podRQv11697ve7SqGBiug86Hg1xw/s1600/lupa.png);
background-repeat: no-repeat;
background-position: left;
padding: 4px 5px 4px 30px !important;
}


Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube