I know most bloggers or armchair web designers learn how to create a basic button early on but because there are new people blogging every day I thought I would post a basic how to on a button I use often.
This one very versatile and the code can be altered to create quite a diverse group that has many uses.
It is often used to create buttons on websites that lead you to another page, shop, FB page, basically anything online; essentially all it is is a fancy URL link. Here's the URL I am going to create a button for today: https://www.facebook.com/ButterflyInTheAttic
- Choose a small image you would like to use for your button
- Tip make sure that there is either enough room for your Call To Action or Title
- If you find a picture you like but it doesn't have enough room you can create box to put it in leaving you room for your wording (good example of that is my Networking Saturday image above)
- Once you have the image completed you will need to find a place to store it "online" so that it is actually on the web (note it is not the same as storing your pictures in the cloud that is data storage.) Some simplest options are:
- Flickr- with this type of site you will need to make sure that your image is saved as open to the public otherwise it will not work. To do this on Flickr go to privacy settings select visible to everyone and make it publicly searchable
- Once your image is upload they will give you some options and instruction on how to grab the code
- Perk of a Flickr account is that it is free, easy and gives you 1 terabyte of data (that's a whole lot of data for free)
- Right here on Blogger (far easiest)
- Create a page or post you will never publish
- Upload your image as normal
- Click the HTML tab so you can see your code
- Highlight the part that ends in a .JPG
- An example of what you are looking for: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFjUkBJE05OznCNB66DBmaq62ChIrCV7z5htdxCBTPLojIdli9JyyOBPY9bbR1Uu8EcEM08Gp_rLxpJFz0IvAOuYX-g6zcOu0oQtT8pydGeXzhWNorU3180vLE7sbReVtvOvujzW4FunQ/s1600/logo+butterflyintheattic.jpg
- Copy it and paste it somewhere handy like an open document in Notepad or word
- Instead of clicking "publish" click "save" then "Close" that is it
- For the link you want to have your button take your viewers to:
- Go to the published page, site, post whatever you plan to send people to
- Once it is open, highlight the URL (in the bar at the top of the page)
- For today's example it is: https://www.facebook.com/ButterflyInTheAttic
- Click copy and paste it also into the open document so you have it ready
- Copy the following code:
- <center><a href="YOUR SITE'S URL HERE"><img src="YOUR IMAGE'S CODE HERE" width="200" height="200"/></a></center>
- For blogger sidebars:
- Open the Layout section of your dashboard
- Click to Add a new widget and select the option to add an HTML
- Paste the code you just copied into that box (add a title if you want but it is not necessary)
- Highlight the colored areas and add your own information there
- Save and you are done!
- For other sites or to put it within your post
- Chose to work in the site or post as HTML (for blogger that is simply clicking the tab with that title)
- Paste the code where you would like to see it show up. Tip: For me if there is a lot of data and it is hard pinpoint the spot I mark it while I am in the Compose tab by typing a series of ************ in the spot then it is easily recognisable while I am working with the HTML. You will, of course, delete those once you are done building your button.
- Add your Data (the image JPG code and your site URL)
- Save your work and you are done! (See the example of my button and its code below)
<center><a href="https://www.facebook.com/ButterflyInTheAttic"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFjUkBJE05OznCNB66DBmaq62ChIrCV7z5htdxCBTPLojIdli9JyyOBPY9bbR1Uu8EcEM08Gp_rLxpJFz0IvAOuYX-g6zcOu0oQtT8pydGeXzhWNorU3180vLE7sbReVtvOvujzW4FunQ/s1600/logo+butterflyintheattic.jpg" width="200" height="200"/></a></center>
******************************************************************************************************************************************************************************************************************************************************************
Rule Free Networking:
Post any of your family friendly sites including social media (blogs, shops, FB, etc.) What ever sites you would like to share. (multiple sites are OK) No obligation here.Please help promote this post using your social network. Here is an easy one:
Tweet
