Postagens Recentes

20/07/2014

COMO TRANSFERIR SUAS FITAS K7 PARA O COMPUTADOR

Nenhum comentário:
Bons tempos aqueles em que as fitas cassete passavam de mão em mão para que todos pudessem ter as músicas mais tocadas do momento e playlists exclusivos. Há quem sinta falta das históricas K7, contudo, há quem agradeça todos os dias o fato de a música digital chegar e acabar com os perrengues relacionados às antecessoras do CD.
Assim como nas fitas VHS, muitas pessoas guardam relíquias em fitas K7, que, com o tempo, vão se apagando ou se perdendo. Hoje você vai aprender a transferir o áudio das suas fitas antigas para o computador e digitalizar as músicas que embalaram grandes momentos da sua vida ou que guardam ocasiões que não podem se apagar.

O que você vai precisar

  • Um cabo P2/P2 ou;
  • Um RCA/P2;
  • Uma fita cassete;
  • Um tocador de fitas cassete;
  • Um software para gravação de áudio;
  • Placa de som;
  • Gravador de CD (opcional);
  • Espaço em disco.
O grande diferencial será o tipo de saída que seu tocador de fitas tem, já que ele pode ter saídas RCA (fig. 1) ou P2 (fig. 2). Sendo assim, o tipo de cabo que você vai precisar depende do tipo de saída do player.
Além disso, vale lembrar que ter um tocador e fitas em bom estado de conservação são fundamentais para o sucesso da transferência de áudio. No nosso caso, usamos um cabo P2/P2, ligando uma das saídas no plugue do fone de ouvido do nosso toca fitas.   
Exemplo de cabo com saída RCAExemplo de saída P2

Trabalhando com o que você tem

Há várias maneiras de realizar esta tarefa: com os cabos RCA, P2 e até aparelhos que fazem esta conversão quase que automaticamente, como o Ion Cassete Deck ou o Ion uRecord Vinyl & Cassete Ripper, que transformam o K7 em MP3 em instantes. Claro que é inviável adquirir produtos assim, a não ser que você tenha milhares de fitas para digitalizar. Do contrário, os cabos corretos, fitas e tocador de qualidade já bastam.

Conversores profissionais de K7

 Como começar

Para começar a digitalizar suas fitas, é importante frisar que seu tocador precisa ter uma saída de áudio (Line Out), já que o som sairá do tocador e entrará no seu computador por intermédio da placa de som.
Se você for usar cabos RCA, preste atenção para ligar as cores entre os conectores corretamente; se for um usar um cabo P2, lembre-se de colocar na saída de áudio (saída dos fones de ouvido) ou se você tiver uma saída AUX, também pode usar.

No computador

A maioria dos computadores, especialmente os mais atuais, contam com placas de som com vários tipos de entradas, porém, para transferir o áudio das fitas para ela, você vai precisar da entrada analógica (conector azul).
Depois de conectar seu tocador à placa, é hora de ajustar as configurações de volume. Para isso, clique no atalho para os controles de volume localizado ao lado do relógio e verifique se está tudo funcionando corretamente. 
Cada conector executa uma função

Convertendo o analógico em digital

Se você conseguiu fazer com que o som do seu toca fitas fosse reproduzido, é hora de utilizar um software para gravar o som analógico da sua cassete e transformá-lo em digital no seu HD. Para isso, você vai precisar de um aplicativo que grave áudio.
Sendo assim, vamos usar o Audacity, pois ele oferece a opção de gravar o áudio executado no seu computador, além de diversas alternativas para edição — e o melhor: é gratuito. Desta maneira, faça o download do Audacity e instale-o no seu computador.

Está gravando?

