Fazendo temas para GC

Oii amourecos, tudo de boa?? Como pedido, vou postar como fazer temas para chrome!!! Uhull! Party Rock! Continuando...
Nossa faz tempo que não uso leia mias né?

Retirar folha do modelo Viagem

Oii gente gata tudo bom? Hoje vou ensinar a retirar aquele papel no fundo do modelo viagem (o troço chato viu)

Vá em Modelo>Editar HTML>Prosseguir>Ctrl+F :

.content-outer .content-cap-top {

Vai aparecer esse código, apague o que estiver em negrito:

.content-outer .content-cap-top {

  height: $(content.imageBorder.top.space);

 background: transparent $(content.imageBorder.top) repeat-x scroll top center;

}

.content-outer {

  margin: 0 auto;

  padding-top: $(content.margin);

}

.content-inner {

  background: $(content.background);

  background-position: left -$(content.imageBorder.top.space);

  background-color: $(content.background.color);

  padding: $(content.padding);

}

Ele já vai sumir, like magic, mas você deve ter percebido que sua área de postagem ficou transparente né? É só ir no personalizar (Modelo > Personalizar> Avançado >Plano de fundo a área de postagem) e escolher sua cor
Kiss&Kiss

Retirar "Assinar Postagens (Atom)"

Oii gatenhas e gatenhos, hoje trouxe um tutorial bem comum mas muito útil: retirara aquele inútil e odiado link Assinar Postagens (Atom)

Vá em Modelo>Editar HTML> Prosseguir>Ctrl+F:
b:skin
e coloque acima dele:

.feed-links {
visibility: hidden;
display: none
}

Micro tuto e micro código (raridade aqui no blog)
É só isso galera, aproveitem e comentem!
Kiss&Kiss

Menu Changing

Oii fofitos! Tudo boom? Hoje eu trouxe um menu muito perfeito que eu usei no Lay Free (vai ser postado dia 29/08) ele é assim:

Para cada item você vai ter que adicionar um código acima de ]]>

(eu usei menu1,menu2,menu3 etc), eu vou postar só o code do primeiro, look:

#menu1 {
background: #FF63A6; /* fundo */
position: absolute; /* não mexe com a página */
width: 120px; /* largura */
padding: 2px; /* espaçamento interno */
text-align: center;  /* alinhamento do texto */
z-index: 3; /* não ficar em cima do outro (não mude) */
float: left; /* posição (esquerda, right=direita) */
display: block; /* faz com que seja um bloco (não mude) */
letter-spacing: 1px; /* espaçamento entre as letras */
margin-top: -120px; /* quanto mais pra cima */
margin-left: 20px; /* quanto mais para a esquerda */
font-size: 12px; /* tamanho da fonte */
font-family: 'Homenaje', sans-serif; /* fonte */
-webkit-transition: all 0.6s ease-out; /* duração da transição  */
-moz-transition: all 0.6s ease-out; /* duração da transição */
transform: rotateX(0deg); /* transição virar (não mude ou perde o efeito) */
-webkit-transform: rotateX(0deg);  /* transição virar (não mude ou perde o efeito) */
-moz-transform: rotateX(0deg); /* transição virar (não mude ou perde o efeito) */
}
#menu1:hover {
-webkit-transition: all 0.6s ease-out; /* duração da transição */
-moz-transition: all 0.6s ease-out; /* duração da transição */
transform: rotateX(160deg); /* transição virar (não mude ou perde o efeito) */
-webkit-transform: rotateX(160deg); /* transição virar (não mude ou perde o efeito) */
-moz-transform: rotateX(160deg); /* transição virar (não mude ou perde o efeito) */
text-align: center; /* alinhamento do texto */
}

Para cada item você terá que colocar um código, mas vai precisar alterar os valores que estão em rosa.

Lembrando que o margin-top (ou qualquer margin) se refere a distância externa, então quanto menor for o valor maior vai ser a distância. Por exemplo o valor -100 vai deixar a imagem mais para cima que o valor -50. 

Para usar coloque esse código num gadget de HTML/JavaScript:

Clique

Pode adicionar mais itens, mas lembre-se que terá que adicionar mais um código e mudar o número do "menu1" 

Essa fonte não tem instalada no blogger, é uma fonte do Google Web Fonts, o próximo tutorial vou ensinar a usar essas fontes diferentes!

