5.06.2011

semi-transparent and/or image background for all posts in blogspot

This is a step by step tutorial for creating a transparent/image background for the entire main posts section.

1- Creating a transparent .png:
Create a new photoshop (or whichever program you are using) file with 16x16 or 32x32 size, 72 resolution and tranparent background. Fill it with the color you wish to use, then change the opacity of the layer to a desired amount (a value between 70 to 90 is optimal). Save it for Web & Devices, making sure you have png24 and transparency selected. Now, upload it to somewhere (picasa etc.), so that you can have an url of the image which we will need later.

2- Template Designer:
Navigate to your blogger account's template designer tab. Select Advanced, here depending on your blogger template you will either have "Post Background" or "Background", first look for Post Background if you don't have it, select the other one.

For people with Post Background
From the color picker of Background Color, put a tick to transparent. If you don't want borders, do the same for Border Color.

For people with Background
From the color picker of Main Background, put a tick to transparent.

Finally apply to blog.
3- Edit HTML
Under the Edit HTML tab, look for this piece of code,

For people with Post Background in the previous step,
find,
.date-outer {
in it there is a line like this,
background-color: $(post.background.color);
replace it with this line changing the "image_url" with the actual url of your image
background: url(image_url) repeat;

For people with Background in the previous step,
find,
$(content.background.color.selector) {
in it there is a line like this,
background-color: $(content.background.color);
replace it with the following changing the "image_url" with the actual url of your image
background: url(image_url) repeat;

.................................................................................................................................

5.05.2011

how to get google to be totally in love with you... ;-)

What we were talking about just before the class broke up today, made into a little blog post for you:

1) Good, focused, (and if at all possible) original content. This is the one and only and penultimate thing that counts! Without good content, forget it, it just won't happen. What you have on your site simply has to be of interest to others - either specialist groups or general entertainment, but it has to be really good stuff! And my general hunch with this is that specialty sites are far more likely targets to get hits, since there is bound to be more search engine activity related to a specific topic, than there will be to general chit chat.

2) A large site will have more material for the search engine to find. Very simple logic really. If you have 100 posts it is far more likely that you wrote about something that somebody out there is searching for than if you have only 10. The larger the easypeasy site gets the more search engine results we get, no doubt about it. When we had only 10 posts, we had none. Nowadays with over 100 posts under our belts we have at least 5 or 6 a day and very often many more, sometimes as many as 20 even...

3) Make sure your site is structured well in terms of navigation. Even the best content in the world is useless if folk have to work too hard to get to it, they will simply not bother and leave and never come back. And needless to say, forget about them recommending it to anyone else... Read Selim's excellent post on navigation to get more insight on the matter here >>>

4) Post often and consistently. In other words, not silence for a whole month and then 10 posts all at once, but more like 3 posts a week, and every week. Remember that you can also write a whole batch and then pre-date them. I am not exactly sure how or why this makes a difference but a site which is consistently active seems to draw more traffic, a thing which I can tell very easily from the site stats of my own blogs. 

5) Make sure your meta tags are in perfect order. More on this here >>>

6) Make sure your post title comes before your blog title. More on this here >>>

7) Make sure you have a lot of links to other sites, either inside the posts or as sidebar elements: Your courtesy to others is likely to generate courtesy in return by them linking back to you - after all, this is how the internet works...

8) Use social networks efficiently. Tweet your blog and also post it on facebook, linkedin etc. Also if your site's content is at all relevant, start creative network accounts such as on youtube, Flickr, deviantart, vimeo etc. Use the groups within these domains to put out videos and photos and link these back to your site. 

9) Finally, be patient! It will take some time for people to find you - anything up to 6 months to even a year, depending on how fast your site is growing and on how good your content is. Usually you will hit the really big visitor numbers only after one of the major portals or blogs, one that covers the same area of interest on which you are focused, spots you and blogs you. This will take time. Just keep on posting and once you have enough good stuff it will happen - count on it.

.................................................................................................................................

embedding a flipbook into a blog with issuu


Last time I looked into this (which was a few months ago) it still wasn't possible to do so but I just found out that you can now embed flipbooks which you create with issuu into other domains! Gave it a try just now and as you can see above it works beautifully!