Assim que conectar o tocador na placa de som e se certificar que ela reconheceu a conexão, basta abrir o Audacity e clicar em “Gravar” (círculo vermelho). Obviamente, você vai precisar ajustar o volume da gravação, pois certamente haverá distorções. Para saber se o volume é o adequado para que o som saia nítido na gravação, preste atenção nos níveis de volume, pois eles indicam se o som está adequado, muito alto ou muito baixo. 
Configure o volume de gravação
Na figura acima, é possível observar as variações volume. Inicialmente, a gravação estava muito alta, o que ocasionou a distorção no áudio. Em seguida, o volume foi diminuído, e os níveis foram se encaixando dentro das linhas cinza. Posteriormente, a música foi desligada e as linhas de volume ficaram estáveis.
Você pode controlar estas variações de volume no seu tocador de fitas ou com os controles de volume do Windows na barra “Line In”. Se você quiser saber mais sobre o funcionamento do Audacity, consulte o artigo “Audacity: como gravar sons”. Depois de acertar todos os detalhes, você pode editar suas faixas com o próprio Audacity. É possível inserir efeitos, criar mais faixas ou separá-las, extrair o som dos vocais e muito mais.
Se você acha que está tudo perfeito, é hora de salvar seus arquivos. Para isso, vá até o menu “Arquivo/Exportar”. Você pode inserir o nome do artista e da faixa, criar categorias para suas músicas e muito mais em uma janela como esta.
Crie categorias para seus arquivos
Há vários formatos disponíveis no Audacity, mas os mais comuns são o WAV e o MP3. Vale lembrar que, para salvar em MP3, você vai precisar baixar uma DLL. Isso é simples, pois, assim que você solicitar que a faixa seja salva em MP3, uma pequena janela será aberta. Desta forma, clique em "Baixar" para ser direcionado ao site de downloads. 
Para salvar em MP3, você precisa de uma DLL
Obviamente, há várias opções de aplicativos para realizar a mesma tarefa do Audacity. Além dele, você pode usar o MAGIX Audio Cleaning Lab (pago), Sony Sound Forge (pago), Wavosaur (gratuito) e o GTS Studio Recorder (gratuito).
Vale lembrar que o Windows disponibiliza uma ferramenta para captura de som chamada “Gravador de Som”, mas ela é muito básica, logo, não custa nada baixar um aplicativo mais completo. Contudo, se você não quer complicação ele é ideal. 
Gravador que acompanha o Windows

Espaço em disco

É importante frisar que, além destes componentes, você também precisa ter espaço disponível no seu HD para gravar o áudio das fitas. Dependendo do formato de gravação, você vai precisar de mais ou menos espaço.
Por exemplo, se você gravar no formato WAV, cada um minuto de áudio equivale a 10 MB; já em MP3, um minuto corresponde a 1 MB. O próprio Audacity informa quanto tempo de gravação ele consegue armazenar de acordo com o espaço disponível. Estes valores eficam visíveis na parte inferior da janela do aplicativo. 
Sempre fique atento ao espaço do seu disco

Tudo digitalizado

Finalmente você digitalizou todas as suas fitas K7 e está com vários arquivos no PC ou todo o conteúdo de uma fita em um arquivo único. Se você preferir gravar as faixas em um arquivo só, sem problemas, mas, se por acaso se esqueceu deste detalhe, não se preocupe.
Você pode usar vários aplicativos que dividem arquivos de áudio. O próprio Audacity faz isso, mas há opções mais simples, como o Slice Audio File Splitter,DJ Audio Editor e o MP3 Cutter, todos gratuitos. É claro que você precisa verificar se o formato de arquivo que você gravou (MP3, WAV, OGG) é suportado pelo programa escolhido.
No Audacity, o recorte de áudio pode ser feito da seguinte maneira: selecione o trecho da música que você quer cortar e vá até o menu Editar/Separar > Criar novo. Pronto, você terá duas faixas na tela do Audacity, agora basta selecionar uma delas e Exportar com o nome correspondente.
Divida as faixas que ficaram grudadas

O que fazer?

Depois de digitalizar sua coleção de fitas do Patinho Feio, a coletânea do Roberto Carlos que sua mãe tanto ama ou o som da sua banda, é possível utilizar os arquivos de áudio das mais diferentes formas. Uma delas é a gravação das faixas em um CD.
Para isso você vai precisar de um gravador de CDs e um aplicativo que realize esta função. Além disso, você pode incluir as faixas como trilha sonora em menus de DVDs, usar as músicas para criar e editar filmes no Movie Maker ou outro editor, além de ouvir em seu Player MP3, iPod ou DVD.
Confira abaixo um trecho de uma fita K7 digitalizada. Ao longo da gravação, o volume da música sofreu variações.
Morte e vida do K7
Depois de digitalizar suas K7, você acha que será fácil se livrar delas? Com certeza a tecnologia usada na gravação das fitas já foi superada há muito tempo, mas há quem afirme que elas já fazem parte da história das pessoas e que, assim como os discos de vinil, se tornaram objetos de coleção e saudosismo.
Pelo o que parece, as fitas ainda despertam a criatividade e interesse dos designers, geeks e antenados na moda, tendo em vista que o número de objetos que usam o tema “fita K7” ainda é muito popular e considerado como venda garantida. Confira abaixo alguns objetos inspirados nos cassetes e tire suas conclusões sobre a morte e vida delas.  
Moda influenciada pelo passado
Se você se interessou pelo assunto, aproveite enquanto as músicas estão gravando e confira mais alguns artigos relacionados ao tema.

