Caixa d/ destaques p/ sidebar

Voltei com mais uma partilha  que eu penso irá dár muito jeito para alguns blogueiros.
É de simples aplicação e usada para a sidebár do blog é uma caixa de noticias,de avisos,de algo que queira destacar ...
Pode vêr na imagem acima como fica e aqui pode visualizár online :  ENTRE AQUI...
E vamos entrar no seu esquema ou layout e adicione um gadget html/javascript e cole este meu código:

<style>
}
#caixanoticias-bt{
margin: 10px;
z-index:-1;
position:relative;
}
.caixanoticias-bt{
width:auto;
margin-top: 10px;
background-color: rgba(226, 230, 229, 1);
background: rgba(226, 230, 229, 1);
border:double 5px #0dfc6d;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright:5px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
border-top-left-radius:5px;
border-top-right-radius:5px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
padding:10px 20px;
display:inline-block;
text-shadow:1px 1px 0 rgba(109, 230, 229, 1);
font-family:Trebuchet;
font-size:16px;
text-align:left;
color:#000000;
font-style:italic;
box-shadow: 0 0 2px 1px #000;
}
</style>
<div id='caixanoticias-bt'>
<div class='caixanoticias-bt'>
Todas as novidades aqui online só aqui...
<a href="http://temadetestes.blogspot.pt/2014/07/caixa-avisosinfo-e-dicas.html/">click aqui...</a>
</div>
</div>

Agora procure isto : Todas as novidades aqui online só aqui...
<a href="http://temadetestes.blogspot.pt/2014/07/caixa-avisosinfo-e-dicas.html/">click aqui...</a>
e mude ao seu gosto...

Foi isto que trouxe espero ajudár dúvidas disponha até mais...

Leia +

Caixa d/ destaques p/ sidebar

► 1

► box creditos dicas

► Cartita

Box créditos p/ final posts

Boas tárdes venho trazer uma partilha de box créditos,serve para colocár uma mensagem ou algo relevante.
É para se usar acima área dos comentários e abaixo da área das postagens...
Pode vêr na imagem como fica ,mas pode visualizár online:  ENTRE AQUI...
Não ligue se gadgets estão desalinhados porque servem só para visualizár eu não centralizei ,simplesmente são só de testes ok...

Antes de tudo faça uma cópia do seu template...

Procure este código sublinhado a vermelho ;

Agora acima dele ou abaixo dele coloque o meu código:

<b:if cond='data:blog.pageType == "item"'>
<style>
#bt-creditos {
width: 100%;
height: 60px;
padding:0px;
 margin:5px ;  
color:#fcfcfc;
font-family:"Oswald";font-size:16px;
background: -moz-linear-gradient(45deg, rgba(76,76,76,1) 0%, rgba(247,103,197,1) 12%, rgba(102,102,102,1) 25%, rgba(244,132,211,1) 39%, rgba(237,201,212,1) 50%, rgba(237,208,217,1) 52%, rgba(242,140,169,1) 60%, rgba(43,43,43,1) 76%, rgba(244,127,168,1) 92%, rgba(247,202,209,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgba(76,76,76,1)), color-stop(12%,rgba(247,103,197,1)), color-stop(25%,rgba(102,102,102,1)), color-stop(39%,rgba(244,132,211,1)), color-stop(50%,rgba(237,201,212,1)), color-stop(52%,rgba(237,208,217,1)), color-stop(60%,rgba(242,140,169,1)), color-stop(76%,rgba(43,43,43,1)), color-stop(92%,rgba(244,127,168,1)), color-stop(100%,rgba(247,202,209,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(45deg, rgba(76,76,76,1) 0%,rgba(247,103,197,1) 12%,rgba(102,102,102,1) 25%,rgba(244,132,211,1) 39%,rgba(237,201,212,1) 50%,rgba(237,208,217,1) 52%,rgba(242,140,169,1) 60%,rgba(43,43,43,1) 76%,rgba(244,127,168,1) 92%,rgba(247,202,209,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(45deg, rgba(76,76,76,1) 0%,rgba(247,103,197,1) 12%,rgba(102,102,102,1) 25%,rgba(244,132,211,1) 39%,rgba(237,201,212,1) 50%,rgba(237,208,217,1) 52%,rgba(242,140,169,1) 60%,rgba(43,43,43,1) 76%,rgba(244,127,168,1) 92%,rgba(247,202,209,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(45deg, rgba(76,76,76,1) 0%,rgba(247,103,197,1) 12%,rgba(102,102,102,1) 25%,rgba(244,132,211,1) 39%,rgba(237,201,212,1) 50%,rgba(237,208,217,1) 52%,rgba(242,140,169,1) 60%,rgba(43,43,43,1) 76%,rgba(244,127,168,1) 92%,rgba(247,202,209,1) 100%); /* IE10+ */
background: linear-gradient(45deg, rgba(76,76,76,1) 0%,rgba(247,103,197,1) 12%,rgba(102,102,102,1) 25%,rgba(244,132,211,1) 39%,rgba(237,201,212,1) 50%,rgba(237,208,217,1) 52%,rgba(242,140,169,1) 60%,rgba(43,43,43,1) 76%,rgba(244,127,168,1) 92%,rgba(247,202,209,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#f7cad1',GradientType=1 );-moz-border-radius:5px;-webkit-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px;-moz-box-shadow: -1px 2px 8px #000000;
-webkit-box-shadow: -1px 2px 8px #000000;
box-shadow: -1px 2px 8px #000000;
}
</style>
<div id="bt-creditos">
<div align="center"><br/>
”A felicidade de nossa vida depende da serenidade da nossa consciência...”
</div>
</div>
</b:if>

Notas;
”A felicidade de nossa vida depende da serenidade da nossa consciência...” troque pela sua frase...
width: 100%; largura da box troque se quiser...
height: 60px; altura da box troque se quiser...
color:#fcfcfc; côr da letras troque pela sua côr...
font-family:"Oswald"; fonte da letra troque se quiser...
font-size:16px; tamanho da letra troque se quiser...

Foi esta a partilha espero seja útil até mais...

Leia +

Box créditos p/ final posts

► 0

► box creditos

► Cartita

Colocar colunas e créditos blog

Bom e feliz sábado para vc ,eu venho trazer aqui nesta postagem um tutorial para colocar um footer de 3 colunas com créditos.
Como podem ver na imagem acima tem 3 colunas só não aparece a área de créditos mas porque não consegui tirar a screenshot.
Um footer/ródapé com várias colunas tem suas vantagens alem de ser vistoso ,podemos colocar os gadgets e assim arruma-mos melhor a sidebar.
Veja aqui online:  Entre aqui...   .
Vamos começar a aplicação .

ANTES DE TUDO FAÇA UMA CÓPIA DO SEU TEMPLATE...

Agora entre no painél do seu blog depois vá em modelo e click em editar html:
Procure este código e acima dele colóque o meu código do blockquote:

Pegue aqui código:

/*-- INICIO Footer    http://best-tuga.blogspot.com/ --*/
#footer-wrapper {
width: 100%;
background: #ff8f85;
border-top: 5px solid #858080;
border-bottom: 5px solid #858080;
}
#bt-footer {
width:920px;
clear:both;
margin:0 auto;
padding: 25px 0 25px 0;
line-height: 1.6em;
}
.footerbox{
width: 280px;
padding: 10px 0;
color: #262626;
}
.footerbok p {
color: #262626;
}
.footerbox a {
color: #000;
}
.footerbox a:hover {
color: #FFF;
text-decoration: none;
}
.footerbox h2 {
background-color:#00b3b3  ;
width: 280px;
float:center;
padding-left: 20px;
font-weight: bold;
margin-top: -10px;
margin-bottom: 13px;
color: #ff8f85;
text-transform: uppercase;
font-size: 22px;
font-family: Oswald;
}
.footerbox ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.footerbox li {
margin:0;
padding-top:0;
padding-right:5px;
padding-left: 5px;
padding-bottom:.25em;
line-height:2em;
border-bottom: 1px solid #000;
}
#footerbox1 {
margin-right:38px;
float: left;
}
#footerbox2 {
margin-right:38px;
float: left;
}
#footerbox3 {
float: left;
}
#credit-wrapper{
width: 100%;
margin: 0 auto;
background: #00b3b3;
height: 20px;
padding: 10px 0;
border-top: 5px solid #858080;
}
#credit {
width: 940px;
margin: 0 auto;
color: #000;
text-align: center;
font-size: 12px;
}
#credit a {
color: #FCFCFC;
}
.clear {
clear: both;
}
/*-- FIM Footer    Não retire créditos por favor --*/

