Postagens Recentes

13 de dez. de 2010

Template Flores Fractal

3 comentários:
Template estilo revista com slide das últimas atualizações.


DEMO / PEGAR CÓDIGO
 Para habilitar o menu.



Clique em "Expandir modelos de widget"

Agora clique na tecla F3 de seu teclado. Ao abrir a pequena janela, cole o seguinte código :


ENDEREÇO DO YAHOO


Ao encontra-lo, substitua então pelo endereço de seu Yahoo. Note que abaixo você encontrará de todos os outros links sociais. Vá substituindo.




Para que o Slide do blog funcione perfeitamente é necessário que a configuração do blog fique da seguinte maneira:

Clique em CONFIGURAÇÕES e depois em FORMATAÇÃO. Deixe selecionado em 6 postagens e a data no formato abaixo.


6 de dez. de 2010

Adsense dentro das postagens

Nenhum comentário:

Para colocar anúncios dentro das postagens proceda da seguinte maneira:
Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Estas dicas se aplicam aos templates feitos até junho de 2010. Para reinstalar o antigo template clique AQUI



Pegue o seu código e faça a conversão no Blogcrowds.



Ou faça manualmente como mostro no modelo abaixo.


 <script type="text/javascript"><!--
google_ad_client = "pub-7420305279011576";
google_ad_host = "pub-1556223355139109";
/* 300x250, criado 11/08/10 */
google_ad_slot = "3536544976";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>


Onde está em rosa troque pelo seguinte:

 <!-- por &lt;!--
//--> por //--&gt;


Portanto, seu código ficará assim:

<script type="text/javascript">&lt;!--
google_ad_client = "pub-7420305279011576";
google_ad_host = "pub-1556223355139109";
/* 300x250, criado 11/08/10 */
google_ad_slot = "3536544976";
google_ad_width = 300;
google_ad_height = 250;
//--&gt;
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>


Agora que já está certinho, copie o código abaixo e cole o seu código do Adsense dentro dele:

<b:if cond=’data:blog.pageType == “item”‘>
  <div class='adsense'>
COLE AQUI O CÓDIGO DO ADSENSE
</div>

</b:if>





Agora vamos coloca-lo dentro de seu post.

Vá até o HTML de seu blog, clique em "Expandir modelos de widget" e procure por:

<data:post.body/>

Cole então o código acima dele. 

Agora antes de:

Cole o próximo código;

.adsense
{
float:left;
padding-right:10px;
padding-right:10px;
}






Se quer que o anúncio fique a direita, substitua a palavra na cor vermelha por:
right

5 de dez. de 2010

Ocultar elementosna página inicial e páginas internas no Blogger

4 comentários:


Ocultar elementos na página inicial e nas páginas internas. (quando você clica para ver "Postagens mais antigas")







Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Estas dicas se aplicam aos templates feitos até junho de 2010. Para reinstalar o antigo template clique AQUI



<b:if cond='data:blog.pageType != &quot;item&quot;'>
          <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
AQUI O CÓDIGO DO QUE VC QUER OCULTAR
</b:if>
</b:if>








Por exemplo, suponhamos que você queira esconder a sidebar...


Então abaixo de: ]]></b:skin>

Cole o seguinte código:

 <b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style>
#sidebar-wrapper{display:none}
</style>
</b:if>
</b:if>



Para que a sidebar apareça em "Elementos de página", a Ariane quebrou a cabecinha e ensinou que se deve colocar o seguinte código antes de: body {


body#layout  #sidebar-wrapper{display:block;margin:0px;float:left;}

Você também deverá colocar os códigos para a sidebar depois de: ]]></b:skin>


<style>
.sidebar .widget {
  color: $sidebartextcolor;
  background: #fff;
  line-height: 1.5em;
  border: 6px solid #9CC6C2;
  margin: 10px 6px 10px 6px;
  padding: 6px 3px 6px 3px;
 }

.sidebar h2 {
font-size: 16px;
text-align: center;
padding: 3px 1px 3px 1px;
}

.sidebar ul {
  list-style:none;
  margin:0 0 0;
  padding:0 0 0;
}
.sidebar li {
  margin:0;
  padding-top:0;
  padding-$endSide:0;
  padding-bottom:.25em;
  padding-$startSide:15px;
  text-indent:-15px;
  line-height:1.5em;
  }
