Botão Amei!

CÓDIGO DA FONTE ESPECIAL:
(colar abaixo de <head>)

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>


CÓDIGO CSS
(colar acima de ]]></b:skin>)

i.fa.fa-heart{
color:#FF1493;
font-size:21px;
padding:1px;
}
.reactions-label{
float: center !important;
margin-left: 23em;
}
.reactions-iframe {
float: center !important;
text-decoration: none;
margin-left: -1em;
margin-top: 0.1em;
}

CÓDIGO JAVASCRIPT
(colar abaixo de <div class='post-footer-line post-footer-line-1'> ou substituir caso o código já exista em seu blog)

<span class='reaction-buttons'>
      <b:if cond='data:top.showReactions'>
        <table border='0' cellpadding='0' cellspacing='0' width='100%'>
          <tr>
            <td class='reactions-label-cell' nowrap='nowrap' valign='top' width='1%'>
              <span class='reactions-label'><i class='fa fa-heart'/></span>&#160;
            </td>
            <td>
              <iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/>
            </td>
          </tr>
        </table>
      </b:if>
      </span>

Postagens mais vistas com efeitos giratório

CÓDIGO CSS
(colar acima de ]]></b:skin>)

#PopularPosts1{
max-width:300px
}
#PopularPosts1 dd{
float:left;
border-bottom:none;
margin:8px 8px 0 8px;
background:none;
display:block;
padding:0
}
#PopularPosts1 img{
-webkit-transition:all 0.5s ease;
-moz-transition:all 0.5s ease;
transition:all 0.5s ease;
padding:4px;
background: #FF3E96;
background: -webkit-gradient(linear, left top, left bottom, from(#FF3E96), color-stop(0.5, #FF3E96), c#4F94CDolor-stop(0.5, #FF3E96), to(#aaa));
background: -moz-linear-gradient(top, #ffffff, #ddd 50%, #FF3E96 50%, #ffffff);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);
-moz-box-shadow: 0 0 3px rgba(0,0,0,.7);
box-shadow: 0 0 3px rgba(0,0,0,.7);
}
#PopularPosts1 img:hover{
-moz-transform: scale(1.2) rotate(-350deg);
-webkit-transform: scale(1.2) rotate(-350deg);
-o-transform: scale(1.2) rotate(-350deg);
-ms-transform: scale(1.2) rotate(-350deg);
transform: scale(1.2) rotate(-350deg);
-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
}

Comentários recentes com foto

<style scoped='' type="text/css">
ul.recentscomments{
list-style:none;
margin:0;
padding:0;
}
.recentscomments li{
display:block;
clear:both;
overflow:hidden;
list-style:none;
border-bottom:0px solid #e3e3e3;
word-break:break-all;
padding:5px 0;
margin:0;
}
.recentscomments li .avatarImage{
float:left;
margin-right:10px;
position:relative;
overflow:hidden;
border-radius: 50px;
-moz-box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);
-webkit-box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);
box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);
}
.recentscomments li img{
position:relative;
overflow:hidden;
display:block;
width:45px;
height:45px;
}
.recentscomments li a{
font-weight:300;
}
.recentscomments li span{
margin-top:2px;
color:#666;
display:block;
font-size:13px;
line-height:1.8;
}
</style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments
function recentscomments(a){var e;e='<ul class="recentscomments">';for(var t=0;numComments>t;t++){var r,o,n,i;if(t==a.feed.entry.length)break;e+="<li>";for(var d=a.feed.entry[t],s=0;s<d.link.length;s++)"alternate"==d.link[s].rel&&(r=d.link[s].href);for(var l=0;l<d.author.length;l++)o=d.author[l].name.$t,n=d.author[l].gd$image.src;n=-1!=n.indexOf("/s1600/")?n.replace("/s1600/","/s"+avatarSize+"-c/"):-1!=n.indexOf("/s220/")?n.replace("/s220/","/s"+avatarSize+"-c/"):-1!=n.indexOf("/s512-c/")&&0!=n.indexOf("http:")?"http:"+n.replace("/s512-c/","/s"+avatarSize+"-c/"):-1!=n.indexOf("blogblog.com/img/b16-rounded.gif")?"http://1.bp.blogspot.com/-7bkcAKdpGXI/UrbyQRqvSKI/AAAAAAAAFmI/oBv_yMeYnMQ/s"+avatarSize+"/blogger.png":-1!=n.indexOf("blogblog.com/img/openid16-rounded.gif")?"http://2.bp.blogspot.com/-VgnInuIUKBU/UrbzyXTYWRI/AAAAAAAAFmU/3f_Vfj3TI6A/s"+avatarSize+"/openid.png":-1!=n.indexOf("blogblog.com/img/blank.gif")?-1!=defaultAvatar.indexOf("gravatar.com")?defaultAvatar+"&s="+avatarSize:defaultAvatar:n,1==showAvatar&&(i=1==roundAvatar?"avatarRound":"",e+='<div class="avatarImage '+i+'"><img class="'+i+'" src="'+n+'" alt="'+o+'" width="'+avatarSize+'" height="'+avatarSize+'"/></div>'),e+='<a href="'+r+'">'+o+"</a>";var A=d.content.$t,v=A.replace(/(<([^>]+)>)/gi,"");""!=v&&v.length>characters?(v=v.substring(0,characters),v+="&hellip;",1==showMorelink&&(v+='<a href="'+r+'">'+moreLinktext+"</a>")):v=v,e+="<span>"+v+"</span>",e+="</li>"}e+="</ul>";var c="";0==hideCredits&&(c="display:block;"),e+="",document.write(e)}var numComments=15,showAvatar=!0,avatarSize=45,roundAvatar=!0,characters=40,showMorelink=!1,defaultAvatar="http://2.bp.blogspot.com/-XjxrXKBPQqs/VYcGtLWPGUI/AAAAAAAAKaQ/5jr871JIwds/s1600/default-avatar.jpg",hideCredits=!0,numComments=numComments||5,avatarSize=avatarSize||60,characters=characters||50,defaultAvatar=defaultAvatar||"https://1.bp.blogspot.com/-aVzMHL-8_OA/WYzRzZY4QWI/AAAAAAABZJA/EGxRuZpEPhkCE0FgFcRgthu55a35lhaJgCLcBGAs/s1600/blogger_icon-icons.com_53598.png",moreLinktext=moreLinktext||" More &raquo;",showAvatar="undefined"==typeof showAvatar?!0:showAvatar,showMorelink="undefined"==typeof showMorelink?!1:showMorelink,roundAvatar="undefined"==typeof roundAvatar?!0:roundAvatar,hideCredits="undefined"==typeof hideCredits?!1:roundAvatar;
//]]>
</script>
<script type="text/javascript" src="/feeds/comments/default?alt=json&amp;callback=recentscomments&amp;max-results=10"></script>

