Série Fazendo meu layout- adicionar e personalizar elementos de página

VARIÁVEIS DOS ELEMENTOS DE PÁGINA
(colar acima de <Variable name="keycolor" description)

<Group description="Fonte da caixa de pesquisa" selector=".pesquisa">
     <Variable name="search.font" description="Font" type="font"
         default="normal bold 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 12px Open Sans"/>
     <Variable name="search.text.color" description="Text Color" type="color" default="$(body.text.color)" value="#ffffff"/>
     <Variable name="search.selected.text.color" description="Selected Color" type="color" default="$(search.text.color)" value="#000000"/>
   </Group>
<Group description="Caixa de pesquisa " selector=".search ">
     <Variable name="search.background.color" description="Background Color" type="color" default="#141414" value="#000000"/>
     <Variable name="search.selected.background.color" description="Selected Color" type="color" default="#444444" value="#ffe699"/>
     <Variable name="search.border.color" description="Border Color" type="color" default="$(widget.border.color)" value="#ffffff"/>
   </Group>
<Group description="Voltar ao topo " selector=".search ">
     <Variable name="topo.background.color" description="Background Color" type="color" default="#141414" value="#000000"/>
     <Variable name="topo.selected.background.color" description="Selected Color" type="color" default="#444444" value="#ffe699"/>
     <Variable name="topo.border.color" description="Border Color" type="color" default="$(widget.border.color)" value="#ffffff"/>
<Variable name="topo.font" description="Font" type="font"
         default="normal bold 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 12px Open Sans"/>
     <Variable name="topo.text.color" description="Text Color" type="color" default="$(body.text.color)" value="#ffffff"/>
     <Variable name="topo.selected.text.color" description="Topo Selected Color" type="color" default="$(search.text.color)" value="#000000"/>
   </Group>
<Group description="Fontes Seguir por email" selector=".tabs-inner .widget li a">
     <Variable name="seguir.font" description="Font" type="font"
         default="normal bold 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 14px Open Sans"/>
     <Variable name="seguir.text.color" description="Text Color" type="color" default="$(body.text.color)" value="#ffffff"/>
     <Variable name="seguir.selected.text.color" description="Selected Color" type="color" default="$(seguir.text.color)" value="#000000"/>
   </Group>

<Group description="Background Seguir por email" selector=".seguir ">
     <Variable name="seguir.background.color" description="Background Color" type="color" default="#141414" value="#111111"/>
     <Variable name="seguir.selected.background.color" description="Selected Color" type="color" default="#444444" value="#ffe699"/>
     <Variable name="seguir.border.color" description="Border Color" type="color" default="$(widget.border.color)" value="#ffffff"/>
   </Group>

<Group description="PopularPosts Backgrounds" selector="#PopularPosts1">
<Variable default="#fa4242" description="background color1" name="PopularPosts.background.color1" type="color" value="#ffffec"/>
<Variable default="#ee6107" description="background color2" name="PopularPosts.background.color2" type="color" value="#eeeffc"/>
<Variable default="#f0f" description="background color3" name="PopularPosts.background.color3" type="color" value="#ffffec"/>
<Variable default="#ff0" description="background color4" name="PopularPosts.background.color4" type="color" value="#eeeffc"/>
<Variable default="#0ff" description="background color5" name="PopularPosts.background.color5" type="color" value="#ffffec"/>
</Group>

<Group description="Créditos do rodapé" selector="">
<Variable name="fcredits.bg" description="Background" type="color" default="#f8f8f8" value="#ffffff"/>
<Variable name="fcredits.border" description="Top Border" type="color" default="#f8f8f8" value="#ffe699"/>
<Variable name="fcredits.color" description="Font Color" type="color" default="#000000" value="#000000"/>
<Variable name="fcredits.font" description="Font" type="font"
        default="normal normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 12px Open Sans"/>