Agora vamos ao html procure por este código:

Agora acima deles coloque meu código:

<div id='footer-wrapper'>
<div id='bt-footer'>
      <b:section class='footerbox' id='footerbox1'>
        <b:widget id='Label11' locked='false' title='Labels' type='Label'>
          <b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
    <b:if cond='data:display == &quot;list&quot;'>
      <ul>
      <b:loop values='data:labels' var='label'>
        <li>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </li>
      </b:loop>
      </ul>
    <b:else/>
      <b:loop values='data:labels' var='label'>
        <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </span>
      </b:loop>
    </b:if>
    <b:include name='quickedit'/>
  </div>
</b:includable>
        </b:widget>
      </b:section>
   <b:section class='footerbox' id='footerbox2'>
     <b:widget id='Label22' locked='false' title='Labels' type='Label'>
       <b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
    <b:if cond='data:display == &quot;list&quot;'>
      <ul>
      <b:loop values='data:labels' var='label'>
        <li>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </li>
      </b:loop>
      </ul>
    <b:else/>
      <b:loop values='data:labels' var='label'>
        <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </span>
      </b:loop>
    </b:if>
    <b:include name='quickedit'/>
  </div>
</b:includable>
     </b:widget>
   </b:section>
   <b:section class='footerbox' id='footerbox3'>
     <b:widget id='Label44' locked='false' title='Labels' type='Label'>
       <b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
    <b:if cond='data:display == &quot;list&quot;'>
      <ul>
      <b:loop values='data:labels' var='label'>
        <li>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </li>
      </b:loop>
      </ul>
    <b:else/>
      <b:loop values='data:labels' var='label'>
        <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </span>
      </b:loop>
    </b:if>
    <b:include name='quickedit'/>
  </div>
</b:includable>
     </b:widget>
   </b:section>
<div style='clear:both'/>
</div>
<!-- Por favor não retire créditos pode personalizar mas não retire créditos
http://best-tuga.blogspot.pt/-->
<div id='credit-wrapper'>
<div id='credit'><a expr:href='data:blog.homepageUrl'><data:blog.title/></a> &#169; 2014 - Desenvolvido por: <a alt='cartita' href='http://best-tuga.blogspot.pt/' title='best-tuga'>best-tuga</a>- <a alt='best-tuga' href='http://www.pg-ins.com' title='best-tuga'>best-tuga</a> </div>
</div>
 
</div>
</div>

Salve e veja como ficou coloque seus gadgets .
Nota : ao guardar modelo ele pode estar dar erro por causa id gadgets que vão foter é só vc trocar id nd mais.Foi ésta a partilha que trouxe espero ter sido útil ,duvidas disponha ,até mais...

Leia +

Colocar colunas e créditos blog

► 0

► creditos footer

► Cartita