Wednesday

How to: Install a Decorative Sidebar Button/Badge - copying html code

I've decide to include this tutorial in the Inspiration Avenue "Learn Your Lesson" blog party. As a member of this team I have the honor of sharing the stage with many other talented artists. e sure to stop by their blog to view other helpful tutorials by clicking the button below.



And now on with the tutorial....

With the tutorial below you'll learn how to install an html code button on the sidebar of your blog. They're fun to add and really very simple so don't let the look of the html code scare you away from trying. Let's begin....

First find a button you would like to add to the sidebar of your blog. You can visit my buttons page or any of the other wonderful graphic designer blogs that offer fabulous sidebar buttons.

Once you have located a button or image you would like to use, you will need to either copy and paste the code into a Notepad file on your computer or open a new tab in your browser....

Copying Code to Notepad:


Open a new browser tab:

{Special Note: Personally I use Mozilla Firefox for my browser but Internet Explorer now offers this tab feature as well and it's a really handy tool for working between different websites. The choice is also yours as to which of the methods above you feel more comfortable using.}

Next go to your own blog and sign-in...

Then navigate to the "Design" tab (used to be "Layouts" tab) ...

Next click on "Add a Gadget"...


A pop-up window will appear, now click on HTML/JavaScript...

The window now changes to a black area...

Find the code to the button you wish to use, either by going to the Notepad file you created or by navigating back to the page in the other open browser tab.

Then copy the entire code and paste it into the open window box...

At this point you can title the button if you like and then click save...

Once the pop-up window closes you will see a confirmation of your new "Page element" and the new element will appear at the top of your sidebar...
You can move your new button around by clicking on it and dragging it to a new location in your sidebar(1), just remember to click the orange "Save" button(2) to save the new location of the button. A yellow/orange confirmation message will appear (3)...

Once you are finished click "View Blog" to view your new button....

And voila! You've just added your own html image to your blog, congratulations!
Enjoy!

post signature

Now all of my tutorials in one fabulous package for one low price
$10.95 buys the complete set of my digital tutorials
all 25 tutorials in PDF format ~ including my exclusive three part series

"How to Create Your Own Blog Background"

available only with this purchase.

Click the book above to purchase from my Etsy shop..

2 comments:

  1. Hi just saying hello, and wishing you the best of 2013,just browsing on your tutorial, they are fantastic and practice on adding buttons, just to say Thank you for sharing, I grab some to put on my side bar. You are truly gifted and an inspiration to everybody. Thank you again:) Alma

    ReplyDelete
    Replies
    1. Oh this is one of my older tutorials, I'm so happy to hear it was still helpful!
      ♥Sharon

      Delete

Due to a recent increase in SPAM comments preauthorization is temporarily set for all comments ~ once the situation improves I will remove that function.

I love your comments and appreciate your opinions so much ~ I hope you enjoyed your visit and come back often.
♥Sharon