<Variable name="fcredits.link.color" description="Links Color" type="color" default="#000000" value="#444444"/>
<Variable name="fcredits.link.color.hover" description="Links Color Hover" type="color" default="#000000" value="#ffd85d"/>
</Group>




CÓDIGO CSS DOS ELEMENTOS DE PÁGINA
(colar acima de ]]></b:skin>)


/* CRÉDITOS DO RODAPÉ */ 
#footer-wrapper{
background:$(fcredits.bg);
border-top: 5px solid $(fcredits.border);
font-size:12px;
color:$(fcredits.color);
text-align:center;
}
#footer-wrapper .site-footer,#footer-wrapper .site-credit{
position:relative;
max-width:100%;
background:$(fcredits.bg);
color:$(fcredits.color);
padding:20px 0 0;
text-align:center;
font: $(fcredits.font);
text-transform:none;
line-height:20px;
margin:auto}
#footer-wrapper .site-credit{padding:0 0 1px}
#footer-wrapper .site-footer a,#footer-wrapper .site-credit a{
color:$(fcredits.link.color);}
#footer-wrapper .site-footer a:hover,#footer-wrapper .site-credit a:hover{
color:$(fcredits.link.color.hover);
text-decoration:none;}

/* VOLTAR AO TOPO */
#backtotop{
overflow:hidden;
position:fixed;
z-index:90;
right:30px;
bottom:20px;
display:none;
width:42px;
height:40px;
line-height:24px;
padding-top:-15px;
color:$(topo.text.color);
text-align:center;
background:$(topo.background.color);
box-shadow: 0 3px 13px -5px #000;
font: 12px 'montserrat';
text-indent:0;
cursor:pointer;
-webkit-transform:translateZ(0);
padding:4px 0 0;
text-align:center;
border-radius:0px;
transition:all .5s}
#backtotop:hover {
background:$(topo.selected.background.color);
color:$(topo.selected.text.color);
text-decoration: none !important;}

/* PESQUISA
----------------------------------------------------*/
#search-box {
color: #000;
border: none;
cursor: pointer;
margin-left: 0;
padding: 0 0 0 10px;
width: 95%;
font-family: Open Sans; font-size: 11px;
}
input.gsc-input {
padding : 7px 5px;
border:1px solid #e7e7e7;
font: normal normal 12px 'Montserrat', sans-serif;;
}
input.gsc-search-button {
border: none;
background: $(search.background.color);
color:$(search.text.color);
padding : 10px 15px;
cursor: hand;
font: $(search.font);
text-transform:uppercase;
}
input.gsc-search-button:hover {
border: none;
background: $(search.selected.background.color);
color:$(search.selected.text.color);
padding : 10px 15px;
cursor: pointer;
font: $(search.font);
text-transform:uppercase;
}

