sábado, 2 de novembro de 2013

Comentários , Autor , e marcador abaixo do título do post

No seu HTML, procure por <div class='post-footer-line post-footer-line-1'> (quem quiser entender melhor o novo HTML do blogger pode ver essa postagem da Liah).
Você irá ver vários códigos depois desse que você procurou, então selecione desde <div class='post-footer-line post-footer-line-1'>  até </div> e apague, deverá ficar assim:
Imagem: CB

Agora procure por <div class='post-header'> e novamente teremos dois resultados, o resultado que interessa é o primeiro. Abaixo da linha que você procurou, cole o seguinte código:
<span class='post-comment-link'>
        <b:if cond='data:blog.pageType != &quot;item&quot;'>
          <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
            <b:if cond='data:post.allowComments'>
              <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
                <data:post.commentLabelFull/>:
              </a>
            </b:if>
          </b:if>
        </b:if>
      </span> | <span class='post-author vcard'>
        <b:if cond='data:top.showAuthor'>
          <data:top.authorLabel/>
            <b:if cond='data:post.authorProfileUrl'>
              <span class='fn'>
                <a expr:href='data:post.authorProfileUrl' itemprop='author' rel='author' title='author profile'>
                  <data:post.author/>
                </a>
              </span>
            <b:else/>
              <span class='fn'><data:post.author/></span>
            </b:if>
        </b:if>
      </span> | <span class='post-labels'>
        <b:if cond='data:post.labels'>
          <data:postLabelsLabel/>
          <b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
          </b:loop>
        </b:if>
      </span> <span class='post-icons'>
        <!-- email post links -->
        <b:if cond='data:post.emailPostUrl'>
          <span class='item-action'>
          <a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
              <img alt='' class='icon-action' height='13' src='http://img1.blogblog.com/img/icon18_email.gif' width='18'/>
          </a>
          </span>
        </b:if>
        <!-- quickedit pencil -->
        <b:include data='post' name='postQuickEdit'/>
      </span>

Visualize e se estiver tudo certo, salve.
Agora para personalizar, é só procurar por ]]></b:skin> e colar o código a seguir acima dessa tag:
.post-header { text-align: center; /*Alinha no centro*/
font-size: 11px; /*Tamanho da fonte*/
border-bottom: 1px dashed #000; /*Borda inferior*/}
.post-header a { color: #000 !important; /*Cor dos links*/}
.post-header a:hover {color: #fff !important; /*Cor dos links ao passar o mouse*/}

Tutorial - Efeito entrada no blog


1º Vá no Design do seu blog, depois em Modelo e clique em Editar HTML e aperte Ctrl+F e procure por <head>, depois de ter achado a tag, abaixo dessa tag coloque o código abaixo:
<link href='http://static.tumblr.com/qyc8gwp/87Kmiatyu/efeito_entrada_1.css' media='screen' rel='stylesheet'/>

Depois disso procure por:  <body expr:class='&quot;loading&quot; + data:blog.mobileClass'> abaixo dessa tag, cole o código abaixo:
                                                                <div class='entrada'>
Depois disso, procure por </body> e acima dessa tag cole esse código:
</div>

Depois salve e visualize.

Tutorial- Voltar ao Topo no blog com efeito

Primeiro, vá em Design, depois em Layout, depois clique em Adicionar um Gadget, e adicione HTML/JavaScript. E depois cole esse código abaixo:

<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=""/>', //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()!='URL Da Imagem') //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>

Onde estiver escrito "URL Da Imagem" Vc coloca o URL da imagem q  vc quer.
Espero q eu tenha gostado e ajudado.

quarta-feira, 16 de outubro de 2013

Como colocar Saiba mais nas postagens

 * Vá no HTML do seu blog (Modelo > Editar HTML). Marque a opção "expandir modelos de widgets", aperte Ctrl+F e procure por: <data:post.jumpText/>






Apague somente esse código, e no lugar dele coloque isso: 
<p align='right'><a expr:href='data:post.url'><img src='Link da imagem aqui'/></a></p>
 
Aonde a 'Link da imagem aqui' substitua pelo link da imagem desejada (Por favor, escolha uma imagem Kawaii, pois eu amo coisas Kawaii's >w<) e obviamente, salvar as alterações. ;3
Para ta tudo certinho, lá na postagem (Aquele lugarzinho aonde você faz uma postagem, ok? '-' ) aonde você desejar que o Leia mais ou Saiba mais ou Continuar (o que você escolhe ), na barrinha que eu gosto de chamar "Barrinha de ajuste ;3",  aperte neste botão aqui hó:
 
 
 
 
 
 
 
Ai ira aparecer uma barrinha, e, aonde esta barrinha estiver, o "Leia Mais" (a imagem que você escolheu) ficará ;3
Barrinha >>>
 
 

 
 
Deu para compreender?
Qualquer duvida, é só comentar
E por hoje é só
HÁ, aqui esta umas imagens para vocês, são simples... Bem simples...
 
 
 
É só colocar o link da imagem onde se pede e salvar as alterações. Para funcionar, você só precisa clicar nesse botão  quando estiver fazendo o post, no lugar em que você quer que apareça o "leia mais".
 


 



sábado, 2 de fevereiro de 2013

Seleção colorida

Aperte Ctrl+F e procure por ]]></b:skin>
Cole antes o seguinte código:

::-moz-selection {
background:#F7DFDD; /*Cor do fundo*/
color:#E49D98; /*Cor da fonte*/
}
::selection {
background:#F7DFDD;/*Cor do fundo*/
color:#E49D98; /*Cor da fonte*/
}

2 backgrouds no blog

1°) Vá em modelo > Editar HTML.
2°) Aperte Ctrl+F e procure por body { Você irá encontrar um código assim:

body {
  font: $(body.font);
  color: $(body.text.color);
  background: $(body.background);
}
 3°) Apague tudo e coloque no lugar este código:
body, html {
 height: 300px;
 margin: 0;
 padding: 0;  }

body {
 font: $(body.font);
color: $(body.text.color);
background: url("URL do 1º background") repeat; }

html {
 background: url("URL do 2º background") repeat; }
Altere o número em vermelho (300) pela altura em pixels do primeiro background. Depois é só substituir as urls das duas imagens nos locais indicados.
Gostaram? Esperem que ainda não acabou! Fiz três conjutos de backgrounds para vocês usarem nesse tuto. Peguem a vontade, mas quando usarem dediquem um espacinho do seu blog para por os créditos ao cherry bomb. ;)

Conjunto 1




Conjunto 2



Conjunto 3




zxczx

testando

click

Click na imagem créditos da Kawaii the world