Add a Gadget - HTML/Javascript: Slideshow hosted on Photobucket

Wednesday, May 26, 2010

Moving On: One Blog(ger) to Rule Them

I am going to post all future Library 2.0, techie, and blog related stuff on my main blog, http://www.mybookhouse.com. Thanks for stopping by!

Monday, December 28, 2009

Gadgets - Labels: Lost In a Cloud

Blogger labels now have a setting for "cloud".  Don't know how long this feature has been available but I really like it.  I like the way tag clouds look.  I find this to be one of the most attractive features of  Delicious widgets, as well.

Monday, October 5, 2009

Update Your Facebook Status Using FB Notes With Blogger and FB's Twitter App

Facebook's Notes application makes posting your Blogger posts (or any type of blogging platform posts) super easy.  You just add the Notes app to your FB account using your blog address and everytime you post on your blog, your FB status updates a few minutes later.  Simple. 

The weird thing is that Blogger links are now completely blocked by MySpace.  That is a complete mystery to me.  The answer I was given when I inquired was that MySpace feels that Blogger is full of spammers or something like that.

Facebook also has a Twitter app that posts your tweets as an FB status update as well.  Also very nice and easy.   I tried a Twitter widget on one of my MySpace pages and it works occasionally.  Personally I feel that MySpace's failure to integrate other 2.0 social networking apps is going to be it's undoing.  Facebook is mastering this really, really well, IMHO.

Update 10/7/09: Just discovered that Twitter now syncs with MySpace. Will have to investigate further. Now if only MySpace would sync with Blogger.

Monday, September 8, 2008

Blogger Gadgets: So Many To Choose From

Blogger Gadgets (widgets) are quite a jump from the "Page Elements" of  the earlier versions of Blogger.  First of all there are tons of apps to choose from.  Sometimes finding one to do what you like is a bit overwhelming because there are so many, some of which are not in English.
For example, I found a really great Youtube widget in Chinese or Japanese.  I didn't add it and was looking for an English version.  I didn't find anything comparable and decided to use the non-English one and couldn't find it a second time.

Here are a few that I really like.

Fluff:  Fluff is a newsreader widget.  It comes preloaded with six gossip and topical blog feeds but you can change the feeds to fit your taste.  You can also adjust the size of the widget, the number of posts from each feed url, and I used a lot of Fluff widgets on my newsreader page, http://randomlibrary.blogspot.com/ .

Peter K's widgets especially for searching:  Peter K has got to be a librarian.  He has some great search widgets that incorporate  Google and other types of searches.  I am using his "Libarian's E-Library" search widget that uses the ALA website.

The Digg Widget:  Good for seeing what is hot on the net at the 'mo.

NWS Weather Radar:  Shows the radar map for the area you select.  Click on it to see the full size map.  Very useful this time of year.

Friday, September 5, 2008

Blogger Templates from Webtalks

I found another source for Blogger Templates and this appears to be a really good one.  Webtalks, a Blogger blog, offers downloads of 3 column Blogger templates with great instructions (including pictures) for installing them including how to back up the widgets.  I didn't know how to do that when I starting fooling around with template installatioin and have had to reinstall my widgets after changing the template.

The templates are modification of existing Blogger templates and the Blogger gadgets (formerly known as page elements and also called widgets) seem to work really, really well on it, better in fact than on the Blogger templates that I downloaded from the Blogger Templates site.  The downside is that they don't offer the same amount of variety or the tab/link feature, which I really, really like using for my main blog (I just put a link back to it on my connecting blogs to make for easy navigation).

I am trying to use my My Book House blog as a central place for me to access current news from news feeds and blogs by linking to another blog, Floating Library, which is just a page of links to news content and info with no blog posts.

Tuesday, September 2, 2008

Speed Loader: Chrome Shines

I have downloaded and am test driving Google's Chrome browser platform and I definitely notice a big increase in speed.  I can't wait till I have used it enough to have my "windows" fill up with my most frequently viewed sites.  I am liking the Chrome.

I try to use Firefox more, just to show it some love, but my blog pages frequently look lousy and it is sort of disheartening.  Chrome is a Google app so my Blogger pages look as good or better than in IE, even the ones that have user-generated CSS templates that I downloaded from http://btemplates.com/ and modified.

