Ariadne Path: 2013-07-21

sexta-feira, 26 de julho de 2013

quarta-feira, 24 de julho de 2013

SLIDE - DECO fundo mais escuro

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

<a class='home-link' expr:href='data:blog.homepageUrl'>voltar ao início</a>

B. Adicionando um imagem ao lado do texto

Adicione ANTES do código destacado
<img src="URL Address"/>

No caso das "Postagem mais recente", ficará assim:

<img src="URL Address"/><data:newerPageTitle/>

C. Substituindo por outra imagem

Pode ser utilizado qualquer tipo de imagem, só é necessário que se utilize o seguinte código para a imagem:

1. Substitua o URL ADDRESS, pelo URL da sua imagem

2. SUBSTITUA, a parte destacada pelo código da imagem.

IMAGENS:

BACK

HOME

Mais Escuro

Menor

segunda-feira, 22 de julho de 2013

Thumbnail + Resumo Automático

Extraído de:
http://helplogger.blogspot.com.br/2012/03/auto-read-more-with-thumbnail-for.html

This blog and its content is for personal use only.

Este hack serve para mostra apenas um thumbnail e um resumo dos post na Homepage, Arquivos, Páginas de Tags, Resultados de Pesquisas. Automaticamente incluindo "Leia Mais" fazendo alterações com script no template.

Passo 1

Há 2 opções:

A. Automático "Leia Mais" para TODOS os posts:

A-1. Localize o código (há 3, substitua o segundo):
<data:post.body/>

A-2. SUBSTITUA por:

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div>
   <b:if cond='data:post.thumbnailUrl'>
    <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
   </b:if>
   <data:post.snippet/>
</div>
<div class='jump-link'>
   <a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>

B. "Leia Mais" apenas para posts ANTIGOS (o último post aparecerá normal, então caso queira inserir o "leia mais", deverá inserir a "quebra de página" no momento de confecção da postagem. Neste caso, aparecerá 2x "Leia Mais" na página inicial, um pouco irritante, mas não consegui tirar. Lembrar de tirar a "quebra de página" quando for feito outro post. Caso contrário a duplicidade de "Leia Mais" continuará):

B-1. SUBSTITUA o código <data:post.body/> por:

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
   <b:if cond='data:post.isFirstPost == "true"'>
    <data:post.body/>
     <b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
       <a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
     </b:if>
   <b:else/>
    <div>
     <b:if cond='data:post.thumbnailUrl'>
      <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
     </b:if>
     <data:post.snippet/>
    </div>
    <div class='jump-link'>
     <a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
    </div>
   </b:if>
<b:else/>
   <div>
    <b:if cond='data:post.thumbnailUrl'>
     <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
    </b:if>
    <data:post.snippet/>
   </div>
   <div class='jump-link'>
    <a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
   </div>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>

Passo 2:

A. Para o thumbnail ficar à esquerda:

A-1. ACIMA de:
]]></b:skin>

A-2. Coloque o código:

.post-thumbnail{float:left;margin-right:20px}

B. Para o thumbnail ficar à direita:

Acima de ]]></b:skin> adicione:

.post-thumbnail{float:right;margin-left:20px}

Teste Thumb 4

Imagem 320x480 colocada na lateral do texto.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer et tortor accumsan, vestibulum augue et, adipiscing sem. Phasellus feugiat condimentum lorem eget aliquet. Pellentesque vel augue volutpat risus accumsan vehicula. Mauris non auctor nulla. Mauris interdum purus vel iaculis scelerisque. Proin purus velit, iaculis quis massa quis, tincidunt viverra leo. Aliquam lacinia hendrerit consectetur. Etiam eget nisi vehicula, pretium quam vitae, tincidunt massa. Maecenas ultrices mi eget lectus mollis ornare. Phasellus tempor venenatis elit sed dapibus. Integer augue justo, eleifend non massa at, varius porttitor sem. Aliquam vel neque sem.

Teste Thumb 3

