Blog Design Tips {ed.2}
Alrighty - so from our first edition of blog design tips, you learned the basics of HTML, CSS and how to adjust spacing between sidebar gadgets. This little edition is going to build on sidebar design and the basics that you previously learned here.
What I’m going to share…
Today I’m going to show you how to put your sidebar photo links beside each other. This is really helpful for people that want to put together advertisements and group social link buttons. So this is how I do it…
Upload your photo into a photo support program. I like to use TinyPic because they have the handiest accidental build in. Not only will it support you picture and link, but it already has hover text. Basically, when people hover over your button or photo, it can say anything you want it to. It’s really nice so people who aren’t blog savvy, aren’t trying to guess what everything is. You can tell them.
You’re going to want to copy the HTML for websites code. Go ahead and upload all the pics you want to add in your photo or button groupings and collect the HTML codes on a word document.
Go to your blogger account, and where you would like everything added in your sidebar, add the “HTML/JavaScript” widget. Add all of your HTML codes. Click on the “rich text” to see the actual photo lineup. Move everything around to where you want it. You can literally grab each picture and move it.
Go back to the “edit html.” Each one of your photo codes will look like this:
<a href="http://tinypic.com?ref=33axysz" target="_blank"><img src="http://i45.tinypic.com/33axysz.jpg" border="0" alt="Image and video hosting by TinyPic"></a>
This is the link and text areas you want to change:
<a href="ADD YOUR LINK HERE" target="_blank"><img src="http://i45.tinypic.com/33axysz.jpg" border="0" alt="ADD YOUR HOVER TEXT HERE"></a>
Change each HTML to connect to each link you want, with your desired hover text, hit save, and you be done! Voila…aren’t you smart.
What I’m going to share…
Today I’m going to show you how to put your sidebar photo links beside each other. This is really helpful for people that want to put together advertisements and group social link buttons. So this is how I do it…
Upload your photo into a photo support program. I like to use TinyPic because they have the handiest accidental build in. Not only will it support you picture and link, but it already has hover text. Basically, when people hover over your button or photo, it can say anything you want it to. It’s really nice so people who aren’t blog savvy, aren’t trying to guess what everything is. You can tell them.
You’re going to want to copy the HTML for websites code. Go ahead and upload all the pics you want to add in your photo or button groupings and collect the HTML codes on a word document.
Go to your blogger account, and where you would like everything added in your sidebar, add the “HTML/JavaScript” widget. Add all of your HTML codes. Click on the “rich text” to see the actual photo lineup. Move everything around to where you want it. You can literally grab each picture and move it.
Go back to the “edit html.” Each one of your photo codes will look like this:
<a href="http://tinypic.com?ref=33axysz" target="_blank"><img src="http://i45.tinypic.com/33axysz.jpg" border="0" alt="Image and video hosting by TinyPic"></a>
This is the link and text areas you want to change:
<a href="ADD YOUR LINK HERE" target="_blank"><img src="http://i45.tinypic.com/33axysz.jpg" border="0" alt="ADD YOUR HOVER TEXT HERE"></a>
Change each HTML to connect to each link you want, with your desired hover text, hit save, and you be done! Voila…aren’t you smart.
