23 de jul de 2016

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






 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://lh3.googleusercontent.com/-FiCzyOK4Mew/T4aAj2uVJKI/AAAAAAAAPaY/x23tjGIH7ls/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

Nenhum comentário:

Postar um comentário

A legislação brasileira prevê a possibilidade de se responsabilizar o blogueiro pelo conteúdo do blog, inclusive quanto a comentários; portanto, o autor deste blog reserva a si o direito de não publicar comentários que firam a lei, a ética ou quaisquer outros princípios da boa convivência. Não serão aceitos comentários anônimos ou que envolvam crimes de calúnia, ofensa, falsidade ideológica, multiplicidade de nomes para um mesmo IP ou invasão de privacidade pessoal / familiar a qualquer pessoa. Comentários sobre assuntos que não são tratados aqui também poderão ser suprimidos, bem como comentários com links. Este é um espaço público e coletivo e merece ser mantido limpo para o bem-estar de todos nós.


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