And It’s Not As Hard As You May Think…
I found coming up with a descriptive post title almost as difficult as working out how to do the coding, and neither task was quick!
Taking Part In Blog Hops…
Is part of what makes blogging sociable and fun, but hosting a blog hop takes time and energy, so it’s quite right that the hosts request that participants in their blog hops share the love by displaying their badges.
I’ve never had an issue with displaying blog hop badges or linking back to their respective blogs, but the result was often a rather untidy and cluttered blog post ending.
Some bloggers choose to display blog hop badges in their sidebars. Which works well for the hosts as their blog hops are constantly on display and works well for the blogger as it keeps post endings tidy and uncluttered. And that’s what I wanted too!
What I Wanted Was…
To be able to showcase blog hop badges neatly in one sidebar widget, all linking back to the appropriate blogs and opening in new tabs.
What I Didn’t Want Was…
A sidebar dominated by blog hop badges.
So I browsed plugins seeing if I could find any that would do the trick, but found none.
After months of mulling over what I could do, I decided to have a go at creating my own. So with the help of my son and hours spent browsing the internet learning about coding, we eventually found a way to create HTML coding that would not only display blog badges neatly in one widget, but also link each blog badge back to it’s respective blog and opening in a new tab.
So Here It Is…
How To Create Simple HTML Coding To Display Blog Badges Neatly In A Sidebar
- Prepare images by editing them (my editing tool of choice is PicMonkey) to the size you want, bearing in mind sidebar width (my images are 100px wide. My sidebar widgets are 300px wide).
- Upload images to WordPress.
- Open WordPad or something similar and copy and paste onto the page:
<img alt=”” src=”Image URL here” /> <img alt=”” src=”Image URL here” />
- Open the images you want to use in the WordPress media library, copy the image URL and paste it where it says “Image URL here“ in the coding. (The coding above is for two images side by side, if you want to add more images copy and paste it one above the other as many times as you need. If the side bar is 300px and your images 120px the images will sit in rows of two, if the images are 100px they will sit in rows of three.)
If you just want to display images then thats all you need… But if you want to add links that open in new tabs/windows then read on:
*********************************************
- To get the images to open in a link (opening in the same window) add: <a href=”page, post or blog URL here” title=”Page, post or blog name here“> before the image coding above, so it looks like:
<a href=”page, post or blog URL here” title=”Page, post or blog name here“><img alt=”” src=”Image URL here” /> <a href=”page, post or blog URL here” title=”Page, post or blog name here“> <img alt=”” src=”Image URL here” />
- Open the blog or blog page you want the image to open in and copy and paste the URL where it says: “page, post or blog URL here“.
- Then type in the blog or blog post name where it says: “Page, post or blog name here“
*********************************************
- To get the link to open in a new window/tab you need to add the magic bit of coding: target=”_blank” after the “Page, post or blog name ” tag.
<a href=”page, post or blog URL here” title=”Page, post or blog name here” target=”_blank” ><img alt=”” src=”Image URL here” /> <a href=”page, post or blog URL here” title=”Page, post or blog name here” target=”_blank” > <img alt=”” src=”Image URL here” />
*********************************************
To make things easy, you are welcome to copy and paste the above coding, filling in the bits in red with the appropriate names and links for the blog badges you plan to display. Repeat the above code as many times as necessary, one after the other. I found it easier to do it first in WordPad before copying and pasting into a widget box.
A working example for two images side by side:
<a href=”http://www.vevivos.com/post-comment-love” title=”Post Comment Love” target=”_blank”><img alt=”” src=”https://debsrandomwritings.com/wp-content/uploads/2015/09/Post-Comment-Love-widget2.jpg” /> <a href=”http://www.thereadingresidence.com/” title=”The Reading Residence” target=”_blank” ><img alt=”” src=”https://debsrandomwritings.com/wp-content/uploads/2015/09/Word-Of-The-Week-widget1.jpg” />
To display the six blog hope badges in my sidebar, I used six images edited to 100px each and repeated the above coding three times, one below the other, filling in the red bits with the appropriate URLs and blog names.
The coding isn’t solely for blog badges, you can use any images you wish to display and link.
Just writing this has caused me to break out in a sweat, so I hope that being able to copy and paste the HTML coding will make things easier for you.
© 2015, Debbie. All rights reserved.
Helena says
Jennifer | The Deliberate Mom says
Debbie says
arthurwears says
Debbie says
Jen says
Debbie says