Marcadores em forma de menu com efeito Jquery

DEMO

Este modelo de menu de marcadores é diferente dos demais por algumas características

1-Você vai escolher quais os marcadores que farão parte do menu
2-Um bonito efeito Jquery que mostrará não apenas os títulos dos marcadores mas também thumbs e um pequeno resumo
3-Vai valorizar seu layout e ajudar seu visitante a navegar melhor pelo seu blog



Vá até o "Modelo de seu blog", clique em "Editar HTML"

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

Procure por </head>

Acima dele cole este próximo código.

<!--Início do código de marcadores-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://widgets.way2blogging.org/blogger-widgets/ajaxbloggermenu.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#w2bajaxmenu').ajaxBloggerMenu({
numPosts : 4, // Number of Posts to show
defaultImg : 'http://url-to-image.com/default-image.jpeg' // Default thumbnail Image
});
});
</script>
<!--Fim do código do menu de marcadores-->

Salve. Agora clique em Layout...

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.

<ul id="w2bajaxmenu" class="w2bmenu">
<li>
<a href="#">Home</a>
</li>



<li>

<a href="#">Marcadores 1</a>
<ul>
<li><a href="ENDEREÇO DE SEU BLOG/search/label/NOME DO SEU MARCADOR 1-A">MARCADOR 1-A</a></li>

<li><a href="ENDEREÇO DE SEU BLOG/search/label/NOME DO SEU MARCADOR 1-B">MARCADOR 1-B</a></li>

<li><a href="ENDEREÇO DE SEU BLOG/search/label/NOME DO SEU MARCADOR 1-C">MARCADOR 1-C</a></li>

<li><a href="ENDEREÇO DE SEU BLOG/search/label/NOME DO SEU MARCADOR 1-D">MARCADOR 1-D</a></li>

<li><a href="ENDEREÇO DE SEU BLOG/search/label/NOME DO SEU MARCADOR 1-E">MARCADOR 1-E</a></li>

<li><a href="ENDEREÇO DE SEU BLOG/search/label/NOME DO SEU MARCADOR 1-F">MARCADOR 1-F</a></li>
</ul>
</li>


<li>
<a href="#">Marcadores 2</a>
<ul>
<li><a href="ENDEREÇO DE SEU BLOG/search/label/NOME DO SEU MARCADOR 2-A">MARCADOR 2-A</a></li>

<li><a href="ENDEREÇO DE SEU BLOG/search/label/NOME DO SEU MARCADOR 2-B">MARCADOR 2-B</a></li>

<li><a href="ENDEREÇO DE SEU BLOG/search/label/NOME DO SEU MARCADOR 2-C">MARCADOR 2-C</a></li>

<li><a href="ENDEREÇO DE SEU BLOG/search/label/NOME DO SEU MARCADOR 2-D">MARCADOR 2-D</a></li>

<li><a href="ENDEREÇO DE SEU BLOG/search/label/NOME DO SEU MARCADOR 2-E">MARCADOR 2-E</a></li>

<li><a href="ENDEREÇO DE SEU BLOG/search/label/NOME DO SEU MARCADOR 2-F">MARCADOR 2-F</a></li>
</ul>
</li>


<li>
<a href="#">Marcadores 3</a>
<ul>
<li><a href="ENDEREÇO DE SEU BLOG/search/label/NOME DO SEU MARCADOR 3-A">MARCADOR 3-A</a></li>

<li><a href="ENDEREÇO DE SEU BLOG/search/label/NOME DO SEU MARCADOR 3-B">MARCADOR 3-B</a></li>

<li><a href="ENDEREÇO DE SEU BLOG/search/label/NOME DO SEU MARCADOR 3-C">MARCADOR 3-C</a></li>

<li><a href="ENDEREÇO DE SEU BLOG/search/label/NOME DO SEU MARCADOR 3-D">MARCADOR 3-D</a></li>

<li><a href="ENDEREÇO DE SEU BLOG/search/label/NOME DO SEU MARCADOR 3-E">MARCADOR 3-E</a></li>

<li><a href="ENDEREÇO DE SEU BLOG/search/label/NOME DO SEU MARCADOR 3-F">MARCADOR 3-F</a></li>
</ul>
</li>

<li>
<a href="#">Marcadores 4</a>
<ul>
<li><a href="ENDEREÇO DE SEU BLOG/search/label/NOME DO SEU MARCADOR 4-A">MARCADOR 4-A</a></li>

<li><a href="ENDEREÇO DE SEU BLOG/search/label/NOME DO SEU MARCADOR 4-B">MARCADOR 4-B</a></li>

<li><a href="ENDEREÇO DE SEU BLOG/search/label/NOME DO SEU MARCADOR 4-C">MARCADOR 4-C</a></li>

