BlogU

Add Your Blogger Post to Twitter

anniebluesky@gmail.com (annie) — Sun, 27 Sep 2009 13:24:00 +0000

If you have a blog and you tweet, this is for you. Automatically tweet your blog posts! Head over to twitterfeed. It is a three step process:

Create an account
Add your feeds
Track your feeds

Step 1: Create an account is simple enough. OpenID can sound scary, but fear not. Look here. If you have one of these accounts...or others, you have an OpenId already. This step is pretty easy. Let's move along.

Step 2: Add your feeds. This is actually a two step process.

First, make sure twitter is in the little drop down box. Then click on Connect your feed to your Twitter Account. You are then swooped away to Twitter where you are asked...Allow twitterfeed access? Click allow and you are then returned back to twitterfeed.
Now for the second part of step 2...Give your feed a name. I called mine BlogU. Then find your feed. Easy. Go to the Blogger Dashboard | Settings | Site Feed. Your feed URL is in the box by Post Feed Redirect URL. (Do you need help with getting a site feed? Read Setting up a RSS Feed.) After you get your RSS URL, paste it in and then test it by clicking on the little button. If all is well, you will get a message saying Feed parsed OK . Now click on the Create Feed button.

Step 3: After you clicked that last button, you will be taken to the page where you can track your feeds, edit them, delete them, or add another feed. I also clicked on switch to plain list view. It just made my options seems cleared to me.

TA DA!!!!! You are not blogging and twitting almost simultaneously. Welcome to the 20th century.

Add a double line border

anniebluesky@gmail.com (annie) — Sat, 26 Sep 2009 17:44:00 +0000

How do you get it to make it a double line? I tried experimenting but I'm not sure which fields should be changed. Thanks, this site is awesome!

This is an easy thing to change. You will look for the code that you wish to change. If it is the post, you look for the post code in the CSS style sheet. If it is the sidebar, you look for the sidebar code. As a matter of fact, anything in the CSS style sheet that says border can be changed.

This is the code in my template (a modified Blogger Minima template) for the post:

.post {
margin:.5em 0 1.5em;
border:1px dashed $bordercolor;
padding: 5px;
padding-bottom:0px;
}

This is the line we are interested in changing. See where mine says dashed? That gives me the dashed line around my posts. Change that to double. You may want to also change the 1px to something a little thicker, like 3px or 4px just to make it stand out better.

Actually, there are other styles you can use. Here is a list of them:

dotted
solid
dashed
double
outset
inset
groove
ridge

There may be more, but I'm not aware of them.

And here is another little tip. You can apply a different border to each side. For instance if you want a double border on the bottom only, you would change the above code to:

.post {
margin:.5em 0 1.5em;
border-bottom:3px double $bordercolor;
padding: 5px;
padding-bottom:0px;
}

See where I added -bottom? That same line can be changed for all sides using:

-top
-right
-bottom
-left

Or if you want it on the bottom and right only do this:

.post {
margin:.5em 0 1.5em;
border-bottom: 3px double $bordercolor;
border-right: 3px double $bordercolor;
padding: 5px;
padding-bottom:0px;
}

You get the idea. There are a million ways to play with this. It is just a matter of what look you want.

Change comment script from plural to singular

anniebluesky@gmail.com (annie) — Sat, 05 Sep 2009 12:26:00 +0000

Things that drive me crazy...I hate it when I look at a blog and it says "1 comments". I had a fix for classic blogger, but just realized that I didn't have one for the the new blogger. So, if it drives you crazy too, roll up your sleeves and dive in. But first...always first...backup your template! This fix requires you to go deep within the bowels of you template. GASP...the dreaded Expand Widget Templates. So, expand them and let's go!

First find this code in your blog. I'm basing this on the Minima template, so your code may be slightly different.

Step 1 Find this code:

<b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if>

Step 2 Replace that with this code:

<br /> <b:if cond='data:post.numComments == 1'>1 comment<br /> <b:else/><br /> <b:if cond='data:post.numComments == 0'>Reply to this post<br /> <b:else/><br /> <data:post.numComments/> comments<br /> </b:if><br /> </b:if> <br />

