Ariadne Path: 2013

quinta-feira, 19 de setembro de 2013

Retirar Espaço entre Cabeçalho e Topo do Blog

1.Pesquisar
body {

2. Localizar o trecho
body {
font-family: arial;
font-color: #1C1C1C;
background: $(body.background);
}

3. ANTES de }
colocar

margin-top: -30px;

4. Resultado final: (pode mexer na distância px)
body {
font-family: arial;
font-color: #1C1C1C;
background: $(body.background);
margin-top: -30px;
}

sexta-feira, 9 de agosto de 2013

Botões de Top e Bottom

Retirado de: http://helplogger.blogspot.com.br/2013/03/how-to-add-go-to-top-and-go-to-bottom.html

Botões com jQuery slide effect

Passo 1. ACIMA de:

]]></b:skin>

cole o seguinte código:

/* Up and Down Buttons with jQuery
----------------------------------------------- */
.button_up{
padding:7px; /* Distance between the border and the icon */
background-color:white;
border:1px solid #CCC; /* Border Color */
position:fixed;
background: whiteurl(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4p8QhyphenhyphenSnR86jq8-ykzttwb7qK_vq0NVoSnPw9iDSdA3v_hs2tWu44pF_D9F7VErlMokmiTXHuBjT57p28jeFaqdzA2a7WIh8fg0OmMQ66Ym-ZnXzXWfxmU_JnaHqCi-jg7HHVftSSt8Q/s16/arrow_up.png) no-repeat top left;
background-position:50% 50%;
width:20px; /* Button's width */
height:20px; /* Button's height */
bottom:280px; /* Distance from the bottom */
right:5px; /* Change right to left if you want the buttons on the left */
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
.button_down{
padding:7px; /* Distance between the border and the icon */
background-color:white;
border:1px solid #CCC; /* Border Color */
position:fixed;
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilhYcdpgelNqk6R3mROUlucvWeP-jEcikM3j_of9f-kbVRr9tGIueHH9uXtwRJPm_RwmpbJ1TTb9WSZHIKQkEMNQ1jA1u1bO7ivGxys6uyfct5107bleXnpEF3wYBSnCGvCFYhATGbF7Y/s16/arrow_down.png) no-repeat top left;
background-position:50% 50%;
width:20px; /* Button's width */
height:20px; /* Button's height */
bottom:242px; /* Distance from the bottom */
right:5px; /* Change right to left if you want the buttons on the left */
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}

Note: - partes em verde podem ser alteradas para customização.
- Altere as setas trocando as URLs em azul.
- Mudar a cor do background dos botões: altere o white

Passo 2. ACIMA de:

</body>

cole o seguinte código:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

<div class='button_up' id='button_up' style='display:none;'/>
<div class='button_down' id='button_down' style='display:none;'/>

<script>
//<![CDATA[
(function(){var special=jQuery.event.special,uid1='D'+(+new Date()),uid2='D'+(+new Date()+1);special.scrollstart={setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}else{evt.type='scrollstart';jQuery.event.handle.apply(_self,_args)}timer=setTimeout(function(){timer=null},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid1,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid1))}};special.scrollstop={latency:300,setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}timer=setTimeout(function(){timer=null;evt.type='scrollstop';jQuery.event.handle.apply(_self,_args)},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid2,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid2))}}})();

$(function() {
var $elem = $('body');
$('#button_up').fadeIn('slow');
$('#button_down').fadeIn('slow');
$(window).bind('scrollstart', function(){
$('#button_up,#button_down').stop().animate({'opacity':'0.2'});
});
$(window).bind('scrollstop', function(){
$('#button_up,#button_down').stop().animate({'opacity':'1'});
});
$('#button_down').click(
function (e) {
$('html, body').animate({scrollTop: $elem.height()}, 800);
} );
$('#button_up').click(
function (e) {
$('html, body').animate({scrollTop: '0px'}, 800);
} );});
//]]>
</script>

Obs.: Para remover "Go to top" button, apague o primeiro código em negrito. Para remover o "Go to bottom", apague o segundo.

Remover "Subscribe to posts: Atom"

Tive que realizar os dois procedimentos, pois o A somente apagou da homepage. Com o B apaguei também das páginas de posts.

A) procure e apague a linha:

<b:include data='feedLinks' name='feedLinksBody'/>

B) procure e apague a linha:

<b:include name='feedLinks'/>

Setas Tchuquinhos

Posts recentes com thumbnails para um label específico

