Mostrando postagens com marcador blogger. Mostrar todas as postagens
Mostrando postagens com marcador blogger. Mostrar todas as postagens

quarta-feira, 1 de setembro de 2010

Adicionando Blogger/Gadget de sharing

1) Adicione um Gadget padrão HTML/Javacript:

Gerenciamento > Design > Elementos da Página > Adicionar um gadget > HTML/Javacript.
<div id="jquery-sharing"></div>

2) Acrescente as linhas de código antes do </head>:

Gerenciamento > Design > Editar HTML
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/> <script src='https://sites.google.com/site/paulocheque/jquery.sharing.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function() { $('#jquery-sharing').Sharing({ text: '', links:'orkut,facebook,twitter,delicious,googlebookmarks,linkedin,yahoo,live,digg', image_dir: 'https://sites.google.com/site/paulocheque/', title: 'Descrição do seu blog', }); }); </script>

3) Para customizar o layout: Gerenciamento > Design > Designer de Modelo > Avançado > Adicionar CSS:

#jquery-sharing a { padding-right: 2px; }
#jquery-sharing img { width: 16px; height: 16px; }

4) Assim já deve funcionar legal, mas dai você pode mudar os servidores dos arquivos js e das imagens. Também pode adicionar e remover as redes sociais que desejar, mas dai é recomendável ver a documentação do JQuery-Sharing.

sábado, 28 de agosto de 2010

Colorindo código fonte no Blogger com JQuery-SyntaxHighlighter

1) Painel de configurações > Design > Editar HTML (Cuidado com esse código fonte!):


Acrescente essas linhas entre a tag head:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://github.com/balupton/jquery-syntaxhighlighter/raw/master/scripts/jquery.syntaxhighlighter.min.js" type="text/javascript"></script>
<script type="text/javascript">$(document).ready(function() {$.SyntaxHighlighter.init();});</script>


2) Depois, nos seus posts, apenas coloque o seu exemplo de código entre tags "code", exemplos:

<code class="language-html">...</code>
<code class="language-java">...</code>
Entre outras linguagens...

Autodetecção de linguagem:
<code class="highlight">...</code>

3) Como o fundo desse blog é preto, preferi deixar o fundo do código como branco. Para isso:

Painel de configurações > Design > Designer de Modelo > Avançado > Adicionar CSS:
code { background-color: white; }

Fontes:
http://www.balupton.com/#/projects/jquery-syntaxhighlighter