Step 3 Repeat Step 1 and 2 because this code is in your template twice.

Now you can get a little fancy and instead of where it says Reply to this post, you can put whatever you want. Like...Let's talk...Be the first to comment...Don't leave me hanging.

Now your blog is approved by the Emily Post Institute of Etiquette. Well. Maybe not. It depends what else you put in your blog. But at least she is smiling over your comment grammar.

Do you want to wrap text around an image?

anniebluesky@gmail.com (annie) — Fri, 15 May 2009 04:47:00 +0000

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.

Troubleshooting the Label Cloud

anniebluesky@gmail.com (annie) — Sat, 09 May 2009 03:58:00 +0000

I just figured out something that may be baffling others. I was looking at my photography blog, Sharondipity Photography, and noticed that my label cloud was not there. PFFFFTTTTT....gone.

If you have installed the label cloud and have problems, this may be the reason why. Quotation marks. Make sure that you don't have quotation marks in any labels. If you do, go through and remove them.

Another thing. At least one of your labels have to be in more than one post. Otherwise it won't work. I don't know why. I just know that is the way it is.

A Program to Create Your Own Tab Menu Graphics

anniebluesky@gmail.com (annie) — Thu, 16 Apr 2009 00:45:00 +0000

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?

Blogger XML Template - Gypsy Garden

anniebluesky@gmail.com (annie) — Sat, 07 Mar 2009 03:34:00 +0000

Click on image for working demoDownload

A note to those of you that put my templates up for download. I appreciate that you like them enough to do so, but please link back to my post and don't put my template for download from your site. I enjoy the traffic!

I just felt like making another template. So, here is another free template!! This template is a little grungy. Not too girly. But girly enough!

~CREDITS~
Fonts: Feena Casual 10 pt
Borders: Trish McCoy
Papers: More Flowers Pixels and Icecream
Frame Brushes: Doodle Frames

A New File Host for my Free Blogger Templates!

anniebluesky@gmail.com (annie) — Fri, 06 Mar 2009 22:19:00 +0000

For a long time I've been wrestling with my web/file host. I think I have found the solution! I found MediaFire. I'm using the free account and have uploaded all my blogger templates.

I'm confident that that my readers will be able to download all the templates without any problems. If, by chance, you have a problem, please email me what happened.

post signature

Change Your Blog Font!

anniebluesky@gmail.com (annie) — Sun, 22 Feb 2009 13:02:00 +0000

While looking at a fellow photog's blog, Little Kiwis Photography, I was admiring her blog's font. Then I saw a link that said "I changed my font at the cutestblog.com" so I clicked. Well, I was excited. Here is how my photography blog looks now at SeaSide Sharon.

If you want to do this, follow this link, How to change the font on your blog, for a quick and easy installation!

post signature

Widen the Post Section

anniebluesky@gmail.com (annie) — Fri, 23 Jan 2009 12:36:00 +0000

Thank you so much for the tips!
it really helps :]
and do you know how to enlarge the postings column? Because my posting column is kinda too small somehow in my blog .
Thanks :]

This was from sararocks. This is a easy little fix. You have to make two little changes in your CSS style sheet. Look for this piece of code:

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Then make changes to the width. Add the same amount of to each area like this:

#outer-wrapper {
width: 860px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 610px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Here I added 200px to each area. All that is left to do is save your work!

Moving FeedBurner accounts to Google

anniebluesky@gmail.com (annie) — Sun, 18 Jan 2009 16:03:00 +0000

I got a tweet message from rajtilak saying that I may be interested in this. And sure enough, I am.

I hurried on over to Feedburner and this is the message I found:

"Hey! We are moving FeedBurner accounts to Google. Learn more or Move your account now."

It was a simple painless process. A couple of clicks and it automatically transferred all of my feedburner accounts. As a matter of fact, it is still transferring...it said it may take a bit.

Thanks, Ratjilak for the heads up!

post signature

Free Twitter Buttons Roundup!!