So, all you need to do is create a free account with issuu, make your flipbook by following the instructions on the site which involve combining the images of your left/right pages into a pdf which you then upload into your issuu library. Once the book has been crunched by the system it will be published, at which point you will find the embed icon (looks like this < >) under the thumbnail of the book. Make sure you have all the correct things checked on the menu which appears when you click on the tags (such as having the double page view as default!), then copy and paste everything into the HTML tab of the post editor and you are done! You can also change the height and width of whatever appears on your blog by playing with the values inside the embed code. If you do so remember to use a calculator so that the aspect ratio remains correct.

 Tip:  When you publish this there will be several text links which appear under the small flipbook on your site. If (like me) you do not want these text links simply delete the bottom part of the code, which will look something like this:
<div style="text-align: left; width: 420px;">
<a href="http://issuu.com/elifayiter/docs/ctrl_xyv?mode=embed&amp;viewMode=presentation&amp;layout=http%3A%2F%2Fskin.issuu.com%2Fv%2Flight%2Flayout.xml&amp;showFlipBtn=true" target="_blank">Open publication</a> - Free <a href="http://issuu.com/" target="_blank">publishing</a> - <a href="http://issuu.com/search?q=computer" target="_blank">More computer</a></div>

.................................................................................................................................

5.03.2011

navigate in style or fail miserably

Good navigation is the most important aspect of a well designed website. If the visitor is not presented with a clear navigation, it won't matter how well your site is designed, it is highly likely that they will leave your page in a matter of seconds. It is a very tough challenge to create a meaningful and unambiguous yet stylish navigation that allows users to view content easily.

Some of the most important rules of a good navigation are;

1- Visibility: Make sure that your navigation is one of the first things that catches the eye. Do not make it obscure. Don't let it get hidden because of clutter or problematic placement.

2- Consistency: Make certain it has a certain style and placement that it keeps on every page.

3- Clarity: Make sure that every item in the menu is %100 understandable. No one likes to guess where the link will take them. Use either clear names, or little explanations, hover titles are a good way as well. If you are using thumbnail images as links in your menu, make sure they are clarified one way or another.

4- Creativity: Creative navigation will always make your site stand out more, just make sure you don't overdo it, sometimes simplicity is the real creativity.

5.01.2011

free flash photo galleries + free swf hosting

Just stumbled upon this:
A lot of these are freebies and some of them could look really cool on a custom designed header, or embedded into a page post as a photo gallery.

In order to be able to do this you will need to host your swf file somewhere - unless you have your own server or a remotely hosted site, that is. Here are a couple of places that seem to do the job, for free:

.................................................................................................................................

blogspot: unlocking the header widget so that you can place it in a different location

Oooops! A couple of posts ago I was talking about making a vertical header and completely forgot to mention something very important related to that: In order to move your header to a different location on the site you will have to do some sniffing around inside the HTML editor (with expanded widgets!), where you need to find this line:
<b:widget id='Header1' locked='true'
and change it to
<b:widget id='Header1' locked='false'

.................................................................................................................................

design + details: padding the widgets


Fairly self-explanatory image I would say... On the left is the default state and on the right is the one where I have tweaked padding values by placing this code in the CSS box on the Advanced Editor:

#Label1 {
padding: 24px;
padding-bottom: 8px;
}

The padding makes a huge difference as to how this looks. The strokes become much sleeker when they stop a bit short of the border, and the top and the bottom of the box is also sitting much better now that I no longer have that big space below the last line.

.................................................................................................................................

design: making a vertical header


I have been meaning to try this out for quite some time, for a number of reasons: First off, it does get kind of boring to always have horizontal headers at the top of a website: The way in which a website is constructed vertical elements such as the columns do look very good. So, why not use the vertical components of the layout for design strategies, as well as a place for info elements such as labels and link lists?

And then also, web real estate: If you have the content starting all the way at the top of the page, you will be showing considerably more at first sight - obviously.

I just made a website for an art project in which I am involved, and since the logotype of this is a square which works well when placed on a corner with the site description "dropping down" from it (so to speak), this seemed a very good opportunity to give the idea a shot.

Remember that before all else you will need to unlock the header widget! To find out how this is done read this post here >>>.

The template which I used is the one which I took from this site, except that I changed the layout and the number of columns, as well as their widths and proportions, so that the vertical header fit into the corner without looking cramped in. Needless to say the whole thing took a bit of aligning, which these days I do quite quickly by playing with the margin values, as is explained here >>>

See the result here:

.................................................................................................................................