Easy Custom Blogs: Linking

Showing posts with label Linking. Show all posts

Sunday, June 21, 2009

Scrolling sidebar with links

SIDEBAR LINKED IMAGES WITHIN A VERTICAL SCROLL

Request by: Cara at Sweet Tomato Designs (requested a CT scroll with links) and

Jackie at Scap U (requested a vertical scroll)

Step 1 - Create each image you want in your sidebar scroll.

The final dimensions for a 2-column minima blog are

220 pixels width (height is up to you, but should not exceed 220 pixels)

96 Resolution

I scrap mine at 2200 pixels and resize for clarity.

***IMPORTANT – For quality make sure all your images are the same size.

Step 2 - Upload your image.

Upload your image to your favorite photo hosting site. I like Photobucket and Scrapbook Flair. Get the DIRECT LINK codes, and place them on your planning document.

Step 3 – Create a planning document.

In a word document write down each of the images you would like to be included in your scroll and list the URL (web address) with it. When you get your DIRECT IMAGE LINK you will add that too. Here’s a sample of a planning document:

Image 1 – Cara’s Home Page

Image 2 – Jackie’s Home Page

Continue making your planning document. When you are finished, you can delete all the spaces and words and leave just the code so it will be similar to our marquee code below. You will then copy and paste this code into the marquee code to complete your sidebar vertical scroll.

Step 3 – Make your code on your planning document.

Your final code will look like this:

Here is my ACTUAL CODE that I have on my test blog (DO NOT COPY THIS ONE) for those of you that are visual learners. You can see this code in action by clicking HERE.

Step 4 – Add your code by adding a gadget.

Go to CUSTOMIZE/LAYOUT/PAGE ELEMENTS/ADD A GADGET.

Select the ADD A GADGET from your sidebar. A window will popup with various choices, select HTML JAVA SCRIPT. You will then add your FINAL CODE by inserting information into the code below. The number on the code is the speed. The higher the number the faster the scroll rolls. URL is the web address! IMAGE LINK is where you uploaded your image.

To add more images/websites add this code after the <a>

To subtract number of images/websites delete the portion you do not need. Always delete the code beginning with the <a href and ending with the <a>.

Step 5 – Save and view blog.

If you do not like the action of your scroll, then you can just remove it by clicking on the gadget and selecting REMOVE.

Now you have scrolling sidebar websites with images.

TO MAKE THE SCROLL WITH TEXT ONLY:

Click HERE for Word Document Instructions.

Here’s to happy scrapping, and

Hugs from the heart,

Jeanette

Tuesday, February 17, 2009

A Tigger Bounce!

A Tigger Bounce is fun when you’re Winnie the Pooh, but not so fun when you’re serious about blogging! When you are offering another link within your blog, it is important to have that link open up in a new window. You do that by using the target="_blank" function. This is a great idea for two reasons:

1. It keeps your reader/visitor/guest on your page longer. If you are giving away a freebie, then you can have 4shared or whatever media you use to download open up in a new window.

2. For serious bloggers: It decreases your bounce rate. Bonnie Calhoun explains it best: “Bounce Rate is defined as how many times a visitor "bounces" away from your site and comes back. If you are involved in increasing your SEO (Search Engine Optimization), the bounce rate on an entry page can help to determine how effective it is at grabbing people's attention.”

So in the future use the following code, when linking in your blog:

<a href="URL of SITE" target="_blank">

Here are two sample links to demonstrate what I’m teaching:

1. Using the TARGET BLANK code: this link opens in a new window BZB Designs (some gorgeous freebies)

2. NOT Using the code: this link replaces the blog itself mITSEYBELLE (she has some great freebies too!).

You have to EDIT HTML in your post to add the TARGET BLANK code to make it work!

Friday, January 2, 2009

Learning to Link

Greetings!

I hope this post finds you and yours completely blessed and relaxed. I hope you are all having a fabulous NEW YEAR! I received a few emails about linking so I decided to create this lesson to help you scrap your blog!