anniebluesky@gmail.com (annie) — Tue, 13 Jan 2009 15:41:00 +0000

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 signature

Twit This

anniebluesky@gmail.com (annie) — Mon, 12 Jan 2009 01:13:00 +0000

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='"http://twitthis.com/twit?url=" + data:post.url + "&title=" + data:post.title'>Twit This!</a></div>

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

Classic Blogger Favicon Fix!!

anniebluesky@gmail.com (annie) — Tue, 04 Nov 2008 20:20:00 +0000

I was missing my favicon on Buttermilk Clouds, which happens to be a classic blogger template. I tried several different things and nothing worked until I tried this.

In your template (towards the top) find this:

<$BlogMetaData$>

Then place the following code right after it.

<link rel="icon" href="FAVICON URL" type="favicon" />
<link rel="shortcut icon" href="FAVICON URL" type="favicon" />

If you have the new blogger template (formerly known as blogger beta) there is a fix for them, also.

Pretty easy. I really love my favicon, and I'm very upset with Blogger for attempting to do away with it. Shame, shame on you Blogger!

Fix for Broken Favicons

anniebluesky@gmail.com (annie) — Fri, 24 Oct 2008 01:34:00 +0000

I have been bombarded with emails from disgruntled bloggers that have lost their favicons. But, don't despair! There is a fix. I don't know how, or why it happened, but some of my blogs were also missing their favicon. Not all of them. But some. Once again, I don't know why. (Maybe a reader out there knows why.)

Anyway, the good news is, the fix is simple!! There are 2 steps.

Step 1 - find your favicon code in your template. It should be near the top of your template. Copy that code.

Step 2 - Paste that code here:

]]></b:skin>
PASTE ICON CODE HERE
</head>

If I have learned anything from this...we bloggers LOVE our favicons!!

Post Title With an Image

anniebluesky@gmail.com (annie) — Wed, 22 Oct 2008 00:09:00 +0000

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:

dotted
solid
double
groove
ridge
inset
outset

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

Another way to remove "Subscribe to: Posts (Atom)"

anniebluesky@gmail.com (annie) — Sun, 14 Sep 2008 22:52:00 +0000

While working on a template, I was trying to remove the Subscribe to: from the bottom of the page. For some reason, previous methods that have worked for me in the past, didn't work on this template. I ended up adding this bit of code to the CSS style sheet:

.feed-links {
display:none;

}

That did it! Who knows why. Certainly I don't...I'm just happy it worked and thought I'd share.

post signature

anniebluesky@gmail.com (annie) — Sat, 13 Sep 2008 09:41:00 +0000

Have you ever wanted a feature under your post that shows related posts from your blog? I found this way to do it from JackBook.com. It was originally designed by Hoctro with modifications by JackBook. This uses labels/categories that you already have in place to show Related Posts by Category.

There are two steps to this hack. But before you begin, be sure to save your template!

Step 1: Go to your Dashboard | Layout | Edit HTML | check Expand Widget Templates and locate this code:

<data:post.body/>

Step 2: Place this code after the code you just located:

<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>





<div class='widget-content'>
<h3>Related Posts by Categories</h3>
<div id='data2007'/><br/><br/>
<div id='hoctro'>
Widget by <u><a href='http://hoctro.blogspot.com'>Hoctro</a></u> | <u><a href='http://www.jackbook.com/' title='Related Posts on Blogger Modified by JackBook.Com. Read More?'>Jack Book</a></u>
</div>
<script type='text/javascript'>

var homeUrl3 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;

maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;

function listEntries10(json) {
var ul = document.createElement('ul');
var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i < maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;

for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement('li');
var a = document.createElement('a');
a.href = alturl;

if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l < json.feed.link.length; l++) {
if (json.feed.link[l].rel == 'alternate') {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k<20; k++) label = label.replace("%20", " ");
var txt = document.createTextNode(label);
var h = document.createElement('b');
h.appendChild(txt);
var div1 = document.createElement('div');
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById('data2007').appendChild(div1);
}
}
}
function search10(query, label) {

var script = document.createElement('script');
script.setAttribute('src', query + 'feeds/posts/default/-/'
+ label +
'?alt=json-in-script&callback=listEntries10');
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
}

