Templates para Blogs Sapo - 1ª Edição

Outubro 05 2011

Para instalar um Blog igual ao que está a ver, com a possibilidade de mudar a imagem de cabeçalho, proceda do seguinte modo:

  1. Na Personalização do Blog escolha o template 'Chic'
  2. Na Personalização Avançada, escolha 'editor css'
  3. Na caixa 'Editar css do Blog' apague ou guarde todo o código que lá estiver e cole o novo
  4. Procure no início por .header { background: url('https://fotos.web.sapo.io/i/o1a0733a9/9240636_Pmbaq.jpeg') e substitua o url pelo da sua imagem 633x210, sem apagar as 'plicas'
  5. Para finalizar guarde as alterações
  6. Se tiver dúvidas deixe um comentário; responderemos no prazo de 24 horas.

 

Código novo:

body { margin: 40px 40px 40px 40px; background: url('https://imgs.sapo.pt/images/blogs/templates/E6_chic/back.gif') repeat center #333333; }
form { margin: 0; padding: 0; }
p { margin: 0; padding: 0; }
a, a:link, a:active { color: #666666; text-decoration: underline; }
a:visited { color: #666666; text-decoration: underline; }
a:hover { color: #999999; text-decoration: none; }
.clear { clear: both; height: 0px; line-height: 0px; font-size: 1px; }
#container { border: 10px solid #ffffff; font-family: Lucida Grande, Arial, Verdana, Helvetica, sans-serif; width: 870px; font-size: 16px; margin: auto; background: url('https://imgs.sapo.pt/images/blogs/templates/E6_chic/sidebar.gif') repeat-y top left #ffffff; }
#footer { font-family: Lucida Grande, Arial, Verdana, Helvetica, sans-serif; font-size: 11px; color: #666; text-align: center; height: 15px; }
#footer p { padding: 0px 0 0; }
.top, .top ul { height: 210px; margin: 0; padding: 0; float: left; background-color: #000; }
.top li { list-style-type: none; margin-bottom: 1px; }
.top li a { border-bottom: 1px solid #FFF; text-decoration: none !important; background-color: #000; width: 227px; color: #666666; display: block; line-height: 25px; padding-left: 10px; }
.top li a:hover { background-color: #333; color: #cccccc; }
.header { background: url('https://fotos.web.sapo.io/i/o1a0733a9/9240636_Pmbaq.jpeg') no-repeat top left #ffffff;; height: 210px; width: 633px; border: 0px solid ; float: left; }
.topheader { float: left; }
#blogtitle { background-color: #333; font-family: Lucida, Arial, sans-serif; font-size: 24px; padding-left: 10px; text-align: left; line-height: 30px; }
#blogtitle a, #blogtitle a:link, #blogtitle a:visited, #blogtitle a:active, #blogtitle a:hover{ color: #ffffff; text-decoration: none; }
#blogdesc { font-family: Lucida, Arial, sans-serif; font-size: 14px; text-align: left; color: #555555; }
#blogdesc a, #blogdesc a:link, #blogdesc a:visited, #blogdesc a:active,
#blogdesc a:hover { color: #555555; text-decoration: none; }
#extras { float: left; width: 220px; background-color: transparent; color: #333333; line-height: 1em; padding: 8px; }
#extras .header { display: none; width: 220px; height: 210px; margin-bottom: 10px; float: left; }
#extras .widget { padding: 0px; }
#extras .title { font-weight: bold; line-height: 2em; font-size: 14px; color: #333333; font-family: Lucida Grande, Arial, Verdana, Helvetica, sans-serif; text-transform: normal; }
#extras a, #extras a:link, #extras a:active { text-decoration: underline; font-size: 13px; color: #333333; font-weight: normal; }
#extras a:visited { color: #333333; }
#extras a:hover { color: #000000; text-decoration: none; }
#extras .comment { margin-bottom: 10px; padding-right: 10px; font-size: 13px; }
#extras .sep { margin-bottom: 20px;}
#extras .sepB { margin-bottom: 5px; margin-top: 5px; }
#extras .sapo img { border: 1px solid #CCC; }
#extrasB { display: none; float: left; width: 0px; background-color: transparent; color: #666666; line-height: 2em; padding: 20px 0 0 20px; }
#extrasB .header { display: none; width: 0px; height: 210px; margin-bottom: 3px; }
#extrasB .widget { display: none; padding: 0; }
#extrasB .title { display: none; font-weight: bold; line-height: 2em; font-size: 14px; color: #666666; font-family: Lucida Grande, Arial, Verdana, Helvetica, sans-serif; text-transform: normal; }
#extrasB a, #extrasB a:link, #extrasB a:active { display: none; font-size: 13px; color: #cc6600; text-decoration: underline; font-weight: normal;}
#extrasB a:visited { display: none; color: #cc6600; }
#extrasB a:hover { display: none; color: #999999; }
#extrasB .comment { margin-bottom: 10px; padding-right: 10px; font-size: 13px; }
#extrasB .sep { display: none; margin-bottom: 20px; }
#extrasB .sepB { display: none; margin-bottom: 5px; margin-top: 5px; }
#extrasB .sapo img { display: none; border: 1px solid #CCC; }
#profile img { padding: 0; }
#messenger img { border: 0px solid #CCC;}
.buton { font: 11px Tahoma, Arial, Helvetica, sans-serif; color: #666666; background: #eeeeee; border: 1px solid #999999; padding: 3px; }
.form { font: normal 11px Tahoma, Arial, Helvetica, sans-serif; color: #666666; background: #ffffff; border: 1px solid #999999; padding: 2px; }
.calendar { text-align: center;}
.calendar .day { width: 25px; padding: 2px 0; height: 19px; float: left; text-transform: uppercase; font-size: 10px; color: #333333 !important;}
.calendar .dayNum { font-size: 10px ; font-weight: bold ; color: #333333 !important; float: left; width: 25px; padding: 2px 0; height: 19px;}
.calendar .dayNum a, .calendar .dayNum a:link, .calendar .dayNum a:visited,
.calendar .dayNum a:active, .dayNum a:visited { font-size: 10px ; font-weight: bold ; color: #333333 !important; text-decoration: underline ; padding: 2px 0; background-color: transparent !important; }
.calendar .dayNum a:hover { font-size: 10px ; font-weight: bold ; color: #333333 !important; text-decoration: none !important; padding: 2px 0; background-color: transparent !important; }
.calendar .today { background-color: transparent; font-size: 10px ; font-weight: bold ; color: #333333 !important; float: left; width: 25px; padding: 2px 0; height: 19px;}
.calendar .today a, .calendar .today a:link, .calendar .today a:visited,
.calendar .today a:active { font-size: 10px ; color: #333333 ; text-decoration: underline ; padding: 2px 0; background-color: transparent !important; font-weight: bold ; }
.calendar .today span { font-weight: bold; font-size: 10px ; color: #333333; padding: 2px 0; background-color: transparent !important;}
.calendar .today a:hover{ font-size: 10px ; color: #333333 !important; text-decoration: none !important; padding: 2px 0; width: 25px; height: 19px; background-color: #cccccc !important; font-weight: bold ; }
.calendar .nav { width: 170px; padding: 0; float: left; }
.calendar .left { float: left; }
.calendar .right { float: right; }
.archive_mini .year { display: inline; }
.archive_mini p { display: inline; font-size: 13px; }
.archive_group .year { margin-top: 10px; color: #555533; }
.archive_group .arch_month { float: left; width: 25px; padding-right: 20px; }
.rss img { margin-right: 5px; }
#posts .barrita { text-align: left; }
#posts { margin-top: 30px; float: right; width: 600px; font-size: 14px; color: #333333; ; }
#posts { margin-top: 10px; float: right; width: 600px; font-size: 14px; color: #333333; ; }
#posts2 { margin-top: 10px; float: right; width: 600px; font-size: 14px; color: #333333; /*padding-left: 600px;*/ ; }
#posts .header { width: 600px; height: 210px; }
#posts .datebox { color: #666666; font-size: 13px; padding-top: 5px; }
#posts .daysep { padding: 0; margin: 0; }
#posts .post p { margin: 0; padding: 0; }
#posts .post { padding: 20px 20px 0 0; margin-bottom: 20px; text-align: left; line-height: 1.2em; color: #333333; font-size: 13px; }
#posts .post a, #posts .post a:link,
#posts .post a { color: #666666; text-decoration: underline; font-size: 13px; font-weight: normal; }
#posts .post a:active { color: #666666; text-decoration: underline; font-size: 13px; font-weight: normal; }
#posts .post a:visited { color: #666666; text-decoration: underline;}
#posts .post a:hover { color: #666666; text-decoration: none; }
#posts .title a, #posts .title a:link, #posts .title a:active, #posts .title a:visited,
#posts .title a:hover { font-weight: bold; font-family: Lucida Grande, Arial, Verdana, Helvetica, sans-serif; font-size: 18px; color: #333333; text-decoration: none; line-height: 1em; }
#posts .sep { height: 15px; margin: 0 20px 20px 0; }
#posts .sepB { height: 15px; margin: 35px 0pt 0px; }
#posts .postreply { float: left; margin: 0px; }
#posts .postreply a { font-size: 12px; text-align: right; color: #666666; text-decoration: underline; }
#posts .postreply a:hover { font-size: 12px; text-align: right; color: #999999; text-decoration: none; }#posts .navtop { display: none; font-size: 12px; text-align: right; padding: 0 20px 20px 0;}
#posts .navbot { text-transform: uppercase; font-size: 12px; text-align: right; padding: 0 25px 0 0;}
#posts .navbot a { line-height: 14px; letter-spacing: 1px; padding: 0 4px; font-size: 12px; text-align: right; color: #666666; text-decoration: underline; }
#posts .navbot a:hover { line-height: 14px; letter-spacing: 1px; padding: 0 4px; font_size: 12px; text-align: right; color: #999999; text-decoration: none; }
#posts .nav2 { font-size: 12px; text-align: right; }
#posts .nav2 a { padding: 0 4px; font-size: 12px; text-align: right; color: #666666; text-decoration: underline; }
#posts .nav2 a:hover { padding: 0 4px; font-size: 12px; text-align: right; color: #999999; text-decoration: none; }
#posts .sign { font-size: 13px; margin-top: 15px; color: #666666; }
#posts .sign { clear: both; text-decoration: none; }
#posts .sign a, #posts .sign a:link, #posts .sign a:active,
#posts .sign a { text-decoration: underline; color: #666666; font-size: 13px; }
#posts .sign a:visited { font-size: 13px; color: #666666; text-decoration: underline; letter-spacing: 1px; }
#posts .sign a:hover { text-decoration: none; font-size: 13px; color: #666666; }
#posts .sign .metadata { font-size: 13px; color: #666666; }
#posts .month, #posts2 .month { margin: 0pt 0px 15px 0pt; padding-top: 15px; }
#posts .month a, #posts2 .month a { color: color_link; }
#posts .month a:hover, #posts2 .month a:hover { color: color_link_hover; }
#posts .cal, #posts2 .cal { width: 180px; height: 180px; margin: 1px; float: left; }
#comentar { margin: 0px 20px 0 10px; line-height: 2em; }
#comentar .csep { height: 15px; }
#comentar .tsep { height: 15px; margin-bottom: 10px;}
.sepD { height: 15px; margin: 15px 0pt 15px 10px; }
#comentar .sepD { margin: 25px 0 0 0; }
.comentar { text-align: justify; }
.comentar a { text-decoration: underline; color: #666666; }
.comentar a:visited { text-decoration: underline; color: #666666; }
.comentar a:hover { text-decoration: none; color: #666666; }
#comentar .title { margin: 0pt 0pt 15px; }
.c1 { margin-left: 0; }
.c2 { margin-left: 20px; }
.c3 { margin-left: 40px; }
.c4 { margin-left: 60px; }
.c5 { margin-left: 80px; }
#comentar .campo1 { padding-top: 10px; font-weight: bold; font-size: 12px; color: #113355;}
#comentar .campo1D { padding: 10px 0px 3px 0px; font-size: 11px; font-weight: normal; color: #999999; }
#comentar .campo2 { padding: 3px 0px 3px 20px; font-size: 11px; font-weight: normal; color: #999999; }
#commenttext { width: 90%; }
/*SEARCH RESULTS*/
#pesquisa { margin-bottom: 20px;line-height: 25px; }
#pesquisa .campo1B { width: 65px; float: left; }
#pesquisa .campo2B { float: left; }
#pesquisa .campo3B { margin: 10px 0; float: left; }
#pesquisa .campo3B .form { border: 0px solid; }
#searchResults .quantos { color: #333333; font-size: 10px;}
#searchResults .pesquisapor { font-size: 11px; font-weight: bold;}
#searchResults .pesquisapor a, #searchResults .pesquisapor a:link, #searchResults .pesquisapor a:visited,
#searchResults .pesquisapor a:active{ text-decoration: underline; font-weight: bold; font-size: 11px;}
#searchResults .pesquisapor a:hover { text-decoration: none; }
#results { padding: 0 20px 0 0; }
#results li { list-style-type: decimal; font-size: 14px; font-weight: bold; margin: 0px 0px 15px 0px;}
/*title*/
#results h1 { margin: 0px; font-size: 18px; color: #666666;}
#results h1 a, #results h1 a:link, #results h1 a:visited, #results h1 a:active,
#results h1 a { color: #666666; text-decoration: underline; font-weight: bold; font-size: 14px; }
#results h1 a:hover { text-decoration: none; font-weight: bold; font-size: 14px; }
/*data e autor*/
#results h2 { margin: 0px; font-size: 13px; color: #666666; font-weight: normal;}
/*texto*/
#results p { margin: 0px; font-weight: normal; font-size: 14px;}
/*highlight*/
#results em { font-weight: bold; font-style: normal;}
/*url*/
#results h3 { margin: 0px; font-size: 13px; font-weight: normal; }
#results h3 a, #results h3 a:link, #results h3 a:visited,
#results h3 a:active { text-decoration: underline; font-weight: normal; font-size: 11px;}
#results h3 a:hover { text-decoration: none;}
/*Navegacao*/
#navega p { float: left; margin: 0px; font-size: 12px; font-weight: bold; text-transform: uppercase; }
#navega p a, #navega p a:link, #navega p a:visited,
#navega p a:active { text-decoration: underline; padding: 2px 4px 2px 4px; font-weight: bold; font-size: 12px;}
#navega p a:hover { text-decoration: none; padding: 2px 4px 2px 4px; }
#navega em { padding: 2px 3px 2px 3px; font-style: normal; font-weight: bold; border: solid 1px #E1E1D2;}
#navega .sepD { margin: 20px 0 0; }
#navega { padding: 25px 25px 0 0; }
#navega .navbot { float: right; text-transform: uppercase; font-size: 12px; text-align: right; }
#posts, #extras, #extrasB { overflow: hidden; }
#extras .comment a { color: #333333; }
#extras .comment a:hover { color: #000000; }

 

 

Observações:
Este novo template sofreu algumas alterações em relação ao 'Chic': é mais estreito 100px, e retocamos as margens, tamanho da letra, cor dos links e dos botões.


Recomendamos que visite o site de fotos:

Photo laboratory Photl.com presents you a fantastic collection of free photo images (Free photo).
onde poderá encontrar a imagem ideal para o tema do seu Blog. Todas as fotos de largura inferior a 850px são de uso livre para blogs e sites não-comerciais e algumas também para sites comerciais. Depois só tem de cortá-las e redimensioná-las para 633x210.
Se preferir pode escolher uma das nossas sugestões já prontas a usar; o url da imagem 633x210 está por debaixo do respectivo exemplo.

publicado por BS Templates às 11:17

Adaptados por BS Templates
pesquisar no blog
 
mais sugestões

 

 

 

 

 

 

 

subscrever feeds
blogs SAPO