/*SEGUIR POR EMAIL
----------------------------------------------------*/
.follow-by-email-inner td {display: block;width: 100%;}
.FollowByEmail .follow-by-email-inner .follow-by-email-address {font: normal normal 12px 'montserrat', sans-serif;
background: #ffffff;
border:1px solid #e7e7e7;
height:35px;
width: 100%;
line-height:35px;
text-indent: 10px;
color:#898989;
}
.FollowByEmail .follow-by-email-inner .follow-by-email-submit {
font: $(seguir.font);
height:35px;
width: 100%;
line-height:31px;
background: $(seguir.background.color);
color:$(seguir.text.color);
text-transform: none;
margin-left:0; margin: 10px auto 0 auto;display: block; }
.FollowByEmail .follow-by-email-inner .follow-by-email-submit:hover {
background:$(seguir.selected.background.color);
color:$(seguir.selected.text.color);
}
.FollowByEmail ::-webkit-input-placeholder {color:#898989;}
.FollowByEmail ::-moz-placeholder {color:#898989;}
.FollowByEmail :-ms-input-placeholder {color:#898989;}
.FollowByEmail input:-moz-placeholder {color:#898989;}

/* ARQUIVO PERSONALIZADO
----------------------------------------------------*/
select#BlogArchive1_ArchiveMenu {
width: 100%;margin-top: 0.7em;
padding: 5px 10px!important;
border: 1px solid #eee;
font:normal normal 12px 'Open Sans', sans-serif;;
font-size: 12px;
color: #999;
}
.widget li, .BlogArchive #ArchiveList ul.flat li {
list-style: none;
margin: 0;
padding: 0
}
.BlogArchive #ArchiveList ul.posts li {padding-bottom: 3px;}

/* POSTAGENS MAIS VISTAS  */
.sidebar .PopularPosts ul{padding:0;margin:0;list-style:none}
.sidebar .PopularPosts .item-thumbnail a{clip:auto;display:block;height:auto;overflow:hidden}
.sidebar .PopularPosts .item-thumbnail{width:120px;height:auto;margin:0 15px 0 0;position:relative;box-shadow:5px 0 0 #fff}
.sidebar .PopularPosts .item-thumbnail img{position:relative;height:auto;width:100%;padding:0}
.sidebar .PopularPosts ul li{margin-bottom:5px;max-height:120px;overflow:hidden}
.sidebar .PopularPosts ul li:first-child{background:$(PopularPosts.background.color1)}
.sidebar .PopularPosts ul li:first-child+li{background:$(PopularPosts.background.color2)}
.sidebar .PopularPosts ul li:first-child+li+li{background:$(PopularPosts.background.color3)}
.sidebar .PopularPosts ul li:first-child+li+li+li{background:$(PopularPosts.background.color4)}
.sidebar .PopularPosts ul li:first-child+li+li+li+li{background:$(PopularPosts.background.color5)}
.sidebar .PopularPosts .item-title{font-size:90%;font-weight:400;padding:10px 5px}
.sidebar .PopularPosts .item-title a{color:#222;text-decoration:none}
.sidebar .PopularPosts .item-snippet{font-size:80%;padding-right:5px}
.sidebar .PopularPosts .widget-content ul li{padding:0;border:0}

/* --------- BARRA DE ROLAGEM PERSONALIZADA ----------- */
/*** Rolagem da Vertical da Página ***/
::-webkit-scrollbar-thumb:vertical {
background: #f1f1f1; /*Cor da barrinha que se move*/
height:40px;
}
/*** Rolagem da Horizontal da Página***/
::-webkit-scrollbar-thumb:horizontal {
background: #f1f1f1; /*Cor da barrinha que se move*/
height:10px;
}
/*** Parte fixa da rolagem (fundo que não se move) ***/
::-webkit-scrollbar {
height:10px;
width:15px; /*Largura da barra de rolagem*/
background: #f9f9f9; /*Cor da parte fixa, que fica no fundo*/
}



CÓDIGOS DO BOTÃO VOLTAR AO TOPO, CRÉDITOS E AJUSTE DAS MINIATURAS DAS POSTAGENS MAIS VISTAS
(colar acima de </body>)

<script type='text/javascript'>
// Voltar ao topo
jQuery(document).ready(function(e){var t=e(&quot;#backtotop&quot;);e(window).scroll(function(){e(this).scrollTop()&gt;=500?t.show(10).animate({opacity:&quot;1&quot;},10):t.animate({opacity:&quot;0&quot;},10)});t.click(function(t){t.preventDefault();e(&quot;html,body&quot;).animate({scrollTop:0},400)})})
</script>
<a href='#' id='backtotop'><i aria-hidden='true' class='fa fa-chevron-up'/>Subir
</a>

<div id='footer-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPFooter'>
      <div class='site-footer'>
        Copyright &#169;
        <span id='current-year'/>
        <a expr:href='data:blog.homepageUrl' expr:title='data:blog.title'>
          <data:blog.title/>
        </a>
        Todos os direitos reservados
      </div>
      <div class='site-credit' id='site-credit'>
        Tema by
        <a href='https://www.elainegaspareto.com' rel='dofollow' target='_blank' title='Elaine Gaspareto'>
          Elaine Gaspareto
        </a>
      </div>
    </div>
    <div class='clear'/>

<script type='text/javascript'>
      // Ajuste das miniaturas Popular Posts
      $(document).ready(function() {$(&#39;.PopularPosts img&#39;).attr(&#39;src&#39;, function(i, src) {return src.replace( &#39;s72-c&#39;, &#39;s400&#39; );});});
                                      //<![CDATA[
                                      // Custom Popular Post
                                      $(".popular-posts ul li .item-snippet").each(function(){var t=$(this).text().substr(0,420),s=t.lastIndexOf(" ");s>10&&$(this).text(t.substr(0,s).replace(/[?,!\.-:;]*$/,"..."))});
                                    //]]>
    </script>
<script type='text/javascript'>
$(document).ready(function(){$(&quot;.item-thumbnail&quot;).find(&quot;img&quot;).attr(&#39;src&#39;, function(i, src) {return src.replace( &#39;w72-h72-p-nu&#39;, &#39;s500-c&#39; );})});
$(document).ready(function(){$(&quot;.item-thumbnail&quot;).find(&quot;img&quot;).attr(&#39;src&#39;, function(i, src) {return src.replace( &#39;w72-h72-p-k-no-nu&#39;, &#39;s500-c&#39; );})});
$(document).ready(function(){$(&quot;.mobile-index-thumbnail&quot;).find(&quot;img&quot;).attr(&#39;src&#39;, function(i, src) {return src.replace( &#39;s72-c&#39;, &#39;s1600&#39; );})});
</script>
<script type='text/javascript'>//<![CDATA[
$(document).ready(function(){
$('.post-body').find('img').each(function(n, image){
var image = $(image);
image.parent().css('margin-left',0).css('margin-right',0).css('margin-top',0).css('margin-bottom',0);
});
});
//]]></script>


CÓDIGO DOS MARCADORES

<b:widget id='Label2' locked='false' title='Marcadores' type='Label' version='1'>
    <b:widget-settings>
      <b:widget-setting name='sorting'>ALPHA</b:widget-setting>
      <b:widget-setting name='display'>LIST</b:widget-setting>
      <b:widget-setting name='selectedLabelsList'/>
      <b:widget-setting name='showType'>ALL</b:widget-setting>
      <b:widget-setting name='showFreqNumbers'>false</b:widget-setting>
    </b:widget-settings>
    <b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<select onchange='location=this.options[this.selectedIndex].value;' style='width:100%; padding: 5px 10px; border: 1px solid #eee;font: 12px open sans; color: #999;'>
<option>Selecione</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
(<data:label.count/>)
</option>
</b:loop>
</select>
<b:include name='quickedit'/>
</div>
</b:includable>
  </b:widget>


CÓDIGO PERFIL PERSONALIZADO
(colar como gadget HTML/JAVASCRIPT)

<style>
/* PERFIL
----------------------------------------------------*/
.profile-pic {
text-align: center;
font-size: 14px;
}
.profile-pic img {
width: 300px;
height: auto;
}
.profile-pic img:hover {opacity:0.7}
/* REDES SOCIAIS SIDEBAR
----------------------------------------------------*/
#socialmediaiconsside {
font-size: 25px;
margin: 0;
padding-right: 12px;
text-align: center;
position:relative;
margin-top: 0.8em;
margin-left: 0.8em;
}
#socialmediaiconsside a {
color: #ffffff;
background: #000;
display: inline-block;
line-height: 23px;
padding: 10px;
}
#socialmediaiconsside a:hover {
color: #f0587c;
background: #ffffff;
}
</style>

<div class="profile-pic"> 
<img src="https://1.bp.blogspot.com/-fUvRTctDAfM/XN1veqgdhJI/AAAAAAABlXg/B2t8A3lIa-sOTdyqyYwsHBKhL-56v4R7QCLcBGAs/s1600/perfil.jpg" border="0" alt="profile"/> 
<p align="center">É aqui que você escreve uma pequena biografia sobre você. Deixe seus leitores saberem quem você é, de onde você é e sobre o que seu blog fala.</p>   </div>


<center>
<div id="socialmediaiconsside">
<a href="YOUR FACEBOOK URL" target="_blank"><i class="fa fa-facebook"></i></a>
<a href="YOUR TWITTER URL" target="_blank"><i class="fa fa-twitter"></i></a>
<a href="YOUR PINTEREST URL" target=&#8221;_blank&#8221;><i class="fa fa-pinterest"></i></a>
<a href="YOUR INSTAGRAM URL" target="_blank"><i class="fa fa-instagram"></i></a>
<a href="YOUR YOUTUBE"><i class="fa fa-youtube"></i></a>
</div>
</center>



MEU CÓDIGO JÁ PERSONALIZADO DOS COMENTÁRIOS NUMERADOS


/*COMENTÁRIOS PERSONALIZADOS BY ELAINE GASPARETO (https://www.elainegaspareto.com)
----------------------------------------------- */
.comments {
clear: both;
margin-top: 10px;
margin-bottom: 0px;
line-height: 1em;
padding: 5px;
}
#comments a {
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
text-decoration: none;
}
.comments .comments-content {
font-size: 13px; /*TAMANHO DA FONTE DOS BOTÕES*/
background:#ffffff; /*COR DE FUNDO DA ÁREA DOS COMENTÁRIOS*/
margin-bottom: 16px;
margin-top: -8px;
margin-left: -10px;
padding-left: 1em;
zoom: 1.05;
background-size: 100px;
}
.comments .comment .comment-actions a {
background: #000000; /*COR DE FUNDO DOS BOTÕES RESPONDER/EXCLUIR*/
cursor: pointer;
color: #ffffff; /*COR DA FONTE DOS BOTÕES RESPONDER/EXCLUIR */
padding:  10px;
margin-right: -1px;
margin-left: 10px;
float: right;
margin-top: -13px;
}
.comments .comment .comment-actions a:hover {
text-decoration: none;
background: #ffe699; /*COR DE FUNDO DOS BOTÕES RESPONDER/EXCLUIR HOVER*/
color: #000; /*COR DA FONTE DOS BOTÕES RESPONDER/EXCLUIR*/
}
.comments .comments-content .comment-thread ol {
list-style-type: none;
padding: 0;
text-align: left;
}
.comments .comments-content .inline-thread {
padding: 0.5em 1em;
}
.comments .comments-content .comment-thread {
margin: 8px 0px;
}
.comments .comments-content .comment-thread:empty {
display: none;
}
.comments .comments-content .comment-replies {
margin-top: 1em;
margin-left: 36px;
}
.comments .comments-content .comment {
margin-bottom:16px;
padding-bottom:8px;
}
.comments .comments-content .comment:first-child {
padding-top:16px;
}
.comments .comments-content .comment:last-child {
border-bottom:0;
padding-bottom:0;
}
.comments .comments-content .comment-body {
position:relative;
}
.comments .comments-content .user {
font-style:normal;
font-weight:bold;
}
.comments .comments-content .icon.blog-author {
width: 25px;
height: 25px;
display: none;
margin: 0 0 -4px 6px;
}

.comments .comments-content .datetime {
margin-left:10px;
}
.comments .comments-content .comment-header,
.comments .comments-content .comment-content {
margin:px;
}
.comment-header {
background: #ffe699; /*COR DE FUNDO DO NOME DO AUTOR DO COMENTÁRIO*/
padding: 5px;
margin-left: -10px !important;
margin-top: -10px !important;
margin-right: -10px !important;
}
.comment-header a {
color: #000; /*COR DA FONTE DO NOME DO AUTOR DO COMENTÁRIO*/
font-family:'open sans', Arial;
font-size: 14px;
}
.comments .comments-content .comment-content {
margin-bottom: 15px;
font: 15px Arial;
line-height: 15px;
}
.comments .comments-content .owner-actions {
position:absolute;
right:0;
top:0;
}
.comments .comments-replybox {
border: none;
height: 250px;
width: 100%;
}
.comments .comment-replybox-single {
margin-top: 5px;
margin-left: 48px;
}
.comments .comment-replybox-thread {
margin-top: 5px;
}
.comments .comments-content .loadmore a {
display: block;
padding: 10px 16px;
text-align: center;
}
.comments .thread-toggle {
cursor: pointer;
display: inline-block;
}
.comments .continue {
cursor: pointer;
}
.comments .continue a {
display: block;
padding: 0.5em;
font-weight: bold;
}
.comments .comments-content .loadmore {
cursor: pointer;
max-height: 3em;
margin-top: 3em;
}
.comments .comments-content .loadmore.loaded {
max-height: 0px;
opacity: 0;
overflow: hidden;
}
.comments .thread-chrome.thread-collapsed {
display: none;
}
.comments .thread-toggle {
display: inline-block;
}
.comments .thread-toggle .thread-arrow {
display: inline-block;
height: 6px;
width: 7px;
overflow: visible;
margin: 0.3em;
padding-right: 4px;
}
.comments .thread-expanded .thread-arrow {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAABJRU5ErkJggg==") no-repeat scroll 0 0 transparent;
}
.comments .comments-content .datetime a{
font-size:10px; /* -- TAMANHO DA FONTE DA DATA DO COMENTÁRIO -- */
font-weight:normal;
text-decoration:none;
color:#666; /* -- COR DA FONTE DA DATA DO COMENTÁRIO -- */
}
.comments .avatar-image-container {
float: left;
width: auto;
max-height: 72px;
visibility: hidden;
opacity: 0;
left: 50px;
position: relative;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.comment:hover .avatar-image-container {
visibility: visible;
opacity: 1;
left: 0;
}
.comments .avatar-image-container img {
width: 50px;
background: #ffe699; /*COR DE FUNDO DO AVATAR DO AUTOR DO COMENTÁRIO*/
padding: 5px;
border: 1px solid #ffe699; /*COR DE BORDA DO AVATAR DO AUTOR DO COMENTÁRIO*/
}
.comments .comment-block {
background: none repeat scroll 0 0 #FFFFFF;
padding: 10px;
position: relative;
margin-left: 47px;
box-shadow: 5px 10px 20px #999;
}
/* COMENTÁRIOS NUMERADOS
------------------------------------------------- */
.comment-thread ol {
counter-reset: contarcomentarios;
}
.comment-thread li:before {
content: counter(contarcomentarios,decimal);
counter-increment: contarcomentarios;
float: right;
font-size: 20px; /* -- TAMANHO DA FONTE DO NÚMERO -- */
color: #000; /* -- COR DA FONTE DO NÚMERO -- */
padding:10px;
position:relative;
z-index:2;
margin-top: -2px; /* -- DISTANCIA DO NÚMEROEM RELAÇÃO AO TOPO -- */
}
.comment-thread ol ol {
counter-reset: contarbis;
}
.comment-thread li li:before {
content: counter(contarcomentarios,decimal) "." counter(contarbis,lower-latin);
counter-increment: contarbis;
float: right;
font-size: 18px;/* -- TAMANHO DA FONTE DO NÚMERO HOVER-- */
color:#666; /* -- COR DA FONTE DO NÚMERO HOVER -- */
padding:10px;
position:relative;
z-index:2;
}
/*FINAL DO CÓDIGO COMENTÁRIOS PERSONALIZADOS E NUMERADOS*/

Formulário de contato

Nome

E-mail *

Mensagem *