Dimensão 300x300 texto adicionada acima do thumbnail no modo "centralizado" escreverei 10 linhas: lorem ipsum. onec a massa tincidunt, fringilla nibh ut, tincidunt eros. Quisque consequat orci nec viverra commodo. Aliquam scelerisque, est non vulputate ornare, purus sapien aliquet lorem, et feugiat dui metus ac nunc. Integer rutrum aliquet leo a interdum. Proin aliquet ullamcorper eros, eget ullamcorper enim fringilla ut. Nam ultricies malesuada nulla, pellentesque interdum nibh eleifend nec. Cras ornare enim lorem. Donec elit arcu, bibendum at porttitor ac, malesuada vel leo. Morbi aliquam mi scelerisque est convallis, sed congue massa congue. Integer iaculis vehicula felis, sit amet tincidunt ligula interdum at. Quisque tincidunt luctus porttitor. Nulla commodo mollis lorem, quis vehicula libero egestas in. Ut sagittis massa nec turpis vulputate, a blandit massa sodales. Etiam libero erat, hendrerit nec arcu a, porttitor molestie lectus. Phasellus vitae nisi ut lacus porttitor placerat a ornare lacus. Morbi eget semper eros, convallis varius est.

onec a massa tincidunt, fringilla nibh ut, tincidunt eros. Quisque consequat orci nec viverra commodo. Aliquam scelerisque, est non vulputate ornare, purus sapien aliquet lorem, et feugiat dui metus ac nunc. Integer rutrum aliquet leo a interdum. Proin aliquet ullamcorper eros, eget ullamcorper enim fringilla ut. Nam ultricies malesuada nulla, pellentesque interdum nibh eleifend nec. Cras ornare enim lorem. Donec elit arcu, bibendum at porttitor ac, malesuada vel leo. Morbi aliquam mi scelerisque est convallis, sed congue massa congue. Integer iaculis vehicula felis, sit amet tincidunt ligula interdum at. Quisque tincidunt luctus porttitor. Nulla commodo mollis lorem, quis vehicula libero egestas in. Ut sagittis massa nec turpis vulputate, a blandit massa sodales. Etiam libero erat, hendrerit nec arcu a, porttitor molestie lectus. Phasellus vitae nisi ut lacus porttitor placerat a ornare lacus. Morbi eget semper eros, convallis varius est.

IMAGEM 320x480

Teste Thumb 2

Dimensão 300x300 texto adicionada abaixo do thumbnail no modo "centralizado": lorem ipsum. onec a massa tincidunt, fringilla nibh ut, tincidunt eros. Quisque consequat orci nec viverra commodo. Aliquam scelerisque, est non vulputate ornare, purus sapien aliquet lorem, et feugiat dui metus ac nunc. Integer rutrum aliquet leo a interdum. Proin aliquet ullamcorper eros, eget ullamcorper enim fringilla ut. Nam ultricies malesuada nulla, pellentesque interdum nibh eleifend nec. Cras ornare enim lorem. Donec elit arcu, bibendum at porttitor ac, malesuada vel leo. Morbi aliquam mi scelerisque est convallis, sed congue massa congue. Integer iaculis vehicula felis, sit amet tincidunt ligula interdum at. Quisque tincidunt luctus porttitor. Nulla commodo mollis lorem, quis vehicula libero egestas in. Ut sagittis massa nec turpis vulputate, a blandit massa sodales. Etiam libero erat, hendrerit nec arcu a, porttitor molestie lectus. Phasellus vitae nisi ut lacus porttitor placerat a ornare lacus. Morbi eget semper eros, convallis varius est.

Teste Thumb 1