Tuesday, August 26, 2008

Blogger versus Blogger In Draft and Blogger Changes

I learned the hard way that "Blogger in Draft" does not automatically save posts.  You must save and then reopen the draft of your post to "save as you go".  I guess another option would be to write the post as a text-only draft and then paste it into Blogger. 

My post bugged out when I was pasting in a link.  Perhaps saving after posting a link might also be a way to deal with this issue.

Blogger has also made some changes.  "Page Elements" (what Wordpress calls "widgets"and Facebook calls "applications") are now called "gadgets".  I have updated the sidebar accordingly.  The design of layout section of Blogger where you add your "gadgets" is a little more snazzy and user-friendly looking IMHO.

Sunday, August 17, 2008

Fine Tuning: Blogger In Draft and Importing/Exporting

I have finally discovered how to import/export one Blogger blog to another.  Unfortunately this is only possible Blogger-to-Blogger.  I tried to move some content from Wordpress to Blogger and it did not work.  Maybe this will be a future Blogger fix.

The first thing is to switch your Blogger blog to the "Blogger In Draft" setting.   This was the hardest part for me because the link to the page which will turn on the option for "Blogger in Draft" is buried in Blogger's buzz blog.  Click here to accesss the link.  I found it by searching the Blogger Buzz blog using the term, "import export".

Once your blog is on the "Blogger In Draft" mode, you select Settings - Basic and then choose  "Export" and save your blog onto your hard drive as an XML file.  Then you can upload it on your new blog (which must also be in the "Blogger In Draft" mode) using the "Import" link on this same page.

Thursday, July 10, 2008

Fine Tuning: Custom Blogger Templates