Código para dividir área do post em colunas

<div style="margin: 0 auto; text-align: center; width: 100%;">
<div style="float: left; margin: 0px 15px 0px 15px; text-align: justify; width: 30%;">
TEXTO COLUNA 1</div>
<div style="float: left; margin: 0px 15px 0px 0px; text-align: justify; width: 30%;">
TEXTO COLUNA 2</div>
<div style="float: left; margin: 0px 0px 0px 0px; text-align: justify; width: 30%;">
TEXTO COLUNA 3</div>
<div style="clear: both;">
</div>
</div>



Código do menu Colors

<center><div id="colormenu">
<span class="aba1"><a href="#">Início</a></span>
<span class="aba2"><a href="#">Quem somos</a></span>
<span class="aba3"><a href="#">Tutoriais</a></span>
<span class="aba4"><a href="#">Receitas</a></span>
<span class="aba5"><a href="#">Vídeos</a></span>
<span class="aba6"><a href="#">Fanpage</a></span>
<span class="aba7"><a href="#">Anuncie</a></span>
<span class="aba8"><a href="#">Contato</a></span>
</div>
<style type="text/css">
#colormenu {
margin: 5px;
padding: 5px
}

#colormenu a {
font-family: Arial, Helvetica, sans-serif;
padding: 6px 20px 9px 20px;
font-size: 14px;
color: #000;
text-decoration: none;
font-weight: bold;
text-transform: uppercase;
}