<li><a href="ENDEREÇO DE SEU BLOG/search/label/NOME DO SEU MARCADOR 4-D">MARCADOR 4-D</a></li>

<li><a href="ENDEREÇO DE SEU BLOG/search/label/NOME DO SEU MARCADOR 4-E">MARCADOR 4-E</a></li>

<li><a href="ENDEREÇO DE SEU BLOG/search/label/NOME DO SEU MARCADOR 4-F">MARCADOR 4-F</a></li>
</ul>
</li>


<li><a href="ENDEREÇO DO SEU FACEBOOK">Facebook</a></li>

<li><a href="ENDEREÇO DO SEU TWITTER">Twiter</a></li>

<li><a href="ENDEREÇO DO SEU FEED">Feed</a></li></ul>

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.

/* Menu Stylings */ .w2bmenu *{margin: 0;padding: 0;} ul.w2bmenu {list-style: none;line-height: 1;overflow: visible !important;} ul.w2bmenu:after{margin: 0;padding: 0;content: ' ';display: block;height: 0px;clear: both;} ul.w2bmenu li{list-style: none;position:relative;float: left;margin: 0 !important;padding: 0 !important;} ul.w2bmenu li a{margin: 0;padding: 12px 16px !important;font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif !important;color: #6b6b6b !important;text-shadow: 0 1px 0 #fff;font-weight: 700 !important;text-transform: uppercase !important;font-size: 12px !important;display: block !important;border: 0 none !important;} ul.w2bmenu li a:hover,ul.w2bmenu li a.hoverover{background: #f5f5f5 !important;} ul.w2bmenu ul{position: absolute;display: none;top: 100%;border:1px solid #ccc;} ul.w2bmenu li:hover > ul{display: block;} ul.w2bmenu ul li{float: none;min-width: 160px;background:#f5f5f5;text-shadow: none;} ul.w2bmenu ul li a{padding: 12px 14px;text-transform: none;font-weight: normal;} ul.w2bmenu ul li a:hover,ul.w2bajaxmenu ul li a.hoverover{background: #fff !important;} ul.w2bmenu ul ul{display: none;left: 100%;top: 0;} /* AJAX Menu Stylings */ ul.w2bajaxmenu li div.submenu {display: none;position: absolute;width: 600px;z-index: 90;left: -1px;top: 100%;overflow: hidden;min-height: 150px;background: #fff;border:1px solid #cccccc;border-top: 0 none;} ul.w2bajaxmenu li:hover div.submenu {display: block;} ul.w2bajaxmenu ul ,ul.w2bajaxmenu ul li{display: block !important;border: 0 none !important;margin: 0 !important;padding:0 !important;} ul.w2bajaxmenu ul li{background: none !important;float: none !important;} ul.w2bajaxmenu ul.verticlemenu{position: absolute;width: 33%;left:0;top:0;bottom: 0;background: #f5f5f5;} ul.w2bajaxmenu ul.postslist {position: relative;display: block;width:65%;float: right;margin: 8px 0 !important;background: none;} ul.w2bajaxmenu ul.postslist li{display: block;overflow: hidden;border-bottom: 1px #eee solid;position: relative;min-height: 60px;padding: 8px 8px 8px 110px !important;} ul.w2bajaxmenu ul.postslist li:last-child{border-bottom: none 0;} ul.w2bajaxmenu ul.postslist li .imgCont{position: absolute;left: 0;top:8px;width: 100px;height: 60px;overflow: hidden;border:1px solid #dcdcdc;font-size: 0;line-height: 0;} ul.w2bajaxmenu ul.postslist li .imgCont img{position: relative;top:-20px;padding: 0;width: 100px;height: 100px;display: block;} ul.w2bajaxmenu ul.postslist li a{display: block;line-height: 1.4;padding: 0 !important;} ul.w2bajaxmenu .loader{background:url('http://i.imgur.com/SeivG.gif') no-repeat scroll 0 0 transparent;width:22px;height:22px;position: absolute;top:50%;margin-top: -11px;right:5px;} ul.w2bajaxmenu .menuArrow {border-bottom: 4px solid transparent;border-top: 4px solid transparent;border-left: 4px solid #999999;display: block;height: 0;margin-top: -4px;position: absolute;right: 11px;top: 50%;width: 0;} #w2bajaxmenu {background: #ededed;background: -moz-linear-gradient(top, #ededed 0%, #e0e0e0 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ededed), color-stop(100%,#e0e0e0));background: -webkit-linear-gradient(top, #ededed 0%,#e0e0e0 100%);background: -o-linear-gradient(top, #ededed 0%,#e0e0e0 100%);background: -ms-linear-gradient(top, #ededed 0%,#e0e0e0 100%);background: linear-gradient(to bottom, #ededed 0%,#e0e0e0 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#e0e0e0',GradientType=0 );border: 1px solid #cccccc;}

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

Créditos: Way2blogging