Modelos De Siderbar

Eai pessoal! Tô postando tarde porque tive de ir na Igreja e só voltei agora. Creio que como já é tarde muitros não irão ver a postagem, mas tudo bem. a introdução vai ser pequena, porque a minha mãe só deixou eu mexer 1 horinha só! :( Vim trazer esse post rápido e bem simples, com 2 modelos de side.
Modelo 1 | Modelo 2 |

Primeiro, você vai procurar por /* Widgets, você vai apagar tudo oque estiver escrito, e substituir por um desses modelos!

  • Modelo 1:

/* Widgets ----------------------------------------------- */
@font-face {font-family: 'benchnineregular';src: url('http://themes.googleusercontent.com/static/fonts/benchnine/v1/ah9xtUy9wLQ3qnWa2p-piXhCUOGz7vYGh680lGh-uXM.woff');}
@font-face {font-family: 'minecraft'; src: url('http://static.tumblr.com/aicgjw6/LuQmxosi6/minecraftia.ttf') format('truetype'); font-weight: normal; font-style: normal;}
.sidebar .widget {
background: #fff;
box-shadow: 2px 3px 0 #ededed;
color: #795f4b;
font-family: 'minecraft';
font-size: 8px;
padding-top: 5px;
padding-left: 9px;
padding-bottom: 9px;
padding-right:9px;
margin-bottom: -15px;
outline: dashed 1px #efefef; outline-offset: -5px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
.sidebar .widget h2{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigKJ3Tex_TjaVabfyLzjkIRtnQ8NTwc9VxzxT8sXTewJiCByvompSXPXQPOggSy4YM3Hccw-rGP3twit5RB_oWt63FpmmnWhTZ07bFXcarFLMggUXkVCOrBBgx5ifJZ4Jg5x2eu_JNI3E/s1600/143.png) no-repeat left;
margin-top:-2px;
margin-left:-26px;
margin-bottom:0px;
padding:15px;
width:151%;
overflow:hidden;
text-transform: uppercase;
font-size: 22px;
color: #fff;
text-shadow: 1px 1px 0px #5a556a;
font-family: 'benchnineregular';
font-style: normal;
font-weight: normal;
}

  •  Modelo 2:

/* Widgets ----------------------------------------------- */
.sidebar .widget {
box-shadow: inset 0 0 10px #eee, 0 0 2px #dbdbdb;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-topright: 20px;
border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
border-bottom-right-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-bottomleft: 20px;
border-bottom-right-radius: 20px;
width:100% !important;
background:#fff;  /** COR DO FUNDO DO GADGET **/
margin:33px 0 !important;
padding:10px;
border-top:2px solid #ebebeb;
border-right: 2px solid #ebebeb;
border-left: 2px solid #ffd6eb;
border-bottom: 2px solid #ebebeb;
}
.sidebar .widget h2 {
text-align: center;
box-shadow: inset 0 0 10px #eee, 0 0 2px #dbdbdb;
border-left:2px solid #ffd6eb;  /** COR DA BORDA DE CIMA **/;
border-top:2px solid #ebebeb;  /** COR DA BORDA DE CIMA **/;
border-right:2px solid #ebebeb;  /** COR DA BORDA DE CIMA **/;
background: #ebf9ff;  /** COR DO FUNDO DA ÁREA DO TITULO **/
text-shadow:0 1px #ccc/** SOMBRA DO TITULO **/;
color:#ff94c9/** COR DO TITULO **/;
font-size:15px /** TAMANHO DO TITULO **/;
margin-top:-35px /** MARGIN **/;
margin-left:-12px /** MARGIN **/;
margin-bottom:5px /** MARGIN **/;
padding:3px;
width:40%;
overflow:hidden
-webkit-border-top-right-radius: 20px;
-moz-border-radius-topright: 20px;
border-top-right-radius: 20px;
-webkit-border-top-left-radius: 20px;
-moz-border-radius-topleft: 20px;
border-top-left-radius: 20px;}
.sidebar .widget:first-child {
  margin-top: 0;
}
Os modelos são bem simples, mas tão aí! Bye! :*

Nenhum comentário:

Postar um comentário

Oie, pode comentar a vontade, mais antes siga as regras.

- Não é permitido usar palavras insultantes.
- De criticas construtivas!
- Aceito "segue de volta", mas comente sobre o post primeiro né!
- Tem vaga para afiliados é só pedir!
- Deixe o link do seu blog para eu retribuir a visita!!!
Bjs ♥

Algumas fofuras para você usar:
ッ ≧✯◡✯≦ ≧^◡^≦ :[ ✿◕ ‿ ◕✿ ➳♥ ❣ ☜♡☞❤ ❥ ❦ ❧ ♡ ✗ ✘ ⊗ ♒ Ω ♦ ♠ ♥ ♣ ♢ ♤ ♡ ♧ ✦ ✧ ♔ ♕ ♚ ♛ ★ ☆ ✮ ✯ ☄ ☾ ☽ ☼ ☀ ☁ ☂ ☃