Blogger allows users to load their own custom template code. I found some nice templates on Bloggertricks ( http://bloggertricks.com/ ) and Blogger Templates (http://btemplates.com/). If you choose to try this, you should probably download a copy of your current template so that you can reload it if you want to switch back.

Here is the "Read Me" Instructions from the Bloggertricks template, Japanese Fleur , by that I downloaded and used today.

How to upload Blogger templates

1. Download your Blogger XML template from BTemplates.com.
The template is contained in a zip file (winzip, winrar), ensure you have extracted the XML template.
2. Log in to your Blogger dashboard and go to Layout > Edit HTML
3. Ensure you back up your old template in case you decide to use it again. To do this, click on the "download full template" link and save the file to your hard drive.
4. Look for the section near the top where you can browse for your XML template:
5. Enter the location of your template and press "upload".
6. The HTML of your new template will now appear in the box below. You can preview your template or simply save to start using it!
7. Enjoy!


Templates/Layouts in http://btemplates.com

Thursday, May 22, 2008

Posting Tips: Linking To the Library Catalog

Please note: we have a Sirsi IBistro system where I work. Most of this info came from our Electronic Resources guy and PR office. The part about keyword searching I found on another library's site after Google-searching "Sirsi and catalog linking".

To link to an item or group of items, I use the basic catalog link url (http://192.152.249.232/uhtbin/cgisirsi/x/0/0/5?searchdata1) and add endings for the type of search I want.

TITLE:
titleword_titleword{TI}
example:
example:
http://192.152.249.232/uhtbin/cgisirsi/x/0/0/5?searchdata1=ghosts+and+juvenile
example: http://192.152.249.232/uhtbin/cgisirsi/x/0/0/5?searchdata1=dora+and+explorer+not+DVD+not+video

Tuesday, May 13, 2008

Fine Tuning: Sizing Header Pictures

Some Blogger templates allow you to add photos to the header. If you choose to add a photo to your header, you may want to note that the size of the photo will affect the size of the header. Optionally, your header photo will be be a slim rectangle. If you modify the blog template to reduce the size of your header, your header photo will have to be sized correspondingly to keep the header narrow.

Example:
http://charlestonhomeschool.blogspot.com/ - Template modified to reduce the size of the header. If I used a narrower picture, the header would be even smaller, but I am satisfied because I wanted use enough of the picture to show some roofline and sky in it.

Fine Tuning: Captioning Photos and LOL Cats





I used Big Huge Labs captioning tool to caption these photos and then added them to a photobucket slide to promote branch programs (I used the "action line" option rather than the "speech or thought bubbles"). Big Huge Labs has a Flickr connection; they create Flickr photo editing tools. There was an option to upload my captioned photo directly to my Flickr account. I tried this but it did not work after a couple of tries (I think I need to make sure that I complete the authoriztion with Flickr to upload stuff directly from Big Huge Labs) so I just saved the captioned images on my PC and uploaded them to my Photobucket account and added them to my slide.




Please note that the top picture is the clearest in the slide. This was the first time that I had done this and I was in a hurry to finish so I did not look around to see if I could move the text to go in a straight line. There did not appear to be an option for this. I am sure there are other online captioning utilities but I chose Big Huge Labs because they have the Flickr seal of approval.







I created this "LOL cat" picture of my cat, Katie, using http://www.iwantcheezburger.com/ . Note that they put their web address on the photo. This is one of the things that I liked about Big Huge Labs; they did not alter my pictures. One way to get around issue of having your picture branded with the website address is to create a larger picture and then shrink it. http://www.iwantcheezburger.com/ allows you to adjust the size and type fonts. One downside was that they did not offer an option for manipulating the caption. You have three placement options for the text. Big Huge Labs has a LOL cat captioner, too, but I haven't tried it yet.

Tuesday, May 6, 2008

Fine Tuning: Widgets

(NOTE:  Blogger now calls its widgets, "gadgets".  They used to be called "page elements")
For the purpose of blogging, "widgets" are pieces of java script, html code, etc that, when added to the code of the blog, put a (hopefully) visually interesting piece of programming on your webpage or blog that shows pictures, plays music, or has some other functionality that is usually linked to another site, often another social networking site. Most social networking sites offer widgets, which may be called "players" if they show videos or play music or badges if they are merely visuals, so that fellow users can connect with the person displaying the widget on their site, too. For the widget provider, a cool widget basically serves as an advertisement for their site. (more about widgets)

Youtube Widget (To add it to a blog post, click on the embed code next to the video you want to post and copy the embed code. On Blogger, click the "Edit HTML" tab of your post and paste the code where ever you want the widget to appear. If you click the "Compose" tab to proof your blog post, you will not be able to see the widget. It will be visible in your published post.

To add a Youtube video widget as a page element of your blog, click the layout tab and "add page element" and then select the "Add HTML" page element and paste the code in the element and save it. Note: You may want to resize the widget if you plan to use it in your sidebar.

Youtube offers social networking and you can set up an account and creat playlists to display as widgets.)



Flickr Badge
Flash Badge with tag, charlestoncountylibrary see page element in sidebar - I could not get it to work in the post.


HTML Badge with tag holidays




www.flickr.com

My Book House's items tagged with holidaysMore of My Book House's stuff tagged with holidays





Go to your Flickr account and select "Tools" from the "Help" section at the very bottom of the home page. On the "Tools" page, select the "Build a Badge" option on the bottom right and follow the steps to build a badge. Note: make sure that the tag you use to select the photos for your badge is working. For example, I tag all of my work photos "Charleston County Public Library" but when I make a badge using this tag, I will have to put charlestoncountypubliclibrary (no parentheses or spaces) in the field for tag.

Fine Tuning: Widgets Left By the Wayside



I like to try alot of different Web 2.0 sites, most of which have social networking features and widgets. Some I have ended up dropping because they didn't work consistently. Some simply didn't fit my needs.

**Mashable - I liked the idea of gathering all the social networking sites in one place and it had the option to create a beautiful page with the links to all the sites (the pretty background pictures that I uploaded are now gone). Unfortunately sometimes the badge widget was really slow loading or would not work so I let Mashable (click here for the St. Andrews Mashable) fall to the wayside in favor of Del.icio.us, which does the same thing in a fast, functional manner even if it does look quite utilitarian. I do like to check out Mashable's web page for social networking and web 2.0 news and info.
**Rollyo - I tried Rollyo as part of the Tech Trek 2.0 team. Rollyo lets you create your own search engine. I could never quite figure it out. Again Delicious (the St. Andrews Del.icio.us) does the job better for me. I guess like finding good sites and saving and organizing them than searching over and over for stuff on the same topic. I think Rollyo might work better for people looking for news on the web.
**Technorati - Another Tech Trek experiment that lets you put a button-link on your blog and then tracks your blog views or something like that. It doesn't work with MySpace and I just didn't find it useful for my own purposes. Technorati seems to be more about keeping up with the "buzz" (news and gossip) and tracking your blog's popularity.
**Meebo Chat Box - I liked Meebo and used it for Tech Trek but I don't sit at the same desk for most of the day and I get up and move around alot so using the Meebo chat box widget on my blogs was sort of a waste of space because I am not available to chat enough. I would use it if I was more stationary, though. Email works better for me.
**Dizzler Music Player - I encountered a Dizzler player on another librarian's MySpace page. I really like the variety of music Dizzler offers and the beautiful "skin" selection for the player widgets. The downside is that I think their player is a little trickier to use, I can't arrange the playlist in the order I like, and the Dizzler widget is pretty big and can't be downsized and still be useful like a Project Playlist player. So I am sticking with Project Playlist.
**Twitter - I have signed up for Twitter but I am not sure I will be using it because I am always at the same one or two places most of the time and have disbled texting on my cell phone to save money (Twitter lets you send in updates (twitters) about what you are doing using your phone). I think it would be useful if I was younger and dashing about and trying to keep up with friends. I like the logo. I am trying it out with NPR's Bryant Park Project, a blogish news program, which has a Twitter news feed. Twitter allows you to "follow" fellow users. That aspect would be useful if I could get some friends and family to use it.
**Yahoo Pipes - I really really wanted to use this for...something. I just could not figure it out. I am posting the link to this site in hopes that someone will be able to do something with it cause it looks so darn cool.

Fine Tuning: Limiting Descriptive Text in the Header

I prefer to have my "About" section in the sidebar in a page element rather than in the header in the blog description section. I think this makes the blog look more like a webpage. If I write in the header section below the blog title, I try to make it a really brief statement more like a slogan than an explanation.

Personally, I think it makes the blog more engaging if the changing content (posts, links, slides, etc) is viewable and clickable as soon as the viewer accesses the page. Reducing text in the header gives the changing content more real estate at the top of the page. I have not done any research as to whether or not this makes the blog more "effective", so this is mainly just based on my esthetic preference.

Monday, May 5, 2008

Widgets: Shrink to Fit

Playing with the HTML code that determines the size of the widgets can make them fit into your blog better. I try to make sure that I use the same ratio to reduce the size of the heighth and width. You have to go through the code and change the ratios in at least two places most of the time. Sometimes there is a third setting, generally larger, which is for the border or frame of the widget.

PROJECT PLAYLIST - Full Size Player-450px frame(px is pixels) and player 435px by 270px




50% Smaller - still have visible controls - 225px frame and player 217px by 135px. If you go much smaller than this you don't have the play/pause and forward and back buttons visible. This is small enough to fit in the margin of a blog, easily.





NOTE: If you set the player widget to autoplay, you may want to place it high on the page with instructions on how to shut it off so that users who don't care to listen to music can stop it quickly.

Widgets: Project Playlist Music Player

Player from Project Playlist



Step 1 (after setting up an account) is to create a playlist and add music.
Step 2 is to add the playlist to blogger by creating a widget.
Step 3 is to paste the code for the playlist widget into a blogpost like this one by selecting the "Compose" tab or to post the playlist on the blog in a Page Element - HTML Code box.

This player was customized with a picture ("custom skin"), which was stored on Photobucket.
*The picture is a clip from the cover of the magazine Amazing Stories found on Google Images and saved on a PC and then uploaded to Photobucket.
*The picture was edited on Photobucket using the resizing and cropping tools.
*The picture link from photobucket was inserted on Project Playlist after selecting the option to "post a playlist on MySpace" and then selecting the option to create a custom skin and then generating the code.
Last step same as Step 3: Post the code on the blog, either in a post or in an HTML-enabled page element.

PLEASE NOTE THAT I GOT AN HTML ERROR MESSAGE WHEN I TRIED TO POST THIS BUT I CHECKED THE BOX TO IGNORE THE MESSAGE AND POSTED IT ANYWAY.

NOTE 2: Sometimes I have to make and post the player more than one time to get the picture from Photobucket right and the player to work. This may be because this option is supposed to work best with MySpace.

Widgets: Del.icio.us Links

Del.icio.us is a social networking bookmarking site. Instead of saving bookmarks on an individual PC, users save bookmarks on their Del.icio.us page. Del.icio.us users "tag" their bookmarks; a tag is the equivalent of a subject heading. Del.icio.us has a feature that allows users to create visually-pleasing (IMHO) "tag rolls" .

I really love Del.icio.us for several reasons; it is graphic free which makes it fast-loading; it allows me to create, organize, and easily access a wonderful assortment of websites from any PC; and it allows me to share my links in a variety of ways. (Click for more info on "tags" and tagging also known as folksonomy.)

Del.icio.us links can be used as a link to all sites that share a tag. http://del.icio.us/standrewslibraryinformation/blog.tool or as a tag roll.

Widgets: Photobucket

I use Photobucket to host images for all my blogging. I have a paid account (about $25.00 per year), which allows me to store lots of graphic files (especially slideshows) without fear of getting the "exceeds storage limit" message. If you set up a free account for your blog, keep the storage limit in mind, when adding images to your Photobucket account. (more about "hosting")

To use Photobucket - Upload an image from your computer to your Photobucket account and then copy the HTML code for it into a Blogger HTML Element widget or copy the URL for a Photobucket picture link in the Blogger Picture Element widget. (click for more info on Photobucket) (click for info on "widgets") There are other free image hosting sites available besides Photobucket like Slideshow, Snapfish, etc, that may work better for you.

One option if you want more free hosting is to use more than one account. Personally, I find that being able to work on slides and images for several different blogs in one place to be a real time-saver and worth the yearly expense.

Note: I also use Photobucket to host the backgrounds for the MySpace pages for myself and my branch. I have found that MySpace photo hosting does not let me store an image big enough to cover the whole background. MySpace - http://myspace.com/kathy_the_librarian

Friday, May 2, 2008

Posting Tips: Tagging Your Blogger Posts

Blogger has a label/tagging feature (click for more info on tags) that allows you to label and access your posts.

To label (tag) your Blogger posts, add your labels in the white box at the bottom of your post while in "Create" mode. Labeling posts allows viewers to find posts on a particular topic easily.

Blogger has an option, which I used in this blog to add an element/widget to show the labels for the blog posts.

First Steps: Setting Up Comment Preferences

I would highly recommend changing your blog comment settings on the front end. You will need to decide whether you want blog viewers to be able to comment or not and if you want to accept comments, I recommend that you select to moderate them before they are posted on your blog. Enabling comment moderation prevents spamming on your blog.

Personally, I like to allow comments on my blogs but blocking them removes the need for moderating them. You can always ask patrons who are viewing your blog to contact the your library branch with questions by email or phone if you block comments.

To modify comment preferences, select the "Settings" tab on the Blogger Dashboard and then click on "Comments".

Posting Tips: Removing the Posting Date

Removing the posting date keeps your posts looking ever-fresh. Thanks to Ms. Lee for this great idea!

The way to do this is to select the "Settings Tab" on the Blogger Dashboard and then select "Fonts and Colors" and make the post date color the same color as your page color. You can also downsize the post date font to tighten up the space between posts. The post dates will still show on your Archive links. You can delete the Archive Element widget if you like, too. This would be useful if you are trying to create a blog page that functions more as a web page.

First Steps: Setting Up a Gmail Account

Setting up a Gmail account to use with the Blogger account is the first step I take when setting up a new separate blog on Blogger.

I like using Gmail with Blogger because it allows me to forward blog-generated emails to my work email at no charge. This allows me to easily keep up with blog comments from my work email account, while keeping the work email address private. I have also set up an iGoogle page with useful blog related widgets and links. I just find that using Google tools gives me more bang for my buck.

If you set up a Gmail account and then add Blogger, Youtube, and an iGoogle page you can log into all the accounts with one password.

First Steps: What is the Focus of Your Blog; Professional, Shared, or Personal?

One of the first things you will probably want to think about is the focus of your blog.
Initially when I started blogging at work, I had one account and I had my personal blog and my department blog on that same account. Later, I realized that it would work better to have them on separate accounts. That way if I go to another department or job, I will leave the department blog behind and take the blogs that are "mine" with me. Sorting out the blogs after-the-fact was messy and time consuming so I strongly recommend thinking this stuff out in advance.
NOTE: Don't be afraid to have "too many" blogs. The only blogs you have to update frequently are the professional ones that you are using to provide patrons with info about events at your branch.

The name you choose to identify the blog account author should match the focus of the blogs on that account.
Professional Blog Accounts - These blogs are for posting current information about events and services at our library. Because these blogs are primarily about promoting events they require regular maintenance.
**The blog for my branch is published under the name of the branch manager. This is the person ultimately responsible for all things at the branch so it made sense to us to put this blog account in her name.
Note: We had a 2-month long Harry Potter program the summer of 2007 and I created a blog for it on the branch blog account, but in retrospect I would have used the shared blogs account for this type of programming.

**The blogs for my department are published under the name of the department staff. These blogs are for branch programming or services.

Shared Blog Accounts - These blogs are for reader's advisory, media reviews, long-running individual programs, etc. These are more traditional blogs, whose content is primarily posts about library materials that generally do not need to be updated once posted.

**The shared blogs account is published under the name of the library branch staff. Anyone on staff may add reader's advisory info to them if they choose. This is also a good account to use for special program blogs.
Creating a special blog to promote a program allows patrons to participate in programing online and is paperfree. We count the folks that enter contests online in our stats just like the folks that enter in the branch. The links to the special program blog can be removed from the ongoing branch blogs at the end of the program.

Personal/Professional Blog Account - This is the place for you, as a professional, to air your work-related thoughts. The professional aspect of this means, IMHO, keeping ranting in check and keeping the tone light and moderate. Save intense and/or questionable stuff for your private blog that you don't link to your work blogs.

My Library's Blogs

My Personal/Professional Blogs

Note: I like using Del.icio.us to organize links for my blogs.

Template HTML Changes

Template - Sanddollar

Reducing the Size of the Header
I wanted to reduce the area between the Blog Title and the top of the page so I modifyed the HTML. I selected the "Layout" tab on the dashboard and clicked "Edit HTML" and I scrolled halfway down the template code to the section marked "h1" and changed " padding-top:25px; " to " padding-top:10px; " (see below).

h1 {
padding-top:10px;
padding-$endSide:0px;
padding-bottom:10px;
padding-$startSide:5%;
color:$pagetitlecolor;
background:$pagetitlebgcolor;
font:$pagetitlefont; letter-spacing:-2px;

Making this change puts the title higher on the page and pulls up the stuff on the bottom of the page so that you can see more of it when you first open the page. I want to show as much "content" at the top as possible so that viewers can get a maximum of info without having to scroll.

Enlarging Blog Description Font - I wanted to increase the size of the blog description font to make it more visible. The HTML code for this is found just past the halfway point beneath the sidebar code sections. I increased the font from 100% to 110%.

BEFORE
.description {
padding:0px;
margin-top:7px;
margin-$endSide:12%;
margin-bottom:7px;
margin-$startSide:5%;
color:$descriptionColor;
background:transparent;
font:bold 100% Verdana,Sans-Serif;

AFTER
.description {
padding:0px;
margin-top:7px;
margin-$endSide:12%;
margin-bottom:7px;
margin-$startSide:5%;
color:$descriptionColor;
background:transparent;
font:bold 110% Verdana,Sans-Serif;

First Steps: Picking the Template

I like to use the Sanddollar, Herbert, Jellyfish, and Stretch templates the most. Sanddollar is particularly advantageous because it has individual settings for the fonts for various parts of the blog. If you pick a template that uses a general font-size setting for several separate text elements (post text, sidebar links, blog post titles, etc), you will have to manually change the font settings by altering the blog's template html.

If you choose a template that is heavily formated or has few formatting options, it is harder to customize it.

If you change templates, you will keep all your content but lose all customized colors, fonts, template html changes, etc.

Example-

My Book House - Tekka - I shrank the header and I think I also adjusted the font sizes on this one.