Por Tecmundo

10/06/2014

Combo: retirar do Blogger a barra de ferramentas, assinar feed e tecnologia do Blogger

Nenhum comentário:


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.




#navbar, #Attribution1, .feed-links {display:none}


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

31/05/2014

Caixa de link-me para funcionar no Blogger

Nenhum comentário:
A caixinha de link-me não está mais aceitando o antigo código. Agora é necessário converte-lo, assim como fazemos com os códigos do Adsense quando queremos introduzi-los entre as postagens. Alguma mudança houve... O código novo está abaixo.





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.


<div align="center"><a href='AQUI O ENDEREÇO DE SEU BLOG' title='ESCREVA ALGO'><img src="ENDEREÇO DA IMAGEM" alt="ESCREVA ALGO"  /></a><div style="background-color:#FFF;border: solid 1px #000; overflow:auto; width:130px; height:30px;" onmouseover="this.select()">&lt;a href='ENDEREÇO DE SEU BLOG' title='ESCREVA ALGO'&gt;&lt;img src='ENDEREÇO DA IMAGEM' alt='ESCREVA ALGO'&quot;&gt;&lt;/a&gt;</div></div>

12/05/2014

Arquivo do blog em forma de calendário

Nenhum comentário:

Um hack antiguinho que eu ainda não havia postado aqui, mas que resolvi implementa-lo em meus blogs e trazer a tutorial pata vocês. Com ele é possível ter os arquivos em forma de calendário, com isso, saber os dias que houve postagem em seu blog. Fica melhor organizado e esteticamente mais bonito.


A primeira coisa a fazer é implementar o gadget em seu blog.

Ao abrir, clique em  Arquivo do blog



Se já o tiver, apenas abra o gadget e deixe-o configurado como está abaixo.

Agora vá em Modelo e clique em Editar HTML.








Clique em "Ir para um widget" e procure por "BlogArchive1"






Troque todo o código que começa em  <b:widget id='BlogArchive1' locked='false' blá, blá
e vai até  </b:widget>






Por este abaixo.


<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div class='widget-content'>
  <div id='ArchiveList'>
  <div expr:id='data:widget.instanceId + "_ArchiveList"'>
    <b:if cond='data:style == "HIERARCHY"'>
     <b:include data='data' name='interval'/>
    </b:if>
    <b:if cond='data:style == "FLAT"'>
      <b:include data='data' name='flat'/>
    </b:if>
    <b:if cond='data:style == "MENU"'>
      <b:include data='data' name='menu'/>
    </b:if>
  </div>
  </div>
  <b:include name='quickedit'/>
  </div>
</b:includable>
<b:includable id='toggle' var='interval'>
  <!-- Toggle not needed for Calendar -->
</b:includable>
<b:includable id='flat' var='data'>
<div id='bloggerCalendarList'>
  <ul>
    <b:loop values='data:data' var='i'>
      <li class='archivedate'>
        <a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
      </li>
    </b:loop>
  </ul>