</style>

Tooltip ncom efeito JQuery

Nenhum comentário:
Coloque os links de seu blog com efeito tootip, é bem simples.




Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Estas dicas se aplicam aos templates feitos até junho de 2010. Para reinstalar o antigo template clique AQUI
Vá até o HTML de seu blog e antes de:

]]></b:skin>

Cole código abaixo:


.tip {
    color: #fff;
    background:#716D90;
    display:none; /*--Hides by default--*/
    padding:10px;
    position:absolute;    z-index:1000;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}


Agora depois de:

]]></b:skin>

Cole o próximo código.


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

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
    //Tooltips
    $(".tip_trigger").hover(function(){
        tip = $(this).find('.tip');
        tip.show(); //Show tooltip
    }, function() {
        tip.hide(); //Hide tooltip
    }).mousemove(function(e) {
        var mousex = e.pageX + 20; //Get X coodrinates
        var mousey = e.pageY + 20; //Get Y coordinates
        var tipWidth = tip.width(); //Find width of tooltip
        var tipHeight = tip.height(); //Find height of tooltip

        //Distance of element from the right edge of viewport
        var tipVisX = $(window).width() - (mousex + tipWidth);
        //Distance of element from the bottom of viewport
        var tipVisY = $(window).height() - (mousey + tipHeight);

        if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport
            mousex = e.pageX - tipWidth - 20;
        } if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport
            mousey = e.pageY - tipHeight - 20;
        }
        //Absolute position the tooltip according to mouse position
        tip.css({  top: mousey, left: mousex });
    });
});

//]]>
</script>



Pronto, agora sempre que quiser  o efeito tooltip em algum link, vc dederá colocar esse próximo código:


<a class='tip_trigger' href='AQUI O ENDEREÇO DO LINK'>LINK AQUI<span class='tip'>INSCRIÇÃO DO QUE APARECERÁ NO TOOLTIP</span></a>

2 de dez. de 2010

Template Splash

8 comentários:
Template com slide, menu horizontal com tolltip, sidebar em forma de menu accordion...


DEMO/ PEGAR CÓDIGO


Para habilitar o slide.

No HTML de seu blog procure por :

AQUI O ENDEREÇO DO LINK 1

E troque pelo endereço de seu link, faça isso quantos links quiser trocar.

*Para modificar as imagens:

Note que o endereço completo está assim:

<a href='AQUI O ENDEREÇO DO LINK 1'><img heigth='240px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPtv_Tqa6IhQbw33_hw1P7h0l3gd8EWIL1emYQGPqvq3vA5m5O1JOcP2lXEl0C1NRBk14Bhgjq0ypIbjDTqpluzm6_8ztYmKLhGDU-aPrBDgmaDLGj3fRUTNeBaCjU9Krgea6L4nVJLvE/s1600/angel.jpg' width='600px'/></a>

Perceba então que cada item começa com <a href'= e termina com </a>. ( o que está em vermelho)

Perceba que a imagems vem depois de src=' e termina antes de ' width= (o que está em azul)

PORTANTO, é aí que você deverá trocar o endereço das imagens, com carinho, paciência e muita atenção pois se apagar um ponto, uma aspa dará erro.



Para habilitar o menu horizontal:


Procure por:

ENDEREÇO DO LINK 1
E troque pelo endereço de sua preferência.



Template Gorjuss Outono

4 comentários:
Template em duas colunas mais 3 colunas no footer. Sidebar em forma de menu em abas com efeito Jquery, Slide, Twitter animado...


DEMO/ PEGAR CÓDIGO
Para habilitar o pássaro do Twitter (este que voa nas páginas internas)



No HTML de seu blog clique em "Expandir modelo de widget", agora procure por:

AQUI O ENDEREÇO DE SEU TWITTER PARA O PASSARO


Troque então pelo endereço de seu Twitter.


Para habilitar o menu em abas:



Vá até "Elementos de página" e clique nas imagens de ferramentas, a medida que for abrindo, cole em cada um deles o código desejado.


Para habilitar o slide.
No HTML de seu blog procure por :

AQUI O ENDEREÇO DO LINK 1

E troque pelo endereço de seu link, faça isso quantos links quiser trocar.

*Para modificar as imagens:

Note que o endereço completo está assim:

