Showoff - Free Blogger Template



This is Showoff. It's a very modern and dark looking template for Blogger. It was designed to be used as a portfolio for webdesigners, photographers, or everyone who would like to show off their work on a blog.

It features a serious dark background, with very cool contrasting and stylish yellow titles. Also a custom box for adding any message you want to present your blog. A cool menu is on the pack, very easy to customize. You'll get block quotes, lists and commments blocks customized as well!

If you have any questions or problems with that template, please drop me a comment, or use the contact section.


91 comments:

Post a Comment
Daniel Freire Brooks

i'll show to my grandma! http://zeliafreire.blogspot.com/
go big or go to spain

shraqs

This template really cool. Thanks

Dante Araújo

@shraqs you're welcome!

30nerds

Thanks for this great template!

I´m using it on my Blog.

http://30nerds.blogspot.com/

30nerds

Love it!

Using it!

http://30nerds.blogspot.com/

Dante Araújo

You're Welcome guys!

Deepak Amin

hi, dis is really attractive one. pls tel me how to remove the sentence and put my own links? thanks

Dante Araújo

Editing the sentence:

Blogger Dashboard > Layout > HTML > Search for (CTRL + F) "div id='message'" > Edit the paragraph tag below this line.

Editing the links:


Blogger Dashboard > Layout > HTML > Search for (CTRL + F) "div id='menu'" > Edit the link tags below this line.

These should be easy for you, but if you still have any problems, don't hesitate to ask here again.

Bela

Nice template. I did edit it a bit and use it on my blog...hope you don't mind. I didn't remove the link to your site on the bottom though, but I added a bit of text.

Really nice theme. If you want to see what I changed go to:
http://uselessgraphix.blogspot.com/

Thanks again,
Bela

Dante Araújo

Hey I saw your work and i think you are a great artist. Your version is very nice and unique, i liked the way you showed post images though.

Thanks for respecting my work by keeping the links at the bottom. Unfortunately there are people that just dont.

uselessgraphix

Unfortunately some people like to claim others' work as their own. You give them an easily editable template and save them a lot of time and in return they delete that single row which wouldn't bother anyone, but hey...that's just how some people are.

I am not ashamed that I don't have the skill to create a template from scratch. Plus I always respected creativity and your template is the best and it fits my needs perfectly. Even though I would still like to change a few things, I don't know how to do it so I will leave it like this for now...

Keep up the good work,
Bela

Dante Araújo

I completely agree with you. I think people should have more respect. I mean they get everything here for free... And a little row will not bother anyone.

Hey please let me know if you have any question or need any help customizing the things you want to change, I can help you ok?

And Thanks for the feedback !

Bela

I got together a quick edit on how I'd like the template to look. Here it is:

http://i642.photobucket.com/albums/uu147/bedobela/template.jpg

I can send you my current xml file if you need it and if you have some time to edit the template to fit my needs that would be great. It shouldn't be too hard for you since you created it buy I don't have an idea how to do it :)

Dante Araújo

I am sure that I could do it, but the problem is that i am doing a lot of tests and have a lot of work to do from college (as you guys can see I haven't posted new templates in a while, but i will be back, don't worry) so that is running me out of time.

I would recommend you to google specific tutorials for each little edit you need (Like "How to customize blogger blockquotes") and do them until you get the result you want. I can give you some little hints, but unfortunately i can't do it for you in the momment.

Bela

Not a problem. I know how it is...I'm going to college and working at the same time too. Thanks for the template anyway.

Dante Araújo

Ok :) Thanks! Keep in touch and feel free to ask me if you need any help or have any questions ok ?! and remember: im taking a brake to study here guys, New awesome projects to come...!

Scott

Hi I love this template but was wondering how to change the colours?

I won't remove any of the credits but would like to adapt more for my blog.

thanks

Dante Araújo

I am sorry but i work on my templates to make them unique and this one is meant to be like it is. The only option i can give you is to download "showoff light" that is a version of this template but with brighter colors!

Desi Adda

nice template how do i download it?
plz visit my blog
http://funzone11.blogspot.com/

Dante Araújo

Just click the "Download Post" link hehe, I thought that was easy enough, but as I can see, it isn't yet.

robbie dee

dante, love the template and am employing it on my blog! quick question though (and i think it may be a good idea going forward)- is there a way to put twitter updates in the "message" area (i.e. where you have the "This is a nice opportunity..." statement)? i was thinking of doing something like that, tried to play around with it, but it wasn't working out. any ideas? thanks for all of your hard work!