</div>
<div id='blogger_calendar' style='display:none'>
<table id='bcalendar'><caption id='bcaption'>
</caption>
<!-- Table Header -->
<thead id='bcHead'></thead>
<!-- Table Footer -->
<!-- Table Body -->
<tbody><tr><td id='cell1'> </td><td id='cell2'> </td><td id='cell3'> </td><td id='cell4'> </td><td id='cell5'> </td><td id='cell6'> </td><td id='cell7'> </td></tr>
<tr><td id='cell8'> </td><td id='cell9'> </td><td id='cell10'> </td><td id='cell11'> </td><td id='cell12'> </td><td id='cell13'> </td><td id='cell14'> </td></tr>
<tr><td id='cell15'> </td><td id='cell16'> </td><td id='cell17'> </td><td id='cell18'> </td><td id='cell19'> </td><td id='cell20'> </td><td id='cell21'> </td></tr>
<tr><td id='cell22'> </td><td id='cell23'> </td><td id='cell24'> </td><td id='cell25'> </td><td id='cell26'> </td><td id='cell27'> </td><td id='cell28'> </td></tr>
<tr><td id='cell29'> </td><td id='cell30'> </td><td id='cell31'> </td><td id='cell32'> </td><td id='cell33'> </td><td id='cell34'> </td><td id='cell35'> </td></tr>
<tr id='lastRow'><td id='cell36'> </td><td id='cell37'> </td></tr>
</tbody>
</table>
<table id='bcNavigation'><tr>
<td id='bcFootPrev'></td>
<td id='bcFootAll'></td>
<td id='bcFootNext'></td>
</tr></table>  
<div id='calLoadingStatus' style='display:none; text-align:center;'>
<script type='text/javascript'>bcLoadStatus();</script>
</div>
<div id='calendarDisplay'/>
</div>
<script  type='text/javascript'> initCal();</script>
</b:includable>
<b:includable id='posts' var='posts'>
<!-- posts not needed for Calendar -->
</b:includable>
<b:includable id='menu' var='data'>
  Configure your calendar archive widget - Edit archive widget - Flat List - Newest first - Choose any Month/Year Format
</b:includable>
<b:includable id='interval' var='intervalData'>
  Configure your calendar archive widget - Edit archive widget - Flat List - Newest first - Choose any Month/Year Format
</b:includable>
</b:widget>

Salve.



Agora procure por: </head> e acima dele cole o próximo código








<!-- Blogger Archive Calendar by  www.MyBloggerTricks.com -->
<script type='text/javascript'>
//<![CDATA[
var bcLoadingImage = "http://2.bp.blogspot.com/-yUGWz7Vrm0c/UKtPDwJpdSI/AAAAAAAAICU/9ZAvxQUZJLg/s400/loading-trans.gif.png";
var bcLoadingMessage = " Carregando....";
var bcArchiveNavText = "Ver arquivo";
var bcArchiveNavPrev = '◄';
var bcArchiveNavNext = '►';
var headDays = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
var headInitial = ["Su","Mo","Tu","We","Th","Fr","Sa"];
// Nothing to configure past this point ----------------------------------
var timeOffset;
var bcBlogID;
var calMonth;
var calDay = 1;
var calYear;
var startIndex;
var callmth;
var bcNav = new Array ();
var bcList = new Array ();
//Initialize Fill Array
var fill = ["","31","28","31","30","31","30","31","31","30","31","30","31"];
function openStatus(){
   document.getElementById('calLoadingStatus').style.display = 'block';
   document.getElementById('calendarDisplay').innerHTML = '';
  }
function closeStatus(){
   document.getElementById('calLoadingStatus').style.display = 'none';
  }
function bcLoadStatus(){
   cls = document.getElementById('calLoadingStatus');
   img = document.createElement('img');
   img.src = bcLoadingImage;
   img.style.verticalAlign = 'middle';
   cls.appendChild(img);
   txt = document.createTextNode(bcLoadingMessage);
   cls.appendChild(txt);
  }
