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.

Make a custom favicon for your blog!

Do you have a favicon? Do you even know what a favicon is? Read on. At the end, you will know it all!

A favicon (short for favorites icon) is a 16×16 pixel square icon associated with a particular website or webpage.
From Wikpedia

I'm going to show you the easy way to make one. There is one program that I highly suggest downloading. It is free, and you can use it for all your quick photo needs. It is IrfanView. I use this program as my default photoviewer on my computer simply because it is so quick and great to use.

When I do a custom favicon, I generally use part of my blog header. Take a look at SeaSide Sharon and Buttermilk Clouds. Do you see my favicon in the address bar? And in Firefox, the favicon is also displayed on the tab. Each of those favicons were taken from my header image.

Here is how to do it:

1. Open your blog so you can see your header (or the part of you blog you wish to make a favicon with)
2. On your keyboard, click the PrtSc Sys Rq button (top row, third from the right)
3. Open IrfanView
4. Click Edit | Paste

What you see now is a picture of your screen and a picture of your header.

1. Placed your cursor in the header and select a 16x16 pixel area
2. Click Edit | Crop Selection
3. Click File | Save As | ICO - Windows Icon 

Upload that image to an online hosting site. You will use the favicon's URL from the hosting site to put it on your blog. I use to use Ripway...but I'm getting away from it because my bandwidth issues. I now use Flickr.

Now you have a little custom favicon! To install your favicon, follow the instructions on this post Adding a Favicon. Since there was some sort of problem with favicons on blogger, I had to find a fix. So be sure to follow the link at the end of that post for a  easy fix.

EDIT: please post a link to your blog with your new favicon so everyone can see!!!!

Do you want to wrap text around an image?

When using images in your post, do you sometimes get upset with where the text around the image goes? Here is a way to get the text to wrap the image...either to the left or the right. It is simple enough. All you need to do is put a little CSS in your template, then tell the image where to go.

So, basically it is a two step process. But, once you get the CSS code placed in the CSS style sheet, you only have to tell the image where to go from then on when posting images. If you notice, I have my flowers to the left and the gingerbread boys to the right, and the text wraps around them.

Here are the steps.
Step 1: Locate the CSS style sheet and paste this code (I put mine under the post section):

/*Wrap text around image
----------------------------------------------- */
.left {
float: left;
margin: 6px;
}

.right {
float: right;
margin: 6px;
}

Step 2:This is what your image tag will be similar to:

<img src="http://farm4.static.flickr.com/3599/3515377006_db67e698de_m.jpg" />

Add class="left" or class="right" to that image tag. It will look like this:

<img src="http://farm4.static.flickr.com/3599/3515377006_db67e698de_m.jpg" class="right" />

Since I added class="right" to that image tag, the image will float to the right and the text will wrap on the left.

One more thing. When using this method to post an image, you will have to use the Edit HTML tab in the posting window...not the Compose tab.

EDIT: Thanks to an email from David Cosier/Fear Healing, I discovered a potential error in this code...it has been corrected. I left out the ----------------------------------------------- */ part of /*Wrap text around image. It really matters!

A Program to Create Your Own Tab Menu Graphics

Hi Annie!
Wanted to tell you I found a free download of a software to create tabbed menus, which generates the code too. It's really neat. I used it to make all the tabs.


My friend, hillgrandmom, from Life on a Hill, sent me a link to CSS Tab Designer. So, I took a look at her blog. It made lovely little tabs. After you make your new tabs to match your blog, you can add them using this tutorial: A Tab Menu for Your Very Own. How exciting is that?

Free Twitter Buttons Roundup!!

While I was researching Twitter for Twit This, I came across a couple of sites with all sorts of twitter goodies! Well, more than a couple, as you will see. Some of them are animated, most are not. All are creative and really fun!

LimeShot Marketing

Make your own personalized button...twignature

All sorts of cute ones here! Twitter Buttons

Many different ones...VincentAubry.com


FWD

Function

Randa Clay

LoonDesign

IconTexto

Productive Dreams

Monkey Works

Smashing Magazine

I am Paddy

Fasticon

Milk Addict

Siah Designs

So, what are you waiting for? Get yourself a cute litte twitter bird!!

Post Title With an Image

First off, I love your blog! You do so many cool things with it! I was looking at some of the blogs you have done for other people. I particularily like http://christyann-photography.blogspot.com/search/label/baby. After looking at I was wondering, how did you do the image and fonts for the Post Title? I thought you did an excellent job! If you have time, I would love to know how. If not it is ok. Thanks!

--
Carrie Jo


Pretty easy to accomplish! You must locate the .post h3 part of your CSS style sheet. Before doing anything, remember to save your template!

.post h3 {
background:url(YOUR POST IMAGE) no-repeat;
padding: 20px;
margin: 20px;
margin-top:.25em;
margin-left: 0px;
margin-bottom: 20px;
border-top:1px dashed #42c4de;
border-bottom: 1px dashed #42c4de;
padding:10 0 4px;
font: normal normal 100% Georgia, Times, serif;
font-size:240%;
font-weight:bold;
line-height:1.4em;
color: #49331c;
text-transform:uppercase;
text-align: center;
}

This is the line of code that you add to the .post h3 section.

Depending upon the size of your image (I would recommend keeping it small...around 20-30 px square.) you will adjust these values. Now, this will be different for each blog...each image. So trial and error will see you through.

If you want some sort of border, this is the code. And here are some values that you can use instead of dashed:

1. dotted
2. solid
3. double
4. groove
5. ridge
6. inset
7. outset

Save your work and you have a cute little image in your post title!

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

Post Larger Images with Blogger

Have you ever wished that you could post larger images via the Blogger: Upload Images window? I found a neat trick from a reader, Miranda.

This requires a blogger template with extra width in the posting section so it will display the larger images.

Upload your image in the post window, Dashboard | Posting | Create | Add Image icon. After doing that, click on the Edit HTML tab and you will see this image code:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfD95WXFoBJGXok5hUIQcZdFNzS208heTaWHIIk3WYuNPb5KC33ktW-v9WIbZsu_mNn06GyrMouRrp45I6yL-KVCTaDbSTkEUWGnu2gbjubwDocmeFyC3t58a9zq_hkpsPkjZa12z1pfv4/s1600-h/DSC_2693.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfD95WXFoBJGXok5hUIQcZdFNzS208heTaWHIIk3WYuNPb5KC33ktW-v9WIbZsu_mNn06GyrMouRrp45I6yL-KVCTaDbSTkEUWGnu2gbjubwDocmeFyC3t58a9zq_hkpsPkjZa12z1pfv4/s400/DSC_2693.JPG" alt="" id="BLOGGER_PHOTO_ID_5237868380194789154" border="0" /></a>

All you change is the s400 to s800! Then you have a nice large image on your blog.

I'm not sure how legal this is. All I know is that it works.

EDIT: Question was brought up about draft users. I didn't realize the image code was different, but it is. So, if you use Blogger in Draft, here is your instructions. Follow the directions above. You will see this image code:

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA0xM0T2ufp5aJb1Qds4Awt07xPmbWWNY_2glvdgwg6BVaw5Opm7BZaGuSd-VRW3kK5oQ9Fhv720kgSl82lV9Xx7FZa0gfuDITsQ3F1kpqv7wDBq7iOT3JwNtEdSt075iLEpCOT9qfS06v/s1600-h/DSC_2689.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/_OFh1WWXWCHM/SLDBAvBlhrI/AAAAAAAAB7g/kTUthEX2IYc/s320-R/DSC_2689.JPG" /></a></div>

Change this s320-R to this s800-R. Where there's a will, there's a way!

EDIT 09/08/08: Thanks to The A of DNA for: If you don't want it as large as s800 replace it with s576!

Using an Image as the Sidebar Title

I love the effect of that an image gives as the sidebar title. It is such a simple thing to do. First things first. You will need a suitable image
that you can change the font on. My suggestion would be to make one using GIMP. This may help: Tutorial: custom header for Blogger using GIMP. Save your original (fontless) image as a template for changes you may make down the line to your sidebar. Look. I made one for Links!

OK. We have an image or two ready to go. My title image is for links, so I will show you how to do a widget for links. Open your Dashboard | Layout | Page Elements | Add a page element | HTML/Javascript. Add the following code to the window:

<img src="TITLE IMAGE URL"/>

<a href="LINK URL" target="_blank">LINK TITLE</a><br/>
<a href="LINK URL" target="_blank">LINK TITLE</a><br/>

You can add as many links as you want by opening (edit) the widget and adding this code:

<a href="LINK URL" target="_blank">LINK TITLE</a><br/>

for each new link. It certainly is a fun way to dress up your sidebar and coordinate it with other design elements in your blog.

Free Calendar Icons!

Doug took matters into his own hands and created a cute little set of calendar icons to download for free! And they have the year stamped right on the image.



Want to add a calendar icon to your posts? Read this to get you on your way, Using a Calendar Icon as the Post Date Header.