Linking Text and Photos

Providing hyperlinks is important to allow for smooth navigation in your blog. Fortunately, blogger has made this very simple:

If you are in the COMPOSE PORTION of your post, you will see a gray bar across the top of the post writing block with your many posting choices. The choices are, in order, FONT, TEXT SIZE, BOLD, ITALICS, TEXT COLOR, HYPERLINK, PARAGRAPH FORMATING, BULLETS, QUOTE BLOCK, SPELL CHECK, ADD PHOTO, ADD VIDEO, REMOVE FORMAT. For this lesson, we are going to learn how to link photos, texts, and previous pages in our blog.

1. To hyperlink a photo, first you add the photo to the post. For some reason the photos always go to the top of the post, and I always move them where I want them within the post.
2. Highlight the photo with your cursor, and then click on the HYPERLINK button (the one that looks like a piece of chain).
3. The link button will pop up and the first section is already filled in for you with the http: format, which I always leave as is. The second part of the link window will be for you to enter the web address. I always copy and paste the web address from the site to reduce errors on typing. You will paste in the web address, and then your photo will be hyperlinked.
4. This is also how you link text. Type the text you want, then highlight it, go to the hyperlink button, and put in the web address you want.

Linking posts in your blog:
I always open a second window with my blog in it to easily find the location of the article I want to reference.
1. Find the post you want to link back to in your blog. Click on the TITLE of that post. Your post will open in the blog first, as if it were new.
2. Go to the address bar, and you will highlight the entire web address and copy it.
3. You will follow the directions above about linking texts and then pasting that code you copied from your address bar into the text or photo you have selected.

Linking freebies:
You can easily use your 4shared link the same way. Just highlight your photo (preview) of your freebie in the post, then click on the hyperlink button, and add your 4shared address to the pop up window, and your digi-scrap freebie will be linked.

I hope this is all information is easy and clear...Please feel free to contact me if you have any questions!

Hugs from the heart,
Jeanette

Tuesday, December 9, 2008

Creating buttons

To create buttons is so much fun. That's one of the reasons I created Easy Custom Blogs. I wanted to share AS I LEARN. So much of this is by experiement. If you are checking back with me, my goal is to post one new lesson per day in Easy Custom Blogs. First, we will add buttons (pictures with hyperlinks) to the side bar, then we will add buttons within our posts!

Easy Custom BlogsSide Bar Buttons Instructions:

I recommend that you Backup your template, HERE are the instructions, before beginning.

1. Create a button. If you want to put it on the side bar, then your final dimensions should be no larger than the following:

1.52 x 1.06 inches

228 x 159 pxl

150 Resolution

I prefer to make my buttons larger for details, then resize for posting. If you save the button as a PNG or PSD then you can make changes, and if you post them, the background appears to be transparent, allowing for unique shapes. You can save your image on your computer or with an image host (links to free image hosts can be found on the sidebar).

2. Go to your blog and select the LAYOUT tab.

3. Select PAGE ELEMENTS.

4. Select Add a Gadget from your side bar.

5. A window will popup with various choices, select PICTURE.

6. A new window will popup that says, CONFIGURE IMAGE. You will have a choice of where to get your image, and you can upload from your computer or the image host.

7. Within that window, you may add a Title, Caption, and LINK.

8. Click SAVE, then VIEW BLOG.

Easy Custom Blogs Buttons WITHIN THE POST instructions:

1. Create your button. I chose the following dimensions, but you may make them whatever you like.

2.0 x .75 inches

600 x 225 pxl

300 Resolution (I can use the higher resolution because the button is so small)

2. Type your post, and add your image (button) by clicking on the picture icon in the posting tools and add it where you like.

3. After you see your image, you will highlight it, and select the hyperlink icon on the top of the window. It looks like two chain links hooked together.

4. A hyperlink window will popup, and you will add your URL (Uniform Resource Locator) to the box and click OK! Your image will be linked!

You should receive a message when you click on my sample button.

Easy Custom Blogs

Type in key words and search my blog here: