Blogger From Scratch

10+ Free exelent blogger / blogspot portfolio templates you dont want to miss

2010-09-05T16:34:00.000-07:00

I really love blogger because its free and easy to use.
One of the reasons I started to use it because I wanted to make my own Portfolio.
Blogging platform might not be the greatest management system to showcase your works, because if you are creative with lots of hobie's and interests in different kind of art and design aspects. There is quite hard to implement simple and good looking sorting by categories.
Of course there is some other great CMS platforms, but than you have to stick with a hosting companies and than it wont be free website and also there is always some kind a server problems which google almost hasn't.
Most of the templates here are converted from Wordpress and other platforms.

1.Viewport DEMO DOWNLOAD

A minimalistic portfolio theme. It has a nice and clean design with jquery slider plugin. Originally created for Wordpress and converted to Blogger.

2.Work-a-holic DEMO DOWNLOAD

One of the top 100 rated wordpress themes in Smashing Magazine on 2010 now for blogger users.

3. Webfolio DEMO DOWNLOAD

This template has a classic portfolio layout for wordpress themes and now it is converted for blogspot users.

4. Sound Box DEMO DOWNLOAD

It may be need a little redesign work but it is easy to navigate, simple and compact theme. Originally created ass CSS theme.

5.Revolution Black Canvas DEMO DOWNLOAD

6.Gallery DEMO DOWNLOAD

This theme has earned great popularity in graphic and web designer society. I has a great jquery thumnbail hovering effect. Its easy to use, just upload template and pics and you are ready for showcasing work.

7. Linquist DEMO DOWNLOAD

Asketic looking template whith classic blog layout and big pictures. Nothing too much but its doing his job great with shic.

8. Sketchbook DEMO DOWNLOAD

9. Simplex Photo Gallery DEMO DOWNLOAD

10.Simplex Portfolio DEMO DOWNLOAD

Photographers gallery theme.

11. Mashup DEMO DOWNLOAD

Another wordpress coverted theme. The coolest thing that it has a none-distortion thumbnails. Useful theme for web and graphic designers.

Maybe I've missed something? Your thoughts and comments are welcomed.

Site color schemes for designers

2010-07-27T11:57:00.000-07:00

Sometimes when you pick a new template or creating your own it needs adjusting. And the fastest and easiest way to make template unique is to change the colors. For picking up few colors you ca use

Color scheme designer

or another great place is

Colour lovers PhotoCopa allows you to upload a photo and extract colors and than create stunishing color schemes for your design work. Flickr is all you need - just make a search with keywords, for example, for travel agency search for a around the world an there you go.

Photographs usually contains a lot of colors, but if you extract colors from photography with only blue skies it might need a little tweaking to get a appropriate color palette. Don't be afraid to experiment.

For me as a Interior designer it is really powerful tool for getting color pallets.
Colour lovers is also great place for creating patterns - go on and try it all out.

Feel free to leave comment if you like article above , have any questions or just say Hi! :)

CSS3 image hover box-shadow effect Blogger

2010-07-24T14:44:00.000-07:00

One of the coolest CSS3 features is box-shadow effect. Its a new way of displaying shadows simply by editing style sheets. This effect is almost easy to achieve in Photoshop as well in the CSS.

You can open your blogs code in notepad++ and these few lines of code or implement it directly to the blogger dashboard.

At the first i was thinking that it is Jquery trick when i saw a foliogrid template (awesome).

I was looking for a blogger hack, but couldn't find it,so i decided to write it by myself.

Now go to Design>Edit Html tab in blogger dashboard and make sure you backup your template first.

Now find .post img (it may differ in templates) and just after this code add following lines:

padding: 5px;
border: solid 1px #EFEFEF;

it wil add a border around the image.
and after .post img ending (styles usually ends with: } ):

.imgshadow .post img:hover {
border: solid 1px #CCC;
-moz-box-shadow: 1px 1px 5px #999;
-webkit-box-shadow: 1px 1px 5px #999;
box-shadow: 1px 1px 5px #999;
}

Now you can save your template and look at your results.

If you are willing to use this effect only sometimes than go to the Design > Edit Html tab and backup your template first.
Now find ]]> and just before/above add the following piece of code:

.imgshadow {
padding: 5px;
border: solid 1px #EFEFEF;
}
imgshadow:hover {
border: solid 1px #CCC;
-moz-box-shadow: 1px 1px 5px #999;
-webkit-box-shadow: 1px 1px 5px #999;
box-shadow: 1px 1px 5px #999;
}

And every time when you want to use it go to text editor Edit HTML tab and ad a class attribute just like in the example below:

class="imgshadow" href=""><img src="target URL Here" width="100px" height="100px" border="0px" />

You can see working example of the image and pull-quotes when hovering in:

DEMO

Note. This CSS3 effect is supported by FireFox, Chrome and Safari, but i have added few lines that it makes possible to see another effect if your visitor is using IE. But you can add a nice plugin from freethefoxes in your page code so that make sure that this hack and other is seen by every visitor.

There is also nice button maker at dryicons

Thanks for reading. I hope you find this article useful. You can ask any questions in comment form.

How to upload html files to blogger?

2010-04-28T14:19:00.001-07:00

Sometimes google asks to upload html files to your website so that it will verify/validate site ownership etc. but how if we have no acces to the servers where page is hosted? Actualy its quite simple..
Now that we have pages in blogger it is more than easy you just have to open up html file in notepad or copy html content from google and paste it in to blogger page, name it and save it.
Now you can go back to the google and verify your site. Its Done.

Free premium blogger / blogspot templates

2010-02-23T12:28:00.000-08:00

View / Download

A cheats' guide to customising Blogger templates

2010-02-22T11:32:00.001-08:00

http://www.bloggerbuster.com/2008/01/cheats-guide-to-customising-blogger.html

How to move a widget from a place to another in the html code of your template

2010-02-22T08:38:00.001-08:00

http://www.bloggermastering.com/2010/02/how-to-move-widget-from-place-to.html

Psycho - Free Blogger Theme Generator

2010-02-22T08:10:00.000-08:00

http://www.bloggertricks.in/2010/01/psycho-free-blogger-theme-generator.html?gclid=CPbQsJCqhqACFQu7ZwodU2bSIw

Ultimate list of Blogger resources

2010-02-22T08:06:00.001-08:00

http://www.bloggerthemes.net/2009/05/ultimate-list-of-blogger-resources.html

PSD TO BLOGGER

2010-02-22T07:49:00.001-08:00

http://www.chethstudios.net/2009/07/quality-free-blogger-templates-psd.html

Resources

2010-02-21T14:18:00.000-08:00

http://www.devlounge.net/design/getting-started-designing-blogger-templates

http://bradblogging.com/blog-design/how-to-create-your-own-blogger-template-theme/

http://design-notes.info/tutorial/blogger-theme-tutorials/

http://bloglates.blogspot.com/2008/10/design-blogger-template-from-scratch_12.html

http://www.bloggertuts.com/2009/10/blogger-columns-tutorial.html

http://www.bloggertuts.com/2009/10/blogger-templates-cheat-sheet-1.html