Dimensão 300x300 texto adicionada acima do thumbnail no modo "centralizado" escreverei 10 linhas: lorem ipsum. onec a massa tincidunt, fringilla nibh ut, tincidunt eros. Quisque consequat orci nec viverra commodo. Aliquam scelerisque, est non vulputate ornare, purus sapien aliquet lorem, et feugiat dui metus ac nunc. Integer rutrum aliquet leo a interdum. Proin aliquet ullamcorper eros, eget ullamcorper enim fringilla ut. Nam ultricies malesuada nulla, pellentesque interdum nibh eleifend nec. Cras ornare enim lorem. Donec elit arcu, bibendum at porttitor ac, malesuada vel leo. Morbi aliquam mi scelerisque est convallis, sed congue massa congue. Integer iaculis vehicula felis, sit amet tincidunt ligula interdum at. Quisque tincidunt luctus porttitor. Nulla commodo mollis lorem, quis vehicula libero egestas in. Ut sagittis massa nec turpis vulputate, a blandit massa sodales. Etiam libero erat, hendrerit nec arcu a, porttitor molestie lectus. Phasellus vitae nisi ut lacus porttitor placerat a ornare lacus. Morbi eget semper eros, convallis varius est.

Coração que Abre - Widget Bookmarking

Post extraído de:
http://helplogger.blogspot.com.br/2012/03/awesome-slide-open-heart-bookmarking.html

This blog and its content is for personal use only.

Ver exemplo no "Quebrou Default"

1. Abra Modelo, selecione Editar HTML:

2. ACIMA de:
</head>

3. Cole o código:

<script src='http://w.sharethis.com/gallery/shareegg/shareegg.js' type='text/javascript'/>
<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
<script type='text/javascript'>stLight.options({publisher: "ur-98d377f-bdd3-9ad1-fbe5-2a678f0a60ee", onhover:false}); </script>
<link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/>

4: ACIMA de:
</body>

5: Cole o código:

<div style='position: fixed; bottom: 2%; left: 2%;'>
<div class='shareEgg' id='shareThisShareHeart'/>
</div>
<script type='text/javascript'>stlib.shareEgg.createEgg('shareThisShareHeart', ['facebook','twitter','pinterest','linkedin','stumbleupon','email','sharethis'], {title:' <data:blog.pageTitle/>',url:'<data:blog.url/>',theme:'shareheart'});</script><a href="http://www.helplogger.blogspot.com/">Blogger Gadgets</a>

As porcentagens da parte destacada em vermelho controla a posição do widget

6. Visualize e salve.

domingo, 21 de julho de 2013

Botão Back to TOP

Botão que aparece automaticamente ao rolar a página para baixo.

Basta adicionar um Gadget - HTML.

Código:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type='text/javascript' language='Javascript'>
var scrolltotop={
//startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control
//scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (1=top).
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML: '<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgiY9o4qofiEPEUe62_NTh_OAgFcfSa0e-6FbHwKWQuoR9Z9OtLwLlX5eMspVza4qQeJ6xK3VAuJcyr0lm44MZvzhyHW8ndndshcU6b1xaod28x0wPZ47rEYRgKZ3rlIxEYeGqEE99ObEN/s1600/SETA+back+to+top.png"/>', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ center of window corner
anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links
state: {isvisible:false, shouldvisible:false},
scrollup:function(){
if (!this.cssfixedsupport) //if control is positioned using JavaScript
this.$control.css({opacity:0}) //hide control immediately after clicking it
var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists
dest=jQuery('#'+dest).offset().top
else
dest=0
this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
},
keepfixed:function(){
var $window=jQuery(window)
var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
this.$control.css({left:controlx+'px', top:controly+'px'})
},
togglecontrol:function(){
var scrolltop=jQuery(window).scrollTop()
if (!this.cssfixedsupport)
this.keepfixed()
this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
if (this.state.shouldvisible && !this.state.isvisible){
this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
this.state.isvisible=true
}
else if (this.state.shouldvisible==false && this.state.isvisible){
this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
this.state.isvisible=false
}
},
init:function(){
jQuery(document).ready(function($){
var mainobj=scrolltotop
var iebrws=document.all
mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
.css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
.attr({title:'Scroll Back to Top'})
.click(function(){mainobj.scrollup(); return false})
.appendTo('body')
if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text
mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text
mainobj.togglecontrol()
$('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
mainobj.scrollup()
return false
})
$(window).bind('scroll resize', function(e){
mainobj.togglecontrol()
})
})
}
}
scrolltotop.init()
</script>

Assinar: Postagens ( Atom )

Ariadne Path