Post Signature

If you are wanting a cute signature for the bottom of your posts here's a quick and easy tutorial on how to add one to your blog!

• You will need an image that has your signature. I use Photoshop to create mine. I know there are other programs, such as Microsoft paint. You'll want the image to be about 100x50 pixels. The size can vary it's really up to you and what you want. You can also add a cute image like I did here!

• Next you'll need to up load the image to the internet. You can do this by using Photobucket, Flickr, Picasa or you can do as I did, and put it in a post right here on blogger! You will need to copy the URL address of the image and paste it into the code below.
  

• Now you will need to copy the following code:

<img src="INSERT IMAGE URL ADDRESS HERE"/style='border: none; background: transparent;'>

• Now you will need to go into your layout page and click on Settings.
  

• Once in Settings click on Formatting:

• Scroll down to Post Template and paste the code from above in the box and click the Save Setting button.
  

(To enlarge images click on the pictures)

• Enjoy your new post signature!

FYI: Your signature will not appear on previous posts. It will only appear on posts from this point on. There is away to add your signature to all your posts, however it's not quite as simple as this! If there's enough interest on how to permanently add a signature to all your posts I'll write up a tutorial on how to do so in the near future!

Navigation Bar Images

This tutorial is to be use AFTER you know how to create a navigation bar! If you don't know how to create a Navigation bar please click here!


Ok, now that you know how to create a Navigation Bar let me explain how to add images* to your navigation bar instead just using text, similar to the one above! Each navigation link such as About me, Blog Roll etc were each different images. So for the above navigation bar I had to create four different images, one for each link!

Remember the HTML code you added in a widget under your header? That's what you are going to tweak in order to have an image for your link instead just text. Your current code in your widget should look something like this:

&lt;div id="newnavbar"> &lt;ul> &lt;li>&lt;a href="http://all-about-me.html">All About Me&lt;/a>&lt;/li> &lt;li>&lt;a href="http://blogroll-html">Blog Roll&lt;/a>&lt;/li> &lt;li>&lt;a href="http://giveaway-html">Giveaways&lt;/a>&lt;/li>&lt;li>&lt;a href="http://contact-me.html"\>Contact&lt;/a>&lt;/li> &lt;/ul>&lt;/div>

Now you are going to replace the WORDS that appear on your navigation bar (YELLOW words)with this code.

<img src="URL address of your uploaded image"/>

After you have replaced all the Words such as All About Me etc with your new code including the url address of your images then click save and enjoy your new customized navigation bar!

On a side note, the padding and margins may need to be adjusted in order to fit the new images!

*You will need to upload your images to the Internet. You can use flicker, photobucket, picasa or simply upload them in a post on Blogger!! There you will be able to get the URL address for the image! That address is what you paste into red html code above!

I hope this was easy to follow! Any and all feedback is always appreciated!

How to Make a Navigation Bar for Blogger Blogs

I recently received several emails asking how to install a navigation bar. I thought the easiest way to help my blogging buddies would be to try to write a tutorial! I say the word try because honestly it's a little tricky and I am still figuring out the kinks!! In fact recently, while changing the look of my personal blog, I kept getting stuck while installing the navigation bar. It kept putting my links and a box and I couldn't figure out how to get rid of that BOX!!! Thankfully after taking a break I finally figured it out!! Hopefully after all my frustrations, it's still fresh in my mind and I can write this tutorial !


This is a picture of my personal blog! Isn't it pretty? You can see my navigation bar directly below the tree branch! This is an example of a navigation bar where I used images for my links! In order to make this tutorial as simple as possible I am going to start by showing you how to create a navigation bar just using text. Similar to the one on this blog!

Ok, let's get started and install that navigation bar!! (Hope I haven't scared you off! Honestly it's not too hard!!)

• Go into your layout page and click on edit HTML.
  

It's always a good idea to download a copy of your template before changing your HTML.

I also recommend clicking on preview before saving your newly edited template!!!!

You will need to look for the html code that needs to be edited. Click on the link below to see what needs to be changed.

Click here for further instructions

Now go ahead and click save! It's ok to click save THIS TIME because there isn't anything to preview!!

What you just did was make it possible to add a widget to your header!! This is where the navigation bar will go!! If you go back to your layout page this is what it should NOW look like!

• Now that we are able to add a widget to our header lets go ahead and add the code for the links of the navigation bar in a new widget. Click Add a Widget and select HTML/Javascript. In the text box you will copy and paste the html code for the navigation bar.

Click here to get the Code

Once you have added and personalized this code go ahead and click save! This is what you will see!!

Don't worry are not done yet!!

Are you still with me?

Let me clear up a couple of things before we move on:

First if you want your navigation bar to be centered in the middle of your page you will need to add the code below in red, to the html code you just saved in your header widget:

<center> in front of your code.

and

</center> at the end of the code.

If your links are appearing above your header and you want them below the header then

simply go into your layout page and drag the widget below your header and drop it! Just like you do when you are arranging your widgets on your sidebars.

• Now we need to edit your html code in order to get the links to appear in a line on your page instead of a list!!
  

• Go into your layout page and click on Edit html. Once again if you haven't done so download a copy of your template and her e's where the preview button , I mentioned earlier, will come in handy!!

• Look for the Header section of the CSS code. It should look something like this:

Click here for the code that needs to be added and further instructions.

• Now click Preview and if you are happy with what you see then click save!
  

It's should look something like this!

• 

Soon I will write a tutorial on how to add an image to your navigation bar! I hope this tutorial was helpful I would LOVE any and all feedback! I hope it's easy to follow! Please don't hesitate to contact me if anything I mentioned in this tutorial was unclear! All I ask is that you be specific in your questions so I can better help you!

Scrolling Blog Buttons

Update: There are several comments below about problems with only the first 3 buttons scrolling and it starting over!! Well, I too ran into that problem when working on a blog makeover. Honestly I am not sure exactly what was causing the problem. I had to remove the widget and reinstall the code. It seemed to work! I am sorry I don't have a technical answer, I'd just say if you still running into this problem. Remove the widget and start again! If I figure out why it's doing this I'll let you know!!

-----------Original Post----------------

I recently learned how to create a widget where all my favorite blog buttons can scroll through a smaller space on my sidebar therefore making it look less cluttered!

They scroll like this:

Here's a how YOU can make your blog buttons SCROLL too!!

1. Go into your layout page and click on Add a New Gadget

2. Choose HTML/Javascript

3. Add the following code in the text box:

<center><div class="textwidget"><marquee direction="up" width="200" onmouseover="this.stop()" scrollamount="5" onmouseout="this.start()" height="400" align="center"> THIS IS WHERE YOU ADD THE HTML CODES FOR YOUR FAVORITE BUTTONS! (You can add as many as you like!) </marquee></div>

The colors in red can be adjusted to fit the space on your sidebars.

The number 5 in yellow adjusts the speed of how quickly the buttons will scroll! The higher the number the faster they will GO!

4. Click save and Viola!!

Enjoy your scrolling buttons and a lot less clutter on your blog!

Adding a Blog Button to your Blog

Have you noticed blog buttons popping up all over the blogosphere? They are the new cool thing to have on blogs!! It seems like everyone has a grab code box on their blogs!! Once you've grab the code how do you get it on your blog? Here's a tutorial on how to add that special blog button to your blog!

First, of course, you need to highlight and copy and the code inside the scroll box.

Now go to your layout page and click Add a Gadget.

The Add a Gadget Page will now pop up!



Scroll down and click on HTML/JavaScript.



Once the HTML/JavaScript box pops up paste the code in the box.
(the one you grabbed from the scroll box)

Last click save and enjoy!!