function callArchive(mth,yr,nav){
// Check for Leap Years
  if (((yr % 4 == 0) && (yr % 100 != 0)) || (yr % 400 == 0)) {
      fill[2] = '29';
   }
  else {
      fill[2] = '28';
   }
   calMonth = mth;
   calYear = yr;
   if(mth.charAt(0) == 0){
      calMonth = mth.substring(1);
      }
   callmth = mth;
   bcNavAll = document.getElementById('bcFootAll');
   bcNavPrev = document.getElementById('bcFootPrev');
   bcNavNext = document.getElementById('bcFootNext');
   bcSelect = document.getElementById('bcSelection');
   a = document.createElement('a');
   at = document.createTextNode(bcArchiveNavText);
   a.href = bcNav[nav];
   a.appendChild(at);
   bcNavAll.innerHTML = '';
   bcNavAll.appendChild(a);
   bcNavPrev.innerHTML = '';
   bcNavNext.innerHTML = '';
   if(nav <  bcNav.length -1){
      a = document.createElement('a');
      a.innerHTML = bcArchiveNavPrev;
      bcp = parseInt(nav,10) + 1;
      a.href = bcNav[bcp];
      a.title = 'Previous Archive';
      prevSplit = bcList[bcp].split(',');
      a.onclick = function(){bcSelect.options[bcp].selected = true;openStatus();callArchive(prevSplit[0],prevSplit[1],prevSplit[2]);return false;};
      bcNavPrev.appendChild(a);
      }
   if(nav > 0){
      a = document.createElement('a');
      a.innerHTML = bcArchiveNavNext;
      bcn = parseInt(nav,10) - 1;
      a.href = bcNav[bcn];
      a.title = 'Next Archive';
      nextSplit = bcList[bcn].split(',');
      a.onclick = function(){bcSelect.options[bcn].selected = true;openStatus();callArchive(nextSplit[0],nextSplit[1],nextSplit[2]);return false;};
      bcNavNext.appendChild(a);
     }
   script = document.createElement('script');
   script.src = 'http://www.blogger.com/feeds/'+bcBlogId+'/posts/summary?published-max='+calYear+'-'+callmth+'-'+fill[calMonth]+'T23%3A59%3A59'+timeOffset+'&published-min='+calYear+'-'+callmth+'-01T00%3A00%3A00'+timeOffset+'&max-results=100&orderby=published&alt=json-in-script&callback=cReadArchive';
   document.getElementsByTagName('head')[0].appendChild(script);
}
function cReadArchive(root){
// Check for Leap Years
  if (((calYear % 4 == 0) && (calYear % 100 != 0)) || (calYear % 400 == 0)) {
      fill[2] = '29';
   }
  else {
      fill[2] = '28';
   }
    closeStatus();
    document.getElementById('lastRow').style.display = 'none';
    calDis = document.getElementById('calendarDisplay');
    var feed = root.feed;
    var total = feed.openSearch$totalResults.$t;
    var entries = feed.entry || [];
    var fillDate = new Array();
    var fillTitles = new Array();
    fillTitles.length = 32;
    var ul = document.createElement('ul');
    ul.id = 'calendarUl';
    for (var i = 0; i < feed.entry.length; ++i) {
      var entry = feed.entry[i];
      for (var j = 0; j < entry.link.length; ++j) {
       if (entry.link[j].rel == "alternate") {
       var link = entry.link[j].href;
       }
      }
      var title = entry.title.$t;
      var author = entry.author[0].name.$t;
      var date = entry.published.$t;
      var summary = entry.summary.$t;
      isPublished = date.split('T')[0].split('-')[2];
      if(isPublished.charAt(0) == '0'){
         isPublished = isPublished.substring(1);
         }
      fillDate.push(isPublished);
      if (fillTitles[isPublished]){
          fillTitles[isPublished] = fillTitles[isPublished] + ' | ' + title;
          }
      else {
          fillTitles[isPublished] = title;
          }
      li = document.createElement('li');
      li.style.listType = 'none';
      li.innerHTML = '<a href="'+link+'">'+title+'</a>';
      ul.appendChild(li);
      }
   calDis.appendChild(ul);
   var val1 = parseInt(calDay, 10)
   var valxx = parseInt(calMonth, 10);
   var val2 = valxx - 1;
   var val3 = parseInt(calYear, 10);
   var firstCalDay = new Date(val3,val2,1);
   var val0 = firstCalDay.getDay();
   startIndex = val0 + 1;
  var dayCount = 1;
  for (x =1; x < 38; x++){
      var cell = document.getElementById('cell'+x);
      if( x < startIndex){
          cell.innerHTML = ' ';
          cell.className = 'firstCell';
         }
      if( x >= startIndex){
          cell.innerHTML = dayCount;
          cell.className = 'filledCell';
          for(p = 0; p < fillDate.length; p++){
              if(dayCount == fillDate[p]){
                  if(fillDate[p].length == 1){
                     fillURL = '0'+fillDate[p];
                     }
                  else {
                     fillURL = fillDate[p];
                     }
                  cell.className = 'highlightCell';
                  cell.innerHTML = '<a href="/search?updated-max='+calYear+'-'+callmth+'-'+fillURL+'T23%3A59%3A59'+timeOffset+'&updated-min='+calYear+'-'+callmth+'-'+fillURL+'T00%3A00%3A00'+timeOffset+'" title="'+fillTitles[fillDate[p]].replace(/"/g,'\'')+'">'+dayCount+'</a>';
                 }
              }
          if( dayCount > fill[valxx]){
             cell.innerHTML = ' ';
             cell.className = 'emptyCell';
             }
          dayCount++;
         }
      }
    visTotal = parseInt(startIndex) + parseInt(fill[valxx]) -1;
    if(visTotal >35){
        document.getElementById('lastRow').style.display = '';
       }
  }
function initCal(){
   document.getElementById('blogger_calendar').style.display = 'block';
   var bcInit = document.getElementById('bloggerCalendarList').getElementsByTagName('a');
   var bcCount = document.getElementById('bloggerCalendarList').getElementsByTagName('li');
   document.getElementById('bloggerCalendarList').style.display = 'none';
   calHead = document.getElementById('bcHead');
   tr = document.createElement('tr');
   for(t = 0; t < 7; t++){
       th = document.createElement('th');
       th.abbr = headDays[t];
       scope = 'col';
       th.title = headDays[t];
       th.innerHTML = headInitial[t];
       tr.appendChild(th);
      }
   calHead.appendChild(tr);
  for (x = 0; x <bcInit.length;x++){
     var stripYear= bcInit[x].href.split('_')[0].split('/')[3];
     var stripMonth = bcInit[x].href.split('_')[1];
     bcList.push(stripMonth + ','+ stripYear + ',' + x);
     bcNav.push(bcInit[x].href);
     }
  var sel = document.createElement('select');
  sel.id = 'bcSelection';
  sel.onchange = function(){var cSend = this.options[this.selectedIndex].value.split(',');openStatus();callArchive(cSend[0],cSend[1],cSend[2]);};
  q = 0;
  for (r = 0; r <bcList.length; r++){
       var selText = bcInit[r].innerHTML;
       var selCount = bcCount[r].innerHTML.split('> (')[1];
       var selValue = bcList[r];
       sel.options[q] = new Option(selText + ' ('+selCount,selValue);
       q++
       }                
   document.getElementById('bcaption').appendChild(sel);
   var m = bcList[0].split(',')[0];
   var y = bcList[0].split(',')[1];
   callArchive(m,y,'0');
}
function timezoneSet(root){
   var feed = root.feed;
   var updated = feed.updated.$t;
   var id = feed.id.$t;
   bcBlogId = id.split('blog-')[1];
   upLength = updated.length;
   if(updated.charAt(upLength-1) == "Z"){timeOffset = "+00:00";}
   else {timeOffset = updated.substring(upLength-6,upLength);}
   timeOffset = encodeURIComponent(timeOffset);
}
//]]>
</script>
<script src='/feeds/posts/summary?max-results=0&amp;alt=json-in-script&amp;callback=timezoneSet'></script>
<!-- End Blogger Archive Calendar by www.MyBloggerTricks.com  -->

Salve !!!


Agora só falta o código CSS para dar estilo.

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.




/* Start of Post Navigator by MBT (LIGHT Theme) ------ */
#calendarDisplay {display:none;}
/* div that holds calendar */
#blogger_calendar { margin:0px auto 0px 0px;width:100%;}
/* Table Caption - Holds the Archive Select Menu */
#bcaption {border:1px solid #C7C7C7;padding:2px;margin:10px 0 0;background:#fff;font:bold 100% Tahoma, Arial, Sans-serif}
/* The Archive Select Menu */
#bcaption select {background:#ffff;border:0 solid #C7C7C7;color:#0080ff;font-weight:bold;text-align:center;}
/* The Heading Section */
table#bcalendar thead {}
/* Head Entries */
table#bcalendar thead tr th {width:20px;text-align:center;padding:3px; border:1px solid #C7C7C7; font:bold 100% Tahoma, Arial, Sans-serif;background:#fff;color:#0080ff;}
/* The calendar Table */
table#bcalendar {border:1px solid #C7C7C7;border-top:0; margin:0px 0 0px;width:100%;background:#fff}
/* The Cells in the Calendar */
table#bcalendar tbody tr td {cursor:pointer; text-align:center; border-radius:4px; padding:3px;border:1px solid #C7C7C7; color:#666;font:bold 100% Tahoma, Arial, Sans-serif;}
/* Links in Calendar */
table#bcalendar tbody tr td a:link, table#bcalendar tbody tr td a:visited, table#bcalendar tbody tr td a:active {font-weight:bold;color:#ffffff; text-decoration:none;}
table#bcalendar tbody tr td a:hover {color:#ffffff; text-decoration:none;}
/* First Row Empty Cells */
td.firstCell {visibility:visible;}
/* Cells that have a day in them */
td.filledCell {  background:#fff;}
td.filledCell:hover {  background:#dddddd;}
/* Cells that are empty, after the first row */
td.emptyCell {visibility:hidden;}
/* Cells with a Link Entry in them */
td.highlightCell {background:#53A9FF;border:1px solid #C7C7C7}
td.highlightCell:hover {background:#72B9FF;border:1px solid #C7C7C7}
/* Table Footer Navigation */
table#bcNavigation  {width:100%;background:#fff;border:1px solid #C7C7C7;border-top:0;color:#0080ff;font:bold 100% Tahoma, Arial, Sans-serif;}
table#bcNavigation a:link {text-decoration:none;color:#0080ff}
table#bcNavigation a:hover{text-decoration:underline;}
td#bcFootPrev {width:10px;}
td#bcFootAll{text-align:center;}
td#bcFootNext {width:10px;}
ul#calendarUl {margin:5px auto 0!important;}
ul#calendarUl li a:link {}
/* End of Post Navigator by MBT (LIGHT Theme) ------ */


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




Via Blogger Tricks

05/05/2014

Menu com efeito hover CSS

Nenhum comentário:
 DEMO

Menus nos blogs nunca são demais. Economizam espaço, enfeitam, organizam e facilitam para o leitor as buscas no blog. Esse modelo é do Codepen e é bem fácil de instalar e manusear, sendo implementado no widget do Blogger, na parte de layout.




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.


<style>
ul.abanico {
  position: relative;
  width: 500px;
  height: 300px;
  margin: 10px auto;
  list-style: none;
  font: normal 16px "arial narrow", sans-serif;
}
ul.abanico li {
  position: absolute;
  bottom: 0;
 
  width: 140px;
  height: 300px;
  background: orange;
 
  line-height: 300px;
  text-align: center;
  -moz-transform-origin: top center;
  -webkit-transform-origin: top center;
  transform-origin: top center;
  -moz-transition: all .4s ;
  -webkit-transition: all .4s ;
  transition: all .4s ;
}
ul.abanico li a {
  text-shadow: 0.1em 0.1em 0.05em #333;
  display: inline-block;
  width: 140px;
  height: 48px;
  text-decoration: none;
  color: white;
  line-height: 40px;
  vertical-align: bottom;
}
ul.abanico:hover li {
  opacity: 1;
}
ul.abanico:hover li:nth-of-type(6) {
  opacity: 0;
}
ul.abanico:hover li:nth-of-type(1)  {
  background: green;
  -moz-transform: rotate(60deg);
  -webkit-transform: rotate(60deg);
  transform: rotate(60deg);
}
ul.abanico:hover li:nth-of-type(2)  {
  background: blue;
  -moz-transform: rotate(32deg);
  -webkit-transform: rotate(32deg);
  transform: rotate(32deg);
}
ul.abanico:hover li:nth-of-type(3)  {
  background: purple;
  -moz-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
ul.abanico:hover li:nth-of-type(4)  {
  background: red;
  -moz-transform: rotate(-32deg);
  -webkit-transform: rotate(-32deg);
  transform: rotate(-32deg);
}
ul.abanico:hover li:nth-of-type(5)  {
  background: orange;
  -moz-transform: rotate(-60deg);
  -webkit-transform: rotate(-60deg);
  transform: rotate(-60deg);
}

</style>

<ul class="abanico">
  <li><a href="ENDEREÇO DO LINK 1">INICIO</a></li>
  <li><a href="ENDEREÇO DO LINK 2">LINK 1</a></li>
  <li><a href="ENDEREÇO DO LINK 3">LINK 2</a></li>
  <li><a href="ENDEREÇO DO LINK 4">LINK 3</a></li>
  <li><a href="ENDEREÇO DO LINK 5">LINK 4</a></li>
  <li><a href="javascript:void();">MENU</a></li>
</ul>

04/05/2014

Mais um modelo de postagnes populares

Nenhum comentário:



É sempre bom e necessário que se tenha além de um conteúdo bom, um layout enxuto, de fácil navegação e harmonioso. Há inúmeros hacks para que possamos chegar a esses resultados e os widgets são bastante personalizáveis. Encontrei mais essa maneira de personalizar o widget de postagens populares no blog All Blogger Tricks e trago para vocês o hack.

A primeira coisa necessária é ter o widget de postagens populares em seu blog.  Para isso vá em layout








e depois clique em Adicionar um Gadget e finalmente clique em Postagens populares. Claro, se vc já possui o gadget, pode pular essa etapa.










Agora vá até o "Modelo de seu blog", clique em "Editar HTML"
  Hack para o template do Blogger, implementado em  abril de 2013.






Procure por </body> e abaixo dele cole o próximo código.




<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>
<script type='text/javascript'>
 $(document).ready(function() {$(&#39;.PopularPosts img&#39;).attr(&#39;src&#39;, function(i, src) {return src.replace( &#39;s72-c&#39;, &#39;s400&#39; );});});
</script>
    <script type='text/javascript'>
    //<![CDATA[
    // Popular Posts customization by AllBloggerTricks.com
    // Trim Code by MS-potilas 2012
    $('.popular-posts ul li .item-snippet').each(function(){
     var txt=$(this).text().substr(0,120);
      var j=txt.lastIndexOf(' ');
      if(j>10)
         $(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,'...'));
    });
    //]]>
    </script>




Agora vamos dar estilo, implementando CSS

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.




/* Popular Posts Widget customized by AllBloggerTricks.com */
.PopularPosts .item-thumbnail { display: block; height: 190px; margin: 0; overflow: hidden; position: relative; width: 100%; }
.PopularPosts .item-title { position: relative; }
.PopularPosts img { display: block; height: auto; position: absolute; width:auto; transition: all 1s ease 0s; }
.item-title a { background:rgba(0, 0, 0, 0.35); color: #FFFFFF; font-family: Impact; font-size: 17px; font-weight: 100; padding: 10px 0; position: absolute; right: 0; text-align: center; top: 30px; width: 100%; }
.item-snippet { background:rgba(0, 0, 0, 0.35); color: #FFFFFF; font-weight: 900; left: 12%; padding: 10px; position: absolute; text-align: center; top: 95px; width: 70%; }
.item-content:hover img {transform: rotate(10deg) scale(1.2);}
.item-content { position: relative; }


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

29/01/2014

Loading gerador

Um comentário:




Mais uma dica de gerador, que há tempos não posto por aqui. Essa é para o loading, aquela imagem que fica rodando até seu blog ou algum widget abrir totalmente. Nos referidos sites você poderá escolher o modelo, a cor do loading e até a cor de fundo. No primeiro site é possível escrever palavras. Você poderá usa-lo para usar em um dos hacks que postei aqui como por exemplo, o hack de abertura dos posts.que é igual do Facebook, ou no hack onde usamos para contar o tempo de carregamento da página.

Clique aqui para visitar o site 1



Clique aqui para abrir o site





Imagem de carregamento no Blogger - Loading

Nenhum comentário:


Para quem tem muito conteúdo ou um blog muito pesado, uma boa distração é colocar uma imagem animada, o loading para que seu visitante n]ao perca a paciência e dê no pé. rs.
Uma dica antiguinha e bem simples de implementar em dois passos.


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.


<script type='text/javascript'> window.onload = detectarCarga; function detectarCarga() { document.getElementById(&quot;imgLOAD&quot;).style.display=&quot;none&quot;; } </script> 



 Salve !


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.

O código em vermelho é o código da imagem, bastando troca-la pelo endereço de outra imagem. Veja aqui dicas de geradores de imagem loading.


<div id="imgLOAD" style="text-align:center;">Carregando...
<img src="http://1.bp.blogspot.com/-PkiVk-5CSNU/UuhW0zZKp7I/AAAAAAAAXYc/IGt020BoqyQ/s1600/103.GIF"/></div>


Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube