Tips and Tricks and of Course Backgrounds: Here it is the First Animation!

Animation in your Sidebar....How to get them on your blog.

Thursday, July 24, 2008

Here it is the First Animation!

So in honor of no sleep because Aden is teething, here you have the first animation. It is called counting sheep. To get this cute little cartoon in your sidebar go to "layout", "add a page element", scroll down to the "HTML/Javascript" Copy the HTML code and Paste it in the box. It is super simple and you have yourself a cute little sheep! For HTML code please email me or leave an email in comments and I will send it. I can't seem to paste it without it translating it and showing the animation instead of the code....any one have any suggestions?

1 comment:

Anonymous said...: I would love to get the html code for counting sheep gif. Thanks; Friday, November 30, 2012

Post a Comment

Step By Step To get a cute Layout/Background

Now you can use ones that are already made or you can make your own...I will cover makeing your own in another section.
So how do you change your blog layout?
1. First step is to find the link to the background you want, either from this site or any other that uses photobucket or other direct link to your desired background...note if you make your own you will have that link on your photo bucket account.
2.Log on to your blogspot account it should take you to your blog "dashboard" go to "Layout".
3.under the Layout tab there should be "Page Elements" Fonts and Colors" "Edit HTML" and "Pick new Template" Go to "Pick new Template" and put it on the very first one "minima"
4. After picking "minima" click on "save template". Then go to Edit HTML....now don't get overwhelmed this isn't really that hard.
5. Copy the below HTML from this site first:

background-image:url();background-position:center;background-repeat:no-repeat;background-attachment:fixed;

(highlight it and copy, if right clicking doesn't work to copy it, after highlighting it hit "ctrl"and" C" at the same time and that will copy it for you.)

Then scroll down in your HTML till you see:

body {
background:$bgcolor;
margin:0;

Now paste the copied HTML in to your HTML so it looks like this:
body {
background:$bgcolor;background-image:url();background-position:center;background-repeat:no-repeat;background-attachment:fixed;
margin:0;

so you will be pasting the new info after "background:$bgcolor; " and before "margin:o;"

6. The last step is to add your direct link. Copy it from whatever sorce you chose (remember you have copied and pasted since you found the link so you will need copy it right befor you do this last step), then paste it between the ( ) Parenthesis.
example:
body {
background:$bgcolor;background-image:url(http://i294.photobucket.com/albums/mm87/goofy_monica/bloglayouts/Bloglayout6_1copy.jpg );background-position:center;background-repeat:no-repeat;background-attachment:fixed;
margin:0;
NOTE: it will all be black but for this I changed colors to make it easier to see. (the link I used will be different than yours.)
Be sure to SAVE TEMPLATE before you leave the HTML and view your blog
7. This step is only if you decide you want to change backgrounds latter on. All you have to do is delete the link inside the parenthesis ( ) and paste a new one you choose between the parenthesis ( ).

Tips to make your own Blog Layout/background!

Okay so if you are like me and like to do it yourself, I have a few tips! I have photoshop 5.0 so my tips are based on that.
1. If you don't have all the paper or embelishments you want or need go to http://digifree.blogspot.com/ They have kits and and samples from a variety of people and locations and the best part is there is new stuff every day!!! Alot of the sites are selling kits but offer add ons for free but trust me you can get oodles and oodles without paying a dime.
2. So once you have the stuff you want to use, now it is time to creat. I start by opening a blank file on photo shope and make it 16"x16". Then I open a second blank file and make it 11"x16". NOTE: Make sure that you have a resolution of at least 300pixels per inch. You will want to pick two papers that go well together. One you can have as much patern as you want but I strongly suggest you have the other paper fairly plain so that the text shows easily. Put the paterned paper on the 16"x16" file and the plain paper on the 11"x16". Then murge the two by dragging the 11"x16" file onto the 16"x16".
3. Now that you have the startings of a layout, you can use whatever ribbons, embelishments, flowers or whatever you can find to "jazz" up your layout.
4. Save your layout as a jpg file.
5. If you don't already have one, get a photobucket account at photobucket.com. And then upload your jpg to photobucket. Once you have done this you can click on the "direct link" bar and it will copy it. You are now ready to apply it to your HTML. (for instructions on how to do this, see above)

Tips and Tricks and of Course Backgrounds

Animation in your Sidebar....How to get them on your blog.

Running Horse

Snow Globe

Fuzzy Jump

Fish Tank

Puppy Fun

Birdie

Tractors in the Mud

Swingin Spider

Pet Fish

Lazy Grazing

Counting Sheep

Bubbles!

Kissing Aden and Tianna

BoUnCiNg PuMpKin

Happy Halloween

Thursday, July 24, 2008

Here it is the First Animation!

1 comment:

Followers

Search This Blog

Step By Step To get a cute Layout/Background

Tips to make your own Blog Layout/background!

FREE DIGITAL SCRAPBOOKING STUFF!!

You can see how at least one of my layouts look at my Blog

Blog Archive