Obs: Esse menu fica mais divo quando se usa no cabeçalho, mas para colocar você terá que colocar o cabeçalho pelo HTML (tem aqui)

Kiss&Kiss

Cabeçalho pelo HTML

Oii gente, sou eu, TeTe, lembram de mim? Hoje eu vim com um texto chamado o mistérios dos posts desaparecidos! Brincadeira, é só um tutorial mesmo, que é como colocar o cabeçalho pelo HTML

Vá no Modelo > Editar HTML > Prosseguir > Ctrl+F > /* Header

Vai achar isso:

/* Header
----------------------------------------------- */

Depois da barra coloque:

.header-inner{
background: url(URL DA IMAGEM) no-repeat;
width: 1000px; /* largura da imagem */
height: 400px; /* altura da imagem */
margin-top: -50px; /* o quanto que a imagem vai mais pra cima */
}

Lembrando que o margin-top (ou qualque margin) se refere a distância externa, então quanto menor for o valor maior vai ser a distância. Por exemplo o valor -100 vai deixar a imagem mais para cima que o valor -50.

Queria pedir trocentos milhões de desculpas pra vocês pela falta de post, mas o pior é que eu preparo os posts (tenho quatro ou cinco) e deixo eles começados, tenho um de ribbons, um de temas para chrome, um lay free, e uns outros então desculpa gente, vou tentar postar mais regularmente, mas como vocês devem ter visto a Domênica agora posta aqui :D , com ela, eu e a Alice postando aqui vamos ver se melhora :)
Kiss&Kiss

Efeito "Dance"

Baloes *o*

Hey cupcakes apimentados, desculpem pelo cookie de desaparecimento que eu comi, mas estava fazendo um layout para o Dancin' With Strawberries (visite clicando ali em cima) mas voltei com um efeito que pode ser usado tanto para afiliados quanto para equipe, no D'WS eu uso na equipe se quiser ver como fica mas o efeito é assim:

Mas porque dance? Porque com a velocidade do efeito e as bordas arredondas parecer que a imagem dança, mas também por causa do nome do blog onde o efeito foi criado (Dancin' With Strawberries)

Aplique acima de b:skin :

.equipe {

-webkit-border-radius: 70px; /* bordas arredondadas */
-webkit-border-top-left-radius: 0; /* borda arredondada em cima na esquerda */
border-radius: 60px; /* bordas arredondadas */
border-top-left-radius: 0;  /* borda arredondada em cima na esquerda */
border: 1px double #fff; /* borda colorida */
box-shadow: 1px 3px 15px 2px #ccc; /* sombra da imagem */
-webkit-transition-duration: 1.10s; /* duração da transição */

}
.equipe:hover {

border-top-left-radius: 70px; /* borda arredondada em cima na esquerda */
border-top-right-radius: 100px; /* borda arredondada em cima na direita */
border-bottom-left-radius: 0px; /* borda arredondada embaixo na esquerda */
border-bottom-right-radius: 0px; /* borda arredondada embaixo na direita */
-webkit-transition-duration: 1.10s; /* duração da transição */
}

Observações:

1. Alguns "bordas arredondadas" estão com o valor zero, mas se é zero então é mesmo que nada certo? NÃO!  Se tirar o canto não fica quadradinho

2. Pode mudar a velocidade da transição mas o efeito vai mudar, só avisando!

3. Eu usei avatares 100x100, e digo mais: fica melhor na equipe do que nos afiliados pois tem imagens menores ok?

Bom gente linda, é isso, olha foi sem querer que eu fiz esse efeito mas ficou muito fofo e novo! Se usar lembre-se de creditar ok?
Próximo post: Blockquote hover
Kiss&Kiss

Imagem fixa no post

Hooy people, quanto tempo né?

Não dá muito para entender o tutorial pelo titulo mas vou explicar: sabe quando quer fazer um tutorial e ele é partes tipo materiais, como fazer, resultado etc ou colocar uma mensagem no final do post :" Pode reblogar com créditos" ou "Proibido reblogar" ou até um terceira forma, usar nos goodies, separando tutoriais, materiais etc

Vai ficar assim:

Gadget personalizado

Hello, como prometido, i'm here! com um tutorial exclusivíssimo, hehe, let's go:

Olha que top que vai ficar:

Primeiro vá e seu HTML (Modelo >> Editar HTML >> Prosseguir) e vá até o final do código, desce tudo! Vai ter algo parecido com isso:

clique para aumentar

Presta atenção que é meio complicado: Você vai ver qual gadget quer pesonalizar, para saber qual é qual observe o nome após "...title='NOME DO GADGET'..." Para fazer o tuto vou usar o primeiro (no meu caso é o Personalizado). Agora prestem atenção nas partes destacadas, isso é very important , o code é baseado nelas, bom se for personalizar um gadget de texto, deve estar Text1 (ou 2, 3, 4 etc), se for um de HTML/JavaScript va1 estar HTML1 (ou 2, 3 , 4 etc) e outros.

Escolheu qual vai ser? Vamos ao código que você colocará acima de b:skin

#Text1{
background: #99D2E8; /* background */
border-radius: 10px; /* bordas arredondadas */
color: #000; /* cor da fonte */
}