Hannah Sanel

Thanks!
http://iinnssoommnniiaa.blogspot.com/

Dante Araújo

@robbie dee

It's completely possible to show twitter updates in your message section. I will make a tutorial teaching how to do that. I'll post it as soon as I make it, ok? That's a great idea by the way.

@insomnia Hey You're very welcome !

By the way, Thanks for the "Gracias por el diseño, Dante." I aprecciate it!

robbie dee

@dante thanks for taking that into consideration! i'm looking forward to you sharing your knowledge.

Dante Araújo

Hi Robbie,

I am getting some problems doing the tutorial. It's already done as you can see in the live preview of this template. I will post it as soon as i solve the problems. ;)

Hannah Sanel

Gracias por el diseño, Dante
; )

Dante Araújo

Hehe you're welcome!

Dante Araújo

Hey Begynder Thank's a lot! It's very rare somebody port a Blogger template to wordpress, What usually happens is the opposite!

I apreciate so much your kind effort to convert it, I wanted to see a live demo of it though, Can you do it ? Or send me a screenshot ? I would love it hehe.

Thanks again, I am very glad my users are liking my work and doing things like this.

Regards,

Dante

Anonymous

hi dante, live-demo is found at http://wpport.com you will find showoff, its a sticky post. I'm currently working on the light version. comments template is not yet styled properly so bear with it ok?

Dante Araújo

Oh Ok, I am having problems when I try to visit wpport.com the page doesnt load, I will try again later. Thanks a lot !

Heidi

Hi Dante,

Would u be able to demonstrate rotating the images in the post? Or maybe even rotate the whole post content. I mean drafting a blog post without editing the image. But it will appear to be rotated to a certain angle when I publish it.

Something like transform:rotate(30deg)... will this work with blogger template?

Dante Araújo

Hi Heide,

I don't think this is possible... If there a way to do that using css ? I have never seen anything like this with css only :/ Please show me an example and i will try to figure out how to do it

Regards,

Dante

Unknown

Hola, una ayuda.

how it can eliminate the hour? that it appears next to the title.

example

The modern house | 3:29 PM

Dante Araújo

Hi expanium,

Find the lines

.postdate {
float:left;
font-size:15px;
margin-left:15px;
padding-top:5px;
}

And replace this

.postdate {
float:left;
font-size:15px;
margin-left:15px;
padding-top:5px;
display:none;
}

Regards,

Dante

Unknown

Hola Dante,

Muchas gracias por el dato. Funcionó de maravillas.

Thank you very much by the data.

Regards,

Dante Araújo

You're welcome!

Jackson

Hello Dante, I love this theme,

but how do you fix the part where it says FEED RSS, Comments RSS, and Edit, and make it just links?

Dante Araújo

Hey Jackson,

Find the following line in your code:

div id="menu"

You will get a html list, each item of the list is a different link in your menu, customize them as you would like.

Regards,

Dante

davephung

Hi Dante
Sorry to be a hassle, just wondering is it possible to remove the "label" from being displayed in the posts themselves (but still have the ability to categorise using labels of course).

I have already unticked the box in
layout>page elements>blog post edit

Have i broken the html somehow?


THanks heaps

Dave

http://chroniclevisual.blogspot.com

Dante Araújo

Hey David,

No problem! You can ask me anything anytime hehe.
Of course it's possible.

Just add the following code into your template css:

.post-footer-line-2 {
display:none;
}

Regards,
Dante Araujo

davephung

u rock! thanks so much!

Fabricio Leal de Souza

Thanks Dante!

Take a look!

Fabricio
http://fabriciolealdesouza.blogspot.com

Dante Araújo

De Nada Fabricio!
Gostei muito da sua tagcloud! Legal mesmo.

Um abraço!

Fabricio Leal de Souza

Eu novamente Dante!

O título de um post ficou grande e ocupou duas linhas. As palavras ficaram grudadas; não há espaço entre elas. É possível configurar para aumentar o espaçamento?

O link é este: http://fabriciolealdesouza.blogspot.com/2009/06/usp-e-uma-miniatura-de-sp.html

Obrigado
Fabricio

Dante Araújo

Olá Fabrício!

É possível sim!

Procure pela linha ".post h3 {" no código do seu template. Observe que tem uma propriedade chamada "Line-height", este é o valor que você deverá configurar. Experimente valores para atingir o resultado desejado, eu recomendaria algo em torno de 1.9em.

Abraço!

Fabricio Leal de Souza

Funcionou perfeitamente com 1.9em.

Obrigado!

