3 de mai de 2013

Marcadores em forma de menu com efeito Jquery


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

2 comentários:

  1. Olá, achei bem interessante essa ferramenta, mas..fiquei na duvida em instalar, pois dois trechos que informa para inserir codigo abaixo...o que esta de fato abaixo é apenas a palavra "conteúdo" e sem nenhum codigo, como de costume.

    Por favor, poderia me elucidar?

    É a palavra 'conteúdo' que deverei inserir logo abaixo de: ... ?

    e também é a mesma palavra a serr colacada em:
    ... ?


    Por favor, gostaria muito de aplicar esse modelo de ferramenta mas estou na duvida.
    Desde já agradeço não só por essa mas por todas as dicas que nos disponibiliza gratuitamente aqui neste fantástico espaço.
    Obrigado
    Julio

    ResponderExcluir

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