Blog Anchor Point



Image Links



The images above, are actual Image Links, and are click-able. Use them to navigate to the sites indicated in the mouse-over pop-ups!


Sometimes, a mouse-click on images will enlarge them

Monday, 25 April 2011

Clickable Tabs Images



Sometimes, boredom leads to goofing-off and spurs creativity.

Yesterday, the Easter holiday was getting to me - the shops I wanted to go to were shut, and my girls had been to see me, and gone home for dinner. I was a little down. So, I started to look at my blogs to see if anything jumped out at me as needing repair, or adjustment. Then, I thought ...

"I wonder if I can use image icons in my Tabs Links bar?"

Naturally, I consulted on this, and decided, based on his suggestions, to 'give it a go'! It worked!





There is only a small heap of challenges in doing it.

  • Designing the images to an exact size. I used 50 x 50 in the above Tabs
  • This has to be the same for each icon, otherwise the Tabs bar will show the differences - one bigger than the other, or a white line underneath, etc
  • You have to code the Linklist as html - not as an XML GUI
  • therefore, the code goes into an html/Javascript gadget, rather than a Linklist


My first steps were:

  • Start testing in my Research/Testing blog - don't want to do it on my main blog!
  • Test for which size image icons work best - trial and error!
  • Add a caption, using Paint, and re-size the artwork to 50 x 50 using Picture Manager
  • Incidentally, the latest version of Paint is great for this, because it tells you the size of the finished artwork, and you can also use it to reduce the larger artworks, if you don't like Picture Manager!
  • Upload the images to the html Editor, and substitute the Blogger URL with the various Link URLs for my Tabs display
  • add target="_blank" after each URL to ensure the links open in a new window
  • Remove excess formatting (see: Highlighted section below)
  • Add the Bullet codes next to each image script ( ie: <ul>....<li>...</li>...</ul> ) You'll see that further down in the script.
  • Name the gadget - I always use 'Pages'
  • Add the finished script to an html/Javascript gadget/page element, and position it just above the Main Page, below the Header.




The codes:

Initially, the uploaded images look like this first batch of script. the Blogger URL has to be replaced, as well as the formatting of the <div>...</div>

<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-kRBsJ0gZpv0/TbT2t83mVqI/AAAAAAAADYk/U_CEX1FZJsM/s1600/BALLADRY%2B-%2B1.jpg" imageanchor="1" style="margin-left:1em; margin-right:1em">
<img border="0" height="50" width="50" src="http://4.bp.blogspot.com/-kRBsJ0gZpv0/TbT2t83mVqI/AAAAAAAADYk/U_CEX1FZJsM/s200/BALLADRY%2B-%2B1.jpg" /></a></div>

<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-TyZQ6mLxSIk/TbT2uImVtsI/AAAAAAAADYs/iFOKWBdmaOI/s1600/Bob%2B3.jpg" imageanchor="1" style="margin-left:1em; margin-right:1em">
<img border="0" height="50" width="50" src="http://4.bp.blogspot.com/-TyZQ6mLxSIk/TbT2uImVtsI/AAAAAAAADYs/iFOKWBdmaOI/s200/Bob%2B3.jpg" /></a></div>


The highlighted sections need to be replaced, as follows, and when the Bullet points are added, the finished script looks like this:

<ul>
<li><a href="http://www.blogging.robertosblogs.net/"target="_blank"><img border="0" height="50" src="http://2.bp.blogspot.com/-_pn1BO7hlQk/TbTc07IsIAI/AAAAAAAADXU/iOLT-j6XMLQ/s200/HOME%2B-%2B2.jpg" width="50" /></a></li>

<li><a href="http://www.robertosblogs.net/"target="_blank"><img border="0" height="50" src="http://1.bp.blogspot.com/-uxtjargXifg/TbTc0X-xlfI/AAAAAAAADXM/OhQ18XlTInc/s200/ROBERTO.jpg" width="50" /></a></li>

<li><a href="http://www.recipes.robertosblogs.net/"target="_blank"><img border="0" height="50" src="http://3.bp.blogspot.com/-Dtq7qefvLVY/TbTc0FDElcI/AAAAAAAADW8/tDrgnDIp3fg/s200/RECIPES%2B-%2B5.jpg" width="50" /></a></li>

<li><a href="http://www.follow.robertosblogs.net/"target="_blank"><img border="0" height="50" src="http://4.bp.blogspot.com/-vdKz3A3wPE0/TbTcz9-upFI/AAAAAAAADW0/6UH-wlGysN0/s200/FOLLOW.jpg" width="50" /></a></li>
</ul>


Now, the code can be inserted/pasted into an html/Javascript Page Element/gadget, so it looks like this:



Of course, I am not a graphic artist, and only had some old icon images to work with, however, I am sure you will have your own ideas.

Easy as! Hope you have success with it.

TOP


10 comments:

Hilary Melton-Butcher said...

Hi Roberto .. that looks really great .. and sometime I must get to the point to redesign my blog! I like this idea .. thanks for showing us ..

One separate question .. do you use Reader, and if so .. do you know how to sort the new items alphabetically .. I'm not sure it can be done - but seeing you seem to find your way round things .. you might be able to (quickly) take a look ...

I'm really enjoying your posts and will definitely be returning to check items out ..

Cheers and hope you have a good week ahead .. Hilary

Ed T. said...

Hello,
Thanks a bunch, this is the only place I could find the code properly edited to make it work right for a blog I have under development, thanks so much.

Bob said...

Thanks, and you're welcome, Ed.
The code's probably edited correctly, because I played around with it for so long, to get it right!
Hope you enjoy it, too!

pretty things and potty mouths said...

Hi There!

I followed your code to create image blogger tabs, and they are centered and horizontal, and look beautiful when viewing my blog with chrome or safari. But when I view it with IE, the tabs are stacked vertically on the left hand side of my screen.

Do you know how to correct this?

Thank you in advance!

Amanda

Bob said...

Amanda,
Yes, they do look good.
Your problem with IE display is most probably caused by the narrower width of IE post box. Internet Explorer is renowned for this problem.
All I can suggest is moderating/reducing the size of your images.

Jixolet said...

Thanks so much! I have been searching for nearly a year trying to find a tutorial that was actually helpful, and here it is. Again, thank you, it is most appreciated!

Solveig said...

Hello Bob,

I found this very helpful as well. Thank you! I just have one question: Even though I have set the margins to 0em, there are spaces in between the tab images. Do you have an idea how I could remove those so that all images appear in one line?
Thanks a lot, Solveig
(http://posted-blog.blogspot.de/)

Bob Suker said...

Solveig, Thanks for your comment.

It appears your blog main page is 920 wide, making it squeezy for 5 images of 160 - due to the inbuilt 'padding' of the template design.

I suggest going to the design/customise screen 'Adjust Width' option, and widening your 'Entire Blog' width a little, (not too much), until the images align. Trial and error, I'm afraid.

Bob

Solveig said...

HURRAY, IT WORKED!! That was easy. Thanks so much!!!

Bob Suker said...

Solveig,
You're welcome. Glad to be of assistance.