-
Urgente
iGoogle deixará de existir em 2013
O Google anunciou que planeja desligar alguns seus produtos existentes: iGoogle, Google Talk Chatback, Google Mini e outros.
-
Android
Google Analytics chega ao Android
O Google liberou um novo aplicativo para Android que traz o Google Analytics em versão para celulares.
-
Novidade
Nexus Q, o dispositivo de streaming social
O Google lançou seu primeiro dispositivo de streaming social que foi desenhado inteiramente por seus engenheiros, o Nexus Q.
-
Novidade
Nexus 7, o tablet portátil do Google
Nexus 7, o tablet de 7 polegadas do Google, fabricado pela Asus, que chega ao mercado otimizado para o conteúdo do Google Play.
-
Destaque
As novidades do Android 4.1 Jelly Bean
Conheça todos os detalhes da próxima geração da plataforma Android, a versão 4.1, também conhecida como Jelly Bean.
ÚLTIMOS ARTIGOS
Baixe os modelos de design do Blogger
Na época, eu fiz um backup de todos os modelos, temendo justamente que não fossem incluidos. Não sei se mais tarde irão adicioná-los a essa interface, mas se isso acontece ou não, deixo o download de cada um desses modelos no caso de alguém precisar.
Marcadores:
Blogger,
Downloads
2 comentários:
Cinco designs para Breadcrumb
Breadcrumbs é uma navegação alternativa. Não só agem como uma ajuda visual para informar o leitor sobre a sua posição na hierarquia do blog, mas também dão uma sensação mais estruturada. O artigo Breadcrumbs para o Blogger mostrar como integrar o breadcrumbs no Blogger, e este é uma vitrine de 5 designs que você pode usar no lugar do design padrão fornecido antes.
Todos esses estilos usam CSS3 sem utilização de imagens em qualquer lugar. Cada um deles estão lindamente decorados e deve integrar-se bem com o atual design do seu blog.
Antes de começar
Certifique-se de que tenha Breadcrumbs em seu blog. Caso não tenham, siga este tutorial antes de prosseguir. Além disso, se você colocá-los agora, então não inclua qualquer CSS mencionado nos passos.
Certifique-se de remover todas as CSS relacionada com o Breadcrumbs de seu blog.
Estaremos usando uma estrutura HTML comum para todos estes design, é algo como:
Design I
Esta é a versão de imagem-menos do estilo padrão.
O crédito vai para Jake Rocheleau
Adicioná-lo diretamente:
Ou adicioná-lo manualmente: css
Design II
A inspiração para este veio de um Dribbble por Maleika E.A.
Adicioná-lo diretamente:
Ou adicioná-lo manualmente: css
Design III
A este estilo, tudo graças a Showcaze.
Adicioná-lo diretamente:
Ou adicioná-lo manualmente: css
Design IV
Parcialmente projetado por mim
Adicioná-lo diretamente:
Ou adicioná-lo manualmente: css
Design V
Novamente um agradecimento especial a Showcaze para este estilo incrível
Adicioná-lo diretamente:
Ou adicioná-lo manualmente: css
Todos esses estilos usam CSS3 sem utilização de imagens em qualquer lugar. Cada um deles estão lindamente decorados e deve integrar-se bem com o atual design do seu blog.
Certifique-se de que tenha Breadcrumbs em seu blog. Caso não tenham, siga este tutorial antes de prosseguir. Além disso, se você colocá-los agora, então não inclua qualquer CSS mencionado nos passos.
Certifique-se de remover todas as CSS relacionada com o Breadcrumbs de seu blog.
Estaremos usando uma estrutura HTML comum para todos estes design, é algo como:
<div class='breadcrumbs' >Agora vamos começar, basta adicionar o CSS no seu modelo manualmente ou adicioná-lo diretamente, usando o botão One-Click.
<a class='first' href='#' ><span>Home</span></a>
<a href='#' ><span>CSS3</span></a>
<a href='#' ><span>Widgets</span></a>
</div>
Esta é a versão de imagem-menos do estilo padrão.
O crédito vai para Jake Rocheleau
.breadcrumbs{list-style:none;margin:0}
.breadcrumbs a:last-child{border-right-width:1px!important;border-bottom-right-radius:5px;-moz-border-radius-bottomright:5px;-webkit-border-bottom-right-radius:5px}
.breadcrumbs a{color:#666;display:block;float:left;font-size:12px;position:relative;text-decoration:none;border:1px solid #D9D9D9;border-right-width:0;background-image:0;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#f1f1f1,endColorstr=#f5f5f5);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#f1f1f1, endColorstr=#f5f5f5)";background-repeat:no-repeat;background-position:100% 0;z-index:1;padding:7px 16px 7px 19px}
.breadcrumbs a:hover{border-top-color:#c4c4c4;border-bottom-color:#c4c4c4;background-image:0 45% #f8f8f8 73%;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#f8f8f8,endColorstr=#f1f1f1);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#f8f8f8, endColorstr=#f1f1f1)";color:#333;-moz-box-shadow:0 2px 2px #e8e8e8;-webkit-box-shadow:0 2px 2px #e8e8e8;box-shadow:0 2px 2px #e8e8e8}
.first,.first:hover{z-index:30!important;border-top-left-radius:5px;-moz-border-radius-topleft:5px;-webkit-border-top-left-radius:5px}
A inspiração para este veio de um Dribbble por Maleika E.A.
.breadcrumbs{list-style:none;margin:0}
.breadcrumbs a{text-decoration:none;color:#444;position:relative;z-index:1;float:left;text-shadow:0 1px 0 rgba(255,255,255,.5);-moz-border-radius:0 100px 100px 0;-webkit-border-radius:0 100px 100px 0;border-radius:0 100px 100px 0;margin:0 -16px 0 0;padding:10px 22px 10px 30px}
.breadcrumbs a:nth-child(odd){border:1px solid #BFC0B0;box-shadow:4px 0 6px 0 #999A8A;background-image:linear-gradient(tobottomright,#BFC0B00%,#CECFC1100%)}
.breadcrumbs a:nth-child(even){color:#FFF;border:1px solid #999A8A;box-shadow:4px 0 6px 0 #BFC0B0;background-image:linear-gradient(tobottomright,#999A8A0%,#A5A895100%)}
.breadcrumbs a:nth-child(even):hover{color:#333}
.breadcrumbs a:nth-child(odd):hover{color:#FFF}
.first,.first:hover{z-index:30!important}
.breadcrumbs a:nth-child(2){z-index:29!important}
.breadcrumbs a:last-child{box-shadow:4px 0 6px 0 transparent!important}
A este estilo, tudo graças a Showcaze.
.breadcrumbs{zoom:1;line-height:40px;height:40px;background-color:#FFF;background-image:linear-gradient(tobottom,#FFF,#EEE);-moz-border-radius:5px;-webkit-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px;border:1px #CCC solid;-webkit-box-shadow:inset 0 -1px 1px rgba(0,0,0,0.3), 0 1px 5px rgba(0,0,0,0.1);-moz-box-shadow:inset 0 -1px 1px rgba(0,0,0,0.3), 0 1px 5px rgba(0,0,0,0.1);-ms-box-shadow:inset 0 -1px 1px rgba(0,0,0,0.3), 0 1px 5px rgba(0,0,0,0.1);-o-box-shadow:inset 0 -1px 1px rgba(0,0,0,0.3), 0 1px 5px rgba(0,0,0,0.1);box-shadow:inset 0 -1px 1px rgba(0,0,0,0.3), 0 1px 5px rgba(0,0,0,0.1);letter-spacing:2px;margin:0;padding:0}
.breadcrumbs:before,.breadcrumbs:after{display:table;content:"";zoom:1}
.breadcrumbs:after{clear:both}
.breadcrumbs a{color:#999}
.breadcrumbs > a{position:relative;height:40px;overflow:hidden;float:left;padding:0 40px 0 20px}
.breadcrumbs > a:after{content:'';position:absolute;right:8px;top:-1px;height:40px;width:40px;border-right:3px rgba(0,0,0,0.1) solid;border-bottom:3px rgba(0,0,0,0.1) solid;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}
.breadcrumbs > a:before{content:'';position:absolute;right:11px;top:0;height:40px;width:40px;border-right:1px rgba(0,0,0,0.2) solid;border-bottom:1px rgba(0,0,0,0.2) solid;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}
.breadcrumbs a :last-child{color:#333}
.breadcrumbs > a:last-child span:before,.breadcrumbs > a:last-child span:after{display:none}
.breadcrumbs a:hover{text-decoration:none!important}
.breadcrumbs span:hover{color:#666}
.breadcrumbs > a:hover:after{border-color:rgba(0,0,0,0.2)}
.breadcrumbs > a:hover:before{border-color:rgba(0,0,0,0.3)}
.breadcrumbs span{margin-top:1px;color:#999}
Parcialmente projetado por mim
.breadcrumbs{list-style:none;margin:0}
.breadcrumbs a span::after{background:#DDD;content:"";height:2.5em;margin-top:-1.25em;position:absolute;right:-1em;top:50%;width:2.5em;z-index:-1;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);-moz-border-radius:.4em;-webkit-border-radius:.4em;border-radius:.4em}
.breadcrumbs a{text-decoration:none;color:#444;background:#DDD;position:relative;z-index:1;float:left;text-shadow:0 1px 0 rgba(255,255,255,.5);-moz-border-radius:.4em 0 0 .4em;-webkit-border-radius:.4em 0 0 .4em;border-radius:.4em 0 0 .4em;margin:0 2em 0 0;padding:.7em 1em .7em 2em}
.breadcrumbs a:hover,.breadcrumbs a:hover > span:after{background:#f1f1f1;color:#333}
Novamente um agradecimento especial a Showcaze para este estilo incrível
.breadcrumbs{list-style:none;height:36px;line-height:36px;padding-left:36px;margin:0}Você tem algum outros designs para acrescentar a estes? Sinta-se livre para adicioná-los através dos comentários, com certeza farei um outro post sobre eles. Por último, se você está tendo qualquer tipo de problema, então sinta-se livre para comentá-los.
.breadcrumbs > a{position:relative;float:left;margin-left:-36px;-moz-border-radius:18px;-webkit-border-radius:18px;-ms-border-radius:18px;-o-border-radius:18px;border-radius:18px;background-color:#FFF;background-image:linear-gradient(tobottom,#FFF,#EEE);-webkit-box-shadow:0 0 5px rgba(0,0,0,0.5);-moz-box-shadow:0 0 5px rgba(0,0,0,0.5);-ms-box-shadow:0 0 5px rgba(0,0,0,0.5);-o-box-shadow:0 0 5px rgba(0,0,0,0.5);box-shadow:0 0 5px rgba(0,0,0,0.5)}
.breadcrumbs> a:before{content:'';position:absolute;z-index:-1;left:-6px;top:-6px;width:100%;height:100%;background:#D5D5D5;-moz-border-radius:22px;-webkit-border-radius:22px;-ms-border-radius:22px;-o-border-radius:22px;border-radius:22px;border:1px #C5C5C5 solid;padding:5px}
.breadcrumbs > a > span{color:#666;float:left;padding:0 46px 0 40px}
.breadcrumbs a{list-style:none}
.breadcrumbs a::before,.breadcrumbs a::after,.breadcrumbs a span::before,.breadcrumbs a span::after{content:"";position:absolute;top:50%;left:0;display:none}
.breadcrumbs a span::before,.breadcrumbs a span::after{background:transparent;margin:-8px 0 0}
.breadcrumbs > a:last-child > span{color:#333;padding:0 46px 0 60px}
.breadcrumbs > a:hover,.breadcrumbs > a:last-child{background-color:#EEE;background-image:linear-gradient(tobottom,#EEE,#DDD)}
.breadcrumbs > a:hover > span{color:#FFF;padding:0 66px 0 60px}
.breadcrumbs > a:last-child:hover > span{padding:0 46px 0 60px}
.first,.first:hover{z-index:30!important}
.breadcrumbs a:nth-child(2){z-index:31!important}
.breadcrumbs a:nth-child(3){z-index:32!important}
Marcadores:
Design,
Widget - Gadget
Um comentário:
Assinar:
Postagens (Atom)