Sunday, 7 April 2013

How to Make a Blog Button with Optional Border and Grab Box with Border and background Image/Colour (THE BEST CODE AVAILABLE!)



Design du Jour



Today's post is about the creation of a Blog Button, inserting your Button image into a HTML code (with a Grab Box), then installing this code on your blog.

There is an easy (cheat) way of doing this so if you want, you can skip this tutorial completely and go to the Grab My Button Code Generator. It does all this for you! You simply need the url of the image, the link (to your own blog) and the title of your blog. There are plenty of other customisations this site affords you and it takes the work out of any coding, including any errors you may make. It really is an amazing tool.

If though, you are looking for the challenge of completing your own code, read on! 

As mentioned in my last post, the standard size for a Button is 200 x 200 pixels, a button of this size takes up less room on others blogs. The process of creating a Button Image is touched on also in my last post

The image you design though should be approx 500px x 500px. This is easier for design purposes and is easily made smaller with the code below, where you can select the width and height you want to be displayed i.e. 200 x 200. 

Now, assuming from this point that you have your Blog Button designed and saved (.jpg as a general rule as this is a smaller file size, .png file is best for anything with a transparency. You can even have a moving blog button as a .gif image! ).

You will now need the following information ready for your creation...
  1. URL (link) of your blog
  2. URL of your image
  3. Your blogs name!
  4. A hex code for the border and background colour of the text area (if you require one)

Where do I get an image URL from
I hear you ask?

Well, you can retrieve your image url by uploading the image to any image hosting site, such as Picasa (Owned by Google and associated with your Google+ account) or Photobucket, there are many more but I will leave you to navigate this side of things yourself. Once your image is uploaded to one of there sites, you can right click on the image and click on "Copy image URL".

The hex colour code can be found in the template section of your blog, under advanced. The you can grab the code (they look something like this - #FF6600) or you can visit this site for a list of colour codes and just choose one you like. 

I have tried a few codes for Buttons and the following is what I have settled on as it seems to be the best, all you have to do is fill in the sections in red text.




<div align="center" style="padding: 5px;"><img src="BLOG BUTTON IMAGE URL" style="border: 6px groove #898989; width: 200px;" title="BLOG TITLE" alt="BLOG TITLE" /></div>

<textarea style="background-image:url('URL FOR BACKGROUND IMAGE OF TEXTAREA'); border:groove 6px #898989; color: #ffffff; font-size:100%; height: 33px; margin:auto; text-align: center; padding: 2px 0 2px 5px; display: block;  width: 200px;">&lt;div align="center">&lt;a href="URL/LINK OF YOUR BLOG" title="BLOG TITLE" target="_blank"&gt;&lt;img src="BLOG BUTTON IMAGE URL" alt="BLOG TITLE" style="border:none; width: 200px" /&gt;&lt;/a&gt;&lt;/div></textarea>


Tweaking this code:

I will address all the red sections of the above code that are not obvious, starting with:

border: 6px groove #898989; 
This appears twice in the above code. the first being the border of the visible image itself and the second is the border of the grab/textbox. The changes you make should be the same in both, to keep a sharp design. 

Change the figure 6px to something larger like 8px for a thicker border or something like 2px for a thinner border. Change "groove" to solid, dotted, dashed, groove, double or ridge to have a different looking border. chnage #898989 to any hex colour code of your choice, or for basic colours you can simple type words like red, black white pink etc etc.

width: 200px;
This is repeated three times in the above code and should be changed to the same figure in all instances. The first refers to the width of the image above the grab box, the second is the width of the grab box itself and the third is the written code in the grab box.

background-image:url('URL FOR BACKGROUND IMAGE OF TEXTAREA')
This can either be an image (repeating seamless images are best) or a background colour. Either change the text URL FOR BACKGROUND IMAGE OF TEXTAREA to the URL of the image or replace this entire piece of code with background-color: HEX COLOUR CODE OF YOUR CHOICE.

color: #ffffff
This is the colour of the text within the grab box. Use a hex code of your choice.

Once you have the code complete, copy the code and sign in to Blogger following these steps:
  1. Go to your blog's "Layout". 
  2. Click Add Gadget 
  3. Scroll down to HTML/Javascript 
  4. In the title box, most people write something like "Grab my button!" 
  5. Post your completed code into the content box and click save! 
You now have a grabbable Blog Button!

Once it's there, head on back and comment below with your blog's URL, I will then add your button to my Scrolling/rolling blog roll so you can see the results!

In my next post I will go through the coding and installation of the Scrolling/rolling Blog Roll so you can direct viewers to your favourite blogs, in a compact gadget all of your own.

Thanks for checking this out and if you have any questions, just ask!

No comments :

Post a Comment

Facebook Twitter Google + RSS Feed Email Me