Retirado de: http://helplogger.blogspot.com.br/2013/04/show-recent-posts-with-thumbnails-for.html

Mostra os posts recentes acompanhado de thumbnail separados por labels.

Passo 1. Editar HTML

Passo 2. ACIMA de:

]]></b:skin>

cole o seguinte código:

/* Recent posts by labels
--------------------------------- */
img.label_thumb{
float:left;
margin-right:10px !important;
height:65px; /* Thumbnail height */
width:65px; /* Thumbnail width */
border: 1px solid #fff;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
}

.label_with_thumbs {
float: left;
width: 100%;
min-height: 70px;
margin: 0px 10px 2px 0px;
padding: 0;
}
ul.label_with_thumbs li {
padding:8px 0;
min-height:65px;
margin-bottom:0px;
border-bottom: 1px dotted #999999;
}

.label_with_thumbs li{
list-style: none ;
padding-left:0px !important;
}

.label_with_thumbs a { text-transform: uppercase;}
.label_with_thumbs strong {padding-left:0px; }

Passo 3. ACIMA de:

</head>

cole o seguinte código:

<script type='text/javascript'>
//<![CDATA[
function labelthumbs(json){document.write('<ul class="label_with_thumbs">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
{s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}else thumburl='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZMsWkrL56sJ6Bos9E7g8tsoiKpkgkHD9hiSUcmZeFJyqLtGSdV7Ap11JV5SmpHoKLutVMxMvEEkM8mSx6jqdcYH6lXtJJlYXKoN6vYtvDgBX1pBYXQYk0NpPWIK08pyRquJiMa5RDX1k/s1600/picture_not_available.png';}
var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="June";monthnames[7]="July";monthnames[8]="Aug";monthnames[9]="Sept";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true)
document.write('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<strong><a href="'+posturl+'" target ="_top">'+posttitle+'</a></strong><br>');if("content"in entry){var postcontent=entry.content.$t;}
else
if("summary"in entry){var postcontent=entry.summary.$t;}
else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('');}
else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}}
var towrite='';var flag=0;document.write('<br>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}
if(showcommentnum==true)
{if(flag==1){towrite=towrite+' | ';}
if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}
if(displaymore==true)
{if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">More »</a>';flag=1;;}
document.write(towrite);document.write('</li>');if(displayseparator==true)
if(i!=(numposts-1))
document.write('');}document.write('</ul>');}
//]]>
</script>

Obs.: Para adicionar outra imagem para posts sem fotos, substitua o trecho em azul pelo url da sua imagem.

Passo 4. Vá para Layout e adicione um novo gadget

Passo 5. Escolha "HTML/Javascript" e cole o seguinte código:

<script type='text/javascript'>var numposts = 3;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 100;</script>
<script type="text/javascript" src="/feeds/posts/default/-/Name-of-the-label?published&alt=json-in-script&callback=labelthumbs"></script>

Obs.: Substitua o "Name-of-the-label" pelo nome do seu label (case sensitive).

Esse último código pode ser alterado:

var numposts ← Number of posts to display
var showpostthumbnails ← Show/hide thumbnails
var displaymore ← Show or hide the read more link
var displayseparator ← Show/hide separator
var showcommentnum ← Show/hide the number of comments
var showpostdate ← Show/hide the posts dates
var showpostsummary ← Show or not the posts summaries
var numchars ← Number of posts characters (here you have to change the 100 value)

Fim: Para criar esse gadget/widget para outros labels, repita o Passo 5 para cada label separadamente.

terça-feira, 6 de agosto de 2013

Altura do Cabeçalho

Editr HTML

Crtl + F :

/* Header

Abaixo dessa linha

----------------------------------------------- */

Cole o seguinte código:

.header-inner {
margin-top: -20px;
}

Resultado Final:

/* Header
----------------------------------------------- */
.header-inner {
margin-top: -20px;
}

sexta-feira, 26 de julho de 2013

Godzillas

quarta-feira, 24 de julho de 2013

SLIDE - DECO fundo mais escuro

SLIDES NOVOS

SLIDE - PLANNER

Fote 70 e 25
opacidade: 26,7

Menu Drop - código personalizado tatezilla

Código do menu e submenus personalizado:

<div id='menuWrapper'>
<ul class='menu'>
<li class='top'><a class='top_link' href='Link URL'><span>Início</span></a></li>

