BlogU

Make an Archive Page in Blogger

noreply@blogger.com (Sharon Pickering ) — Wed, 28 Dec 2011 04:42:00 +0000

I'm working on Sharondipity Photography. In the process I wanted to put the archive in a blogger page that was visible only when the Archive Page link was clicked. This is how I made an Archive Page.

Before you begin, save your template by going to Dashboard | Design | Edit HTML | Download Full Template. Now you are ready.

1. Go to Dashboard | Design | Page Elements. Now click on Add a Gadget. It doesn't matter where, because you are going to make this gadget disappear everywhere except your Archive Page.

2. Locate your CSS Style Sheet. The very last part you will see ]]></b:skin>. You will place this code directly under it:

<b:if cond='data:blog.url != "YOUR ARCHIVE PAGE URL"'>
<style>
#BlogArchive1{
display:none;
}
</style>
<b:else/>
<style>
#Blog1{
display:none;
}
</style>
</b:if>

Save.

3. Go to Dashboard | Posting | Edit Pages | Create a Page. Leave it blank...just give it a title. Archives will do nicely. Publish page | Save and Publish | Choose Blog Sidebar or Blog Tab | View Page. Copy the Archive page URL that is in the address bar. It should look like http://YOUR BLOG.blogspot.com/p/archive.html.

4. Go back to your CSS style sheet and paste that URL in the above code. Save your template!

Now, when you are on your home page, you will only see the Archive link either in your sidebar or blog tab. When you click on it then the archives will be visible.

Page Jumps

noreply@blogger.com (Sharon Pickering ) — Sun, 24 Jul 2011 02:46:00 +0000

Hi Annie! Just wondering.. how would you make a link in a blog which in it will take you to that part in a blog? Don't get it? Here's what I mean..
For example, "Steps on Baking Pastry:" There will be list of the steps first then, the steps. For ex., you click "Step 8: Putting it in the Microwave", it takes you to:
"Step 8: Putting it in the Microwave
Put it there for 3-5 minutes until...."
?? Just wondering.. Would be glad if you answer back!

Instead of reinventing the wheel, I found this wonderful tutorial.
Jumping Inside Pages - HTML Tutorials

Chicklets...a blast from the past

noreply@blogger.com (Sharon Pickering ) — Sat, 23 Jul 2011 00:49:00 +0000

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.

Brilliant Button Maker By the way, this is the one I used to make my Chicklet because it allows an image to be used.
Just another button maker
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.

Optimize your blog for mobile devices

noreply@blogger.com (Sharon Pickering ) — Sat, 23 Apr 2011 22:43:00 +0000

Does everyone know about the mobile version for your blog? It is really pretty cool. And since many viewers will use a mobile device at some point to view your blog, doesn't it only make sense to optimize it for them so it comes up readable?

Now the good news. It is incredibly easy. No code. No CSS. No HTML. This is what you do:

open your dashboard in the "Blogger Draft"
click on the settings tab
click email & mobile
in the 'Show mobile template' section check Yes, On mobile devices, show the mobile version of my template.
save settings

Now everyone can easily view you blog in a simpler mobile friendly manner.

Hyperlink image to open new window

noreply@blogger.com (Sharon Pickering ) — Sun, 05 Dec 2010 22:04:00 +0000

How do I make the picture link to an external site, but have it open into a new window?

Some think this is not a good idea. This post is not addressing that. This is simply a post on how to open an image that is linked to another site in a new window.

This is the code that does that:

<a href="URL" title="TITLE"><img src="IMAGE URL" border="0" width="xx" height="xx" alt="Description"></a>

And here is the code with the information plugged in:

<a href="http://seaside-sharon.blogspot.com/" title="Seaside Sharon"><img src="http://farm4.static.flickr.com/3117/2489901121_35e9239f99.jpg" border="0" width="254" height="45" alt="Seaside Sharon header"></a>

Here is the result of using that code.

Where to put the blockquote code

noreply@blogger.com (Sharon Pickering ) — Tue, 26 Oct 2010 13:00:00 +0000

where to put the code?

I had a question regarding where to place the blockquote code from this post, Pretty Blockquotes.

