Primeiramente quero te agradecer. Obrigado por ainda visitar esse site. Fico muito feliz! :)
Como sabem todos os meus trabalhos estão desatualizados. Não tenho a intenção de voltar mas isso
não quer dizer que os mesmos estão desativados, pelo contrário, todos estão online.
Cada projeto que participei foi elaborado e contemplado com uma gama de conteúdos e com uma
equipe de excelência.
Obrigado a toda a equipe!
Foi muita gente e não lembro de todos mas obrigado por fazerem
parte, mesmo por um curto momento desses projetos.
Segue abaixo os projetos ainda ativos:
www.animessoul.blogspot.com.br
www.tube-project.blogspot.com.br
www.designerprooject.blogspot.com.br
www.up-tutorial.blogspot.com.br
www.scalerdesign.blogspot.com.br
Até a próxima! ;)
1 de jun. de 2016
30 de jan. de 2013
2
Postado por
Ủlquiorra
comentários
Olá, aqui é o Ulquiorra um dos donos da up e agora o principal dono dela. Como alguns já sabem, a Up Tutoriais foi hackeada. Fiquei muito triste em saber que o esforço, tempo e dedicação que doei pro site em todo esse tempo foi jogado fora.
Enfim... Tinha exportado o site pro meu pc. E já que o dominio oficial da up foi hackeada, agora ela se chama Up Tutorial.
Seja bem vindo a nova Up Tutorial.
28 de jan. de 2013
1
Olá Pessoal, hoje estarei ensinando a vocês como adicionar um slide de anúncios em seu blog no tamanho 468x60 que é o mais comum, esse slide tem um efeito bem legal e pode ser usado até para outros fins. Confesso que eu não sou muito fã de slides em blogs pois a maioria deles pesa muito no carregamento do blog, mas esse slide é super leve e pode ser adicionado no blog sem preocupação nenhuma, eu mesmo estou usando aqui no PB em nossa sidebar, o código é simples e fácil de instalar, vamos ao tutorial.
Demonstração
Vamos la, procure por :
]]></b:skin>
Antes da tag cole o codigo :
#slider { width: 300px; /* Largura das as imagens */
height: 250px; /* Altura das as imagens */
position: relative;
overflow: hidden;
}
#sliderContent {
width: 300px; /* Largura das as imagens */
position: absolute;
top: 0px;
margin: 0px;
padding: 0px;
}
.sliderImage img{
width:300px; /* Largura das as imagens */
height: 250px; /* Altura das as imagens */
}
.sliderImage {
float: left;
position: relative;
display: none;
}
.sliderImage span {
position: absolute;
font: 10px/15px Arial, Helvetica, sans-serif;
padding: 1px 13px;
width: 100%;
background-color: #000;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
color: #fff;
display: none;
}
.clear {clear: both;}
.sliderImage span strong {font-size: 14px;}
.top {top: 0px;left: 0px;}
.bottom {bottom: 0px;left: 0px;}
ul { list-style-type: none;}
Depois procure por:
</head>
Antes da tag cole o codigo :
<script src='http://dl.getdropbox.com/u/1659986/jquery.js' type='text/javascript'></script>
<script src='http://dl.getdropbox.com/u/1659986/s3Slider.js' type='text/javascript'></script>
<script type="text/javascript">
$(document).ready(function() {
$('#slider').s3Slider({
timeOut: 10000 /*Representa em milesimos de segundo o tempo de troca de imagem*/
});
});
</script> Agora basta colar este código onde deseja que o menu apareça:
<div id="slider"> <ul id="sliderContent">
<li class="sliderImage">
<a href="LINK DA PUBLICIDADE" target='_blank'"><img src="URL DA IMAGEM DE PUBLICIDADE" border="0"/>
<span class="top">DESCRIÇÃO DA PUBLICIDADE</span></a>
</li>
<li class="sliderImage">
<a href="LINK DA PUBLICIDADE" target='_blank'"><img src="URL DA IMAGEM DE PUBLICIDADE" border="0"/>
<span class="top">DESCRIÇÃO DA PUBLICIDADE</span></a>
</li>
<li class="sliderImage">
<a href="LINK DA PUBLICIDADE" target='_blank'"><img src="URL DA IMAGEM DE PUBLICIDADE" border="0"/>
<span class="top">DESCRIÇÃO DA PUBLICIDADE</span></a>
</li>
<div class="clear sliderImage"></div>
</ul>
</div>
Não esqueça de fazer as alterações nas partes destacadas em vermelho. LINK DA PUBLICIDADE: Link que vai abrir ao clicar no banner. URL DA IMAGEM DE PUBLICIDADE: Endereço do banner. DESCRIÇÃO DA PUBLICIDADE: Escreva sua descrição sobre o anúncio.
Postado por
Ủlquiorra
comentários
Vamos la, procure por :
Antes da tag cole o codigo :
height: 250px; /* Altura das as imagens */
position: relative;
overflow: hidden;
}
#sliderContent {
width: 300px; /* Largura das as imagens */
position: absolute;
top: 0px;
margin: 0px;
padding: 0px;
}
.sliderImage img{
width:300px; /* Largura das as imagens */
height: 250px; /* Altura das as imagens */
}
.sliderImage {
float: left;
position: relative;
display: none;
}
.sliderImage span {
position: absolute;
font: 10px/15px Arial, Helvetica, sans-serif;
padding: 1px 13px;
width: 100%;
background-color: #000;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
color: #fff;
display: none;
}
.clear {clear: both;}
.sliderImage span strong {font-size: 14px;}
.top {top: 0px;left: 0px;}
.bottom {bottom: 0px;left: 0px;}
ul { list-style-type: none;}
Depois procure por:
Antes da tag cole o codigo :
<script src='http://dl.getdropbox.com/u/1659986/s3Slider.js' type='text/javascript'></script>
<script type="text/javascript">
$(document).ready(function() {
$('#slider').s3Slider({
timeOut: 10000 /*Representa em milesimos de segundo o tempo de troca de imagem*/
});
});
</script>
<li class="sliderImage">
<a href="LINK DA PUBLICIDADE" target='_blank'"><img src="URL DA IMAGEM DE PUBLICIDADE" border="0"/>
<span class="top">DESCRIÇÃO DA PUBLICIDADE</span></a>
</li>
<li class="sliderImage">
<a href="LINK DA PUBLICIDADE" target='_blank'"><img src="URL DA IMAGEM DE PUBLICIDADE" border="0"/>
<span class="top">DESCRIÇÃO DA PUBLICIDADE</span></a>
</li>
<li class="sliderImage">
<a href="LINK DA PUBLICIDADE" target='_blank'"><img src="URL DA IMAGEM DE PUBLICIDADE" border="0"/>
<span class="top">DESCRIÇÃO DA PUBLICIDADE</span></a>
</li>
<div class="clear sliderImage"></div>
</ul>
</div>
Não esqueça de fazer as alterações nas partes destacadas em vermelho. LINK DA PUBLICIDADE: Link que vai abrir ao clicar no banner. URL DA IMAGEM DE PUBLICIDADE: Endereço do banner. DESCRIÇÃO DA PUBLICIDADE: Escreva sua descrição sobre o anúncio.
Créditos Claudio Luiz
27 de jan. de 2013
3
E ai gente bunita, venho trazer um menu DropDown Vertical simples só com CSS3... é bem simples mas se você posicionar ele em algum lugar no seu template vai ficar bem legal... Aqui eu estou postando só como um exemplo de "Redes Sociais" mas você pode colocar qualquer link... em fim confiram a demo abaixo:
Demonstração
É bem simples de colocar, sigam alguns passos:
Vá em, >> Editar HTML >> procure por:
]]></b:skin>
Acima dela adicione o seguinTe CSS:
.mais {
display: inline-block;
-webkit-transition: .3s ease-in-out;
-moz-transition: .3s ease-in-out;
-o-transition: .3s ease-in-out;
}
.drop-menu:hover {
border: 1px solid #fff;
}
.drop-menu:hover .sub-menu {
display: inline-block;
}
.drop-menu:hover .plus {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
.sub-menu {
display: none;
width: 400px;
background: #fff;
padding: 10px 10px;
margin-left: -11px;
margin-top: 10px;
border: 1px solid #fff;
-webkit-box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
-moz-box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
}
.sub-menu li {
list-style-type: none;
display: block;
border-bottom: 1px dotted #eaeaea;
font-size: 19px;
height: 22px;
padding: 8px 0;
}
.sub-menu li img {
margin-right: .5em;
}
.sub-menu li:hover {
border-bottom: 1px dotted #bababa;
}
Basta agora usar as seguintes DIV's para chamar o CSS:
<div class="drop-menu">
<span class="mais">+</span> Menu de Redes sociais
<ul class="sub-menu">
<li><a href="#"><img src="http://1.bp.blogspot.com/-aGYzMlEd8DI/UQW1SIehzuI/AAAAAAAAEsI/yD8QRUQoQRk/s1600/rss.png" border="0" alt="rss"> Assine nosso Feed</a></li>
<li><a href="#"><img src="http://4.bp.blogspot.com/-vIKPVTszOcg/UQW1SXyffuI/AAAAAAAAEsU/Bu43TDcbMHA/s1600/email.png" border="0" alt="email"> Assinantes por E-mail</a></li>
<li><a href="#"><img src="http://1.bp.blogspot.com/-5qh3_VgYmac/UQW1TC2lfhI/AAAAAAAAEsg/ugW01VZGkvs/s1600/twitter.png" border="0" alt="twitter">+ Siga-nos</a></li>
</ul>
</div>
Agora é só editar e posicionar em algum lugar que não atrapalhe outras funções do template... Até mais!
Postado por
Ủlquiorra
comentários
É bem simples de colocar, sigam alguns passos:
Vá em, >> Editar HTML >> procure por:
Acima dela adicione o seguinTe CSS:
display: inline-block;
-webkit-transition: .3s ease-in-out;
-moz-transition: .3s ease-in-out;
-o-transition: .3s ease-in-out;
}
.drop-menu:hover {
border: 1px solid #fff;
}
.drop-menu:hover .sub-menu {
display: inline-block;
}
.drop-menu:hover .plus {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
.sub-menu {
display: none;
width: 400px;
background: #fff;
padding: 10px 10px;
margin-left: -11px;
margin-top: 10px;
border: 1px solid #fff;
-webkit-box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
-moz-box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
}
.sub-menu li {
list-style-type: none;
display: block;
border-bottom: 1px dotted #eaeaea;
font-size: 19px;
height: 22px;
padding: 8px 0;
}
.sub-menu li img {
margin-right: .5em;
}
.sub-menu li:hover {
border-bottom: 1px dotted #bababa;
}
Basta agora usar as seguintes DIV's para chamar o CSS:
<span class="mais">+</span> Menu de Redes sociais
<ul class="sub-menu">
<li><a href="#"><img src="http://1.bp.blogspot.com/-aGYzMlEd8DI/UQW1SIehzuI/AAAAAAAAEsI/yD8QRUQoQRk/s1600/rss.png" border="0" alt="rss"> Assine nosso Feed</a></li>
<li><a href="#"><img src="http://4.bp.blogspot.com/-vIKPVTszOcg/UQW1SXyffuI/AAAAAAAAEsU/Bu43TDcbMHA/s1600/email.png" border="0" alt="email"> Assinantes por E-mail</a></li>
<li><a href="#"><img src="http://1.bp.blogspot.com/-5qh3_VgYmac/UQW1TC2lfhI/AAAAAAAAEsg/ugW01VZGkvs/s1600/twitter.png" border="0" alt="twitter">+ Siga-nos</a></li>
</ul>
</div>
Agora é só editar e posicionar em algum lugar que não atrapalhe outras funções do template... Até mais!
Marcadores:
CSS 3
0
Eaew gente preguiçosa õ/, hoje vim publica um menu que achei ate e legal *--*, esse menu é um efeito de sombras que parece que “explode” o menu quando você passa o mouse.
Live preview:
Demonstração
Vamos la, procure por :
]]></b:skin>
Antes da tag cole o codigo :
/** MENU EXPLOSION - BY NEAR **/
.menuexp {
display:inline-block;
width: 0px;
font-family: ARIAL;
font-size: 0px;
text-align: center;
background-color: #000;
color: #FFF;
height: 0px;
padding: 4px; /** ESSE SE QUISER MUDE **/
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
-webkit-box-shadow: inset 0 0 0px 0px #000,0 0 0 #000;
}
.menuexp:hover {
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
-webkit-box-shadow:inset 0 0 55px 35px transparent, 0 0 25px 15px transparent;
opacity:0.8}
}
Agora basta colar este código onde deseja que o menu apareça:
<a href="LINK" class="menuexp">Seu Link</a>
Pronto seu Menu Turns esta feito \õ/,personalize como quiser,
Postado por
Ủlquiorra
comentários
Live preview:
Vamos la, procure por :
Antes da tag cole o codigo :
.menuexp {
display:inline-block;
width: 0px;
font-family: ARIAL;
font-size: 0px;
text-align: center;
background-color: #000;
color: #FFF;
height: 0px;
padding: 4px; /** ESSE SE QUISER MUDE **/
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
-webkit-box-shadow: inset 0 0 0px 0px #000,0 0 0 #000;
}
.menuexp:hover {
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
-webkit-box-shadow:inset 0 0 55px 35px transparent, 0 0 25px 15px transparent;
opacity:0.8}
}
Agora basta colar este código onde deseja que o menu apareça:
Pronto seu Menu Turns esta feito \õ/,personalize como quiser,
26 de jan. de 2013
2
Eea galera *--*, bom apesar que na imagem esta iscrito "menu roda' o nome verdadeiro e Menu Scroll, achei esse codigo na net e dei umas editadas, agora pouco que fui descobrir o nome dele.
Demonstração
Vamos la, procure por :
]]></b:skin>
Antes da tag cole o codigo :
.menur{
float:left;
padding:6px;
text-align:center;
height:auto;
width:auto;
margin:1px;
webkit-transition-duration: .90s;
font:11px georgia;
background:#eee;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
border-radius:10px;
color:555;
}
.menur:hover{
background:#ddd;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
-webkit-transform: rotateX(360deg);
transform: rotateX(360deg);
-o-transform: rotateX(360deg);
}
Agora basta colar este código onde deseja que o menu apareça:
<a href="LINK DO MENU" class="menur">nome do link</a>
Pronto seu Menu Scroll esta feito \õ/
Postado por
Ủlquiorra
comentários
Vamos la, procure por :
Antes da tag cole o codigo :
float:left;
padding:6px;
text-align:center;
height:auto;
width:auto;
margin:1px;
webkit-transition-duration: .90s;
font:11px georgia;
background:#eee;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
border-radius:10px;
color:555;
}
.menur:hover{
background:#ddd;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
-webkit-transform: rotateX(360deg);
transform: rotateX(360deg);
-o-transform: rotateX(360deg);
}
Agora basta colar este código onde deseja que o menu apareça:
Pronto seu Menu Scroll esta feito \õ/
0
Olá gente *—* então, esse menu é muito simples de fazer, vocês dissidem em que vão usar *--*.
Para ver como ele é:
Demonstração
Vamos la, procure por :
]]></b:skin>
Antes da tag cole o codigo :
/** MENU TURNS - BY NEAR **/
.menuturns {
background-image: url('SUA IMAGEM');
width: 110px;
height:60px;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
}
.menuturns:hover {
background-image: url('SUA IMAGEM');
-webkit-transform: scale(0.7);
padding-up: 50px;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
}
Agora basta colar este código onde deseja que o menu apareça:
<a href="/"><div class="menuturns"></div></a>
Pronto seu Menu Turns esta feito \õ/
Postado por
Ủlquiorra
comentários
Para ver como ele é:
Vamos la, procure por :
Antes da tag cole o codigo :
.menuturns {
background-image: url('SUA IMAGEM');
width: 110px;
height:60px;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
}
.menuturns:hover {
background-image: url('SUA IMAGEM');
-webkit-transform: scale(0.7);
padding-up: 50px;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
}
Agora basta colar este código onde deseja que o menu apareça:
Pronto seu Menu Turns esta feito \õ/
Assinar:
Postagens (Atom)