#colormenu .aba1 a, #colormenu .aba2 a, #colormenu .aba3 a, #colormenu .aba4 a, #colormenu .aba5 a #colormenu .aba6 a, #colormenu .aba7 a, #colormenu .aba8 a{
-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out
}

#colormenu .aba1 a {
border-top: 6px solid #326abd;
}

#colormenu .aba2 a {
border-top: 6px solid #b8462c;
}

#colormenu .aba3 a {
border-top: 6px solid #66CDCC;
}

#colormenu .aba4 a {
border-top: 6px solid #e6ab07;
}

#colormenu .aba5 a {
border-top: 6px solid #F944A5;
}

#colormenu .aba6 a {
border-top: 6px solid #2b9435;
}

#colormenu .aba7 a {
border-top: 6px solid #7D409D;
}

#colormenu .aba8 a {
border-top: 6px solid #F944A5;
}

#colormenu .aba1 a:hover {
color: #FFF;
background-color: #326abd;
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px;
border-bottom-left-radius: 9px;
-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
border-bottom-right-radius: 9px;
-moz-border-radius-bottomleft: 9px;
-moz-border-radius-bottomright: 9px;
}

#colormenu .aba2 a:hover {
color: #FFF;
background-color: #b8462c;
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px;
border-bottom-left-radius: 9px;
-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
border-bottom-right-radius: 9px;
-moz-border-radius-bottomleft: 9px;
-moz-border-radius-bottomright: 9px;
}

#colormenu .aba3 a:hover {
color: #FFF;
background-color: #66CDCC;
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px;
border-bottom-left-radius: 9px;
-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
border-bottom-right-radius: 9px;
-moz-border-radius-bottomleft: 9px;
-moz-border-radius-bottomright: 9px;
}

#colormenu .aba4 a:hover {
color: #FFF;
background-color: #e6ab07;
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px;
border-bottom-left-radius: 9px;
-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
border-bottom-right-radius: 9px;
-moz-border-radius-bottomleft: 9px;
-moz-border-radius-bottomright: 9px;
}

#colormenu .aba5 a:hover {
color: #FFF;
background-color: #F944A5;
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px;
border-bottom-left-radius: 9px;
-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
border-bottom-right-radius: 9px;
-moz-border-radius-bottomleft: 9px;
-moz-border-radius-bottomright: 9px;
}

#colormenu .aba6 a:hover {
color: #FFF;
background-color: #2b9435;
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px;
border-bottom-left-radius: 9px;
-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
border-bottom-right-radius: 9px;
-moz-border-radius-bottomleft: 9px;
-moz-border-radius-bottomright: 9px;
}

#colormenu .aba7 a:hover {
color: #FFF;
background-color: #7D409D;
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px;
border-bottom-left-radius: 9px;
-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
border-bottom-right-radius: 9px;
-moz-border-radius-bottomleft: 9px;
-moz-border-radius-bottomright: 9px;
}

#colormenu .aba8 a:hover {
color: #FFF;
background-color: #F944A5;
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px;
border-bottom-left-radius: 9px;
-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
border-bottom-right-radius: 9px;
-moz-border-radius-bottomleft: 9px;
-moz-border-radius-bottomright: 9px;
}

</style></center>

Código para links externos

<script type="text/javascript">
//<![CDATA[
// | Open New Tab
function externalLinks() {
  for(var c = document.getElementsByTagName("a"), a = 0;a < c.length;a++) {
    var b = c[a];
    b.getAttribute("href") && b.hostname !== location.hostname && (b.target = "_blank")
  }
}
;
externalLinks();
//]]>
</script>


Home Sobre mim Tutoriais Loja de templates Portfólio Fanpage