<a href='AQUI O ENDEREÇO DO LINK 1'><img heigth='240px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPtv_Tqa6IhQbw33_hw1P7h0l3gd8EWIL1emYQGPqvq3vA5m5O1JOcP2lXEl0C1NRBk14Bhgjq0ypIbjDTqpluzm6_8ztYmKLhGDU-aPrBDgmaDLGj3fRUTNeBaCjU9Krgea6L4nVJLvE/s1600/angel.jpg' width='600px'/></a>

Perceba então que cada item começa com <a href'= e termina com </a>. ( o que está em vermelho)

Perceba que a imagems vem depois de src=' e termina antes de ' width= (o que está em azul)

PORTANTO, é aí que você deverá trocar o endereço das imagens, com carinho, paciência e muita atenção pois se apagar um ponto, uma aspa dará erro.



Para habilitar o menu horizontal:


Procure por:

ENDEREÇO DO LINK 1
E troque pelo endereço de sua preferência.


1 de dez. de 2010

Menu em abas com botões diferentes e efeito JQuery

12 comentários:
DEMO




















Para colocar sua sidebar em forma de tabela com efeito vá até o HTML de seu blog e antes de:


]]></b:skin>

Cole o código abaixo.


Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Estas dicas se aplicam aos templates feitos até junho de 2010. Para reinstalar o antigo template clique AQUI














Código em vermelho representa a largura do menu







/*Tab-Sidebar --------------------------------------------------*/
.widgets{
background: #ccc;
float:left;
margin: 10px 0px 0 10px;
width:318px;
}

ul.tabnav{
margin:0;
padding:0;
width:318px;
}

.tabnav li{
background: #fff;
display:inline;
float:left;
list-style:none;
margin: 1px 0px 1px 1px;
padding: 2px 0px;
}

.tabnav li a{
color:#fff;
display:block;
font-size:88%;
font-family:Arial, Tahoma, Verdana;
font-weight:bold;
margin:2px 2px 0 2px;
outline:none;
padding:4px 3px 1px 3px;
text-transform:uppercase;
}
.tabnav li a:hover,.tabnav li a:active,.tabnav li.ui-tabs-selected a{
background:#ccc;
color:#333;
text-decoration:none;
}
.tabdiv{
border: 2px solid #ccc;
background: #fff;
padding:0 0 0 5px;
margim: 0 0 0 20px;}
.tabdiv h2{display:none;
}
.tabdiv ul{
list-style:none;
padding:5px 0px;
}
.tabdiv li{
border-bottom:1px dashed #808080;
line-height:1.35em;
margin:2px 0 2px 0;
padding:0 0 2px 3px}

.tabdiv li a:link,.tabdiv li a:visited{
overflow: hidden;
font-size: 15px;
color:#808080;
}

.tabdiv li a:hover {
text-decoration:none}

.ui-tabs-hide{
display:none}

Agora depois de:

]]></b:skin>

Cole este próximo código


<!--Tabsidebar-->
<script src='http://www.google.com/jsapi'/>
<script>
google.load(&quot;jquery&quot;, &quot;1.3.1&quot;);
google.load(&quot;jqueryui&quot;, &quot;1.5.3&quot;);
</script>
<script type='text/javascript'>
//<![CDATA[
// <!-- Tab Sidebar -->
$(document).ready(function() {
$('#tab-sidebar> ul').tabs({ fx: { height: 'toggle', opacity: 'toggle' } });
});
//]]>
</script>

Agora procure por:

<div id='sidebar-wrapper'>

E antes dele cole:


<div class='widgets' id='tab-sidebar'>
<ul class='tabnav'>

