Fazendo Um Layout Part 3 - Final + Aviso Para a Kaline

Kaline seu blog já esta pronto click Aqui para ver , espero que tenha gostado ♥ ficou bem simples :)

Que olho lindo ♥ rs'

Queria pedir desculpas por não ter postado ontem :), é que eu estava muito ocupada !.Tive que ajudar a minha mãe a fazer algumas coisas para o chá de bebê, e também acabei indo para a minha avó , e quando cheguei já era tarde e minha mãe não deixou e u ligar o computador :(

em fim desculpa viu pessoal :)

Agora vamos ao post :

Obs: Hoje não terá muitas imagens ok :)

Como já tinha dito iria ensinar nesse ultimo post a personalizar o resto do blog  !

lembrando que meu blog tinha ficado assim :

1° irei ensinar vocês a personalizarem o post vamos lá :

Separar uma postagem da outra 

quem tem o tema no modelo travel pode perceber, que as postagem são uma junta da outra

não é ? Então ensinarei vocês a separarem as postagens vamos lá :

Vá em seu HTML e procure por :

.main-inner .column-center-outer { 

Você irá encontrar algo como :

.main-inner .column-center-outer {   background: $(post.background.color) $(post.background.url) repeat scroll top left;   _background-image: none; }

Apague o código e substitua por :

 .post-outer {margin: 4px 2px 10px;background:#fff;padding: 20px 10px;} 

Obs: Não Modifique nada ! 

Ficará assim :

Visualize e se estiver tudo certo salve !
Por : Tutoriar


Sobra ao redor da área do post
eu acho muito fofo sombreado na área do post então se quiser fazer prossiga 

Vá em seu HTML

Design → Editar HTML → F3

procure por 

.main-inner .column-center-outer {

Se caso você fez o tuto de como separar os posts procure por
 .post-outer {

E abaixo da tag cole

box-shadow: 2px 2px 15px #747474,-3px -2px 10px #747474; -moz-box-shadow: 2px 2px 15px #747474,-3px -2px 10px #747474;-webkit-box-shadow: 2px 2px 15px #747474,-3px -2px 10px #747474; -khtml-box-shadow: 2px 2px 15px #747474,-3px -2px 10px #747474;  

Visualize e se estiver tudo certo Salve !

Por : Cherry Bomb 

2° Personalizando os gadgets 

Ribbons (faixinha) no titulo do gadget:

Design → Editar HTML  F3 procure por :

/* Mobile 

Antes de : body.mobile

Cole :

.sidebar .widget h2{background: url(LINK DA SUA FAIXINHA)  no-repeat left;margin-top:-2px;margin-left:-19px;margin-bottom:0px;padding:15px;width:150%;overflow:hidden;}

Aqui algumas faixinhas










Por : Kawaii World


Faixinha diferente no gadget:

Essa faixinha não é bem uma faixinha é praticamente a personalização toda do gadget assim

Vá em Design → Layout → Adicinar um gadget → Selecione HTML/JavaScript

e cole

<style>

/**PERSONALIZAÇÃO DA SIDEBAR**/

.sidebar .widget {

width:100% !important;

background:#fff;

margin:10px 0 !important;

border-top:10px #66CDAA solid;

border-radius:0 0 10px 10px;

padding:10px;

box-shadow: inset 0 0 20px #eee, 0 0 3px #ccc;

overflow:hidden

}

.sidebar .widget h2 {

font: normal normal 20px Indie Flower;

text-shadow: 0px 0px 1px #000;

color: #000;

text-align: center; /*Alinhamento do texto*/

margin-top:-10px /** MARGIN **/;

margin-left:-9px /** MARGIN **/;

margin-bottom:10px /** MARGIN **/;

padding:5px;

width:107%;

overflow:hidden

}

/** FIM DA SIDEBAR**/

</style>

Por : Brilho dos olhos

Entendendo

background:#fff; - Fundo do gadget

border-top:10px #66CDAA solid; - cor da risquinha que fica em sina do gadget (Se não quiser retire)

box-shadow: inset 0 0 20px #eee, 0 0 3px #ccc; - Sombra do gadget

text-shadow: 0px 0px 1px #000; - Sombra do texto 

color: #000; - Cor do titulo do gadget

Personalizando os Comentarios :

Vá no seu html  F3  e procure por :

Comments

Você irá encontrar algo como :

 Comments
----------------------------------------------- */
.comments .comments-content .icon.blog-author {
  background-repeat: no-repeat;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);
}
.comments .comments-content .loadmore a {
  border-top: 1px solid $(widget.alternate.text.color);
  border-bottom: 1px solid $(widget.alternate.text.color);
}
.comments .comment-thread.inline-thread {
  background-color: $(post.footer.background.color);
}
.comments .continue {
  border-top: 2px solid $(widget.alternate.text.color);
}

Substitua a tag por :

/* Comments----------------------------------------------- */.comments{clear:both;margin-top:10px;margin-bottom:0;line-height:18px;font-size:13px}.comments .comments-content{margin-bottom:16px;font-weight:normal;text-align:left}.comments .comment .comment-actions a,.comments .comment .continue a{display:inline-block;margin:0 0 10px 10px;padding:0 15px;color:#999 !important; /*--- cor da fonte do botão reply--- */text-align:center;text-decoration:none;background: #ccc;  /*--- cor de fundo do botão reply--- */background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) ); /*--- cor de fundo gradiente--- */background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );/*--- cor de fundo gradiente--- */border:1px solid #C0C0C0;  /*--- cor da borda do botão reply--- */border-radius:5px;-moz-border-radius:5px;height:26px;line-height:28px;font-weight:normal;cursor:pointer;}.comments .comment .comment-actions a:hover,.comments .comment .continue a:hover {text-decoration: none;background:#fff; /*--- cor de fundo do botão reply houver--- */border:1px solid #999; /*--- cor da borda do botão reply hover--- */}.comments .comments-content .comment-thread ol{list-style-type:none;padding:0;text-align:none}.comments .comments-content .inline-thread{padding:0}.comments .comments-content .comment-thread{margin:8px 0}.comments .comments-content .comment-thread:empty{display:none}.comment-replies{margin-top:1em;margin-left:40px;}.comments .comments-content .comment{margin-bottom:0;padding-bottom:0}.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:normal}.comments .comments-content .user a{font-weight:normal;text-decoration:none;}.comments .comments-content .icon.blog-author{background-repeat: no-repeat;  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);width:18px;height:18px;display:inline-block;margin:0 0 -4px 6px;float:right;}.comments .comments-content .datetime a{font-size:11px;text-decoration:none; color:#666; /* -- cor do link da data do comentário -- */}.comment-content{margin:0 0 8px;padding:0 5px;}.comments .comment-block{margin-left:65px;position:relative;background:#fff; /* -- cor de fundo do comentário -- */border:3px solid #C0C0C0; /* --- cor da borda do comentário ---*/border-radius:8px;-moz-border-radius:8px;}.comment-header{ /*--- linha onde fica o nome do autor do comentário --- */background-color:#f1f1f1;   /*--- cor de fundo--- */font-size:18px;border-bottom:1px solid #C0C0C0;  /*--- cor da borda --- */padding:5px;}.comment-header a{color: $(link.color); /*--- cor do link nome do autor do comentario --- */}.comments .comments-content .owner-actions{position:absolute;right:0;top:0}.comments .comments-replybox{border:none;height:230px;width:100%}.comments .comment-replybox-thread{margin-top:0}.comments .comment-replybox-single{margin-top:5px;margin-left:48px}.comments .comments-content .loadmore a{display:block;padding:10px 16px;text-align:center}.comments .thread-toggle{cursor:pointer;display:inline-block}.comments .comments-content .loadmore{cursor:pointer;max-height:3em;margin-top:0}.comments .comments-content .loadmore.loaded{max-height:0;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,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;}.comments .thread-collapsed .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent;}.avatar-image-container{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqp8t1359YjOvcSEbF6X-v1doG7UX_PzGmTvhL82x7l2-hWXK92pfOga4ZeW6sTjT0C-rBLy8FwoliVGtOBrsECFyruwEq_9nJwrIMsPih3Y93CyuDKCyrOOkCiqiLGQR9qO6JdxlNVMk/s1600/imagem-arrow.png) top right no-repeat; /*--- imagem arrow---*/float:leftvertical-align:middle;overflow:hidden;width:65px !important;height:51px !important;max-width:65px !important;max-height:51px !important}.comments .avatar-image-container img{padding:2px;border:1px solid #ccc;width:45px !important;height:45px !important;max-width:45px !important;max-height:45px !important;}

Faça as alterações e se estiver tudo certo Salve !

Menu Glitter :

Vá no seu HTML Ctrl F

Procure por :

]]></b:skin>

E acima da tag cole :

/* MENU GLITTER - BY EXPLODINDO GLITTER */glitter {
  width: 20%; /* largura do menu */
  margin: 3px; /* margem entre os links, não altere */
  padding: 3px; /* espaço entre os links e a margem, não altere */
  float: left; /* alinhamento do menu, não altere */
  background: #cor; /* cor de fundo */
box-shadow: inset 0 0 30px #cor, 0 0 4px #cor;  /* sombra interna */
  color:#cor; /* cor do link */
  font-family: Arial; /* tipo da fonte */
  font-size: 11px; /* tamanho da fonte */
  text-align: center; /* alinhamento centralizado do link */
  text-transform: uppercase; /* transformação do texto, pode mudar para capitalize */
  border-radius:5px; /* borda arredondada */
  -webkit-transition-duration: .90s; /* tempo de transição, não altere */
}
glitter:hover {
  background:#cor; /* cor do menu em hover */
box-shadow: inset 0 0 30px #cor, 0 0 4px #cor; /* sombra interna */
  color: #cor; /* cor do link em hover */
  border-radius:5px; /* borda arredonda em hover */
}

Faça as alterações e salve agora em Gadget HTML/JavaScript cole

 <a href="LINK DA PAGINA"><glitter>NOME DA PAGINA</glitter></a>

Por : Explodindo Glitter 

Por Hoje é isso espero que tenham aprendido com os tutos

Em Breve terá mais

Aqui esta o cabeçalho que eu fiz se quiserem :

Click para almentar