Uncategorized

How To Make a Button or Banner For Your Blog


The code for creating a widget/gadget button for your sidebars or another column is slightly different than the code that you would use in your blog’s theme/template.  Here a sample of button code…this is from my blog’s button:

<center><a href=”http://www.biculturalmom.com” title=”Visit the Bicultural Mom blog!” target=”_blank”><img src=”http://i1182.photobucket.com/albums/x447/ChantillyPatino/SquareLOGO4.jpg” width=”125″ height=”125″ /></a></center>

____________________________________________________________________________________________

 

First, let’s break down the code and figure out what each part means and how to use it…

<center><a href=”http://www.biculturalmom.com” title=”Visit the Bicultural Mom blog!” target=”_blank”><img src=”http://i1182.photobucket.com/albums/x447/ChantillyPatino/SquareLOGO4.jpg” width=”125″ height=”125″ /></a></center>

  • The center tags, in bold, above will align your button or banner and center it within the column or sidebars.  The first tag is an opening tag, which comes at the beginning of the code and the second is a closing tag, which follows the code.  Whichever code we surround by these tags will be centered in our columns.

____________________________________________________________________________________________

<center><a href=”http://www.biculturalmom.com” title=”Visit the Bicultural Mom blog!” target=”_blank”><img src=”http://i1182.photobucket.com/albums/x447/ChantillyPatino/SquareLOGO4.jpg” width=”125″ height=”125″ /></a></center>

  • Next comes the reference hyperlink, or destination web address.  This is the address where individuals will be taken after they click on your button.  Enter your preferred web address in between the parenthesis.

____________________________________________________________________________________________

<center><a href=”http://www.biculturalmom.com” title=”Visit the Bicultural Mom blog!” target=”_blank”><img src=”http://i1182.photobucket.com/albums/x447/ChantillyPatino/SquareLOGO4.jpg” width=”125″ height=”125″ /></a></center>

  • The title tag works the same as the alt tag in your websites theme/template editor.  It is the message that pops up for viewers when they hover over your button.  Typically, this should tell visitors where the button will take them or promote a certain action by telling visitors what to do.  Always keep them short…6 words or less is a good bet and the shorter the better.

____________________________________________________________________________________________

<center><a href=”http://www.biculturalmom.com” title=”Visit the Bicultural Mom blog!” target=”_blank”><img src=”http://i1182.photobucket.com/albums/x447/ChantillyPatino/SquareLOGO4.jpg” width=”125″ height=”125″ /></a></center>

  • This is often the most wondered about and confusing of all the html tags when you’re first starting out.  The target tag determines where the new link will be displayed.  There are several different target tags, but the “_blank” tag is probably the most useful for beginning html coders.  This instructs the target URL to open up in a new window (browser tab).  That’s great for website owners because it means that your visitors won’t be directed away from your site when they click on a button or banner that includes this code.

____________________________________________________________________________________________

<center><a href=”http://www.biculturalmom.com” title=”Visit the Bicultural Mom blog!” target=”_blank”><img src=”http://i1182.photobucket.com/albums/x447/ChantillyPatino/SquareLOGO4.jpg” width=”125″ height=”125″ /></a></center>

  • The image reference hyperlink, shown above, contains the URL of your self-hosted image that will appear as your actual button.  You can host your images for free on your Blogger and WordPress accounts or on a free image hosting site like Photobucket.  Anyone who’s been blogging for a while can tell you this is crucial, because using a link from another site can be hazarous.  If a site is shut down or changes the locations of their images, etc. your links won’t work.  Self-hosting your images is a must.

____________________________________________________________________________________________

<center><a href=”http://www.biculturalmom.com” title=”Visit the Bicultural Mom blog!” target=”_blank”><img src=”http://i1182.photobucket.com/albums/x447/ChantillyPatino/SquareLOGO4.jpg” width=”125″ height=”125″ /></a></center>

  • Now on to button size!  Many individuals size their images to the exact dimensions that they plan to use for their button or banner.  Instead, you can use these dimensions tags to adjust the image, which gives you the option to you to make changes and also lets others who want to display your button resize it to fit the space available on their site.

____________________________________________________________________________________________

<center><a href=”http://www.biculturalmom.com” title=”Visit the Bicultural Mom blog!” target=”_blank”><img src=”http://i1182.photobucket.com/albums/x447/ChantillyPatino/SquareLOGO4.jpg” width=”125″ height=”125″/></a></center>

  • Finally, the anchor tags.  These tags are used to tell the browser that we are going to point the enclosed information to another location.  <a is the opening tag and </a> is the closing tag.  A closing tag always contains the / symbol.

____________________________________________________________________________________________

 

What about an HTML box that allows visitors to grab your button code to display it on their own website or blog?  Here is a sample code:

 

<!– Button code BEGIN –>

<center><a href=”http://www.biculturalmom.com” title=”Visit the Bicultural Mom blog!” target=”_blank”><img src=”http://i1182.photobucket.com/albums/x447/ChantillyPatino/SquareLOGO4.jpg” width=”125” height=”125” /></a></center>

<center><textarea cols=”15” rows=”4“><center><a href=”http://www.biculturalmom.com” title=”Visit the Bicultural Mom blog!” target=”_blank”><img src=”http://i1182.photobucket.com/albums/x447/ChantillyPatino/SquareLOGO4.jpg” width=”125” height=”125” /></a></textarea></center>

<!– Button code END –>

  • All the elements in bold can be changed to your own personal liking according to the details given above.  Notice you can also adjust the cols (columns) and rows for your display box to change the dimensions so they match your button size.

 

And that’s it!  Your very own personalized button!  =)

 

 

 

Facebook Comments

comments

  • Letty
    March 18, 2011 at 8:21 am

    Great easy step by step info.

  • Angelica perez
    March 18, 2011 at 8:39 am

    Thank you!!! This is exactly what I needed! Now I can make my own button!

  • Chantilly Pati&ntild
    March 18, 2011 at 9:09 am

    No problem ladies! I know I struggled a lot with this one when I was getting started…especially the codes. Glad to help! ;)

  • Ezzy Guerrero-Languz
    March 28, 2011 at 7:39 pm

    Seriously? Is there anything you don't know how to do? *LOL* Love it. :D

    • Chantilly Pati&ntild
      March 28, 2011 at 7:48 pm

      LOL! You crack me up! If I didn't feel good before, I'm floating now! ;) Thanks for the compliment amiga!

    bicultural familia logo

    Sign up to get our latest posts delivered to your email inbox for free!

    You have Successfully Subscribed!