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

 DEMO

 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