Fabricio Leal de Souza

Oi Dante
Preciso de mais uma ajuda: eu inseri um anúncio pelo Adsense com o tamanho de 728X90. Às vezes aparece ocupando perfeitamente o espaço, em outras, um pequeno pedaço não aparece. Pelo jeito o tamanho do banner do google está variando. Pergunto: é possível aumentar a largura do campo das postagens para que eu consiga inserir perfeitamente o anúncio?
Abraço

Dante Araújo

Olá Fabrício,

É possível sim, mas para isso você vai ter que aumentar a largura de outros elementos da página junto, aqui vai:

Procure por:

1 - "outer-wrapper {" e "footer {", em seguida modifique a propriedade "width" para 985px, nos dois.

2 - Agora procure por "main-wrapper {" e sua propriedade "width" deverá ser modificada para 730px, assim ela abrigara toda a largura do anúncio.

Abraço

Fabricio Leal de Souza

Obrigado mais uma vez!

Abraço!

Dante Araújo

De nada cara! Precisando só falar!

Valeu

Fabricio Leal de Souza

Dante

Dê uma olhada neste site aqui. É possível inserir esses recursos no seu template? o Blogger suporta?
http://stickmanlabs.com/lightwindow/

Dante Araújo

Cara acredito que seja possível sim! Isso utiliza java e eu teria que hostear o arquivo em algum servidor separado, mas o blogger suporta sim!

Abraço!

Fabricio Leal de Souza

Esses recursos ficariam perfeitos no seu template. Caso você tenha disponibilidade eu ficaria muito agradecido.

Abraço!

Dante Araújo

Meu sonho é poder implementar todos os recursos que ficaram perfeitos em meus templates. O problema é qua grande maiora dos usuários Blogger não possuem tanto conhecimento com o código, e até mesmo utilizam o Blogger por ser fácil e prático.

Apartir do momento que eu adiciono um recurso que requer um certo conhecimento para instalar ou até mesmo utilizar, alguns usuários (como voce) irão adorar, em contrapartida outros irão enlouquecer tentando instalar, usar, modificar, e poderão deixar de utilizar o template por causa que isso se tornará um problema.

Então eu procuro me segurar e manter a simplicadade nos templates. Sempre que aparece alguém por aqui pedindo uma ajuda em algo mais "Avançado" eu procuro ajudar até onde estou disponível aqui nos comentários, o que resolve a maioria dos casos.

Mas já aconteceu de pessoas que possuem uma gama de perguntas, pedidos, customizações que precisam fazer em seus blogs que requerem uma completa consultoria para a instalação e gestão de cada recurso. Para isso criei a seção "Premium Services" (veja botao no topo do site... a direita) em que os usuários me pagam em troca de full support e análises detalhadas e cuidadosas de cada caso individualmente.

Um Abraço!

Dante Araujo

Fabricio Leal de Souza

Ok. Farei isso.

davephung

Hi Dante
Me again =)
Just wondering is there any way to make the pictures larger than the "large" setting in the blog post?

Also, is it possible to change the text "older posts" and "newer posts"?

Thanks so much again!
Dave

chroniclevisual.blogspot.com

Fabricio Leal de Souza

Dante

Aquele espaço entre aspas, abaixo do título, aceita apenas texto ou é possível inserir outra coisa?

Dante Araújo

@david phung,

It can be done if you add images to your posts using HTML tags like "img src='...", so the image will be the size you want instead of the size that blogger wants.

And to change the "Older Posts" and "Newer Posts" message please go to your blogger code, click "expand widgets" then search for "data:newerPageTitle/" and replace this for the message you want for "Newer Posts". Now sarch for "data:olderPageTitle/" and do the same.

@Fabricio

Aquilo ali é uma div normal e pode abrigar qualquer coisa, no exemplo acima (live demo) eu utilizer para mostar minhas atualizacoes do twitter.

Fabricio Leal de Souza

Eu mudei as informações nesse campo, apenas não consegui deixar alinhado, abaixo do título. As informações ficaram ao lado do título.

Outra coisa: eu queria inserir nos posts a opção de expandir a mensagem. Encontrei um código e coloquei em modelo de postagem. O resumo aparece, junto com o link. Mas quando clico no link não abre o restante. Errei ou é algo do template? Tentei enviar aqui o código, mas este campo não aceita.

Dante Araújo

Fabricio,

Para que fique abaixo do título do blog procure por:

"#message {"

e deixe o bloco de propriedades assim:

#message {
clear:both;
float:left;
padding:0;
}

