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

JDC Happy Holidays

A Holiday Theme for Jenieshell's Design Challenge!!

TTC Buttons

The Two Coins

I am still working on Jenny's blog, A Tale of Two Coins. Here are some pictures I was working on for her sidebar. Jenny let me know what you think!! We are getting close to the final product!!

Jen

Jenny, I am not sure why Blogger is putting a white border abound the picture in with the borders. I am pretty sure I can get it to work right when we put it in the sidebar! I am really tired, I think I am calling it a night for tonight!!

Jen

A Tale of Two Coins

I am very excited to be working on my new friend, Jenny's Blog! She is an incredibly strong women and has been through an extremely difficult time in her life recently! Her blog is called A Tale of Two coins. She said she wanted something Whimsy and likes soft colors so We'll see if I am close to what she was wanting!! Jenny here we go!!

Following the Footsteps Grab Button

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!

How to Contact me!

If you have any questions email me and I'll get back to you as soon as I can!!

Jen

jenieshell at gmail dot com

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

Free Blogger Template-Pink Daisies

Download

This template was inspired from the Bubble Gum Template I used on my blog this Summer!! I loved the design so much I decided to make it public!! I started this template from scratch because I feel I've learned so much more since then!! It's a two column template! If you're interested in this template click the download link for the the code and instructions on how to install it on your blog!!

Once again this template is completely FREE, all I ask is you leave me a comment letting me know you grabbed the code and display my blog button on your blog!! Enjoy!!

Working on Another Freebie

Working on another Freebie!!

This one is called Pink Daisies!

Free Blogger Templates

I hope you enjoy these blogger templates!! Please take a minute to review my TOU! Thanks!!

Use of Terms:

These blog templates are for Blogger Blogs only. It is for personal use only! All I ask are for you to leave a comment letting me know you grabbed the code and display the JDC Blog Button on your blog, while you are using my design. You can grab the code for my button on the sidebar.

This template may NOT be used for any blogs that are used to make money. It may not be used on blogs that displays or support pornography, illegal activity or any other immoral behavior.

If you have any questions regarding my TOU please contact me at jenieshell@gmail.com

I hope you enjoy your new blog look!

Download

Download

Download

Download

Download

Sorry this link is temporarily unavailable.

Download

Check back soon for my templates!!