menupop

Subsonic: Awesome music streaming app. I use this to listen to anything in my iTunes library while I’m on the road. Technically donation-ware, but it must be registered to use the clients. €20 (approximately $28 US) suggested donation, €10 minimum. Worth every cent.
Dropbox: I hate that this icon even needs to be here. I never, ever use Dropbox from the menubar! Free.
MacDroidNotifier: Displays notifications from my phone via Growl. Pretty useful. Free.
Flux: A lot of people seem to use this one. It tweaks your monitor at night to be easier on the eyes. I barely notice it’s running, but I guess that’s the point. Free.
MenuPop: I hate this icon, but I love the utility. This tool let’s you access your menu bar by a keyboard shortcut, opening a context menu under your mouse cursor. I’ve got it set to a shortcut button on my mouse, so accessing menu options is instantaneous. Used to be free, apparently it’s $4.99 now in the App Store. Totally worth it, though.
Orangered: No menubar is complete without letting you know when you’ve got a message on reddit. Free app, made by a redditor (voidref) for redditors (obviously!).
(From lowtolerance)

Menu Pop Up

Siga os passos abaixo e aprenda como colocar um menu pop-up no seu tumblr.

External image
NOTA: Os passos estão sublinhados para ficar mais fácil de vocês acharem eles no meio dos códigos.  

1º Passo) Copie o código abaixo e cole imediatamente acima de </head>
 
<script type=“text/javascript”
src=“http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js”></script>
<script>

$(document).ready(function() {

//

//When you click on a link with class of poplight and the href starts with a #

$(‘a.poplight[href^=#]’).click(function() {

   var popID = $(this).attr('rel’); //Get Popup Name

   var popURL = $(this).attr('href’); //Get Popup href to define size

   //Pull Query & Variables from href URL

   var query= popURL.split(’?’);

   var dim= query[1].split(’&’);

   var popWidth = dim[0].split(’=’)[1]; //Gets the first query string value

   //Fade in the Popup and add close button

   $(’#’ + popID).fadeIn().css({ 'width’: Number( popWidth ) }).prepend(’<a href=“#” class=“close”><img src=“http://static.tumblr.com/95fbxnf/1A7lmyz8k/close_123.png” class=“btn_close” title=“Close Window” alt=“Close” /></a>’);


   //Define margin for center alignment (vertical   horizontal) - we add 80px to the height/width to accomodate for the padding  and border width defined in the css

   var popMargTop = ($(’#’ + popID).height() + 80) / 2;

   var popMargLeft = ($(’#’ + popID).width() + 80) / 2;

   //Apply Margin to Popup

   $(’#’ + popID).css({

       'margin-top’ : -popMargTop,

       'margin-left’ : -popMargLeft

   });

   //Fade in Background

   $('body’).append(’<div id=“fade”></div>’); //Add the fade layer to bottom of the body tag.

   $(’#fade’).css({'filter’ : 'alpha(opacity=80)’}).fadeIn(); //Fade in the fade layer - .css({'filter’ : 'alpha(opacity=80)’}) is used to fix the IE Bug on fading transparencies
   return false;
});
//Close Popups and Fade Layer
$('a.close, #fade’).live('click’, function() { //When clicking on the close or fade layer…

   $(’#fade , .popup_block’).fadeOut(function() {

       $(’#fade, a.close’).remove();  //fade them both out
   });
   return false;

});
});

</script> 
2º Passo)Agora,copie o código abaixo e cole imediatamente antes de </style>. 

#fade { /*–Transparent background layer–*/ display: none; /*–hidden by default–*/
background: #000;
position: fixed; left: 0; top: 0;
width: 100%; height: 100%;
opacity: .80;
z-index: 9999;
}
.popup_block{
display: none; /*–hidden by default–*/
background: #fff;
padding: 20px;
border: 20px solid #ddd;
float: left;
font-size: 1.2em;
position: fixed;
top: 50%; left: 50%;
z-index: 99999;
/*–CSS3 Box Shadows–*/
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
/*–CSS3 Rounded Corners–*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
img.btn_close {
float: right;
margin: -55px -55px 0 0;
}
/*–Making IE6 Understand Fixed Positioning–*/
*html #fade {
position: absolute;
}
*html .popup_block {
position: absolute;
}
External image
Substitua: #000 - Pelo código da cor do resto da página( Toda a página menos o menu). Essa parte da página é representada pela letra A na imagem acima.
 
Nota: A página só ficará dessa cor quando o menu estiver aberto, quando ele for fechado o seu tumblr voltará para a cor normal dele.
#fff - Pelo código da cor do plano de fundo do menu. Essa parte é representada pela letra C.
 
  #ddd - Pelo código da cor da borda do menu; Essa parte é representada pela B.
 
Para ver os códigos das cores acesse esse site: http://www.mxstudio.com.br/Conteudos/Dreamweaver/Cores.htm
NOTA:Em alguns themes vai aparecer o seguinte:
External image
O código do passo 2 tem que ser colado entre o {CustomCSS} e o </style>, portanto o seu HTML deve ficar parecido com o da imagem abaixo
External image
3º Passo) Copiar o código abaixo e colar na na sua descrição. Esse será o link que as pessoas clicarão para abrir o menu pop-up

<a href=“#?w=600”rel=“nome_do_menu” class=“poplight”>NOME_QUE_APARECE</a>

600 - é o tamanho da janela. Altere esse valor até chegar a um tamanho ideal para o seu tumblr.

Nome_que_aparece - é o “nome” que aparecerá em forma de link, é nele que as pessoas clicarão para abrir o menu. Exemplo: Sobre, Faq e etc.

nome_do_menu - Coloque no lugar disso o nome do seu menu; Para quem for fazer mais de um, tem que colocar um nome diferente para cada um.
4º Passo) Cole o código abaixo imediatamente acima de </body>

<div id=“nome_do_menu” class=“popup_block”>
Texto do menu
</div>
Substitua o nome_do_menu, pelo mesmo nome que você colocou no passo anterior.
No lugar de Texto do menu coloque o que você quer escrito no seu menu, eu aconselho que vocês escrevam esse texto no editor de post do tumblr e depois apertem na opção HTML.
External image
Irá aparecer o código do texto que vocês escreveram, copie esse código e cole no lugar  do Texto do menu. 5º Passo) Aperte Update Preview para ver se esta tudo certo com o seu tumblr. O menu não funciona na página de customização do tumblr, portanto se estiver tudo certo, salve e saia, e veja o resultado na página do seu tumblr. Caso tenha acontecido alguma coisa de errado com o seu theme, cancele.

6º Passo) dê like aqui se deu certo.