<li class='top'><a class='top_link' href='Link URL'><span class='down'>Planner</span></a>
<ul class='sub'>
<li><a href='Link URL'>Agenda</a></li>
<li><a href='Link URL'>Listas</a></li>
<li><a href='Link URL'>Orçamento</a></li>
<li><a href='Link URL'>Timeline</a></li>
</ul>
</li>

<li class='top'><a class='top_link' href='Link URL'><span class='down'>Decoração</span></a><ul class='sub'><li><a class='fly' href='Link URL'>Cerimônia</a><ul>
<li><a href='Link URL'>Geral</a></li>
<li><a href='Link URL'>Altar</a></li>
<li><a href='Link URL'>Corredor</a></li>
</ul>
</li>
<li class='mid'><a class='fly' href='Link URL'>Festa</a>
<ul>
<li><a href='Link URL'> Geral</a></li>
<li><a class='fly' href='Link URL'>Mesas</a>
<ul>
<li><a href='Link URL'>noivos</a></li>
<li><a href='Link URL'>convidados</a></li>
<li><a href='Link URL'>bolo e doces</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='Link URL'>Impressos</a></li>
</ul>
</li>

<li class='top'><a class='top_link' href='Link URL'><span class='down'>Fashionismo</span></a>
<ul class='sub'>
<li><a class='fly' href='Link URL'>Noiva</a>
<ul>
<li><a href='Link URL'>vestido</a></li>
<li><a href='Link URL'>buquê</a></li>
<li><a href='Link URL'>penteado</a></li>
<li><a href='Link URL'>maquiagem</a></li>
</ul>
</li>
<li><a href='Link URL'>Noivo</a></li>
<li><a href='Link URL'>Madrinhas</a></li>
<li><a href='Link URL'>Alianças</a></li>
</ul>
</li>

<li class='top'><a class='top_link' href='Link URL'><span class='down'>Gastronomia</span></a>
<ul class='sub'>
<li><a href="Link URL" class="fly">Comes</a>
<ul>
<li><a href="Link URL">aperitivos</a></li>
<li><a href="Link URL">principal</a></li>
<li><a href="Link URL">bolo e doces</a></li>
</ul>
</li>
<li><a href='Link URL'>Bebes</a></li>
</ul>
</li>

<li class="top"><a href="Link URL" class="top_link"><span class="down">Entretenimento</span></a>
<ul class="sub">
<li><a href="Link URL">Músicas</a></li>
<li><a href="Link URL">Atividades</a></li>
</ul>
</li>

<li class="top"><a href="Link URL" class="top_link"><span class="down">Fornecedores</span></a>
<ul class="sub">
<li><a href="Link URL">Decoração</a></li>
<li><a href="Link URL">Fashionismo</a></li>
<li><a href="Link URL">Gastronomia</a></li>
<li><a href="Link URL">Entretenimento</a></li>
<li><a href="Link URL">Foto e Vídeo</a></li>
<li><a href="Link URL">Locais</a></li>
<li><a href="Link URL">Hotéis</a></li>
<li><a href="Link URL">Convites</a></li>
<li><a href="Link URL">Lista de Presentes</a></li>
</ul>
</li>


<li>
<form action='/search' id='search' method='get' name='searchForm' style='display:inline;'>
<input id='search-box' name='q' onblur='if (this.value == "") this.value = "Search here...";' onfocus='if (this.value == "Search here...") this.value = "";' size='28' type='text' value='Search here...'/></form>
</li>

</ul>
</div>

terça-feira, 23 de julho de 2013

Alterar texto "Postagem mais antiga" ...

Extraído de: http://helplogger.blogspot.com.br/2012/04/how-to-replace-older-posts-and-newer.html

This blog and its content is for personal use only.

Alterar "Postagem mais antiga", "Início"e "Postagem mais recente":

A. Substituindo por outro texto

B. Adicionando um imagem ao lado do texto

C. Substituindo por outra imagem

1. Modelo - Editar HTML

2. Localizar o seguinte código:

<b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
      </span>
    </b:if>

    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
      </span>
    </b:if>

    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

3. Alterar de acordo com sua opção;

A. Substituindo por outro texto

Substitua

<data:newerPageTitle/>

<data:olderPageTitle/>

<data:homeMsg/> (atenção: é o primeiro)

por QUALQUER OUTRA PALAVRA OU FRASE. Por exemplo:

recentes

anteriores

voltar ao início

Observação: Toda a parte destacada deverá ser substituída, inclusive o </>. Por exemplo, no caso do "voltar ao início":

será substituído por