You insert this code within your post where you want the blockquote to appear. (using the Edit HTML window).

<blockquote>PLACE QUOTE TEXT HERE</blockquote>.

How to remove a border from around a photo

noreply@blogger.com (Sharon Pickering ) — Tue, 26 Oct 2010 12:36:00 +0000

How to completely REMOVE the border that appears around a posted photo within a post on Blogger??

This is easy to change! You will look for the code that you wish to change, which is .post img code in the CSS style sheet.

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

.post img {
padding:4px;
border:0px solid $bordercolor;
}

Or it could look something like this:

.post img {
margin: 5px;
padding: 5px;
background: $imagebgColor;
border: 1px solid $imageBorderColor;
}

Change this line to read:

.post img {
padding:4px;
border:none;
}

If you have difficulities in finding the correct code in your CSS template, keep in mind you are looking for .post img.

No more borders around your images!!

Make a custom favicon for your blog!

noreply@blogger.com (Sharon Pickering ) — Sat, 10 Jul 2010 21:48:00 +0000

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:

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

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

Placed your cursor in the header and select a 16x16 pixel area
Click Edit | Crop Selection
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!!!!

Blank title widgets

noreply@blogger.com (Sharon Pickering ) — Mon, 21 Jun 2010 21:15:00 +0000

For some strange reason, Blogger, in it's infinite wisdom, once again has decided to do something bizarre with the templates. It is now making us put a title in each widget/gadget title field.

Why? Good question. I wish I knew. But, until the person in charge of Template Management on the blogger team wakes up and realizes the error in this way, I have a work-around. And, thankfully, it is a simple one.

Every time you edit a gadget that had no title, or when you create a new gadget that you don't want a title on, put this code in the title field:

<h2></h2>

For the time being we have fooled the gadgets to believe there is a title in the field.

I hope they realize that this behaviour is just plain silly and put it back the way it was.

"Read More" and controlling posts per page

noreply@blogger.com (Sharon Pickering ) — Fri, 05 Feb 2010 05:32:00 +0000

Hi Annie,

I stumbled upon your university and i'm learning a lot!

I don't have much knowledge in creating htm pages so i want to learn more...

I have some questions that i want to ask you:

First: How do you display only 1 blog post in the home page?

Second: How do i get to cut my post if it's too long? I mean you could display 100-200 characters then it will be cut, then there will be a displayed message below it that say's "read more" which is linked to the full post?

I wish you could help me.. Thanks in advance!

Blogger has really made this easy for us now. You must post in Blogger in Draft to access the "Read More" feature. They call it insert jump break. It allows a portion of your post to be shown on your blog's index page. It then inserts a "Read more" link to the full post page where your readers can keep reading.

Here is how to do it:

Open your post editor window and click on the Compose tab.
Write your post till you get to the point you would like a Read More break.
Then click on the 'torn page' icon on the right.
Finish writing your post.

You can also customize the "Read more" text to something more clever. Edit it by clicking Layout | Blog Posts Widget | Edit.

Now, to make your blog display only one post, go to your Dashboard | Settings | Formatting | Show. That is where you change the number to 1. Also make sure posts is selected in the box and not days.

A couple of simple little fixes!

Add Your Blogger Post to Twitter

noreply@blogger.com (Sharon Pickering ) — 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

noreply@blogger.com (Sharon Pickering ) — 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

noreply@blogger.com (Sharon Pickering ) — 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?

noreply@blogger.com (Sharon Pickering ) — 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.

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

noreply@blogger.com (Sharon Pickering ) — 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

noreply@blogger.com (Sharon Pickering ) — 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

noreply@blogger.com (Sharon Pickering ) — 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!

noreply@blogger.com (Sharon Pickering ) — 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!

noreply@blogger.com (Sharon Pickering ) — 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

noreply@blogger.com (Sharon Pickering ) — 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

noreply@blogger.com (Sharon Pickering ) — 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!!

noreply@blogger.com (Sharon Pickering ) — 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

noreply@blogger.com (Sharon Pickering ) — 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!!

noreply@blogger.com (Sharon Pickering ) — 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!