More HTML Tricks!

Part I

1. Resizing an Image
Ever have a button you want to put in your sidebar but find it just doesn’t fit? There’s a way to fix that! Let’s take this random button I just found somewhere on the web. :whistle:

Let’s pretend it’s to big for our sidebar and we want to shrink it down to fit. To do this we have to edit the code (you know, that you copied and pasted into your widget) which will look similar to this:

<a href="/"><img src="http://i231.photobucket.com/albums/ee24/summeresque/designsbysummerbutton.jpg"></a>

We find the img tag right here:

<a href="/"><img src="http://i231.photobucket.com/albums/ee24/summeresque/designsbysummerbutton.jpg"></a>

Type a space after the img and insert sizing declarations like so:

<a href="/"><img width="100" height="100" src="http://i231.photobucket.com/albums/ee24/summeresque/designsbysummerbutton.jpg"></a>

Now our button looks like this:

You don’t have to use 100 by 100. It all depends on the shape of the button. You may have to play around with different numbers to get it to where it’s not distorted but you’ll figure it out quick.

2. Linking an Image
That’s right, you can turn a picture into a link with just a little bit of code. Below we have an ordinary unlinked image:

Now let’s turn it into a link. Once again, you must modify the code which will look something like this:

<img class="alignnone size-thumbnail wp-image-702" title="sigfragcollection" src="../../wp-content/uploads/2008/06/sigfragcollection-150×141.jpg" alt="" width="150" height="141" />

And now we are going to add our own piece of code:

<a href="http://www.urbanbotanic.com"> at the very front and </a> at the very end

So now the entire piece of code looks like this:

<a href="http://www.urbanbotanic.com"><img class="alignnone size-thumbnail wp-image-702" title="sigfragcollection" src="../../wp-content/uploads/2008/06/sigfragcollection-150×141.jpg" alt="" width="150" height="141" /> </a>

Obviously insert your own URL into the code instead of using the one above. One of my new favorite companies by the way! (I wasn’t paid to say that.) And here is the linked image:

3. Make a line break

Say you want to sign a post with your name and url and email address or something. And you want your name on one line, your url below that and your email address below that. Here’s how you do it. Let’s start with everything on one line:

Summer http://summersnook.com emailme@mail.com

Now it’s time to add some code:

Summer<br> http://summersnook.com<br> emailme@mail.com

Now it looks like this:

Summer
http://summersnook.com
emailme@mail.com

4. Create a copyright, trademark and registered trademark symbol

&copy; will give you ©
&reg; will give you ®
&#8482; will give you ™

5. Create a scrolling marquee

This is a scrolling marquee

I personally think they’re evil for all the time use, but they could prove useful attention getters if you’re making an important announcement on your blog. Now, how did I do it? With this little piece of code:

<marquee behavior=scroll direction="left" scrollamount="5">This is a scrolling marquee</marquee>

Just like regular text or images you can turn a marquee into a link or change the font size and color. See part I. Even change the speed at which it scrolls by changing the number next to the scrollamount tag. You can even make the marquee move right, up or down by changing the “left” to “right”, “up” or “down”




Using HTML in Blogging

* UPDATED - I forgot that my program converts classic HTML so I updated the code to reflect the transition taking place into newer mark up.


Have you ever wondered how to snazz up your blog posts or comments, by doing, say:

this, or this or this or this? Maybe you still haven’t figured out how to add a link to some text. Well, today I’ll tell you how with just a few of the basics of HTML. There is loads more to be learned if you find your interest peaked by the examples below.

1. Make a word or words bold
Add the following opening and closing tags to the word or words that you want bold, like so.

<strong>I want to make this sentence bold.</strong>

Now this sentence is bold.

2. Make a word or words italic.
Add the following opening and closing tags to the word or words that you want italic, like so.

<em>I want to make this sentence italic.</em>

Now this sentence is in italics.

3. Make a word or words a different color.
Add the following opening and closing tags to the word or words that you want a different color, like so.

<p style="color:red">I want to make this sentence red.</p>

Now this sentence is red.

4. Make a word or words underlined
Add the following opening and closing tags to the word or words that you want underlined, like so.

<u>I want to make this sentence underlined.</u>

Now this sentence is underlined.

5. Make text smaller or larger
Add the following opening and closing tags to the word or words that you want change, like so.

I want to make this <p style="font-size:6">word</p>larger

Now this word is larger.