You can then go back into your layout page and move the blog button where you want it on your sidebar by dragging and dropping it!! Don't forget to click save at the top of your layout page!!

Amy this was for you!! Hope it was helpful!!

How to change the favicon on your Blogger Blog

My good friend, Anne, asked if I could write a tutorial on how to change the favicon on a Blogger Blog! If you're wondering what a favicon is, let me explain! It's the graphic next the url address in address box! You know this......

Click picture for better viewing.

It's actually quite easy to change the blogger image to one that is unique and fits your blog. Here's a step by step tutorial on how to do it!

1. You need an image that ranges from 16 x 16 to 32 x 32 pixels in size. You can create this on Photoshop and then resize the image. When saving it to your hard drive save it as PNG file.

2. Once you have an image, upload it to the internet. You can use Photobucket, Flickr or you can even publish it in a post on your blogger blog!! (You'll need to get the url address once it's been uploaded.)

3. Now you are ready to change the favicon. You will need go into your layout page and click on Edit HTML. Scroll down just a bit (It's pretty close to top) and look for this code:

<title><data:blog.pagetitle/></title>

Once you locate the code you will REPLACE it with this code:

<link href='URL of your image' rel='shortcut icon' type='image/vnd.microsoft.icon'/>

(You will need to add the URL address for your image inside this code where is says, URL of your image, in black)

4. Now you are ready to PREVIEW your page, to see if the favicon has been changed! If it is has successfully changed go ahead and click on save!

Enjoy!!

How to add authors to your Blogger blog.

Did you know more than one person can be an author on a blog? My sister and I recently started a blog together and I realized it's pretty easy to have more than one author! Here's a tutorial on how to add an author to your blog.

1. Log into your blogger account.

2. Click on the layout or customize.

3. Next click on the Settings Tab.

*Click on images for a better view

4. Once in Settings, click on Permissions.

5. There you will be able to add an author by entering a gmail address. (The other person MUST have a google account.)


6. Now the new author must accept the invitation to be an author by logging into their gmail account.

Now there will be more than one contributor to your blog!!

Granting Administrator Privileges:
(This allows the new author to edit or change the template code)

If you need or want to grant your new author administrative privileges simply go back to the Permission section, after new author has accepted invitation, and click on "grant admin privileges."


And if for what ever reason an author needs to be removed all you have to do is click "remove" under the Permission Section.

Hope this tutorial has been helpful!

How to display unreadable HTML code?

When I first started creating scroll boxes for html code, my computer would read the html code inside the box and display the image inside the box.

Like this:

I realized my computer was reading the html code inside the scroll box! I researched and found you have to alter the html code so your computer doesn't read the html code but display it instead! It's actually pretty simple to fix the code.

Here's what you do!!


So if a code looks like this unaltered:

<a href="http://jenieshell.blogspot.com">

it will now look like this once altered:

That's all you have to do so your computer won't read the html code in your scroll box! Just change the brackets!!

While researching I also found a really helpful site that will change your code with a click of a button. It's a lot less time consuming and it allows for less errors! All you have to do it paste in your html code and press the convert button. It's that easy!!

Hope this tutorial was helpful! Please give me feedback!! Thanks

Jen

How to make a scroll box?

This is how to make a scroll box similar to the one on my sidebar called Grab the Button.

<center><a href="http://jenieshell.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7iigeGHM-6eX1PDBE_TDNEqpPqy-UdU4XsKQDdX-C6vrYOOnY8vU0kAo28u-6FPRcyS_ZkHBhSxQOBijRI6v75c47uIQXUE9FHKf3Y386f2nL_NQDLEU0vXFExrgew42Kt3TjUDyIlFE/s170/Blog+Design+Button+copy.gif"/></a></center>

Here's the code you will need for the scroll box.

<div style="border: 3px solid black; overflow: auto; height:
125px; width: 125px; color: black; background-color: white;">YOUR
TEXT HERE</div>

You can change the color of your border by changing the color from pink to another color, or the size of your box by changing the number of the height and width. (example: 200px)

You will need to copy this code into your side bar or post where you are needing the scroll box. You will also need to add text that fits your needs where it says YOUR TEXT HERE! If you are wanting to make a scroll box for a "grab the button code" you will then add the code for your button here also. If you want to know how to make a blog button click here!

Once you've added "Your Text" you are now ready to copy and paste the entire code into your blog post or sidebar.

If you are installing it to your Blogger sidebar you will select Add a New Gadget in your layout page. Next you will select HTML/Javascript and paste your code. Click save and enjoy!

FYI: If you are wanting to display HTML code inside your box, such as code for a blog button, you will need to alter the code so your computer won't read the html code. To learn how to alter your HTML code GO HERE!!

How to Make a Blog Button

This is an update to a post I wrote a while ago on my personal blog! I've actually realized it's much easier to make a button since I wrote that post!! So here we go! Here's how to make a clickable blog button using html!!

Before we get started on the actual html code there are somethings you will need to do first:

• First, you need to create an image. I made mine on Adobe Photoshop. There are several websites that specialize in buttons if you don't have photoshop. Google "Blog buttons or chiclets" in order to find these websites. You will then need to save your image to your hard drive!
  

• Next, you will need to upload your image from your hard drive to the internet. You can do this by uploading it in a post on your blog. You can also use Picasa, photobucket or Flicker.

• Then, you will need two URL addresses to insert into the html code. The first address is the site you're linking to. The second is the address where your image is located on the web. (To find this address, click on the image in your published post. Then right click on the image, scroll down, click on properties and copy the URL address.

Now we are ready to create the html code and to install it on your blog.

• Go into the layout section of your blogger account and create a new Gadget.

• Choose HTML/Java Script.

• Copy the code below and paste it into the text section of your new HTML/Java Script Gadget.

<center><a href="URL address you're Linking to"><img src="URL address of your uploaded image"/></a></center>

• Replace the sections in red with the two url addresses that meet your needs.

• click save.

• Enjoy your new button!

Hope these steps where helpful!! Let me know if this tutorial was useful, confusing or unclear!! Thanks

Now, if you want to learn how to make a scroll box under your button so others can grab your code GO HERE!

Tutorials

Everything I have learned about blog design has been self taught and I've learned it through GOOGLE!! As my hubby says, "Google is your friend!" When I wanted to know how to do something in order to improve or tweak my blog I would google it!! I have come across some fantastic tutorials and some that were really overwhelming and confusing! I figured I would start writing tutorials as a way to help fellow bloggers and a place where I keep all my learned knowledge!!

I hope these tutorials are helpful!! Please give me feedback as to what was unclear or confusing! Thanks for stopping by!!

Jen

How to Create a Hyperlink

How to Make a Blog Button

How to Make a Scroll Box

How to display unreadable HTML Code

How to add authors to your Blogger blog

How to change the favicon on your Blogger Blog

How to add a Blog Button to your Blog

How to make blog buttons on your sidebar scroll

How to De-Clutter your sidebars
Brought to you by Following the Footsteps!

How to add a Navigation bar to your blog

How to add images to your Navigation Bar

How to add SNOW to your Blog

Check back soon for more blogger tutorials!

How to Make a Hyperlink

I just realized creating a Hyperlink is really easy! When you are unable to simply click on the link button, like in the comment section, here's how you do it!!

Copy and paste the code below and change the sections in red to meet what you needs.

<a href="http://URL address.com">word(s) you want be linked</a>

For example:

<a href="http://shaemata.blogspot.com">Following the Footsteps</a>

(Don't forget to put the http:// in front of the url address. I forgot to put those little letters when I first started learning how to hyperlink and it didn't work!!)

This is what it will look like:

Following the Footsteps

Hope this tip was helpful!! Let me know if it was useful or unclear!!