Add Your Blogger Post to Twitter

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:

1. Create an account
2. Add your feeds
3. 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.

1. 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.
   
2. 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

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:

1. dotted
2. solid
3. dashed
4. double
   
5. outset
6. inset
7. groove
8. 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:

1. -top
2. -right
3. -bottom
4. -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

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?

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!

Troubleshooting the Label Cloud

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

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?

BlogRolling is Back Up

BlogRolling is back after a long hiatus! So, this is a quick reminder for those of you that requested to be put on the BlogU Students Blogroll to please submit your request again. Send it to anniebluesky@gmail.com.

Yippeeee!

PS/please make sure you have the blogroll up and running on your blog before submitting your request. The more details can be found in BlogU Students Blogroll.

Blogger XML Template - Gypsy Garden

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!

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.

Change Your Blog Font!

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!

Widen the Post Section

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

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!

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!!

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!