Thursday, March 26, 2015

Rock the Blog-- Creating Unclickable Images

Rock the Blog is a "How To" for bloggers!

From graphics to html and all kinds of bloggery goodness!

Since I'm based on Blogger most posts will revolve around the Blogger platform though some ideas may apply to Wordpress as well.

Whoa! It's been a while since I've done a Rock the Blog.
And figured it was about damn time.

So a couple weeks ago I was messing around making new dividers on the blog. 

Yup. These guys.

But I didn't want to just add a photo that could be clicked on like the cover image or man candy pics. 
If you click on that paw divider you'll see what I mean.

I wanted something more professional and that had a website feel. 
So instead of being clickable it would be embedded in the page.

And it turned out to be a really quick fix.
Not something that's a huge deal overall in the bloggy scheme of things but that I really liked having that option for an image

So all you do is insert the image like you usually would by clicking the little photo button.

Then go into your html.

For my paw divider this is the code.

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5kw_O6qoE3jGSogDkypRC4BYCHJaC2oTb-4f7ZzdQPccpP_fMmnsZlW8ZnAurVp6AocL0U8-ul5ks8FWMTjZXxB4yTIToADbzYPi10umvAZmS9zN7j2wjQnDABT_m768xFejR9OswSV5e/s1600/paw+banner.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5kw_O6qoE3jGSogDkypRC4BYCHJaC2oTb-4f7ZzdQPccpP_fMmnsZlW8ZnAurVp6AocL0U8-ul5ks8FWMTjZXxB4yTIToADbzYPi10umvAZmS9zN7j2wjQnDABT_m768xFejR9OswSV5e/s1600/paw+banner.png" height="52" width="320" /></a>

All you do to make it unclickable is delete the highlighted yellow bits. 

Which leaves...

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5kw_O6qoE3jGSogDkypRC4BYCHJaC2oTb-4f7ZzdQPccpP_fMmnsZlW8ZnAurVp6AocL0U8-ul5ks8FWMTjZXxB4yTIToADbzYPi10umvAZmS9zN7j2wjQnDABT_m768xFejR9OswSV5e/s1600/paw+banner.png" height="52" width="320" />

and unclickable paw dividers like the two below.


Yay!

That would be a bother doing for each post so I copied the final html and put it into all of my templates so I don't have to delete the extra code each time. 

And that's it for today. 
If you have any questions let me know!

Previous Rock the Blog Posts


Have a topic idea? Submit it HERE!


Follow on Bloglovin

[Are you a blogger? Leave your link so I can visit you too! ~Anna]


No comments:

Post a Comment

I always enjoy hearing what YOU think so come on and leave a comment. Everyone's welcome :) And feel free to leave comments on old posts. I'll check in on you there too :)

Bloggers don't forget to leave your links!
~Anna

The Herd Archives