Make an Archive Page in Blogger

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

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

Hyperlink image to open new window

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

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

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!

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

Blank title widgets

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.

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.

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?

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!

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!

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

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.

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