<!--  ALTERE AQUI OS TÍTULOS DA SIDEBAR EM ABAS  -->
<li class='tab1'><a href='#tab1'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEJYkE_BUxwIfQ1KD8KMlteyMnA7OfWYb35O91qO9ocnv-eUwVRv9DR2QjfaYKXFGujT9mk7wzRgo2Bv8mpe6BZL0MLWKGM27YmOK44ZCxTmKHR4qnFNk_CHKmSxUso5SAc0cagMf4__0/s1600/Copy.png'/> </a></li>
<li class='tab2'><a href='#tab2'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCgqT0M7er4YSKOP5k2kh6kUI4H8WuxKkttLcKJdIdiHo6aiQIyZXM8NYSX7xlOpHTTcLQEB9zwcRqyyUW-eLHJr00dmOT2FEuo6ZnyvsSoVmxMmJokRWN0SBLj9EsY2Kg6MSAVhJU1EM/s1600/Favourites.png'/></a></li>
<li class='tab3'><a href='#tab3'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNMfMyaARx7UHep9-lKFtkIRInpDFPofG9rU0ejso6Z6U7IrI4XHI2lUlG64ryc2_7z8hjPM2Y8E7dLde10K6I20LIR4Cc5UcQZmLPYKufVFgFuipDAtGvDfE7RGe4dkaoJpkcwjgxPgc/s1600/Yellow+tag.png'/></a></li>
<li class='tab4'><a href='#tab4'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfq98kylKD0S7NdZld3YwHwNVQST2jy0k-YGZO4hyphenhyphenCpSCtfmIURaHbfWC6K8rFTxcRSbFmQMsHCmrtHASAZvSQcYH-RWBCVwaDZWZPUZJnKZIFShoqNaLKh5oHHIOepsX4OoGtNMoUK6k/s1600/Comment.png'/></a></li>
<li class='tab5'><a href='#tab5'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9cET2D5uIwqrqJPB2Aw9DBSeyRkFrwljiObksdMhWTuw4Kzl1tpQJL6LZh646O1hjxb3dhYeiKuSPq0I0xwBolWcfODStnWv1IexJx-bmSl5ceB67c8Ov0OEwA5QHpieyw6LCNhAhQ0k/s1600/Text.png'/></a></li>
<li class='tab6'><a href='#tab6'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh64tqqw0RC7cRhOg2RL_dRbyndtsJWFY1EXEu9nA4e8WtiaSYNG_J1sOZm1DFJfHUXZDWJKLP57ULNw4vYRRYaD4iuciSzp4sQZAXc1PLgHshHfVN6kyv28LPPyNy9p273MFNR0EEvGLI/s1600/E-mail.png'/></a></li>
<li class='tab7'><a href='#tab7'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLoi0bc_BLECHdwH3yLKmTjgPm8pWz6H7agsvf1Ff-2eCody0Dfnpe3tmjwiBLOy-I9r-VIDQU64ykbQqk0BFZIKW6uLnQ9gjIBYe_hLMv8gUsjq3YW1iQK7-vLV1qmszBjnRygf14ETY/s1600/Folder.png'/></a></li>
<li class='tab8'><a href='#tab8'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi89CODpUSBCZCOMX95wflVln9K33F7JedX2elm5nlEqVzyWcqrXPpJyu7zq0oAMaIFDHHk3b16jGU_wSx0uN00_1lCWZfOEd9xu1t5HVPLGsdJOua_Wb9TXi4jfqBvgHny-74_KxlAFwU/s1600/Diagram.png'/></a></li>
<li class='tab9'><a href='#tab9'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ4Oy1Lf6TgrMPRnAfGgwZ70qiEiz03AbwXQ7tipLRyfO-xd0WSUufksnDISXwaqVLs3ejQSvSemqQYK5cTCbWQxWLuHo1nXhCM0OnbeecflePttDcBzNLOCJrB415CKIAKu9IieYty-0/s1600/Blog.png'/></a></li>
</ul>

<div class='clear'/>
<div class='tabdiv' id='tab1'>
<b:section class='sidebar-tab' id='sidebar-tabs-1' preferred='yes'>
<b:widget id='PopularPosts2' locked='false' title='Postagens populares' type='PopularPosts'/>
</b:section><!-- /end sidebar-tabs-1 -->
</div>  <!-- /end tab1 -->

<div class='tabdiv' id='tab2'>
<b:section class='sidebar-tab' id='sidebar-tabs-2' preferred='yes'>
<b:widget id='BlogList123' locked='false' title='Minha lista de blogs' type='BlogList'/>
</b:section> <!-- /end sidebar-tabs-2 -->
</div> <!-- /end tab2 -->

<div class='tabdiv' id='tab3'>
<b:section class='sidebar-tab' id='sidebar-tabs-3' preferred='yes'>
<b:widget id='Label2' locked='false' title='Labels' type='Label'/>
</b:section> <!-- /end sidebar-tabs-3 -->
</div> <!-- /end tab3 -->

