internet_blogger this & that

- mailto url encoder & nice mailto: link

When you add a "mail to" link (e-mail pops up ready for send), you can add topic and message body and of course destinatary to this form:

http://email.about.com/library/misc/blmailto_encoder.htm

http://email.about.com/od/mailtoemaillinks/a/mailto_elements.htm

- navigation menu for blogger:

I used these nice instructions: http://www.sueblimely.com/navigation-menus-4-dessert/

- screenshots:

Freeware!

for screenshots: EasyCapture http://www.xydownload.com/easycapture/

Useful blogger design tools - part 3

How to nicely print out blog posts


It is sometimes annoying that when you print out a blog entry, the whole header and menus print with it and result in a big loss of paper which even doesn't look good. So the aim is to have a print function which prints out "clean", the single blog entry only, without header, side-bars, etc. I wanted to have a button under each post, similar to the "post blog" or "edit blog" button which are standardized in blogger. Awaiting a blogger routine, this is what I did:

Adapting a printing style-sheet

I base myself mainly on this nice article. Read also the classic article here. On the basis of this, create a separate css print style-sheet, with a few adaptations for your blog. Use wordpad to do this. (You can also refer to the print.css i made for my blog: here. Change the portions of elements to hide, if necessary, and the http address.

Now upload the css file to the web. I used googlepages.com (if you have a gmail account, you automatically have a googlepage).

Next you link to the style-sheet to your blog by inserting in the html header section:

<link rel="stylesheet" type="text/css" href="http://www.yourdomain.com/print.css" media="print" />

That's it, it should work. When you print, it should come out fine and economical. (it doesn't run perfectly smooth for mine, some longer documents don't print correctly, but I hope I can resolve that - any hints?).

Print button

You can however further add a print button, or simply a linked "print", to your page. If you want to place this below your post, in one line with the "comments" and "post to" symbol, you need to edit a widget in the html template. It is probably best to put it in the "post-footer-line-1". For this, expand the widget template (click small box on right top of html). Write this just before the last </p>

right above the first line of "post-footer-line-2":

<a href='#' onclick='window.print();return false;'>print>

Good luck!

Useful blogger design tools, part 4 - flickr or picasa web slideshows

SLIDE SHOWS

I. Flickr
I.a. embedding a slide-show from a set of photos

Example of code for a flickr slideshow on blogger, using an iframe, displaying one set of photos. Copy paste and replace with your flickr id and photo-set number. (how to find your flickr user-id: if you are logged in flickr, it will be displayed here. The set number is on display in the browser once you start viewing the set).

<iframe width=600 height=400 src="src=http://www.flickr.com/slideShow/index.gne?user_id=7176712@N03&set_id=72157600002041412" ></iframe>

I.b. embedding a slide-show based on photo tags

The code would be

<iframe width=600 height=400 src="src=http://www.flickr.com/slideShow/index.gne?tags=your_tag&user_id=xxxxxxxxxxxx" ></iframe>

II. Embedding Picasa web albums

Example of a picasa web slideshow on blogger, using an iframe. copy and paste and replace with your album address (copy from the browser once the slideshow is running):

<iframe width=600 height=400 src="http://picasaweb.google.com/georg.sommeregger/BestOfVicchio/photo#s5046513271969053954" ></iframe>

POWER POINT PRESENTATIONS

Embedding power-point presentations is similar to embedding slide-shows. The tutorials here and on Beth's blog show you how to embed them on blogger using "tags". A great corresponding on-line tutorial (screencast) is here.

I exported my power-point-presentation as jpeg images ("save as..." --> all? yes, all) to a flickr "set", and embedded it follwing the method shown in point I.a above. For a picasa web album, see point II above.

Good luck! GS

Useful blogger design tools

This is for my friend Seppe and other bloggers out there... after working quite intensely to improve the layout of my blog, I figured I should share all the resources I used in a small compilation. Here it is, enjoy!

How to put your own logo on top of the page: see here or here. If you then want to hide the blog's title in the header, go to template --> html, find the style section for the header and add "display: none;" to header h1.

How to add a second side-bar: either you directly start with a three-column template (you can download some of the must popular ones here), or you can make it yourself. See also this workshop.

How to make "progress bars": see here.

How to insert a google map in your blog: see here.

How to programme the "snap" function (the little bulb that hovers if you point to a link): from here.

How to programme the "read more/lies weiter" for summary and full version of one post: see here.

How to make the "label cloud": here.

Put some funny language translation on your page. Be happy.

A clock for your webpage.

Your can integrate a flickr slide show in a your blog! Either as a slide show, but also in the side bar. A great tool for uploading photos to flickr is here. I made a separate post for slide-shows on blogger.

You can display photos from a picasa web album on your blog sidebar! Here is a fine widget creator for doing this. You can choose whether to display the title of your slideshow and the logo (you can also do it manually later by changing the pwaHeader and pwaLogo setting to "false").

How to embed flash (.swf) animations in your blog: here. For doing this, you might need to store your swf files on-line and link to them from your blog. If you have blogger (a gmail account), you also have a googlepage. Use this for easy upload. Googlepage can also be used for stocking mp3s and other files.

How to show a power-point presentation on your blog, see this post.

For an easy tree-menu, see here. I had the problem that with this given code, by default (when you load the browser) the list was open, whereas I wanted it closed. To resolve this, replace style="&{head};" with style="display:none".

Drop-down menus: here, or here.

Finally, counters. I use statcounter.com. See also google analytics.

Easy news-tickers or news-scrollers. Related to this, how to embed a flash-animation in your blog.

Submit your site to search engines:
how to do this for yahoo
and google
and msn (here the related inktomi search index).

In case you wonder: what is the status of your website in google?
and what about yahoo?

Good luck and have fun!