Dependendo do gadget que você escolheu o Text1 vai mudar ok? Se quiser adicionar mais alguma coisa, como mudar a fonte ou efeito hover ( eu e minha mania de efeito hover kk), é só colocar normalmente, pode consultar outro tutoriais aqui do blog para ver alguma coisa ou comentar! Também da para personalizar vários gadgets, apenas adicione o código mais uma vez, mudando o nome (Text1, no meu caso)!

Kiss&Kiss

Outro estilo para data da postagem

Surprise!! Hoje veio com um jeito fofissimo de personalizar a data do post!! Confere ai:

Gostou?

Então::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

Data do post com imagem

Hey hey, surpresa: eu não morri!! E ainda tenho um tuto (sem feito hover, mas muito fofo!!) bom é -obviamente- de personalizar a data do post (porque eu falo isso se tem no titulo?) é facil !! Vamos lá people:

Vai ficar mais ou menos assim:

Vá no seu HTML (Modelo >> Editar HTML >> Prosseguir >> Ctrl+F) e procure por

.main-inner h2.date-header {

Substitua tudo até a chave ({) por isso:

.main-inner h2.date-header {

font: georgia;  /* fonte */

color: #ffffff;  /* cor da fonte */

margin-left: -33px; /* margem da esquerda  ou direita */

margin-top: -20px; /* margem acima */

background: url(URLDAIMAGEM) no-repeat;

float: left; /* ficar na esquerda (left) ou direita (right) */

font-size: 15px; /* tamanho da fonte */

padding: 4px; /* espaçamento */

width: 86px; /* largura da imagem */

height: 86px; /* altura da imagem */

text-align: center;

}

 Coisas Importantes:

Se suas área da postagem for no lado direito substitua no código TUDO onde tem left por right

Vá na sua imagem, clique com o botão direito e escolha propriedades para saber sua largura e altura

No margin top quanto menor for o valor mais para cima vai ficar

No proximo post vou postar imagens para usarem

Dica: usem imagens de tirinhas:

No próximo post eu trago elas 

Kiss&Kiss

Menu simples

                                                                                                           Eu queria ta ai *-*

Hello cupcakes de limão tudo ok? Hoje eu vim com um tutorial muito fofo o.0 de menu
Desculpem postar só hoje, mas ta muito difícil de postar, desculpem :(

Let's Go --->

Vai ficar assim:

Vamos colocar o código abixo ACIMA do tchan tcha tchan tchan ~~~~~> b:skin rsrs

.simplemenu { /* Links */
float:left; /* Posição (esquerda) */
width: 100px; /* Largura da aba */
margin-top: 2px; /* Margem em cima */
font-size: 9px;/ * Tamanho da fonte */
margin-bottom: 10px; /* Margem embaixo */
padding: 2px; /* Espaçamento entre os links e o background */
background: #D3D3D3; /* Background */
border-right: 0px solid #48D1CC; /* Borda direita */
color: #ffffff;  /* Cor da fonte */
text-align: center;/* Alinhamento do texto */
}
.simplemenu:hover { /* Links em hover */
border-right: 1px solid #48D1CC; /* Borda direita */
text-align: right; /* Alinhamento do texto */
}

Para colocar adicione num gadget de HTML/ JavaScript o seguinte code:

Clique aqui a veja o code

That's it people! Gostaram? Eu recomendo usar para marcadores, fica muito fofo *-* Kiss&Kiss

Efeito nas imagens do post

Oii gente, esse post vai ensiná-los a personalizar as imagens do post, é rápido e fácil :)

O efeito é assim:

As instruções estão no código, mas qualquer coisa, é só perguntar, ok?

Dêem um look:

.post img {
-webkit-border-radius: 25px; /* bordas arredondadadas */
-moz-border-radius: 25px;/* bordas arredondadadas */
border-radius: 25px; /* bordas arredondadadas */
opacity: 0.8; /* Opacidade */
-webkit-transition-duration: 1.20s; /* duração da transição */
}
.post img:hover {
opacity: 1.0; /* Opacidade */
-webkit-border-radius: 25px; /* bordas arredondadadas */
-webkit-border-top-left-radius: 0; /* borda da ponta de cima esquerda quadrada */
-moz-border-radius: 25px; /* bordas arredondadadas */
-moz-border-radius-topleft: 0; /* borda da ponta de cima esquerda quadrada */
border-radius: 25px; /* bordas arredondadadas */
border-top-left-radius: 0; /* borda da ponta de cima esquerda quadrada */
-webkit-transition-duration: 1.20s; /* duração da transição */
}

Queridos ,esqueci de falar mas coloque o código acima de b:skin e só se aplica as imagens do post, se quiser que funcione na sidebar também substitua "post"  no código por "main"

Os efeitos são opacidade e a ponta de cima esquerda fica quadrada como na imagem. Porque três bordas arredondadas?? Bom existem tres tipo de arredondamendo de bordas: o CSS3, WebKit e Gecko, para funcionar nos três navegadores mais usados: Google Chrome, Mozilla Firefox e Internet Explorer, isso é difícil, eu sei, se achar muito grande o código, pode apagar todas as bordas arredondadas que não possuem a palavra "webkit" para funcionar a transição, quer mudar o efeito e não sabe como? Comenta. Gostou? Comenta. Usou? Comenta -e credita-. Gosta do blog? Comenta rsrs Obrigadaa

Beijos

Estilo no gadget de afiliados

Colorido e gostoso, tem coisa melhor?

          Hola pessoas deste mundo, tudo de boa? kk' Eu estava planejando um novo layout, só que vocês sabem né, eu chamo, chamo a inspiração e ela nem responde... :( Então resolvi postar um tutorial muito fofo!

Efeito nas imagens de afiliados!! ~hula,hula~

GO GO GO

Você colocará o seguinte código acima do nosso querido b:skin hihi

.sweetcherryaf {
-moz-border-radius: 50px; /* bordas arredondadas */
-webkit-border-radius: 50px; /* bordas arredondadas */
border-radius: 50px; /* bordas arredondadas */
transition-duration: 50s; /*duração da transição */
-moz-transition-duration: 50s; /*duração da transição */
-webkit-transition-duration: 50s; /*duração da transição */
-webkit-transition: all 1.0s ease-out;
-webkit-transform: rotate(-360deg); /* quanto gira, aqui está volta completa */
}
.sweetcherryaf:hover {
transition-duration: 50s; /*duração da transição */
-moz-transition-duration: 50s; /*duração da transição */
-webkit-transition-duration: 50s; /*duração da transição */
}

A imagem gira com o mouse em cima,só, se tiver mais conhecimento HTMLístico pode adiconar itens, como opacidade ou outros, se não tiver mais conhecimento, confira outros tutoriais do blog e veja se acha o que quer, se não achar fale nos comentários que eu te ajudo. Se achar também fale, na verdade comente por qualquer coisa, me deixa feliz!

Gentee desculpa se ja tiver lido esse post esqueci de uma parte: Para funcionar para cada imagem adicione o seguinte código em um gadget de HTML/JavaScript:

Vá para o código clicando aqui (coloquei nesse link por causa de um problema no blog)

Eu vi uma frase no blog do Jeff Bolton (clique aqui) que me inspirei e vou deixar pra vocês:

Então... fácil não é? Mas pra quem criou não é nem um pouco, e sim bastante complicado, mas pra quem vai usar, é uma moleza. Então já sabem, se for usar ou repassar, CREDITE.- Jeff Bolton

Bejitos!!

Como desenhar no Inkscape

Hoyy marshmallows coloridos, tudo bem? Linda essa foto, não? Bom o tutorial e hoje é ensinando e desenhar no Inkscape, mais especificamente um cupcake, que é o que eu acho que usa mais as ferramentas e tal, daí você consegue saber sobre elas, chega de explicações e vamos ao tutorial:

Personalizando os comentários

Hey biscoitinhos de água e sal! Como está ai? Instalando muitas fontes? Ouvindo muita músicas? E no seu blog, os comentários tão aumentando? Tenho certeza! Mas nada melhor que um tutorial para personalizar comments né? (Ah.. claro que tem coisa melhor, mas enfim...) Vou ensina-las a deixar os comments semelhantes aos meus! ~~dance dance~~

Como instalar fontes

Gentee, eu garanto: é muito fácil!

Boom: a maioria dos arquivos de fontes vem em pastas compactadas (com aquele ziperzinho na pasta ou com formato de livrinhos um em cima do outro.) para descompacta-las, você clica com o botão direito em cima do arquivo e seleciona "Extrair para nomedapasta/" depois de pronto aparecerá uma pasta normal, você clica duas vezes na pasta e vê vários, ou um só, arquivos .ttf (what?) isso:

Clique duas vezes nele para visualizar a fonte, visualizou? Gostou? Hora de instalar!!!!

Windows XP:

Clique como o botão direito do mouse, selecione copiar, agora vá em Iniciar > Painel de Controle > Fontes e como o botão direito colar. Pronto sua(s) fonte(s) está(ão) instalada(s)

Windows Vista ou superior:

Logo do Vista

Para instalar no vista, clique sobre o arquivo com o botão direito do mouse (pode selecionar vários arquivos) e selecione "Instalar" e pronto.

Bjsss

Próximo post: Músicas!

Personalizando "Leia Mais" (com uma pitada de fofura..e efeito hover)

Agora vcs pensam : deixe-me adivinhar: efeito hover?
Eu respondo: Hmm.. talvez \o/

Hi meus cogumelos recheados com geleia! Como prometido, vou trazer um tutorial muito divertido, pu melhor.. fantastic. É  de personalizar o leia mais. Mas com uma pitada de fofura e efeito hover!  Vai ficar desse jeito aqui: Clica!!

Como sempre, vamos no Design > Editar HTML > Ctrl+F (ou  na nova interface: Modelo >; Editar HTML > Prosseguir >; Ctrl+F) E procure por: b:skin 

Quando achar coloque acima o seguinte código:

.jump-link{
background-color: #ff6464; /* cor do fundo */
padding-left: 2px; /* espaçamento esquerda */
padding-right: 2px; /* espaçamento direita */
padding-bottom: 5px; /* espaçamento embaixo */
padding-top: 5px; /* espaçamento emcima */
font-size: 10pt; /* tamanho da fonte */
color: #000000; /* cor da fonte */
text-align: center; /* alinhamento do texto */
width: 80px; /* largura do fundo */
opacity: 0.7; /* opacidade */
-webkit-transition-duration: 1.00s; /* duração da volta do hover */float: left; /* left (esquerdo) ou right (direito) */ }.jump-link:hover{background-color: #ff6464; /* cor do fundo com o mouse em cima */
padding-left: 2px; /* espaçamento esquerda */
padding-right: 2px; /* espaçamento direita */
padding-bottom: 5px; /* espaçamento embaixo */
padding-top: 5px; /* espaçamento em cima */
color: #000000; /* cor da fonte */
width: 100px; ?largura do fundo com  o mouse em cima */
opacity: 1.0; /* opacidade */
-webkit-transition-duration: 1.00s; /* duração do hover */
text-decoration: none; /* sem sublinhado, negrito, itálico ou tachado */
}

As instruções estão no código, lembrando que a largura do fundo depende do tamanho do seu texto.
Ex: Se for " Para mais informações,clique aqui" você coloca a largura para que dê o texto inteiro, se for "Leia Mais" vau ser ,obviamente, menor né?

Então fofinhos, acho que posto amanhã, senão, só sexta, o que vocês acham de Brushes, a IIII parte de ilustrações e mais do Pusheen pode ser?? Quem quiser comenta, quero ver pelo menos mais de 5 comentários ai!!!

Beijõesss

Bases no PhotoFiltre

Hoyy tortillas de morango!!! Faz tempo que não posto né? E o Carnaval, foi bem? Curtiram, sentiram a maluquice do momento? *-* Enfim..., esse post já tava meio pronto, foi  praticamente só postar galera! So... Vamo lá ~~~>;

 Vai ser bem fácil, não se preocupem, para quem não sabe, bases são...hum...pedaços de uma imagem em formas (quê?). Eu vou dar algumas pra vocês, assim entenderão melhor, certo?

First~~> Click in Continue Lendo..

Titulo da sidebar com efeito hover

Final de enquete só quando tiver 10 comentários hein! Vou demorara pra fazer o lay free então não esperem e continuem entrando porque agora que comecei a entender HTML, vou postar muitosss tutoriais!!

Hoy fones de chocolate!!!Queria pedir para votarem na enquete abaixo sobre o lay free:

Mas não é só isso, vou disponibilzar um código HTML para titulos de gagets, deixa-los com efeito hover, cara eu amo efeito hover!!, enfim o.0 Vamos lá!!

Esse é o como vai ficar, no meu blog de teste dá para ver [www] Primeiro vá em Design > Editar HTML> Ctrl+F e procure por:

]]></b:skin>

