Showing posts with label layout. Show all posts
Showing posts with label layout. Show all posts

Wednesday, May 6, 2009

How to Add a Scrolling Feedback Marquee

On my other blog, I have a scrolling marquee at the top that I use to show off my feedback from my studios. A few people have asked me about how to do this, so I'm going to share the code here. But first, you need to decide what you want to use your marquee for. You can type anything you'd like in it, but it helps to have that text ready before you try to paste the code. It's not a hard thing to create, but it's a little time consuming, so just be warned! (If you're going to use your feedback/kudos like I did, it helps a lot to copy and paste each one into one new list before you begin. Just use Word or any sort of notepad software. It doesn't need to be fancy right now. This will save you a ton of headaches later!)

Once you know what you want your marquee to say, just follow these steps:

1. On your blogger dashboard, click "layout"

2. On the top of the layout, click "Add new gadget" and choose the "HTML/JavaScript" option.

3. Paste the following code into the box:
<font color="#ffffff" align="center"><marquee behavior="scroll" direction="up" onmouseover="this.stop()" width="900" onmouseout="this.start()" scrollamount="1" height="50">text goes here</marquee></font>

4. Replace the yellow words with your text you've already pre-prepared.

5. Right now, what you'll have if you save this is a whole bunch of sentences that are strung together with no breaks in between. If what you posted is not a paragraph, but rather a list of statements that need breaks, you're going to have to add a bit more code. (If you do not need these breaks, skip to step 7.)

6. To add line breaks to your marquee, copy and paste this after every sentence:

<br><br>

7. To italicize any words in your text, copy and paste this code around the text needing formatting:
<i></i>
(like this: <i>these words need to be in italics</i>)

8. To make words bold, paste this code around the words:
<b></b>
(like this: <b>these words need to be in bold</b>)

9. (Right now, because I used the code from my own blog, the font is in white. If you like the white font, skip this step.) To change the color of the font in your marquee, find the part of the code that looks like this:
<font color="#ffffff" align="center">
Go here, and find the code that relates to the color you want your text to be. Replace the yellow letters above with that code.

10. Once you've made all the changes you need to make, hit save. Be sure you drag and drop the new gadget below your header, or you may not be able to see it! (You can also hit save along the way and preview your marquee. You are always able to go back and edit the code to get it just how you want it.)

There are lots of other cool things you can do with your marquee, but for now, we've covered the basics. If you want yours to do something I didn't cover, please let me know and I'll see if I can show you how!



*A few notes about this particular marquee: It's only written to fit across the width of your page. You can put it anywhere, but it will take up the whole width of the page, so it's best on the top or bottom of your page. Also, it has a "stop on mouse" function. This means that when you hover over it, it will stop scrolling. If you don't like this, let me know and I can tell you how to change it!*

Read more...

Thursday, April 16, 2009

Creating and Adding a Favicon to Your Blog

Do you know what a favicon is? It's that little picture that shows up beside your blog address in the address bar of your browser. And, if you're using Blogger, chances are your favicon is a little orange "B". Now take a look at the address bar for this blog. See how there's no "B" there? Instead, you should be seeing a little ninja face/figure. Isn't that cool? (I think so anyway!)

So, besides the cool factor, why does it matter what your favicon is?

It matters because when your blog is added to an RSS feed reader, or when someone has a tab open to your blog (depending on the browser), that favicon will show beside the title of your blog! And we all know that standing out in this sea of artisans is super important, so why not use a favicon to set yourself apart?

Changing your favicon is easy to do, and if you want to change yours, here's what you need to do:

1. Choose a picture you want to use as your favicon. It helps to keep it simple here, because you will be shrinking the picture to minute proportions. Remember that things like text and fine details may get lost in the translation, so choose wisely! (It also helps to save it to the desktop so you can find it easily!)