<div class='tabdiv' id='tab4'>
<b:section class='sidebar-tab' id='sidebar-tabs-4' preferred='yes'>
<b:widget id='HTML122' locked='false' title='Últimos comentários' type='HTML'/>
</b:section> <!-- /end sidebar-tabs-4 -->
</div> <!-- /end tab4 -->

<div class='tabdiv' id='tab5'>
<b:section class='sidebar-tab' id='sidebar-tabs-5' preferred='yes'>
<b:widget id='PageList2' locked='false' title='Páginas' type='PageList'/>
</b:section> <!-- /end sidebar-tabs-5 -->
</div> <!-- /end tab5 -->

<div class='tabdiv' id='tab6'>
<b:section class='sidebar-tab' id='sidebar-tabs-6' preferred='yes'>
<b:widget id='HTML103' locked='false' title='Email' type='HTML'/>
</b:section> <!-- /end sidebar-tabs-6 -->
</div> <!-- /end tab 6-->

<div class='tabdiv' id='tab7'>
<b:section class='sidebar-tab' id='sidebar-tabs-7' preferred='yes'>
<b:widget id='BlogArchive2' locked='false' title='Arquivo do blog' type='BlogArchive'/>
</b:section> <!-- /end sidebar-tabs-7 -->
</div> <!-- /end tab 7-->

<div class='tabdiv' id='tab8'>
<b:section class='sidebar-tab' id='sidebar-tabs-8' preferred='yes'>
<b:widget id='Followers2' locked='false' title='Seguidores' type='Followers'/>
</b:section> <!-- /end sidebar-tabs-8 -->
</div> <!-- /end tab 8-->

<div class='tabdiv' id='tab9'>
<b:section class='sidebar-tab' id='sidebar-tabs-9' preferred='yes'>
<b:widget id='Subscribe1' locked='false' title='Inscrever-se' type='Subscribe'/>
</b:section> <!-- /end sidebar-tabs-9 -->
</div> <!-- /end tab 8-->


<div class='clear'/>
</div> <!-- /end tab-sidebar -->

Últimos comentários na sidebar

4 comentários:
Resolvi refazer essa dica e de quebra colocar algumas imagens, enfim, dar uma "papagaiadinha básica" no widget. Esse tipo de widget é muito bom para quem tem muitas postagnes e se não for esse recurso pode acabar nem lendo os cometários referentes a postagens mais antigas.


Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Estas dicas se aplicam aos templates feitos até junho de 2010. Para reinstalar o antigo template clique AQUI
















Para instala-lo em seu blog é bem simples.

Vá até o HTML de seu blog e depois de: ]]></b:skin>

Cole o código abaixo.


<script type='text/javascript'>
//<![CDATA[
// ----------------------------------------
// SHOW RECENT COMMENTS
// ----------------------------------------
// This functions takes a blogger-feed in JSON
// format and displays it.
//
// Version: 3
// Date:    2009-02-13
// Author:  Hans Oosting
// URL:     beautifulbeta.blogspot.com
// ----------------------------------------