Mande o código por email que te ajudarei a implementar o recurso de resumos.

davephung

Hi Dante, me again. Apologies for my lack of html knowledge.
How exactly is this "img src=" tag used?

Thanks
David

Dante Araújo

Hey David, Please check this link and get more information about the use of this html tag: http://www.w3schools.com/tags/tag_IMG.asp

Regards,

Dante

bint battuta

Thank you so much for this design; it was just what I was looking for. I have used for my blog and am very happy.

http://bellapaisienne.blogspot.com/

But for some reason there are no links for individual posts. Do you know what I can do?

Dante Araújo

Hi bint,

Are you sure that you are writing the post title in the right place when you make a news post ?

Regards,

Dante

bint battuta

My posts don't have titles - and I haven't written a new post since uploading this template. Everything else has worked fine; just for some reason these post links for existing posts are not there.

Dante Araújo

bint,

The link to your post in this template will be exactly your post title, It holds the permalink to each of its posts.

Regards,

Dante

bint battuta

Aha, that explains it!
Thank you for your help. I will put numbers in the post titles to solve the problem. By the way, is there a way of removing the date from the title?

Dante Araújo

Hehe that's ok.

To remove the date header just add the following lines to your code:

h2.date-header {
display:none;
}

bint battuta

I wrote date and I meant time :)
The time in the post title - any way to remove it?
Sorry, one question after another!

Dante Araújo

No problem, I am here to help my users :]

To remove the time from the post title add the following line to your code:

.postdate {
display:none;
}

bint battuta

Thank you so much!

Cara and Jared

Hi! I love your Showoff!

I am very very new to this and I have no previous experience doing this. I am trying to put an RSS feed from my blog to my personal website. Do you have any clue how to do this?

Dante Araújo

Hey Cara,

Please send me urls of your blog and your personal websites, and explain to me better what exactly and where exactly you want to include the RSS feed, I will help you doing it, don't worry!

Regards,

Dante

Anonymous

sorry.. got situation.. cnt dwnload da whole theme..

Dante Araújo

Hello,

I just checked the download link and it's working fine. Please try the download again.

mrchrishill

I never saw your tutorial on adding the twitter feed to the message. Do you mind sharing how to do this with me?

Dante Araújo

@Chilly, It's easy.

Just go to http://twitter.com/badges

Click "Other", get a HTML widget, grab the code, and past it inside the "message" div.

You're Done :)

eugeniaclara

Hello Dante!
thaaaaaaaaaankyou very much for sharing "showoff"
i love it.
P.S : I used it on my blog, thank you thank you thank youuu!

atiqahamin.

hello. can I change the background colour? how?

Glenn Danzig

Thanks Dante, you rock!!!

http://hmpress.blogspot.com/

vertigoblack

http://vertigoblack-tumbleweeds.blogspot.com/

i designed something for the background, looks good at 1920x1080 but I'm not sure how it would look on different screens anyhow. grr Html can be so troublesome.

Thanks lots for this template, its uber awesome!! Code is well structured and most parts easy to figure out even for a noob like me.

Azmi Ali

great template. how to edit this "This is a nice opportunity for you to show off your work using this amazing, clean and minimalistic template for blogger!". i know nothing about html :). please help

Ligaya

Hi, how can I add a statement next to the blog title? Where it says 'portfolio...' in the demo. Thanks. :)

Unusually Fine

hi there,

i'm using showoff and it's great but nobody can leave comments for some reason. know of any way to fix that issue?

thanks!
margaret

umbodid

Hey hey

Great template but can I add meta tags?

SPLEEN ABDUL-JABBBBAR

thanks.

www.beatthebrakesoffyoass.blogspot.com

my problem is how to make the search engine better...and hot to catergorize posts.

Unknown

hi dante,
i used your template for my blog, and i just wondering how to give a link to "portfolio", "contact" and "menu" button

thx a lot

Pi

really great template!
but how can I do the same of you in post title?
like
Title | Sunday, May 03, 2009

I wanna the date before the | too!
thank you

Vikranth

Thanks man Used it on my blog:http://goo.gl/AePqB

Unknown

really simply cool template

Shake

Hello! I used your template showoff and I modified it, but by modifying it, I can't make the footer appear with your copyright at the end of page. It appears to be in the middle of a message, or not at all, as is the case.
Do you have a solution?
The address of my blog is:
http://lfn-rebirth.blogspot.com/
Thank you for your help!
Nat (your "contact page" seams not working (404 error)

Post a Comment

Grab the feed for followup comments!