Chicklets...a blast from the past

Hi!

I just commented on your post, Optimize your blog for mobile devices, and read a couple of your other articles. As a blogger myself, I am impressed.

I also just added your I Love BlogU button to my brand new Hacker Study (http://www.hackerstudy.com) blog.

Could I trouble you for the info, how or where did you make that button? I have several Blogger hosted blogs and I would really like to provide these buttons for my readers as well.

Considering that you have lots of tweaks for Blogger, I will be visiting you on a regular basis.

Sincerely,

Tom


Well, this is the little button he was talking about.   I made it ages ago when I was in love with Chicklets. A Chicklet is an 80x15 button. Very exact on the size. If it's not 80x15, it is not a chicklet! I had a gazillion in my cellar on BlogU. But, I have since house cleaned and left only this one little chicklet to give away to anyone that wants it.

If, you want a Chicklet to brand your site, or profess your love for clouds, Firefox, trees, iPhones...or whatever...these are the sites you can go to make them.

1. Brilliant Button Maker By the way, this is the one I used to make my Chicklet because it allows an image to be used.
2. Just another button maker
3. Adam Kasly Button Maker This site has a nice clean design, which may appeal to you.

And this is just a collection of Blogger Badges a.k.a. antipixel buttons, chicklets

so you can see what all can be done with these little snazzy buttons.

Twit This

Let's get back to our blogging roots. It is all about connecting and sharing. Twitter is a master at doing just that. I found a great way at woork to get a TwitThis button in each post. When a reader Twits a post, it is shared with their Twitter network and traffic to your blog will increase!



Here is how to install it in your posts. I added to woork's tutorial...sorta filling in the blanks to make it easier for my readers to follow.

Go to your Dashboard | Layout | Edit HTML | check 'Expand Widget Templates'. Then add the following code to your CSS style sheet.

.share-twitthis{
background:url(http://tinyurl.com/ay2jsc) 10px top no-repeat;
padding-left:42px;
font-size:11px;
line-height:18px;
}

Now scroll down further till you find this:

<div class='post-footer'>

Add this code right after that line:

<div class='share-twitthis'>
<a expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title'>Twit This!</a></div>

He also included this sweet little graphic to use. Thanks to Antonio for such a great post!

A Round-Up of Free Blogging Icons!

These are some icons I found and thought I'd share. What a fun way to pull together your blog!! And best of all...they are all FREE!! You can download each set from the link under the image.

A set of sweet Irish Icons


Several wild RSS feed icon sets

From DefiantArt

Free Vector Icon PSD Set

Simplistica (has a nice calendar icon!)

Stickers Icons

Sketchy Paper Icons (I LOVE this set)

Valentine Love

Glossy Blogging Icons

Function Icon Set

Bottle Icon Set (cute, cute, cute!)



Coquette Icon Set

Vector Icon Set

Entrecard - Social Networking...with a twist

I love finding new blogging treasures, and I finally checked into this little widget that I have seen here and there across the blogosphere. It is called Entrecard, and it is a new twist on the social networking aspect of blogging. But, what is that twist exactly?

Let me explain it to you as I see it. If I owned a business, I would certainly have a business card. Why? To pass out to possible clients. It is a mini advertisement. My product and /or business will be seen.

Being seen. That is what it is all about. Visibility. Enter the Entrecard. A simple little digital business card for your blog or website. It capitalized on the already popular 123 x 125 ad size.

Create your own ecard, submit it to Entrecard and begin networking. I modified and spruced up my Blog Aid badge to make my Entrecard. (See it on the right?) I still want to do more work to it, but this will have to do for now.

It uses a point system that is explained on their site. To simplify it, you earn points that you can use to buy ad space on other sites. Clicking on the logo on someone’s Entrecard widget is called dropping your card, and points are earned each time you drop a card. If someone drops a card on your site, you also get points. It is a win win situation.

This is a fun, easy way to build traffic to your blog. I have already found a couple of interesting places that I may have never seen with Entrecard.

Comment Feed Tutorial

Now that I have completed RSS in simple terms, which explains the basics of RSS, and Setting up a RSS Feed, which explains how to open a feed for posts, I can dig a little deeper. For me, setting up a comment feed was extremely difficult. I don't know exactly why that is. Maybe because ages ago I removed some code from my template that had to do with comment feeds, or I just couldn't figure out where or what my comment feed was. I worked entirely too long on this problem. Some things are not meant to come easy to me, but when they do I wonder what took so long for the light to come on. As you can see, the light did come on, and I have a shiny new comment feed in my sidebar. I'm positive there are other ways to do this. But this is the only way I know, so let me explain it so no one else has to go through the darkness like I did.

I'm assuming you have read Setting up a RSS Feed, and it is humming along. Setting up a comment feed is a process, but once set up, it is an automatic thing of beauty. The process involves:

1. MailBucket
   
2. FeedBurner
   
3. of course, Blogger
4. Gmail

1. MailBucket. This is a service that provides an email-to-RSS gateway. What does this mean? In simple terms and more importantly - all that I need to know - is that it gives me a comment feed URL. To get this little snippet of magic code, go to the MailBucket site and read a bit about the service. Then in the address bar, type http://mailbucket.org/YOURNAME.xml. You will want to change YOURNAME to something relevant to your blog for ease of remembering. (And you will want this name for Step 4.) Then hit enter.


A little miracle occurs and your reader pops up! See the link ending in xml? Copy that. You will need it for your next step.



2. FeedBurner. Go to FeedBurner and sign in. Follow the steps in the previous post, Setting up a RSS Feed.



3. Blogger. When finished add the code to your blog...open Dashboard | Template | Page Elements | Add a Page Element | HTML/JavaScript. Paste that code in the window.

Now open Dashboard | Settings | Comments | Comment Notification Address. In this window paste your Gmail address. Remember to Save!

4. Gmail. Last stop. Open your Gmail account. We're going to work with filters. At the top of the window is a link that says Create a filter. You'll want to click on that.



Next you'll see several boxes at top. We will only use the Subject area. Type in [YOUR BLOG NAME] New comment in that box. Then click Next Step>>.



The next page you will check the Forward it to: box and then paste your MailBucket email address, which is YOURNAME@mailbucket.org. (Refer to Step 1 for the name you used with MailBucket.) Click on Create Filter.



Now you are done. whew Yes, it is true. Get a glass of wine and set back to wait for a comment to roll in. Or pay your friends and family to leave a comment. Or comment yourself. (Which is what I did while testing...I'm impatient and cheap.) Somehow, don't ask me how, through the miracle of the internet, comments get forwarded to email and forwarded to MailBucket and sent to a feed. Then, if your readers are smart, they will subscribe to your comment feed and anytime someone leaves a comment (or in my case, I leave an answer to an important blogging question) they will see it in their reader!!!

Setting up a RSS Feed

As promised, I'm going to show you how to equip your blog with your very own RSS feed. My experience is with FeedBurner. There are others, but like I said, I have experience with FeedBurner.

First things first. If you haven't registered yet, jump right in. After you register, you will be asked to "Burn a feed right this instant." Translated, it means put the URL of your blog in the box, and click next.



Since a website URL was typed in, FeedBurner looks for your feed. Sometimes you have two. In this case I selected the RSS option, then click next.



The next page gives you a chance to change the title of your feed, and shows you your feed address. If you are happy, click activate.



The next screen is the congrats stuff. I just click on Skip directly to feed management. That takes you to a screen with several tabs across the top of the page. Click on the Optimize tab. You will see a row of options in the left sidebar. Click SmartFeed and activate that service. This makes your feed compatible with all readers.

Before you go any further, look around. Click all the tabs and run down the left sidebar. There are many ways to customize your feed. When you are happy with what you have you are ready to Publicize your feed.

Select the Publicize tab and click Chicklet Chooser in the sidebar. This is where you choose the icon you want displayed and any additional readers you want displayed. (Remember, you don't have to show all the readers, the feed will automatically translate your feed into a format that can be used by your visitors' feed reader application.)



Scroll down the the bottom of the page and select Blogger. Copy this code. It is what you will paste in your sidebar widget.



To put it in your blog, open Dashboard | Template | Page Elements | Add a Page Element | HTML/JavaScript. Paste that code in the window. Save and you have a shiny new feed for your blog!!

Oh, by the way, if you want to use your own RSS feed icon, that is easily done. Do you see the png file in the above image? Upload your image to your webhost (I use RipWay) and then replace http://www.feedburner.com/fb/images/pub/feed=icon32x32.png with your own image location.

RSS in simple terms

I feel that RSS is a sweet mystery of the universe. Or at least of the wide world web. I'm going to break it down in easy to understand terms for everyone that ever wondered "What is RSS?" or "Do I need RSS?"

To begin with what does the RSS stand for? According to Wikipedia, it means Really Simple Syndication. So, my question is, why does it seem not so simple? I've done some investigating, and as it turns out, it is simple!!

Here is the breakdown. We all have favorite blogs and websites that we read. But, as time goes on, the list gets longer and longer. How do you keep up with the newest posts on your favorite sites? Do you click individually on each site everyday? That could really be time consuming, so you check occasionally. Not a real efficient method.

RSS steps up to save the day...efficiency at it's best. With RSS, you can subscribe to your favorite blogs and websites and when that site is updated, a headline or summary is sent to your reader. (More about readers in a moment.) How do you subscribe? It is as simple as a click away. Most blogs and websites make it very easy for you to subscribe to their RSS feed by having the icon in a prominent place on their site. You will see a little orange icon that is the standard symbol for RSS. Occasionally the symbol will be a different color or configured different. But, if you look carefully, you will recognize it. To subscribe to that blog, just click on the RSS icon. Then, when that blog has a new post or that website has new content, you will be notified via your reader.

In the RSS world there are two players. The feed and the reader. The feed concerns the owner of the blog or website, and they configure their feed for their site. (A future post on setting up a feed is in the process...subscribe to my RSS feed to find out when!) The reader is what you will need to receive their feed. It is your mailbox for your subscriptions. Here is a list to get you started:

1. Google Reader (which is what I use)
2. Bloglines
3. Pageflakes
   
4. MyYahoo

After you get a reader, check it daily and you will see the updates of your favorite sites. This is much easier than running all over the internet checking for new content. Since I use Google Reader, it is displayed on my homepage, iGoogle, every time I get on the computer. Nothing could be easier.

Add an Image as a Clickable Link (From My Inbox)

My question today, is how I can add small pictures which link to other websites ('badges', I think they call them) to my blog - there are a couple of links that I would like to have on there to show my support for some other websites and organisations and things but all I seem to be able to do is to either add another picture or else add a link list ... no way to add a badge/picture that is a link


This is a simple piece of code that makes any image, button or badge an active link.

<a href="URL OF TARGET LOCATION" >
<img src="URL OF IMAGE"></a>

This is an example of how to put the BlogU chicklet in a sidebar or post:

<a href="http://www.bloggeruniversity.blogspot.com" >
<img src="http://h1.ripway.com/anniebluesky/-blogu.png" height="15" width="80">
</a>

You'll notice that I have added sizes to the example code. That is to help the browser load your page quicker.* To find the size of an image, right click on the image and chose to View Image. This will open a new window with your image. The dimensions are on the top title bar.

*For more information on making your page load faster, take a look at How to Optimize Web Pages for Faster Loading

EDIT 06/07/08: A nice tip from AceK - It's a good idea to put the alt tag IE alt="name of picture" in case pic is unavailable, text will show instead of just an x. You can also use the code below to prevent the blue border spoiling the picture.
border="0"

Join the BlogU Students Blogroll!!

NOTICE...as of April 2011, the blogrolling site is no longer in operation, so I am removing the blogroll.

It seems the majority decided that having a blogroll for BlogU Students is a good idea! This will, of course, be on a voluntary basis. If you have learned how to personalize your blog from reading posts at BlogU and want to have your blog added to the BlogU Students Blogroll, now is your big chance!

First, please add the blogroll to your blog. I'm giving different options for presenting this in your blog.

Option #1 - Full blogroll:

• For Classic Blogger - put this code in your sidebar where you want it to appear ~OR~
• For Blogger Beta - Open Dashboard/ Template/ Page Elements/ Add a Page Element/ HTML/JavaScript and paste this code in that window:
  

<script language="javascript" type="text/javascript" src="http://rpc.blogrolling.com/
display.php?r=10fb2ff44d81d6db5d565673f96537a4"></script>

Option #2 - Full blogroll with button:

Follow the steps for Option #1 but use this code instead:

<a title="Students of BlogU" target="_blank" href="http://www.bloggeruniversity.blogspot.com/">
<img border="0" src="http://h1.ripway.com/anniebluesky/blogustudent.png" width="80" height="15"></a><script language="javascript" type="text/javascript" src="http://rpc.blogrolling.com/
display.php?r=10fb2ff44d81d6db5d565673f96537a4"></script>

Option #3 - Expand/Collapse blogroll:

First...Put this code in your CSS style sheet (between the <head> and </head> tags). Note, if you already have the Expand/Collapse code set up for your blog, skip to the third step.

.commenthidden {display:none}
.commentshown {display:inline}

Second...Put this between the <head> and </head> tags, but not in the style sheet:

<script type="text/Javascript">
function togglecomments (postid) {
var whichpost = document.getElementById(postid);
if (whichpost.className=="commentshown") { whichpost.className="commenthidden"; } else { whichpost.className="commentshown"; }
} </script>

Third...

• For Classic Blogger - put this code in your sidebar where you want it to appear ~OR~
  
• For Blogger Beta - Save template then open Dashboard/ Template/ Page Elements/ Add a Page Element/ HTML/JavaScript and paste this code in that window:
  

<a aiotitle="click to expand" href="javascript:togglecomments('blogustudents')" title="Students of BlogU">+/- BlogU Students blogroll</a><br><br>
<div id="blogustudents" class="commenthidden">
<script language="javascript" type="text/javascript" src="http://rpc.blogrolling.com/
display.php?r=10fb2ff44d81d6db5d565673f96537a4"></script>
</div><br>

Option #4 - Expand/Collapse blogroll with button:

Follow the instructions for Option #3, but use this code in the third step. (Note this option is not like what is in my sidebar. I opted for the button outside of the +/- and not on the inside. This option shows the button only if you click on the +/-.)

<a aiotitle="click to expand" href="javascript:togglecomments('blogustudents')">+/- BlogU Students Blogroll</a><br /><br>
<div class="commenthidden" id="blogustudents">
<a title="Students of BlogU" target="_blank" href="http://www.bloggeruniversity.blogspot.com/">
<img border="0" src="http://h1.ripway.com/anniebluesky/blogustudent.png" width="80" height="15"></a>
<script language="javascript" type="text/javascript" src="http://rpc.blogrolling.com/
display.php?r=10fb2ff44d81d6db5d565673f96537a4"></script>
</div>

My personal favorite option is #4 because you get this very artsy button in the ever popular expand/collapse blogroll! After you have the blogroll in your blog, send me an email to:

1. blogger.university@gmail.com
   
2. Include the title of your blog
3. Include the URL of your blog

When I see you have the blogroll up and running, I will add your blog!

Backgrounds and Clickable Images (From My Inbox)

Dear Prof. Annie,

I came across your blog this afternoon and I must say, it's been a real help! I am rather a new blogger although I am pretty enthusiastic about learning a bit more - have just this minute managed to add a favicon to my blog and am pretty happy with it .

My question today, is how I can add small pictures which link to other websites ('badges', I think they call them) to my blog - there are a couple of links that I would like to have on there to show my support for some other websites and organisations and things but all I seem to be able to do is to either add another picture or else add a link list ... no way to add a badge/picture that is a link

Another thing is that I would really like to add the e-mail icon (email button) to my blog too - I've been to the site but I'm not sure where to put the HTML code back on my own template...

I really do appreciate your kindness in reading this and would be most grateful for any help

Warmest wishes,

Rev. Abhipanyo

P.S. Can you recommend anything for me in terms of doing up my template a bit? I'd like to add a nice black/grey picture background to it (perhaps some old scriptures) - I've been googling for a while now but finding any information on backgrounds and how to do them is really tough!



My response:

I am happy you came across my blog and that it has been a help. Your favicon is really good. I love looking at different favicons. Your blog is very nice...good work!

First question...
You want an image that also serves as a link. That is easy. This code inserts a clickable link and if you hoover over the image, a 'tool' window pops up with your text in it...a little something about the link.

<a href="
http://www.bloggeruniversity.blogspot.com/" rel="alternate" title="Steal my button! BlogU...the best of the blogosphere!!
" type="BlogU">
<img alt="BlogU Button link" style="border: 0pt none ;" src="
http://h1.ripway.com/anniebluesky/-blogu.png" height="15" width="80">
</a><br>

This code comes from my blog, so you can see it in action by clicking on my "Chicklet Love" button in the middle column under "Random Sidebar Clutter". The sizes in this code is for a standard chicklet, 15 x 80 px. If your image is a different size, change the values accordingly.

1. Insert the URL of where you want the link to go.
2. Put the text you want to pop up here....or leave blank.
3. This is like a place holder that describes what the image is (not necessary, but more HTML compliant)
4. This is the URL of the image where your image is stored (from your webhost...you can see I use Ripway)

To put this clickable image into your blog:

1. Open your dashboard/ template/ page elements
2. Click on 'Add a Page Element'
3. Choose ' HTML/JavaScript'
4. Paste the above code into the window with your changes in place
5. Give this widget a title if you wish, or leave blank
6. Save changes

Or, if you want the streamline version, this will work, but not web compliant:

<a href="http://www.bloggeruniversity.blogspot.com/" >
<img src="http://h1.ripway.com/anniebluesky/-blogu.png" height="15" width="80">
</a><br>

For some reason, Blogger doesn't save the <br>'s correctly when you re-open a widget to add another link. So, what I do is keep a fresh backup of the widget code on my computer. Then when I open the widget to add a link, I first paste the saved code into the window, then add my new link, then save the new code to my computer again. A bit bothersome, but not impossible. If you are wondering what the <br>'s do, they separate each image (I think the br stands for break). That way all your images are in a row...not piled up.

Queston 2...
Adding the e-mail icon...If you have the code you need from the link below my email address, then you do the same thing as what I described above to get it into your blog. You will create another page element using the 'HTML/JavaScript' widget.

Third question...
If you look at my other blog, Buttermilk Clouds , you will see a green striped background. That background is really an 81 x 81 px image that repeats. And this is the code that puts it in my blog:

body
{
background: transparent url('http://img151.imageshack.us/img151/3294/bg2.png') top left repeat;
}

So, when you find an image or pattern:

1. Save it to your webhost.
2. Insert the URL of that image in the code.
3. Add the code to your template in the CSS style sheet (between the and tags).

If you need image manipulation, try IrfanView to do simple editing of images. For more involved projects try GIMP ... both are free programs and well worth downloading and becoming familiar with. Not to mention lots and lots of fun!

I think this should keep you busy for awhile!! IMPORTANT. Save your template before beginning any template modifications...that way you can always fall back to where you began if things go wrong. Have fun with it...experiment.

UPDATE: 03/12/07 - Regarding blogger not saving the <br>'s correctly, DarkUFO so kindly left a comment telling me why. All I need is a little /. Instead of <br>, it should be </br>. I love simple solutions!!! Thanks, DarkUFO!
03/13/07 - This added information was given to me by Shelly ... the code should have the / following the br like this: <br/>. Thanks to Shelly and all my readers for all the useful information.

Button link

A reader just requested a method of adding a button link in her sidebar. There are a few things you'll need:

1. An image for your button
2. Load this image to your web host (I use Ripway)
3. Image URL (from the web host)
4. Target site URL

What to do:

1. Open your dashboard
2. G0 to layout
3. Click on 'Add Page Element'
4. Choose the 'HTML/JavaScript' widget
5. Paste the code below into the window
6. Give the widget a title like My Favorite Links and paste the following code into the window

<a href="Target site URL">
<img border="2" src="Image URL"/>
</a>

At this point you plug in your Target site URL and the Image URL. If you want more button links, add the above code in the same window changing the Target site URL and the Image URL. Save changes

Now you can drag the widget you just made to the area you want in your sidebar, or just leave it where it is.

Button, button...

Now that I have conquered categories, I have moved on to another obsession. This one is rather strange. I like brilliant buttons, chicklets or what ever else you care to call them. Why do I like them? It is because they are uniform, tidy, colorful, and can tell a whole story in 80 x 15 pixels. They are not gaudy, loud, ridiculous or intrusive.

I found the most interesting site that plays right into my new obsession - gtmcknight. He has a collection of 3000+ buttons and growing. He encourages you to steal his buttons or make your own. I spent entirely too much time looking over each and every button, including the ones waiting for approval. An article at Freshblog included a link to another online button maker which uses a color table to select hexadecimal values for use in the button maker.

To take it to the next level, I've made a few of my own:

• 
• 
• 

I happened across these sites listed on Blogging Blog. There are programs to make buttons, buttons to steal, and button tutorials:

• 
• 
• 
• 

I wonder if anyone else has this obsession?