function showrecentcomments(json) {
  for (var i = 0; i < numcomments; i++) {
    var entry = json.feed.entry[i];
    var alturl;

    if (i == json.feed.entry.length) break;
    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
        alturl = entry.link[k].href;
        break;
      }
    }
   var postlink = alturl.split("?");
   var commentid = alturl.split("#");
   postlink = postlink[0];
   commentid =commentid[1];
   var linktext = postlink.split("/");
   linktext = linktext[5];
   linktext = linktext.split(".html");
   linktext = linktext[0];
   var posttitle = linktext.replace(/-/g," ");
   posttitle = posttitle.link(postlink);
   var commentdate = entry.published.$t;
   var cdyear = commentdate.substring(0,4);
   var cdmonth = commentdate.substring(5,7);
   var cdday = commentdate.substring(8,10);
   var monthnames = new Array();
   monthnames[1] = "Jan";
   monthnames[2] = "Fev";
   monthnames[3] = "Mar";
   monthnames[4] = "Abr";
   monthnames[5] = "Mai";
   monthnames[6] = "Jun";
   monthnames[7] = "Jul";
   monthnames[8] = "Aug";
   monthnames[9] = "Set";
   monthnames[10] = "Out";
   monthnames[11] = "Nov";
   monthnames[12] = "Dez";
   if ("content" in entry) {
     var comment = entry.content.$t;}
   else
   if ("summary" in entry) {
     var comment = entry.summary.$t; }
   else var comment = "";
   var re = /<\S[^>]*>/g;
   comment = comment.replace(re, "");
   document.write('<div class="bbrecpost">');
   if (showcommentdate == true) document.write('<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIbkT8ItQ9cilgaUinq176GWLahwBjnQIl3FQZD7RyR29-gxIPgwMuRg9tJFqUwSDEmlra1jo9w5hp5qLe1LwzTmTj6cCZz3ZzvtRSkMmKOpZiAGfDyysbFzLDa0GkhAdMJGb_Bq3ST8U/s1600/attach.png"/> Em ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdday + ' ');
   document.write('<a href="' + postlink +'#' + commentid + '">' + entry.author[0].name.$t + '</a> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYt5HPnQzdGAzkCuiWT8sQXImOFs1y9JfaVRkvJS1WebNaNdqnSeATBD9WyxdRA_aCRkG68VlKmPjz2LUv6jY3P20XO2C6u6Hht-geyN3Ff0rHPBvWpArwFKxLlS025J5zrcz_QHVmM-A/s1600/030.png"/> comentou');
   if (showposttitle == true) document.write(' : <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOWCDLJJt9eIEm5e6tgtg7imzrbT-jtmFR_HQeoJga-g35R28fhGwHcax2xOxaZmw7vLhM_twN0n1P46p9uynq_ZAYtZRHQtVK4NiXwonobhof28Z0PCFjjeo8PJkSxRH_ZSgoDDCkfJU/s1600/link.png"/> ' + posttitle);
   document.write('</div><div class="bbrecpostsum">');
   if (comment.length < numchars) {
         document.write(comment);
   }
   else
        {

         comment = comment.substring(0, numchars );
         var quoteEnd = comment.lastIndexOf(" ");
         comment = comment.substring(0, quoteEnd);
         document.write(comment + '...<a href="' + alturl + '">(mais...)</a>');
   }
   document.write('</div>');
  }
document.write('<div class="bbwidgetfooter">');
document.write('<span style="font-size:80%;">Widget by <a href="http://templateseacessorios.blogspot.com">Templates e Acessórios</a><br/>Powered by <a href="http://beautifulbeta.blogspot.com">Beautiful Beta</a></span>');
document.write('</div>');}
//]]>
</script>



Agora antes de: ]]></b:skin>

Cole o código abaixo.

/*Showrecentcomments-----------------------------------------*/

.bbrecpost {
background: #EBF1F1;
margin: 13px 2px 3px 2px;
padding: 6px 3px;
}
.bbrecpostsum {
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYt5HPnQzdGAzkCuiWT8sQXImOFs1y9JfaVRkvJS1WebNaNdqnSeATBD9WyxdRA_aCRkG68VlKmPjz2LUv6jY3P20XO2C6u6Hht-geyN3Ff0rHPBvWpArwFKxLlS025J5zrcz_QHVmM-A/s1600/030.png) no-repeat left top;
border: 1px dashed #EBF1F1;
color: #000;
margin: -3px 2px;
padding: 14px 2px 4px 18px;
}
.bbwidgetfooter{
background: #EBF1F1;
padding: 6px 3px;
margin: 13px 2px 3px 2px;
}
.bbrecpost, .bbwidgetfooter, .bbrecpostsum a{
color: #808080;
}

Salve.

Agora vá até "Elementos de página" e clique em "Adicionar widget" agora clique em HTML/Javascript e cole este código abaixo colocando o endereço de seu blog no local indicado.


<script style='text/javascript'>var numcomments = 5;var showcommentdate = true;var showposttitle = true;var numchars = 150;</script><script src='AQUI O ENDEREÇO DE SEU BLOG/feeds/comments/default?alt=json-in-script&callback=showrecentcomments'></script>

Formulário de email no blog

2 comentários:


Encontrei este formulário no blog da Edilene. É do site KontacTR. Para usa-lo em seu blog, siga as ilustrações com as dicas.



Seu nome:
Seu Email :
Subject :
Mensagem:
Imagem (case-sensitive):

Entre no site por AQUI e vá preenchendo conforme as imagens.












Ao pegar o código, cole-o no HTML/Javascript em seu blog. Faça os ajustes de tamanho.


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