Note that you could change the 6 out for a 1 to make it super small or a 9 to make it even bigger. Play around with numbers and see what size suits your purpose.

6. Make text link to a different page
Add the following opening and closing tags to the word or words that you want linked, like so.

I want to make this <a href="http://yourlinkhere.com">word</a> a link.

Now this word is a link.

7. Create a blockquote
Add the following opening and closing tags to the word or words that you want put in a blockquote, like so.

<blockquote>I want to put this sentence in a blockquote</blockquote>

Now this sentence is in a blockquote

8. Center a picture or text
Add the following opening and closing tags to the word or words that you want centered, like so.

<p style="text-align: center;">I want to center this sentence.</p>

Now this sentence is centered.

Want the text aligned right, just change the center command to, right.

9. Strike through a word or words
Add the following opening and closing tags to the word or words that you want struck through, like so.

<del>I want to strike through this sentence.</del>

Now this sentence has a strike through.

HTML works for me!




So Many Buttons And Badges

If you’re relatively new to blogging, you may be wondering what all the buttons and badges you see in people’s sidebars are. I know when I started blogging they looked very foreign to me. I had no idea what all of them were or why people were sticking them in their sidebars. Well, here’s a little explanation of the ones I have in my sidebar for you.

1. In the top left portion of my sidebar you see two buttons which say, Subscribe in a Reader and Subscribe by Email. For a long time I had no idea what this meant and I was so happy when I discovered what a Reader was. Feed Readers reduce the time and effort needed to regularly check blogs for updates. Once you’ve subscribed to a feed, new content on the feed you’ve added is checked for and updated. So updates are brought to me instead of my clicking on individual links over and over without promise of new content having appeared. Some popular feed readers include:

* Google Feed Reader
* Bloglines
* Omea Reader
* Awasu

I use Google Reader to keep up with my favorite blogs.

2. Also in my left sidebar is a small pink box with a link underneath that reads, Follow me at Twitter. Occasionally, you may notice the content in this box changes. This is Twitter, the newest internet phenomenon, and it’s rather fun. I post little blurbs all throughout the day about what I’m doing.

3. Below is my Cre8Buzz Badge, that you can find in the left sidebar. Cre8buzz is a social networking site that I have found to be both fun and helpful in boosting my blog traffic. I highly recommend it so go sign up!

4. Technorati Buttons like the ones below:

Add to Technorati Favorites

“Currently tracking 112.8 million blogs and over 250 million pieces of tagged social media. Technorati is the recognized authority on what’s happening on the World Live Web, right now.” - Technorati Website

Technorati features a well respected ranking system for blogs. My rank is 26,828 which means I am 26,828 places away from being the #1 ranked blog on the internet. They also point out what is called Authority. You can see above that my Authority is 187. This means that 187 different blogs have linked back to my blog. (Not just 188 different times, but 187 different blogs). You add your blog to your Technorati page and then hope that people will add it to their favorites, hence the, Add to Technorati Favorites small green button above.

5. All of the little buttons below, are also found in my sidebar. Each of them link to different Blog Directories I have joined, hopefully getting my blog more exposure. On most of them, people can also rank my blog.

My Zimbio
Directory of Parenting Blogs
Check PageRank
Parents blogs
Parenting Blogs - BlogCatalog Blog Directory

Parents Blogs
Summer's Nook

Proud member of Mom Blog Network




Make blogging easier

I had been blogging for about 4 months before I discovered the beauty of a feed reader. I can’t even remember how I discovered it, but when I did it was a joyous occasion.

Before using a reader I would find myself clicking on the links in my blogroll at all times of day, waiting for the blog to load only to be disappointed that there wasn’t a new post up yet. It took a lot of time and I was getting to the point where I didn’t think I could keep up anymore when I learned about Google Reader.
All you need to be able to use it is a Gmail account. Once you log in you click on Add Subscription and type in the url of a blog you like to read. Then add another one and so on. You can have as many blogs in your reader as you like.

The purpose of the reader is to consolidate all of your favorite blogs in one place with notifications when they have been updated. Now I just check my reader twice a day instead of clicking on each individual blog link without knowing if it’s been updated or not. It’s a terrific time saver and works well for me!

P.S. -Are you a mom up for a Challenge?




Enter your email address:

Delivered by FeedBurner

Copyright
Summer Owens

All content on Summer's Nook, unless credited to someone else by the author, is the sole property of Summer Owens and may not be duplicated without permission.

I Write About...

I'm a member of...

Photobucket