var labelArray = new Array();
var numLabel = 0;

<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = "<data:label.name/>";

var test = 0;
for (var i = 0; i < labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length <= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel < maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>

</div>
</b:if>

Save your work and all is done.

A Round-Up of Free Blogging Icons!

anniebluesky@gmail.com (annie) — Thu, 28 Aug 2008 23:53:00 +0000

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

anniebluesky@gmail.com (annie) — Sat, 23 Aug 2008 23:51:00 +0000

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="http://3.bp.blogspot.com/_OFh1WWXWCHM/SLClilXC1yI/AAAAAAAAB7A/Z8G8y03R2ek/s1600-h/DSC_2693.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="http://3.bp.blogspot.com/_OFh1WWXWCHM/SLClilXC1yI/AAAAAAAAB7A/Z8G8y03R2ek/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="http://2.bp.blogspot.com/_OFh1WWXWCHM/SLDBAvBlhrI/AAAAAAAAB7g/DYam-G0ZTNA/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!

Blogger Error Messages

anniebluesky@gmail.com (annie) — Fri, 22 Aug 2008 19:05:00 +0000

Oh. You know them. You've seen them. The nasty red font above your template edit window after you attempt to save your template or even preview your work. Jeering at you with:

Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly. XML error message: Element type "href" must be followed by either attribute specifications, ">" or "/>"

or

More than one widget was found with id: HTML3. Widget IDs should be unique.

Makes my skin crawl. But, you can battle the error message...and be victorious!!

I think the two examples above are probably the most commonly seen messages. At least for me they are. The first example can have a variety of elements in the "href" spot. Sometimes it is like fill in the blank. But, the thing to focus on is the ">" or "/>". I noticed, while working on a template yesterday for Pauls Health Blog, that I kept getting this error...with "div" as the element. It said that a "div" element wasn't closed properly. I checked and checked. Nothing looked out of place. But, the code I put in had "/>" at the end of it. And where I put the code, it already had the closing tag a bit further down. Finally I spied that little "/". That was the culprit. I removed the "/" and was finally able to save the template.

Lesson here is if you get this message, look carefully at the exact code you just put in. Does it have the "/" at the end with the ">"? If so, remove it. Or, controversially, if you get the error and it doesn't have the "/" at the end, slip it in!

The second error message comes up when adding code to your template that has already named the widget. It is easy to fix. Find the culprit in question and renumber it. It doesn't make any difference what number, just as long as it doesn't occur anywhere else in your template. It wants to be unique.

+/- (hide/show, expand/collapse) Labels

anniebluesky@gmail.com (annie) — Wed, 13 Aug 2008 19:13:00 +0000

I'm on a label enhancement mission. Maybe my drop down menu label method didn't do it for you. Good news! Here is another option for you label makers using the infamous +/- method. This is simple, simple, simple.

Step 1 - Without expanding your widgets, find this code in your template:

<b:widget id='Label1' locked='false' title='Labels' type='Label'>

Step 2 - Replace that line with this code:

<b:widget id='Label2' locked='false' title='Labels and Feeds' type='Label'>
<b:includable id='main'>
<script type='text/javascript'>
//<![CDATA[
if(typeof(rnd) == 'undefined') var rnd = '';
rnd = Math.floor(Math.random()*1000);
rnd = 'id-' + rnd;
document.write('<a href="#" onclick="tmp = document.getElementById("' + rnd + '"); tmp.style.display = (tmp.style.display == "none") ? "block" : "none"; return false;" style="float:left;margin-right:5px;">');
//]]>
</script>[+/-]
<script type='text/javascript'>
//<![CDATA[
document.write('<\/a>');
//]]>
</script>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script type='text/javascript'>
//<![CDATA[
document.write('<div id="' + rnd + '" style="display:none;">');
//]]>
</script>

<ul>
<b:loop values='data:labels' var='label'>
<li>

<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
</li>
</b:loop>
</ul>

<script type='text/javascript'>
//<![CDATA[
document.write('<\/div>');
//]]>
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

TaDa! Label those posts!

EDIT: 08/16/08 - In order for this to work, you have to have a label widget in place. And you have to have posts labeled. So, go to your dashboard | layout | page elements | add a gadget | Labels before trying this code.

Drop Down Menu for Labels

anniebluesky@gmail.com (annie) — Tue, 12 Aug 2008 22:22:00 +0000

Hi Annie
I've just successfully used your instructions on adding tabs to my blog and have seriously cleaned up my sidebar, for which I sincerely thank you but, I would like to go a bit further. My Label list is pretty long and I would like to have a scroll bar or drop down menu for it. Trouble is, I can't see how I can get the scroll bar instructions on BlogU to work with the Label page element 'cos there's nowhere to enter the code given and I can't find anything about a drop-down (unless I've passed over it) on your blog.
Just thought it was worth an email to ask advice and to say thank you for the info I've already used successfully. I've recommended your site to a friend and put a link on my blog list ....

My readers are keeping me on my toes! Here is another request...this time for a drop down menu for labels. Here are the steps to accomplish this.

Step 1 - find this code in your template:

<b:widget id='Label1' locked='false' title='Labels' type='Label'>

Step 2 - replace that line with this:

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<br/>

<select onchange='location=this.options[this.selectedIndex].value;' style='width:200px'>
<option>Labels</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
</option>
</b:loop>
</select>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

There are a few places in this code to customize it. Change this number to change the width of the box to fit in your sidebar. Change the wording that shows in the first line of your drop down box...to whatever you like.

Now you have a sweet little drop down menu to corral those labels that are getting out of hand. Go now and label with reckless abandon!!!

EDIT: 08/16/08 - In order for this to work, you have to have a label widget in place. And you have to have posts labeled. So, go to your dashboard | layout | page elements | add a gadget | Labels before trying this code.

EDIT: 08/21/08 - If you want to display the label count {trees (5) birds (9) flowers (3)} after each label use this code in Step 2:

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<br/>

<select onchange='location=this.options[this.selectedIndex].value;' style='width:200px'>
<option>Labels</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
(<data:label.count/>)
</option>
</b:loop>
</select>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

EDIT 09/07/08: Here is an example of the drop down box before expanded and after:

HTML Code Box

anniebluesky@gmail.com (annie) — Mon, 11 Aug 2008 22:40:00 +0000

Hi,
I did a Google search on how to put a box with html code to "grab a button" in a blog post or somewhere else on the blog and yours came up.
I see that you have just what I am looking for close to the bottom of your blog (under the posts).
I have a button and all I need to do is put the code into a box so that people can copy and paste it to put the button on their blog. How can I add the same thing to my blog?
Your help would be very much appreciated.
Regards,
Gerri

Occasionally you want your readers to be able to copy code. Just how to get that code on your blog with out it doing it's little html magic first? Put it in a little box like this:
I'm a visual person, so the best way for me to explain this is with the exact code that I used for the above box:

<center>Grab this button:</center><center><img style="border: 0px none ;" alt="BlogU Button link" src="http://farm4.static.flickr.com/3092/2505649265_9cb03e574d_o.png" title="Steal my button!" width="80" height="15" /></center>
<center><textarea id="code-source" rows="3" cols="28" name="code-source"><a href="http://bloggeruniversity.blogspot.com/"><img border="0" src="http://farm4.static.flickr.com/3092/2505649265_9cb03e574d_o.png" /></a></textarea></center>

And here is the code showing what you need to change:

<center>TEXT EXPLAINING WHAT IS IN BOX</center><center><img style="border: 0px none ;" alt="LINK TITLE" src="IMAGE URL" title="LINK TOOLTIP TITLE" width="XX" height="XX" /></center>
<center><textarea id="code-source" rows="3" cols="28" name="code-source"><a href="LINK"><img border="0" src="IMAGE URL" /></a></textarea></center>

The pink code is where you can adjust the size of the box. All that is left to do is place it in a HTML/Javascript widget!