Acima dele coloque o seguinte código:

/*---Código por Cherry Sweet-Não retire os créditos---*/
.sidebar h2 {
background: #f5f5f5; /* background */
-moz-border-radius: 0 20px; /* bordas arredondadas */
-webkit-border-radius: 0 20px; /* bordas arredondadas */
border-radius: 0 20px; /* bordas arredondadas */
font-size: 15px; /* Tamanho da fonte */
color: #9C9C9C; /* Cor da fonte */
text-align: center; /* alinhamento do texto */
-webkit-transition-duration: 1.80s; /* velocidade da transição */
}
.sidebar h2:hover {
background: #f5f5f5; /* background em hover */
-moz-border-radius:20px 0; /* bordas arredondadas em hover */
-webkit-border-radius:20px 0; /* bordas arredondadas em hover */
border-radius:20px 0; /* bordas arredondadas em hover */
font-size: 15px; /* Tamanho da fonte em hover */
color: #9C9C9C; /* Cor da fonte em hover */
text-align: center; /* alinhamento do texto em hover */
}
/*---Código por Cherry Sweet-Não retire os créditos---*/

As instruções estão todas no código,para mudar qualquer coisa Ok?? Se tiver alguma dúvida, comente e se não tiver...humm...Comente também! Ficarei muito feliz em responder! Kisses!

