Monday, September 19, 2011

Installing a Button/Badge on your sidebar in Blogger

Open your Blogger dashboard. I'm going to be demonstrating this using the new interface, so things might look a little different than you're used to. When you're following this tutorial I suggest you switch to the new interface, you can always switch back to the old one if you need to.

Open up your Blogger dashboard
Click on "Template" on the left navigation column.

Click "Customize" under the icon that shows your blog
Click "Layout" on the left hand navigation column

Make sure that your layout has an area for sponsors, usually a sidebar works best. Typically sponsor are on the right.
Click "Back to Blogger" at the top right corner of your screen.
Click "Layout" in the navigation column on the leftt
Click "Add Gadget" in the area you want your sponsor block to appear (don't worry you can drag them around anywhere within your layout)

A pop-up window will appear
Paste your sponsor's button code

Here's what the code means:
<a  this shows that there is a link coming up you'll close the link with this > and at the end of the button code you'll close it with </a> 
href="BLOG ADDRESS HERE"  this is the link 
target="_blank"  a very useful bit of code that opens the link up in a new tab or window
<img  this shows that there is an image to be displayed you'll close you image code with />
src="YOUR IMAGE URL HERE" this is the source url for your image - make sure that the address you paste here is the image source url and not a link to the image
width="000" height="000" this code tells the browser he dimensions the image should be displayed. I usually only use either the width or the height code, you don't need both to re-size the image. You want your images to have the same width in your sidebar for that tidy, unified look.
<div> this is one way to do a line break you can also use <br />

Below is the html code for you to copy and paste into your browser to get you started building your sponsor block.


Okay, that's it for today! If you'd be interested in seeing this tutorial for wordpress just let me know. 

Next Monday I'll show you how to code a grab button for your blog - so be sure to check back for that!! Click here to read it now.

2 comments:

  1. Hey there! I saw you post this link in the 31 Dayers Facebook group for the people we're trying to help with buttons. :) I hope you don't mind but I added a link here to my blog post on buttons ... as mine deals more with grab buttons and this post would also be incredibly beneficial to my readers. :) You can see it here http://sahmlifeasiknowit.blogspot.ca/2014/09/how-to-create-and-add-button-to-your.html ... it's at the end of my post. If you'd rather me not link back here, I can delete that from my post - just let me know. :)

    ReplyDelete
    Replies
    1. LOVED your tutorial!! That is very helpful information. Thanks for linking to my site too. That was so sweet of you :)

      Delete

Your comments make my day!!

Sign up to be notified about upcoming classes!!

* indicates required