Marcadores em forma de menu suspenso e postagens que se abrem na mesma página
Autor: Elke di Barros | Publicado: 2016-07-23T23:05:00-03:00














&nbsp;DEMO



&nbsp;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"    




&nbsp; Hack para o template do Blogger, implementado em&nbsp; abril de 2013. 















Procure por &lt;b:skin&gt;...&lt;/b:skin&gt;&nbsp; se não encontrar procure por ]]&gt;&lt;/b:skin&gt; 










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





&lt;style&gt;
.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}
&lt;/style&gt;

&lt;style&gt;
/* Label =====================*/
.labelnyatas a{
&nbsp;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:&amp;quot;&amp;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:&amp;quot;&amp;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
}

&lt;/style&gt;

&nbsp;&lt;script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/&gt;
&lt;b:if cond='data:blog.pageType != &amp;quot;static_page&amp;quot;'&gt;
&lt;b:if cond='data:blog.pageType != &amp;quot;item&amp;quot;'&gt;
&lt;script type='text/javascript'&gt;
//&lt;![CDATA[
function resizeThumb(e,b){var c=document.getElementById(e),d=c.getElementsByTagName("img");for(var a=0;a&lt;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&amp;alt=json-in-script",type:"get",dataType:"jsonp",success:function(h){var f=h.feed.category,j="";if(f!==undefined){j="&lt;ul class='subnya-xitem'&gt;";for(var g=0;g&lt;f.length;g++){j+='&lt;li&gt;&lt;a href="/search/label/'+encodeURIComponent(f[g].term)+'" target="_blank"&gt;'+f[g].term+"&lt;/a&gt;&lt;/li&gt;"}j+="&lt;/ul&gt;";$(b).html(j)}else{$(b).html("&lt;span&gt;No Label!&lt;/span&gt;")}},error:function(){$(b).html("&lt;strong&gt;Error Loading Feed!&lt;/strong&gt;")}})};return function(b){a(b)}})();
//]]&gt;
&lt;/script&gt;
&nbsp; &lt;/b:if&gt; &lt;/b:if&gt;





Salve !



Procure agora por &lt;/body&gt;

Acima dele cole o próximo código.




&lt;b:if cond='data:blog.pageType != &amp;quot;static_page&amp;quot;'&gt;
&lt;b:if cond='data:blog.pageType != &amp;quot;item&amp;quot;'&gt;
&lt;script type='text/javascript'&gt;
//&lt;![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 = /&lt;script\b[^&lt;]*(?:(?!&lt;\/script&gt;)&lt;[^&lt;]*)*&lt;\/script&gt;/gi;

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

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

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

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

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

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

&nbsp;&nbsp;&nbsp; loading = false;
&nbsp; });
}


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

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

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

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

$(document).ready(init);

})(jQuery);
//]]&gt;
&lt;/script&gt;
&lt;/b:if&gt;&lt;/b:if&gt;




Agora procure por:&nbsp; &lt;div class='columns-inner'&gt;

Abaixo dele cole o próximo código




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



Salve