Ps: não esqueçam de votar, a opinião de vocês vale muito!

Menu hover

Hoyy meus cafés com leite e biscoito!!  Dia bom?? Hoje ensinarei a colocar um menu hover -horizontal-

Para coloca-lo no blog, vá em design>editar HTML> pesquise por:

]]></b:skin>

Coloque o seginte código acima dele:

.menucherrysweet {
background-color: #E6E6FA; /* cor do fundo */
float: left;
color: #000000; /* cor da fonte */
width: 100px; /* largura do menu */
font-size: 12pt; /* tamanho da fonte */
text-align: center;
margin: 3px;
line-height:25px;
font-variant: small-caps;
margin-bottom: 1px;
-moz-border-radius: 20px; /* bordas arredondadas */
-webkit-border-radius: 20px; /* bordas arredondadas */
border-radius: 20px; /* bordas arredondadas */
-webkit-transition-duration: 1.80s;
}

.menucherrysweet:hover {
background-color: #FFE4E1; /* cor do fundo */
color: #000000; /* cor da fonte */
float: left;
-moz-border-radius: 20px; /* bordas arredondadas */
-webkit-border-radius: 20px; /* bordas arredondadas */
border-radius: 20px; /* bordas arredondadas */
-webkit-transition-duration: 1.80s;
}

Salve, agora vá em Elementos da página> Adicionar um gadget> HTML/JavaScript e cole o seguinte código:

<div class="menucherrysweet"><a href="LINK">NOME</a></div>

<div class="menucherrysweet"><a href="LINK">NOME</a></div>
<div class="menucherrysweet"><a href="LINK">NOME</a></div>
<div class="menucherrysweet"><a href="LINKI">NOME</a></div>

Aqui tem quatro links, para adicionar repita de <div class ... até </div> , edite conforme indicado, beijoss!!!