Templates e Acessórios

Postagens Recentes

8 de nov. de 2013

Widget de últimas postagens no blog estilo ss de jornalismoit

Eu já havia postado essa dica de colocar um menu com as últimas notícias do blog, mas volto a coloca-la pois sei que vão me pedir, além do mais, este código o script ficará hospedado no próprio blog.

Vá até o "Modelo de seu blog", clique em "Editar HTML"

Hack para o template do Blogger, implementado em abril de 2013.

Clique no botão "Editar modelo" e depois nas teclas Ctrl e F. Ao abrir a janela, procure pelo seguinte trecho.

Procure por ]]></b:skin>

Abaixo dele, cole o próximo código:

Agora procure por: <div class='content-inner'>

Abaixo dele cole:

<div style='clear:both;'/>
<div class='headline-wrapper'>
<div class='headline'>
<div style='float:left; background:#F7550D; padding:4px 18px 3px 20px; font-size: 14px; font-family: Oswald, sans-serif; color:#fff; overflow: hidden;'>
Ultimas
</div>
<div class='headline-left'>
<marquee behavior='scroll' bgcolor='' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='4'>
<script>
document.write("<script src=\"/feeds/posts/default?max-results="+numposts5+"&orderby=published&alt=json-in-script&callback=showrecentposts4\"><\/script>");
</script></marquee>
</div> </div> </div>
<div style='clear:both;'/>

Salve !

Agora vamos dar o estlio

Implementar CSS

No modelo de seu blog", clique em "Personalizar"

Ao abrir essa janela, vá em Avançado -------> Adicionar CSS

Copie o código abaixo e cole no local indicado.

/* Headline
---------------------------------*/
.headline-wrapper{
background: #442108;
width:100%;
height: 35px;
color:#fff;
margin: -30px 0 30px 0; /*Mude os números para subir os descer o menu de postagens aqui */
}
.headline{
width: 1000px;
line-height: 1.8em;
text-align: left;
font-family: 'Arial', sans-serif;
font-weight: normal;
color: #151515;
text-transform: none;
overflow: hidden;
clear: both;
margin: 0 auto;
padding: 10px auto
}
.headline a{
color: #fff;
font-size: 13px;
font-weight: normal;
text-decoration: none;
margin-left: 20px
}
.headline a:hover{
color: #000;
text-decoration: none
}
.headline-left{
float:left;
width:88%;
padding:2px 0;
position:relative;
overflow:hidden;
}

Depois, clique em "Aplicar ao blog", no canto direito de seu monitor, na parte superior para salvar.

»»Leia mais...

17 de out. de 2013

Posts relacionados com efeito hover

. Elke di Barros | 15:16 Nenhum comentário:

DEMO

Mais um modelo de posts relacionados para deixar seu blog mais, digamos, navegável. Para instala-lo, siga as dicas abaixo

Vá até o "Modelo de seu blog", clique em "Editar HTML"

Hack para o template do Blogger, implementado em abril de 2013.

Agora vamos procurar por

Agora que encontrou, clique na seta ao lado do código.

Pronto. Veja, o código de seu template está todo dividido em partes. Mas para encontrar o código que queremos você precisará abrir a seguinte parte:

<b:includable id='post' var='post'>...</b:includable>

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
.related-post .post-thumbnail {
z-index: 1;
position: relative;
width: 98px;
height: 98px;
display: block;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 1px solid #bbb;
}
#related-posts h3 {
background: #fff;
padding: 5px 10px 5px 10px;
border-radius: 5px;
border: 1px solid #ddd;
font-family: 'Segoe UI Light', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
font-weight: 200;
font-size: 17pt;
letter-spacing: 0.01em;
color: #000;
margin-bottom: 7px;
width: 565px;}
.related-post:hover {filter: saturate(1.0);
-webkit-filter: saturate(1.0);
-moz-filter: saturate(1.0);
-o-filter: saturate(1.0);
-ms-filter: saturate(1.0);}
.related-post {
float: left;
position: relative;
width: 105px;
height: 105px;
margin: 0 15px 15px 0;
background: #F6F6F6;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
filter: saturate(0.0);
-webkit-filter: saturate(0.0);
-moz-filter: saturate(0.0);
-o-filter: saturate(0.0);
-ms-filter: saturate(0.0);
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
}
.related-post .related-post-title {
display: none;
float: left;
background: #cc0000;
color: #fff;
text-shadow: none;
font-weight: normal;
padding: 5px;
position: absolute;
top: -39px;
left: -45px;
z-index: 99999999;
width: 185px;
-webkit-box-shadow: 0 0 2px #444;
-moz-box-shadow: 0 0 2px #444;
box-shadow: 0 0 2px #444;
font-size: 13px;
border-radius: 5px;
text-align: center;
overflow:hidden;
}
.related-post:hover .related-post-title {display: block;}

