how to add a border around objects embedded into blog posts (such as a google map or a youtube / vimeo video)

If the images on your blog have borders you may wish to have them around other visual material as well, so as to achieve design consistency. Google maps are one such bothersome element, I think. In order to place a border around a google map, look for the embedded code in your post and add what is highlighted in black:

<iframe style="border:Xpx solid #yourhexcode" frameborder="0" width="X" height="X" marginheight="0" marginwidth="0" scrolling="no" src="yourmapurl" width="X"></iframe>



And just tried the same snippet, placed in exactly the same location on a youtube video. Yayy! Same exact result!

<iframe style="border:8px solid #111111" width="500" height="410" src="hhttp://www.youtube.com/embed/rHZUPJji6w8" frameborder="0" allowfullscreen></iframe>



And vimeo too! With this one, although the aspect ratio is the same (3 x 4) as the youtube video, I had to tweak the overall box size a bit since the player configuration seems to be slightly different. But no biggie, done in a second!

<iframe style="border:8px solid #111111" src="http://player.vimeo.com/video/3699840?title=0&amp;byline=0&amp;portrait=0" width="500" height="380" frameborder="0"></iframe>

(Note: One thing to bear in mind is that if you want a border do not forget to size the embedded output accordingly. As an example, the post width on this site is 515 pixels, however I set the video files at 500 pixels in order to accommodate the 8 pixel border around them).

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

blogspot stuff: adding a background color to the date header of the awesome.inc template

Find this code in the HTML editor (widgets expanded, of course):
.main-inner .widget h2.date-header span {
  font: $(date.font);
  display: block;
  padding: .5em 15px;
  border-left: $(date.border.size) solid $(date.border.color);
  border-right: $(date.border.size) solid $(date.border.color);
}

Then replace that one with this one:
.main-inner .widget h2.date-header span {
  font: $(date.font);
  padding: 1px;
  margin-left: 14px;
  border-left: $(date.border.size) solid $(date.border.color);
  border-right: $(date.border.size) solid $(date.border.color);
  background: #yourhexcode
}

As you can see I have removed one line and also changed the padding. I also added a left margin in order to align stuff, your values may again be quite different than these. These are things that looked good with my particular design, you may want to go with other values or even keep the block display altogether, in which case the colored area will stretch across the width of the post as a bar.

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

behance professional portfolio site


Just received this as a behance notification and it does seem worth sharing:

Admittedly, the price for this (11USD per month) is rather on the steep side, considering that you could get a fully hosted site for about half the price at places like Bluehost, or indeed that with a bit of ingenuity you could very easily set up a similar site right here on blogspot for free.

However, on the upside, you do get the considerable professional design expertise of the behance team in the shape of some beautiful and fully customizable templates, which could save a lot of time. And, probably most importantly, given that behance is one of the highest regarded design portals online my guess would be that having a site hosted by them would be likely to get you exposure you might not get all too easily through a standalone site.

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

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;

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

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.

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