13 de mai de 2014

Como personalizar a sua sidebar


Yo Minna-san, tudo bem?

Bom, hoje vou ensinar um tutorial bem simples para vocês, o de "Como personalizar a sidebar", para quem não sabe e é iniciante, sidebar é os gadgets do seu blog. Bom, vamos lá.


Você primeiro irá no Painel de blog's que você tem. Então, clicará no blog em que você quer personalizar a sidebar e vá em Modelo >> Editar HTML, então, abrirá uma "caixa" com os códigos e seu blog, você clica dentro dessa caixa e aperta Ctrl F no seu teclado, então abrirá uma "mini-caixinha" de pesquisa dentro da "caixa" de códigos, você clica nessa "mini-caixinha" e pesquisa por isso:
/* Widgets

Então terão muitos códigos abaixo dessa tag, você apagara todos (só apague até antes do /* Mobile, pois o /* Mobile  não deve ser apagado...), aí, depois de apagar os códigos, os substitua pelos códigos de um modelo de sidebar, eu não sei criar um, porém, vários blog's contém modelos pra você pegar, vou dar 3 modelos para você utilizar, se não gostar de nenhum, aconselho você procurar em outro site, os créditos dos sites estão antes dos modelos.


Modelo Normal:


Modelo Hover (com o mouse por cima do título):


Código:
.sidebar .widget { font-family: 'Pf Arma Five'; color:#ccc; font-size:8px; padding: 5px; margin:2px; margin-top:5px; margin-left:-35px; Background: #fff; border: 1px solid #EAEAEA; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -webkit-transition-duration: .50s; } .sidebar .widget h2 { padding-bottom: 6px; padding-top: 6px; color:#fff; text-shadow: 1px 1px 1px #FCADAD; background: #fcd9d9;border: 1px solid #FCADAD; background: -moz-radial-gradient(center, ellipse cover, #fcd9d9 0%, #f9d6d6 45%, #ffcccc 100%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#fcd9d9), color-stop(45%,#f9d6d6), color-stop(100%,#ffcccc)); background: -webkit-radial-gradient(center, ellipse cover, #fcd9d9 0%,#f9d6d6 45%,#ffcccc 100%); background: -o-radial-gradient(center, ellipse cover, #fcd9d9 0%,#f9d6d6 45%,#ffcccc 100%); background: -ms-radial-gradient(center, ellipse cover, #fcd9d9 0%,#f9d6d6 45%,#ffcccc 100%); background: radial-gradient(ellipse at center, #fcd9d9 0%,#f9d6d6 45%,#ffcccc 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcd9d9', endColorstr='#ffcccc',GradientType=1 ); border-radius:3px; padding-left: 10px; line-height: 8px; margin-bottom: 5px; font-family: 'Pf Arma Five'; font-size:8px; text-align: center; -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; -webkit-transition-duration: .80s; } .sidebar h2:hover { padding-bottom: 6px; padding-top: 6px; border-radius:3px; padding-left: 10px; line-height: 8px; margin-bottom: 5px; font-family: 'Pf Arma Five'; font-size:8px; color:#FCADAD; text-shadow: 1px 1px 1px #fff; background: #fcd9d9;border: 1px solid #FCADAD; background: -moz-radial-gradient(center, ellipse cover, #fcd9d9 0%, #f9d6d6 45%, #ffcccc 100%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#fcd9d9), color-stop(45%,#f9d6d6), color-stop(100%,#ffcccc)); background: -webkit-radial-gradient(center, ellipse cover, #fcd9d9 0%,#f9d6d6 45%,#ffcccc 100%); background: -o-radial-gradient(center, ellipse cover, #fcd9d9 0%,#f9d6d6 45%,#ffcccc 100%); background: -ms-radial-gradient(center, ellipse cover, #fcd9d9 0%,#f9d6d6 45%,#ffcccc 100%); background: radial-gradient(ellipse at center, #fcd9d9 0%,#f9d6d6 45%,#ffcccc 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcd9d9', endColorstr='#ffcccc',GradientType=1 ); text-align: center; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-transition-duration: .80s; }

Modelo:


Código:


@font-face { font-family: "calvin"; src: url('http://static.tumblr.com/fmf4w4k/Qrnmsxhpk/c_box.ttf');}.sidebar h2 { font-family: calvin;font-size: 13px; color: #fff;text-align: center;letter-spacing: 2px;} .sidebar .widget { border-bottom: 3px solid #ffb4c4;border-top: 3px solid #ffb4c4;padding-bottom: 10px;padding-left: 10px;padding-right: 10px;padding-top: 10px;margin: 30px 0;Background: #fff;box-shadow: inset 0 0 15px #eee, 0 0 4px #ccc;}.sidebar .widget h2 {background: url(http://i.imgur.com/RXjDQiH.png) no-repeat left;margin-top: -5px;margin-left:-43px;margin-bottom:0px;padding:15px;width:150%;overflow:hidden;}

Modelo:


Código:


.sidebar.widget h2 { margin-top: 15px; margin-bottom: 5px; font-family: Tahoma; text-transform: uppercase; letter-spacing: 3px; color: #ccac90; border-bottom: 1px dotted #c8bcb2; font-size: 11px; text-align: center; word-spacing:.4em; -webkit-transition-duration: .50s; } .sidebar h2:hover { letter-spacing: 6px; color: #b39478; -webkit-transition-duration: .50s; }


Bom gente, foi isso, um beijo e sayonara ♥ 

Nenhum comentário:

Postar um comentário