2. Go here and sign up for an account. (You'll be sent a verification email, so go ahead and check for that and click the included link before you go to step 3.)

3. Sign in to your new account and find the part of the page that looks like this:


4. Click "Choose File", select the picture you're going to turn into your favicon, and hit "Upload Now".

5. You should see this now:

(Don't worry about how distorted that big picture looks, it's the tiny picture above it that matters!)

6. As long as the little picture is acceptable to you, type in a name and hit "Save It". (Be sure you have a check mark in the box that says "Set as my default favicon".)

7. On the left hand side of the page, click the link that says "My Favicon Code."

8. You're going to see a screen that looks like this:

Copy all the code in the top box and IGNORE THE INSTRUCTIONS IN THE YELLOW BOX!!! (They won't work with blogger anymore, so we have to cheat a little!)

9. Open a new window and log into your Blogger dashboard.

10. Click "Layout" and "Edit HTML".

11. Back up your template by clicking "Download Full Template" here:
(Just save it somewhere and leave it alone. It's just in case something goes wonky!)

12. Scroll down the page till you see this:

]]></b:skin>
and this:
</head>

(It's going to be about 2/3 of the way through all that code, and one will be right on top of the other.)

13. Paste the code you copied between those two bits of code you found. It should look similar to this:


14. Hit "preview" and wait for the page to load. As long as you see your new favicon showing in your address bar, go ahead and hit "save template". (If you don't see it, hit "clear edits", tell it "ok" and try again. If it still won't work, just clear your edits, back out, and let me know so I can try to help!)

Congrats! You now have a new favicon for your blog!



p.s. I haven't forgotten I promised you "target market answers"... I'm still working on them, so please be patient! :wink:

Read more...

Tuesday, March 31, 2009

How to Change the Look of Your Blog

* I am going to use Blogger in this example, but if you use another blog platform and you need help, please let me know and I will do all I can! *

When you first set up your blog on Blogger, you are given a plain white template with two columns. If you want to adjust your colors and themes, you can go to your dashboard, click Layout > Pick New Template and then just choose one you like. It's very simple and straightforward, and you can change it any time you wish.

But what if you don't like the templates Blogger provides for you? Or what if you want more than the standard 2-column look?

Well, fortunately, there are tons of free templates out there you can use! You can find anything from a plain black, minimalist design (like I've chosen) to wild, funky patterns and crazy layouts. The look is totally up to you! To find one of these templates, go to Google and search for "free Blogger template". Additionally, if you know you want a certain number of columns, you may want to add that to your search criteria. Once you've found one you like, open a new window, log into your Blogger account, and follow these directions:

* For this example I will be using this template. Feel free to use this one if you would like! *

1. Go to the page where the template you like is located. Look around and see if you can find a link that says something like "Download" or "Get this Template". Once you find it, click that link (or right click) and save it to the desktop. (If you are using a mac, you may get a warning like this:

If you do, just tell it to continue downloading.)

2. THIS STEP IS SUPER IMPORTANT!!! You need to back up your template before you do anything else. To do that, Go to your dashboard and click "Layout", then click the "Edit HTML" tab. Look for this part of the screen:

and hit "Download Full Template". Then just follow the directions on the screen. (If you have ANY problems here, please do NOT proceed until you talk to me!) Once you are sure you've done this part, just save that backup, leave it where it is and go to step three. (You will only need that backup if something messes up... hopefully we won't have to use it! LOL)

* If you have widgets already installed on your blog, and you do NOT wish to lose them, please go here and follow these directions before you go any further. *

3. Just below where you backed up your template, you will see this:

Click on the tab that says "Choose File" and then pick the template file you downloaded earlier, like this:


4. Hit "Upload" once you have your file selected. (WARNING: you may see something that says you are about to delete certain widgets. As long as you have backed up these widgets, go ahead and proceed.)

5. You have now changed your template!

* If you backed up your widgets earlier, please go here and follow the steps to reinstall them. *

See how easy that was?

You can now change the look of your blog any time you wish! Just come back here, and follow the instructions for any template you choose!



p.s. I would LOVE to see your new blog designs! Please leave me a comment so I can check them out!

Read more...

Sunday, March 1, 2009

Ninja's "Cheater Method" for Widget Re-Installation

Once you've changed your template, you will want to reinstall your widgets. Just follow these steps and you will be up and running in no time!

* This tutorial functions under the assumption that you backed up your widgets using the Ninja "Cheater Method". If you didn't, you can still reinstall your widgets, but these instructions may be a little confusing. (Don't say I didn't warn you! LOL) *

1. Go to your Blogger dashboard and click "Layout".

2. Click "Page Elements".

3. Open the document where you saved your widget back ups.

4. Go to the first title and copy all the code beneath it for that widget.

5. Go back to your "Page Elements" window and decide where you want to put that particular widget.

6. Look for a link that says "Add a Gadget", like this:

Click that link.

7. You should now see this:

Find the wiget called "HTML/JavaScript" and click the blue plus sign on the right.

8. You will see a box like this:

Type a title in it (and be aware that your title WILL be visible on your blog!), and then paste the code you copied into the bottom portion.

9. Hit save.

10. Repeat this until you have replaced all the widgets you backed up earlier.

You can also drag and drop your widgets to rearrange them until you get them just the way you want them. Just be sure that you hit "save" in the upper right corner before previewing your changes, or else they won't "stick".

Read more...

Ninja's "Cheater Method" for Widget Back-ups

Any time you are messing around with the HTML side of your blog layout, you run the risk of losing your widgets. Scary, isn't it?

So what do you do if you want to make sure that doesn't happen?

Follow these steps and you will be safe:

(If you are very familiar with code, you can go here and follow these instructions, but if code looks like Greek to you, stick with me and I will show you a more "friendly" way to do this!)

1. Go to your Blogger dashboard and click "Layout".

2. Click "Page Elements". You should see something similar to this:

(See all those little links that say "Edit"? Each of those is something you may need to back up.)

3. Go to your first widget and click "Edit". (Just so we're all on the same page, let's start with the widget containing your Artfire Studio.) You should see this:


4. Copy all the code in the box, and paste it to a new file in Word, Notepad, or whatever word processing program you use. It will be super helpful later if you add a title before what you paste, like this:


5. Repeat this process for every widget you have containing code. Be sure to save your pasted document every few minutes so you don't end up losing all that work you're doing!

* Some of your widgets won't have code in them, like "About Me", for instance. Don't let these worry you too much. These widgets are easy to reinstall, so backing them up isn't such a huge issue. Just be sure you make a note of them somewhere so you can be sure to check for them later. *

Be certain you save your pasted document once you are done, and make sure you name it something you can easily find later. I just call mine "Widget Backup" and it's saved on my desktop!

To learn to change your template, go here: How to Change the Look of Your Blog

To learn to reinstall your backed up widgets, go here: Ninja's "Cheater Method" for Widget Re-Installation

If you have any questions, let me know!

Read more...

Label Cloud


Powered By:Blogger Widgets

  © Blogger templates ProBlogger Template by Ourblogtemplates.com 2008

Back to TOP