GEEK ALERT! Widget Tutorial!

Hiya foxes!!! So I'm the geeky fox....I haven't always been a geek but here lately I guess you could call me that! I LOVE LOVE LOVE designing things on my computer and want to learn more and more everyday!

So for all you bloggers out there I'm going to give you a little tuturial on how to make a copy/paste widget for YOUR super cool blog!!!  The example of what I will be making is ----------------> over here at the top!

They look a little something like this..

 + the html code for easy copy/paste action on your blog!!! You can see more examples HERE on  LA's Blog...

just scroll down and look on the bottom right hand side for her widgets!!!

p.s. LA is my geeky crush!!! She designs super cool things with her computer too!!!

So lets get started!!!

Step 1. Create an image! It can be a photo or logo or whatever you want!

You can use picnik.com or any photo editing program to make this!!!

Step 2: Upload your photo into photobucket.com

Step 3: Click EDIT picture

Step 4: Click RESIZE

Step 5: Resize your picture to the *preset SMALL 160x120* on the drop down menu

Step 6: Click APPLY

Step 7: Scroll down and click REPLACE ORIGINAL

Step 8: Scroll down and on the left side there are a few codes. Copy the DIRECT LINK and paste it to a     word doc.

Step 9:  Now COPY/PASTE this code into your word doc.

<center><a href="YOURWEBSITE" target="_blank" title="TITLE NAME"><img button alt="Blog" src=" PHOTOBUCKET DIRECT LINK" /></a><center> </center> <center><textarea id="code-source" rows="3" name="code-source"><center><a href="YOURWEBSITE"><img border="0" src="PHOTOBUCKET DIRECTLINK " /></a></center></textarea></center></center>

Step 10: Don't freak out at that alien language! It's your friend!!!

Step 11: type your website into the spaces between the " "

(ex." http://www.iheartsmilesblog.blogspot.com " ) you will do this TWO times!

Step 12: PASTE the DIRECT LINK from PHOTOBUCKET where it says

"PHOTOBUCKET DIRECT LINK"

( ex. " http://i933.photobucket.com/albums/ad175/dreamingtreestudio/mommafia-p003-2.jpg " )

Your FINAL HTML code should look something like this...

<center><a href="http://www.iheartsmilesblog.blogspot.com" target="_blank" title="TITLE NAME"><img button alt="Blog" src=" http://i933.photobucket.com/albums/ad175/dreamingtreestudio/mommafia-p003-2.jpg" /></a><center> </center> <center><textarea id="code-source" rows="3" name="code-source"><center><a href="http://www.iheartsmiles.blogspot.com"><img border="0" src="http://i933.photobucket.com/albums/ad175/dreamingtreestudio/mommafia-p003-2.jpg " /></a></center></textarea></center></center>

Step 13: Still with me??? Good!!! Almost done!!! Now go into blogger.com and click on customize.

Step 14: Add an HTML Gadget

Step 15: Paste the HTML code we have been working on and save.

Step 16: View your blog and check your NEW WIDGET OUT!

Now your faithful blog followers can snag that html code available at the bottom of your *new* widget and copy/past that into their blog!!! It will allow people to click on it and link DIRECTLY to your super cool blog!!!

I hope this was super easy for you! If you have ANY questions PULEEZ feel free to email me at iheartsmiles@ymail.com !!!!

Get your Geek On!!!

xoxo Desiree AKA GEEKY FOX!!!