</style>
<div id='related-posts'>
<script type='text/javascript'>//<![CDATA[
var ry='<h3>Leia também</h3>';rn='<h3>   No related post available</h3>';rcomment='comments';rdisable='disable comments';commentYN='no';
var dw='';titles=new Array();titlesNum=0;urls=new Array();timeR=new Array();thumb=new Array();commentsNum=new Array();comments=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if('thr$total' in d){commentsNum[titlesNum]=d.thr$total.$t+' '+rcomment}else{commentsNum[titlesNum]=rdisable};if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;timeR[titlesNum]=d.published.$t;if('media$thumbnail' in d){thumb[titlesNum]=d.media$thumbnail.url}else{thumb[titlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAA2zstTyXP5luHz17tCE3qN9t1MCXUhiT8LH4M6fU159r0n1-pecAHepGNd_w6OdbE-Y0JOpLKFGp9V_0Sc-78DWsodBX3yGqxX8vab6QPKHP0esbvve27X1Ht0wJc-Mc9iqajxaQaTMZ/s0/logo.jpg'};titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);c=new Array(0);e=new Array(0);f=new Array(0);g=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=timeR[a];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}}urls=b;titles=c;timeR=e;thumb=f;commentsNum=g}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){var y=a.indexOf('?m=0');if(y!=-1){a=a.replace(/\?m=0/g,'')}for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);timeR.splice(b,1);thumb.splice(b,1);commentsNum.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;if(titles.length==0){dw+=rn}else{dw+=ry;dw+='<div class="clear"/></div><ul>';while(b<titles.length&&b<20&&b<maxresults){if(y!=-1){urls[c]=urls[c]+'?m=0'}if(commentYN=='yes'){comments[c]=' - '+commentsNum[c]}else{comments[c]=''};dw+='<div class="related-post"><div class="related-post-title">'+titles[c]+'</div><a href="'+urls[c]+'" rel="nofollow"><img border="0" class="post-thumbnail" alt="'+titles[c]+'" src="'+thumb[c]+'"/></a></div></div>';if(c<titles.length-1){c++}else{c=0}b++}dw+='</ul>'};urls.splice(0,urls.length);titles.splice(0,titles.length);document.getElementById('related-posts').innerHTML=dw};
//]]></script>
<b:loop values='data:post.labels' var='label'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels"' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>var maxresults=5;removeRelatedDuplicates();printRelatedLabels('<data:post.url/>');</script>
</div>
<div class='clear'/>

</b:if>

»»Leia mais...

9 de out. de 2013

Mini postagens com efeito hover

. Elke di Barros | 22:25 5 comentários:

DEMO

Estou deixando pra vocês essa dica para deixar a área de postagem do Blogger mais sofisticada na página inicial. Consegui este hack destrinchando um template que baixei na rede. Não sei se deve ou se pode fazer isso, mas enfim, sabem, como fiz pra mim, me sinto na obrigação de ensinar para vocês e sei que estão doidinhos pra saber.

A primeira coisa a fazer é ir em configuração e fazer algumas modificações

Siga o exemplo:

Em formato de data, selecione a 1° opção.

Em formato de data e hora, selecione a 4° opção.

Em formato de data e hora do comentário, selecione a 3° opção.

Salve e vamos dar início a segunda parte.

Vá até o "Modelo de seu blog", clique em "Editar HTML"

Hack para o template do Blogger, implementado em abril de 2013.

Procure por:

.date-header span {
background-color: $(date.header.background.color);
color: $(date.header.color);
padding: $(date.header.padding);
letter-spacing: $(date.header.letterspacing);
margin: $(date.header.margin);
}

Substitua por:

.date-header span {
display:none;
}

Procure por </head>

Acima dele cole este próximo código.

Agora vamos procurar por

Agora que encontrou, clique na seta ao lado do código.

Pronto. Procure pela seguinte parte:

<b:includable id='post' var='post'>...</b:includable>

Substitua por:

<b:includable id='post' var='post'>
<b:if cond='data:blog.pageType == "static_page"'>

<div class='pagepost'>
<div class='title'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h2>
<b:if cond='data:post.link'>
<a expr:href='data:post.link' expr:title='"Link para " + data:post.title' rel='bookmark'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url' expr:title='"Link para " + data:post.title' rel='bookmark'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
</b:if>
</div>
<div class='cover'>
<p><data:post.body/></p>
<div style='clear: both;'/> 
</div>
</div>
<b:else/>

<b:if cond='data:blog.pageType != "item"'>
<div class='post hentry'>
<div class='postright'>
<div class='arrow'/>
<div class='cover'>
<div class='date'>
<a expr:href='data:post.url' expr:title='"Abrir link " + data:post.title' rel='bookmark'>
<script type='text/javascript'>
var timestamp = "<data:post.timestamp/>";
if (timestamp != '') {
var timesplit = timestamp.split(",");
var date_yyyy = timesplit[2];
var timesplit = timesplit[1].split(" ");
var date_dd = timesplit[2];
var date_mmm = timesplit[1].substring(0, 3);
}
</script>
<span class='day'><script type='text/javascript'>document.write(date_dd);</script></span>
<p class='bulan'><script type='text/javascript'>document.write(date_mmm);</script></p>
<p class='tahun'><script type='text/javascript'>document.write(date_yyyy);</script></p></a>
</div>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h2>
<b:if cond='data:post.link'>
<a expr:href='data:post.link' expr:title='"Link para " + data:post.title' rel='bookmark'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url' expr:title='"Post: " + data:post.title' rel='bookmark'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
</b:if>

<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<div style='clear: both;'/> 
<div class='jomore'>
<div class='jomorelink'><a class='anes' expr:href='data:post.url'>Leia mais</a></div>
<b:if cond='data:post.allowComments'><a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' expr:title='"Comentar em: " + data:post.title'>
<b:if cond='data:post.numComments == 0'>0 Comentários<b:else/><b:if cond='data:post.numComments == 1'> 1 Comentário<b:else/><data:post.numComments/> Comentários</b:if></b:if></a></b:if>
<div class='categ'><b:if cond='data:post.labels'>Tag: <b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url + "?&max-results=3"' expr:title='"Tags relacionadas : " + data:label.name' rel='tag'><data:label.name/></a>, <b:if cond='data:label.isLast != "true"'/>
</b:loop></b:if></div>

</div>

</div>

</div>
</div>
</b:if>

<b:if cond='data:blog.pageType == "item"'>

<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumb'><ul>
<li><a expr:href='data:blog.homepageUrl' rel='tag'>Início</a> »</li><li>
<b:if cond='data:post.labels'>
<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 != "true"'>,</b:if>
</b:loop>
»
</b:if></li><li>
<data:post.title/></li></ul>
</div>
</b:if>

<div class='title'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h2>
<b:if cond='data:post.link'>
<a expr:href='data:post.link' expr:title='"Link para " + data:post.title' rel='bookmark'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url' expr:title='"Link para " + data:post.title' rel='bookmark'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
</b:if>
</div>

<div class='data'>
<b:if cond='data:top.showAuthor'>
<span class='author'>Postado por : <data:post.author/></span>
</b:if>
<b:if cond='data:post.dateHeader'>
<span class='clock'><data:post.dateHeader/></span>
</b:if>
</div>
<div class='pagepost'>
<div class='cover'>
<p><data:post.body/></p>
<div style='clear: both;'/> 
</div>
<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>

<span class='post-icons'>

<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>


<b:include data='post' name='postQuickEdit'/>
</span> </div>

</div>
</div>
</b:if>
</b:if>
</b:includable>

Implementar CSS

No modelo de seu blog", clique em "Personalizar"

Ao abrir essa janela, vá em Avançado -------> Adicionar CSS

Copie o código abaixo e cole no local indicado.

/*Breadcrumb ---------------------------------------*/
.breadcrumb {
list-style: none;
overflow: hidden;
text-align: left;
color: #222;
width: 650px;
font-size: 12px;
height: 40px;
z-index: 9;}
.section {margin:auto;}
.breadcrumb ul{margin:auto;}
.breadcrumb li {
position: relative;
display: block;
color: black;
float: left;
text-decoration: none;
font-weight: 300;
font-size: 10pt;
letter-spacing: 0.02em;
padding: 10px 10px;}
.home-link {
display:none;}
#blog-pager-newer-link {
float: right;
color: white;
padding: 10px;
text-align: center;
overflow: hidden;}

/*Abaixo código dos posts ---------------------------------------------------*/
.postim{
background:#000;
padding:10px;
margin-top:10px;}
.pagepost a{color:#2B5797;text-decoration:underline;}
.pagepost a:hover {color:#2B5795;}
.widget {margin: auto;}
.cover {margin:0 0;overflow:hidden;}

/*Titulo postagem -----------------------------------------*/
h2#blog-desc {
padding: 3px;
text-align: left;
font-family: 'Segoe UI Light', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
font-weight: 200;
font-size: 20pt;
margin-left:10px;
letter-spacing: 0.01em;
color: #000000;
margin-left: 30px;}
.title h2{
text-decoration: none;
padding: 10px;
margin-bottom: 15px;
line-height: 30px;
text-align: left;
font-weight: normal;
margin: auto;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
font-family: 'Segoe UI Light', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
font-weight: 200;
font-size: 20pt;
letter-spacing: 0.01em;
color: #fff;}
.title h2 a:link, .title h2 a:visited{
color:#000;text-decoration: none;}
h2.pagetitle{
font-size:14px;
padding:10px 0px;
font-weight:normal;
margin-right:10px;
color:#6F6753;
text-align:right;
text-shadow: 0px 1px 1px black;}
.item-title a {font-size:20pt;
padding-bottom: .2em;}
#main2 .widget-content, #main3 .widget-content, #main4 .widget-content, #main5 .widget-content, #main6 .widget-content {
overflow: hidden;
color: #222;
padding: 20px;
padding-bottom:10px;
background: #fafafa;
font-family: 'Segoe UI Semilight', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
font-weight: 300;
font-size: 10pt;
letter-spacing: 0.02em;
line-height: 20px;
border: 1px solid #ddd;
box-shadow: 0 8px 10px rgba(221, 221, 221, 0.5);}
h3.openpost:hover {cursor:pointer;}
#main3 h2:hover {cursor:pointer;}
#main2 h2, #main3 h2, #main4 h2, #main5 h2, #main6 h2 {
border: 1px solid #ddd;
text-align: left;
margin: auto;
padding: 5px 5px;
padding-left: 15px;
background: #77C2A7;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
font-weight: normal;
font-size: 13pt;
letter-spacing: 0.01em;
color: #fff;
border-bottom: 0px;}
#main2 ul li a:link, #main2 ul li a:visited, #main3 ul li a:link, #main3 ul li a:visited, #main4 ul li a:link, #main4 ul li a:visited, #main5 ul li a:link, #main5 ul li a:visited, #main6 ul li a:link, #main6 ul li a:visited {-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
font-weight: 200;
font-size: 10pt;
letter-spacing: 0.01em;
line-height: 24pt;
font-smooth: always;
color: ##8AA6B4;}
#main2 ul li, #main3 ul li, #main4 ul li, #main5 ul li,#main6 ul li {border-bottom: 1px solid #DDD;}
#main2 ul li a:hover, #main3 ul li a:hover, #main4 ul li a:hover, #main5 ul li a:hover, #main6 ul li a:hover {color:#2D89EF;-webkit-transition: all 0.1s ease-in-out;-moz-transition: all 0.1s ease-in-out;}

.crop {
width: 298px;/*Imagens*/
height: 168px;
position: relative;
overflow: hidden;
-moz-transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
float: left;
border: 1px solid #eee;}
.blognames {margin:auto;}
.pagepost a {text-decoration: underline;}
.pagepost img{
max-width:550px;
padding: 3px;
border: 1px solid #DDD;
-webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
height:auto;}
.bigcom {width: 234px;text-align: center;}
.posted {
width: 300px;
border-right: 1px solid #ddd;
text-align: center;}
.tombolbacktotop a{color:#8AA6B4;}
.tombolbacktotop {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
position: absolute;
font-size: 25px;
border: 1px solid #ddd;
border-radius: 50px;
width: 30px;
height: 30px;
padding-right: 0px;
padding-bottom: 8px;
padding-left: 6px;
margin: auto;
margin-top: -20px;
background: #000;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
color: #8AA6B4;}
.topwrap {width: 100%;
position: relative;
height: 20px;
text-align: center;}
.profile-name-link {
background: no-repeat left top;
display: inline;
min-height: 20px;
padding-left: 20px;}

/*Menu de navegação ------------------------------------*/
#blog-pager-older-link {
float: left;
padding:5px;
text-align: center;
overflow: hidden;}
#blog-pager-older-link a:hover {margin-left:20px;}
#blog-pager-newer-link a:hover {margin-right:20px;}
#blog-pager-older-link a, #blog-pager-newer-link a {
color: #fafafa;
line-height: 33px;
padding: 4px 25px 4px 25px;
background: #cc0000;
border: 1px solid #6AB790;
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
border-radius: 5px;}
#blog-pager {
color: #DDD;
text-align: center;
text-transform: capitalize;
font-size: 16px;
float: left;
font-weight: normal;
letter-spacing: -1px;
font-family: 'Open Sans', sans-serif;
overflow: hidden;
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
width: 625px;
border: 1px solid #ddd;
border-radius: 5px;}

/*Data-------------------------------------------*/
.date {
-moz-transition: all 0.9s ease-in-out;
-webkit-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
text-decoration: none;
color: #222;
padding: 5px;
opacity:0;
text-align: center;
position: absolute;
line-height: 30px;
font-weight: normal;
font-size: 11px;
z-index: 12;
top: 43px;
left: 0px;}
.date a:visited {color:#fff;}
.date a:hover {color:#FFF;-moz-transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;}
.date a {color:#222;
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.5s ease-in-out;}
.day, p.tahun, p.bulan {-moz-transition: all 0.9s ease-in-out;
-webkit-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;}
.day {
clear: both;
font-size: 20px;
display: block;
padding: 7px;
line-height: 30px;
text-align: center;
background: #000;
border-radius: 50px;
left: 80px;
position: absolute;
top: 5px;
width: 30px;
height: 30px;
border: 1px solid #ddd;}
p.bulan {
padding-top: 15px;
clear: both;
font-size: 15px;
display: block;
padding: 7px;
line-height: 30px;
text-align: center;
background: #eee;/*bot mês */
border-radius: 50px;
left: 80px;
position: absolute;
top: 57px;
width: 30px;
height: 30px;
border: 1px solid #ddd;}
p.tahun {
line-height: 30px;
clear: both;
font-size: 14px;
display: block;
padding: 7px;
line-height: 30px;
text-align: center;
background: #eee;/*ano*/
border-radius: 50px;
left: 80px;
position: absolute;
top: 110px;
width: 33px;
height: 33px;
border: 1px solid #ddd;
}

/*Titulo posts----------------------------------------*/
.post h2{
text-align: left;
color: #666;
padding: 5px 5px 5px 15px;
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
background: #ccc;
font-weight: normal;
font-size: 12pt;
letter-spacing: -1px;
line-height: 25px;
height: 25px;
width: 278px;
overflow: hidden;
border: 1px solid #ddd;
text-shadow: 1px 1px 0px #fff;
z-index: 10;}
.post h2 a:link,.post h2 a:visited{
color:#000;}
h3.post-title, .comments h4 {
text-align: left;
padding: 5px 5px 5px 15px;
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
background: #fafafa;
font-weight: normal;
font-size: 12pt;
letter-spacing: -1px;
line-height: 25px;
height: 25px;
width: 238px;
overflow: hidden;
border: 1px solid #ddd;
text-shadow: 1px 1px 0px #fff;
z-index: 10;}

/*Leia mais ---------------------------------------------*/
.jomore {
font-size: 11px;
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
font-weight: normal;
width: 600px;
height: 170px;
position: absolute;
opacity:0;
top:10px;}

.jomorelink{
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
z-index: 24;
text-align: center;
height: 25px;
border: 1px solid #ddd;
width: 90px;
font-family: arial;
background: #fff;/*Cor botão leia mais */
padding: 2px;
line-height: 25px;
border-radius: 5px;
position: absolute;
top: 0px;
left: 193px;}
.jomorelink a:hover{color:#ffffff;}
.jomorelink:hover, a.comment-link:hover{background:#cc0000;color:#000000;}

/*Post----------------------------------------------------*/
.post {
margin: 0 0 $(post.margin.bottom) 0;}
.post-body {
font-size: 110%;
line-height: 1.4;
position: relative;}
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: $(image.border.small.size);
background: $(image.background.color);
border: 1px solid $(image.border.color);
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);}
.post-body img, .post-body .tr-caption-container {
padding: $(image.border.large.size);}
.post-body .tr-caption-container {
color: $(image.text.color);}
.post-body .tr-caption-container img {
padding: 0;
background: transparent;
border: none;
-moz-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
-webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
box-shadow: 0 0 0 rgba(0, 0, 0, .1);}
.post-header {
margin: 0 0 1.5em;
line-height: 1.6;
font-size: 90%;}
.post-footer {
margin: 20px -2px 0;
padding: 5px 10px;
color: $(post.footer.text.color);
background-color: $(post.footer.background.color);
border-bottom: 1px solid $(post.footer.border.color);
line-height: 1.6;
font-size: 90%;}

/*Data------------------------------------------------*/
.date {
-moz-transition: all 0.9s ease-in-out;
-webkit-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
text-decoration: none;
color: #222;
padding: 5px;
opacity:0;
text-align: center;
position: absolute;
line-height: 30px;
font-weight: normal;
font-size: 11px;
z-index: 12;
top: 43px;
left: 0px;}
.date a:visited {color:#222;}
.date a:hover {color:#000;-moz-transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;}
.date a {color:#222;
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.5s ease-in-out;}
.day, p.tahun, p.bulan {-moz-transition: all 0.9s ease-in-out;
-webkit-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;}
.day {
clear: both;
font-size: 20px;
display: block;
padding: 7px;
line-height: 30px;
text-align: center;
background: #fafafa;
border-radius: 50px;
left: 80px;
position: absolute;
top: 5px;
width: 30px;
height: 30px;
border: 1px solid #ddd;
}

/*Data hover------------------------------------------*/
.day:hover, .tahun:hover, .bulan:hover {border:1px solid #6AB790;
line-height: 36px;
background:#cc0000;
color:#fafafa;
width: 35px;
height: 35px;
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;}

.arrow{
position:absolute;
top:50px;
left:-10px;
height:30px;
width:10px;
}

.data{
padding: 3px;
font-size: 15px;
font-family: 'Segoe UI Light', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
font-weight: 200;
letter-spacing: 0.01em;
color: #fff;
border-top: 1px solid #ddd;
}
.author,.clock{
padding: 3px 20px;
margin: 0px 0px 0px -10px;
font-size: 17px;
color: #000;
}
a {
color: #222;
text-decoration: none;
}
a:visited {
color: #000;
}
a:hover, a:active {
color: #000;
text-decoration:none;
}

.post:hover .date {opacity:1;
}
.post:hover .day {
left: 10px;-moz-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.post:hover p.bulan{
left: -20px;-moz-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.post:hover p.tahun{
left: 10px;-moz-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}

.postmeta, .postinfo{
background:#F5ECC1;
padding:3px 10px;
border:1px solid #DFD5A7;
font-size:10px;
text-transform:uppercase;
}
.post {
background: #fafafa;
display: inline;position:relative;
width: 300px;
box-shadow: -5px 8px 10px rgba(221, 221, 221, 0.5);
margin-bottom: 50px;
margin-right: 25px;
float: left;}

.postright{
position: relative;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_RBsHWs75MyI0geqqCGVMyw93lMSdzK9O5dbBPuh4XobqJ-QfLws5BSgQ7x6zDfTbd12c_XAzzjGmo8VuLAllQifTvCM2YhFnJ0OqNZG68IkRTbNQLiAQqZnajBdq4UISCEHNFPdU1ec4/s1600/Image49.png') no-repeat center center;
min-height: 205px;
}
.postright img{-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;}
.post:hover .post h2 {background:77C2A7;color:#fafafa;}
.post:hover .categ {top: 196px;}
.post:hover a.comment-link {top:155px;}
.post:hover .jomorelink {top:155px;}

.pagepost{
width: 610px;
float: left;
padding: 20px;
line-height: 1.8;
margin-bottom: 25px;
font-weight: 300;
font-size: 11pt;
letter-spacing: 0.02em;
}
.posting {
padding: 10px;
width: 198px;/*Area da postagem ao passar mouse*/
text-align: justify;
font-family: 'Segoe UI Semilight', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
font-weight: 300;
font-size: 10pt;
letter-spacing: 0.02em;
line-height: 25px;
position: absolute;
border-right: 1px solid #ddd;
left: 80px;
height: 149px;
background: #fafafa;
border-left: 1px solid #ddd;
opacity: 0;
z-index: 1;
top: 37px;
-moz-transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}

/*Post hover ----------------------------------------------*/

.posting:hover {opacity:1;-moz-transition: all 1s ease;
-webkit-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.post:hover .posting {opacity:1
}
.post:hover .crop{
margin-left: -50px;filter: saturate(0.0);
-webkit-filter: saturate(0.0);
-moz-filter: saturate(0.0);
-o-filter: saturate(0.0);
-ms-filter: saturate(0.0);}
.post:hover .jomore {opacity:1;
}

/*Area footer post pequeno---------------------------------------*/
.categ {
box-shadow: -5px 8px 10px rgba(221, 221, 221, 0.5);
padding-left: 5px;
border-right: 1px solid #ddd;
width: 286px;
overflow: hidden;
background: #fafafa;
padding: 6px;
border: 1px solid #ddd;
position: absolute;
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
top: 196px;
}
.categ a:link,.categ a:visited {
text-decoration:none;
padding: 3px;
}

/*Area comentário-----------------------------------------*/

.comments .comments-content {
margin-bottom: 16px;}
.comments .comment-block {
margin-left: 75px;
position: relative;
border: 1px solid #DDD;
background: white;
padding: 10px;
border-radius: 5px;
min-height: 83px;
}
.comments .comments-content .user {
font-style: normal;
font-weight: 200;
font-size: 14pt;
letter-spacing: 0.01em;
color: #000;
}
.comments {
clear: both;
background: #FAFAFA;
padding: 30px;
}
.comments .comments-content .datetime {
float: right;
margin-right: 10px;
font-style: normal;
font-weight: 200;
font-size: 10pt;
letter-spacing: 0.01em;
color: #fff;
margin-top: 4px;
}

a.comment-link {
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
z-index: 2;
text-align: center;
height: 25px;
background: #fafafa;
line-height: 25px;
border-radius: 5px;
font-size: 11px;
color: #000;
font-family: 'Open Sans', sans-serif;
width: 90px;
overflow: hidden;
padding: 2px;
border: 1px solid #ddd;
position: absolute;
top: 0px;
left: 90px;
}

a.comment-link:hover{background:#cc0000;color:#ffffff;}
.comments .comments-content {
margin-bottom: 16px;
}
.comments .comment-block {
margin-left: 75px;
position: relative;
border: 1px solid #DDD;
background: white;
padding: 10px;
border-radius: 5px;
min-height: 83px;
}
.comments .comments-content .comment-header, .comments .comments-content .comment-content {
margin: 0 10px 10px;
}
#commentsbox {
margin:0;
width: 585px;
padding: 20px;
}
h3#comments{
font-size30px;
font-family: 'Open Sans', sans-serif;
color:#ffffff;
font-weight:normal;
padding:10px 10px ;
background:#D3D4CE;
margin-top:10px;
}
ol.commentlist {
margin:0px 0 0;
clear:both;
overflow:hidden;
list-style:none;
}
ol.commentlist li {
margin:0px 0;
line-height:18px;
padding:10px;
background:#78786D;
}
ol.commentlist li .comment-author {
color:#ffffff;
}
.comment-body {
margin: auto;
-webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.5);
-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.5);
box-shadow: 0 1px 4px rgba(0,0,0,0.5);
padding: 5px;
}
ol.commentlist li .comment-author a:link,ol.commentlist li .comment-author a:visited{
color:#ffffff;
font-weight:bold;
text-decoration:none !important;font-size:15px;font-family: 'Open Sans', sans-serif;}
}
ol.commentlist li .comment-author .fn {
color:#000;
}
ol.commentlist li .comment-author .avatar{
float:right;
background:#fff;
padding:3px;
}
.comments .comments-content .comment-content {
text-align: justify;
border-bottom: 1px solid #DDD;
padding-top: 10px;
font-style: normal;
font-size: 11pt;
letter-spacing: 0.01em;
color: #000;
}
.comments .comment .comment-actions a {
padding: 5px;
font-size: 13px;
font-family: 'Open Sans', sans-serif;
text-align: center;
color: #fafafa;
margin: 5px;
background: #77C2A7;
position: relative;
text-shadow: 1px 1px 1px #362c30;
border-radius: 5px/15px;
}
.comments .comments-content .comment-replies {
margin-left: 65px;
margin-top: 1em;
}

.comments .avatar-image-container img {
max-width: 50px;
}

.comments .comments-content .inline-thread {
padding: .5em 0em;
}
.comments h4{
background: #fff;
padding: 10px;
border-radius: 5px;
border: 1px solid #ddd;
font-family: 'Segoe UI Light', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
font-weight: 200;
font-size: 15pt;
letter-spacing: 0.01em;
color: #000;}
.comments .continue a {
padding: 5px;
font-size: 13px;
text-decoration: none;
text-align: center;
color: #222;
margin-left: 75px;
background: white;
border: 1px solid #DDD;
border-radius: 5px;
}
a.comment-link {
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
z-index: 2;
text-align: center;
height: 25px;
background: #fafafa;
line-height: 25px;
border-radius: 5px;
font-size: 11px;
color: #000;
font-family: 'Open Sans', sans-serif;
width: 90px;
overflow: hidden;
padding: 2px;
border: 1px solid #ddd;
position: absolute;
top: 0px;
left: 90px;
}

Depois, clique em "Aplicar ao blog", no canto direito de seu monitor, na parte superior para salvar.

Agora é hora de ajustar a largura do blog.

»»Leia mais...

8 de out. de 2013

Botões de compartilhamento ao pé do post

. Elke di Barros | 14:48 Um comentário:

DEMO

Mais um modelo de botão social para que seus leitores espalhem por aí, sem dó nem piedade suas postagens. É assim mesmo, com todo mundo dando aquela compartilhada que os posts se espalham, seu blog vai ficando mais conhecido e assim sendo melhor indexado pelos motores de busca.

Vá até o "Modelo de seu blog", clique em "Editar HTML"

Hack para o template do Blogger, implementado em abril de 2013.

Agora vamos procurar por

Agora que encontrou, clique na seta ao lado do código.

Procure por:

<div class='post-footer-line post-footer-line-1'>

Abaixo dele, cole o próximo código e depois salve.

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#mintshare_mini, #mintshare_mini ul {padding:0; margin:0; list-style:none; width:100px; font-family:arial, sans-serif; background:#fff;}
#mintshare_mini {width:100px; height:35px;padding: 0 15px;
margin-top: 30px;
margin-bottom: 20px;}
#mintshare_mini a.sharetext {
display:block; width:110px; height:30px; text-align:center; line-height:35px; color:#000; text-decoration:none; font-size:13px; font-weight:bold;
background:#fff;
padding-left:5px;
cursor:pointer;}
#mintshare_mini a.sharetext img {
border: 0 none;
display: block;
margin-left: 10px;}
#mintshare_mini .flyout {
background: none repeat scroll 0 0 #AAAAAA;
height: 113px;
left: 40px;
position: relative;
top: -4px;
width: 0;
transition: width 1s ease-in-out;
-o-transition: width 1s ease-in-out;
-moz-transition: width 1s ease-in-out;
-webkit-transition: width 1s ease-in-out;}
#mintshare_mini .flyout ul {
background:#fff;
list-style:none;
position:absolute;
top:-27px;
width:420px;
height:35px;
border-left:0;
left:50px;
padding-right:10px;
z-index: 1;
overflow: hidden;
padding-left: 15px;
transition: 1s ease-in-out;
-o-transition: 1s ease-in-out;
-moz-transition: 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;}
#mintshare_mini .flyout ul li {float: left;}
#mintshare_mini .flyout ul li a{}
#mintshare_mini .flyout ul a img {}
#mintshare_mini .flyout ul li.drop-li {position:relative; width:35px; height:30px; float:left; z-index:100; margin-top: -2px;padding-left: 15px;}
#mintshare_mini .flyout ul li.drop-li a.drop-a {display:block; width:100px; float:left; text-decoration:none; line-height:16px;}
#mintshare_mini .flyout ul li.drop-li a.drop-a img {display:block; border:0; position:absolute; left:5px; top:5px; z-index:-1; opacity:1; filter: alpha(opacity=100);
transition: 0.4s ease-in-out;
-o-transition: 0.4s ease-in-out;
-moz-transition: 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;}
#mintshare_mini .flyout ul li.drop-li a b {background:lightBlue; padding:2px 0; font-family:arial, sans-serif; display:block; width:100px; margin-top:58px; text-align:center; cursor:pointer; color:#000; font-size:14px; opacity:0; filter: alpha(opacity=0);
transition: 0.4s ease-in-out;
-o-transition: 0.4s ease-in-out;
-moz-transition: 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
-o-border-radius:10px;}
#mintshare_mini .flyout ul li.drop-li:hover > a img {opacity:0.5; filter: alpha(opacity=50);}
#mintshare_mini .flyout ul li.drop-li:hover > a b {opacity:1; filter: alpha(opacity=100);}
#mintshare_mini .flyout ul li.drop-li a:hover img {filter: alpha(opacity=50);}
#mintshare_mini .flyout ul li.drop-li a:hover b {filter: alpha(opacity=100);}
#mintshare_mini .get_mintshare {
font-size: 10px;
margin-left: 5px;
position: relative;
top: 2px;}
.relbg h5{
color: #fafafa;
font-weight: normal;}
</style>


<div id='mintshare_mini'>
<a class='sharetext'><b>Compartilhe-me</b></a>

<div class='flyout'>
<ul class='icons'>
<li class='drop-li'><a class='drop-a' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc-il0py6hcXIU4k8feSTsvGsvIvla1H_kTgIkAwTu5e2MPaLDUg5CIXad1Q1rjNNvE0yFeN5mKOOSxU5x2Zx_ShvQgs6p10xdAT0-A-uEr9jhqX92Hd03WE-V82R3DtLvuaKMqJscA3NX/s0/facebook_small.png'/></a></li>
<li class='drop-li'><a class='drop-a' expr:href='"http://twitter.com/share?url=" + data:post.url + "&title=" + data:post.title'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEF4bO5_FQWnYI3eug59BuELcQp3uJbNxxgxGHwYSqh0d9OZbYrVwsPSJSpIuu1Cqlt_l3dWOqo7wT455iwi3eR_jgJqCG_E10B37Jeo3gqBKOpORjk5MxXCVcTvNIDbSBo9_l7SO_5We4/s0/twitter_small.png'/></a></li>
<li class='drop-li'><a class='drop-a' expr:href='"http://www.stumbleupon.com/refer.php?url=" + data:post.url + "&title=" + data:post.title'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4yBMC8bcW0DsA66BUp7askSDUmbOpJNqGxyE4Ji5QH2oQQKrSIsFIFlPMpnPGEskNsyrTCmQ6BdQpFRAtOcLtwqNj6N0fYM9nSIdc8z-tjBI57Ivc8xN-99BzpMvOlYR5_r-2utQJ0XK_/s0/stumbleupon_small.png'/></a></li>
<li class='drop-li'><a class='drop-a' expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBxsfXB93vcEDCmLlmZozUQM6fzecLLMvksVEe4Y62uUkqu2TzT9nRomqfPbNkad9zYqZDhPFzhJQizj-g19KcA1yka3nF0JZHyYacrqQnUzfDkfmUdjT3CTV_sVeDycDMa4pMZ1Qs5x3G/s0/digg_small.png'/></a></li>
<li class='drop-li'><a class='drop-a' expr:href='"http://www.technorati.com/faves?add=" + data:post.url'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT6GHE6s9BrIIMVBUjRl-NH902-LWVFeSKAjEcF3k_pHVkTYAuwie8ZJx9dvF-HQUco4o7QNhSBTO95M-0xHaC2Qgx_ddxQWVJDyWJaI3b0UHzhjx7oohs9oj8pO9_CY1wxHR5VpDAjo1h/s0/technorati_small.png'/></a></li>
<li class='drop-li'><a class='drop-a' expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1X0hyphenhyphenD0_o1cW9fvUbGJsz4ZhI6wtKbCuQH6VpOELUJAhS89KcY6Ic73NnvJnPp_ChPbqDGgCmLfATUEGyKuDEkvGb3myk5mOVfdd5ZknsqJzBpqfeQp-rKHze3r_rGWss0QpfQoGKqrHN/s0/reddit_small.png'/></a></li>
<li class='drop-li'><a class='drop-a' expr:href='"http://myweb2.search.yahoo.com/myresults/bookmarklet?t=" + data:post.url + "&title=" + data:post.title'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-AlfXIVTW2vyhGM_Y8byK8zdZMsWnQx6qaz6GbMVUZuqeSPtRyoW9dtTUCSFQ_Sn3nRBeY6lrw9MrIpj9B-QiTWfCQrWQdh3cPdkGbst1Fe4PNSc6Om_XCKentQfC5hdIXumptRRHPPCy/s0/yahoo_small.png'/></a></li>
<li class='drop-li'><a class='drop-a' expr:href='"http://delicious.com/post?url=" + data:post.url + "&title=" + data:post.title'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjClaId54uQ3qgV1aoXDHEQLU_7i9VfLqv6wqVi7pIfoJ-QlGarV6xxurWajP_omnmgqTS_03TwGduVLmwBRQW5qAlw8SKhymiot7IJgOFzGOPwr8ntvMQ4tDeUR5KvOEU8cWvpSLNQ4TvT/s0/delicious_small.png'/></a></li>
</ul>
</div>
</div>
</b:if>

»»Leia mais...

3 de out. de 2013

Imagem de fundo no scroller

. Elke di Barros | 15:30 Um comentário:

DEMO

Deixar o blog mais organizado, mais bonito, mais simétrico, mais personalizado. Quem não gosta ? Quem não quer ? Mais uma diquinha, scroller, a barra de rolagem do Blogger, com imagem de fundo. Fácinho de implementar e pode fazer aquela diferença no layout do blog.

Implementar CSS

No modelo de seu blog", clique em "Personalizar"

Ao abrir essa janela, vá em Avançado -------> Adicionar CSS

Copie o código abaixo e cole no local indicado.

/*Scroller ------------------------------------*/

::-webkit-scrollbar-thumb:vertical {
background: #B7D3D3;
height:50px;
border: 2px solid #fff;
box-shadow: 2px 2px 4px #808080;
-moz-box-shadow: 2px 2px 4px #808080;
-webkit-box-shadow: 2px 2px 4px #808080;
-khtml-box-shadow: 2px 2px 4px #808080;
-moz-border-radius: 10px; /* Para Firefox */
-webkit-border-radius: 10px; /*Para Safari e Chrome */
border-radius: 10px; /* Para Opera 10.5+*/
}
::-webkit-scrollbar-thumb:horizontal {
background-color: #B7D3D3; height:10px;
border: 1px dashed #fff;
-webkit-box-shadow:0 0 1em #eee; }
::-webkit-scrollbar {height:10px; width:20px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO3DGuuotAMF6QAXXZJPmUn-tXSXobfGa7d046WAquCCy7SGps8uzOcm5I6AkGj1I7SRaO1IgDjJgoad0OmEvPIth08T0n9zrW-4eomSQa2j_bptwlIUASjqYMHYLaeuqPGfPeU7ZwgAlo/s1600/paisley-sweetheart-free-cute-twitter-background-404x288.jpg) repeat;
box-shadow: -3px -2px 10px #808080;
-moz-box-shadow: -3px -2px 10px #808080;
-webkit-box-shadow: -3px -2px 10px #808080;
-khtml-box-shadow: -3px -2px 10px #808080;}

Depois, clique em "Aplicar ao blog", no canto direito de seu monitor, na parte superior para salvar.

Se quiser trocar a imagem de fundo, basta trocar o código em amarelo e para trocar a cor do botão, troque o código na cor verde.

»»Leia mais...

2 de out. de 2013

Efeito hover no widget postagens populares

. Elke di Barros | 11:52 Nenhum comentário:

DEMO

É sempre bom poder aumentar o tempo de permanência dos leitores em seu blog, por isso, há widgets tão importantes como é o caso do widget dos posts populares. Que tal então dar a ele maior visibilidade como coloca-lo abaixo do cabeçalho e dar a ele um visual moderno ? Siga a tutorial que é bem facinho. Claro, será necessário ter o widget em seu blog e depois, arrasta-lo para baixo do cabeçalho.

Implementar CSS

No modelo de seu blog", clique em "Personalizar"

Ao abrir essa janela, vá em Avançado -------> Adicionar CSS

Copie o código abaixo e cole no local indicado.

/*Popular post ------------------------------------------------*/

.PopularPost ul {list-style: none;}
.PopularPosts img{padding:0px;border-radius: 5px;-webkit-filter: saturate(0.0);
-moz-filter: saturate(0.0);-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;display: inline-block;
transition: all 0.2s ease-in-out;border: 0px;
box-shadow: 0px 0px 10px #222;}
.PopularPosts img:hover {-webkit-filter: saturate(1.1);
-moz-filter: saturate(1.1);}
#PopularPosts1 ul li:hover .item-title{opacity:1;top:-23px;width: 100%;padding: 6px;}
.PopularPosts .item-title {
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
padding-bottom: .2em;
position: absolute;
font-size: 12px;
width: 0px;
background: #ddd;
padding: 0px;
top: -25px;
opacity: 0;
left: 0px;
border-bottom: 1px solid #222;
border-top: 1px solid #222;
font-family: 'Playfair Display SC', serif;
text-align: center;
overflow:hidden;
}
.PopularPosts .item-thumbnail {
float: left;
margin: 15px 5px 25px 0;
height: 72px;
padding: 5px;
}

#PopularPosts1 ul li {padding: 0px;
border: 0px solid #ddd;
float: left;
margin: 2px;
height: 71px;
width: 71px;
margin-left: 37px;}

#PopularPosts1 h2:before {
content: "";
position: absolute;
bottom: 14px;
left: -9px;
border-width: 21px 8px 0px 0px;
border-style: solid;
border-color: transparent #000;
display: block;
width: 0;
}

#PopularPosts1 h2{
position: absolute;
top: -22px;
left: 20px;
background: #ddd;
padding: 5px 15px 5px 15px;
font-size: 18px;
font-weight: normal;
border: 1px solid #666;
box-shadow: inset 0 0px 1px rgba(0, 0, 0, 0.8), 0 7px 14px #222;
border-radius: 0px 0px 5px 5px;
font-family: 'Playfair Display SC', serif;
text-shadow: 1px 1px 1px #bbb;
color: #222;
letter-spacing: -1px;}

Depois, clique em "Aplicar ao blog", no canto direito de seu monitor, na parte superior para salvar.

»»Leia mais...

30 de set. de 2013

Menu com submenus usando CSS no Blogger

. Elke di Barros | 22:40 Um comentário:

DEMO

Um menu bem facinho de instalar e que pode fazer a diferença se você tem muitos links para disponibilizar a seus visitantes. Instale-o diretamente no HTML/Javascript.