DonCharisma.com Coolest Bloggers Widget

DIY Widget – Coolest Bloggers – “Fun” with HTML

I love to chop things up and then make new things, must be a creative process, I guess. WordPress dot com blogs give us really great tools and widgets already. But I wanted to create a custom Widget to show off other bloggers that have inspired me, and WordPress.com simply didn’t provide what I want. So I did one myself, yay!

DonCharisma.com Coolest Bloggers Widget
DonCharisma.com Coolest Bloggers Widget

DonCharisma.com, Don Charisma, Cool Twitter

How to make a cool Designer widget for your blog, your widget how you want, impress your friends the #DonCharisma way http://wp.me/p2TS8Q-hL

How do we do that ?

WordPress.com blogs have a widget called “Text – Arbitrary text or HTML”. It’s possible to create all number of delights using this tool, as long as you’re not putting scripts in there. WordPress.com have basically banned things like JavaScript for security and to prevent spammers and affiliate marketers. A good thing really.

Anyway, I digress slightly. Basically inside the widget’s html, I’ve created a table, a table with two columns (as many rows as you like!).

First column is the Gravatar picture, with the “float over hovercard”. in layman’s terms it’s a little box that pops up when you put your mouse over it, that has a picture of the blogger and a link to their Gravatar page.

Second column contains their name or blog name, a link to their blog and a short personal appraisal of them/their blog.

For html table we use the ‘table’ tags:

<table> </table>

I’ve also added in border and cellspacing attributes to get it to look pretty:

<table border="1" cellspacing="2">

For each “row” in the table I use the ‘tr’ tags:

<tr> </tr>

And then finally for each “cell” we use the ‘td’ tags

<td> </td>

Simple enough ? HTML tables are really simple, just wish someone had of explained it that simply to me, would have saved a lot of hair-pulling !

First “cell”
I’m using the code for the “cell” from the site stats screen in WordPress, and modified the image width and height to be “40” (pixels) which fits nicely for me.

<td>
<img alt="" src="http://1.gravatar.com/avatar/86c0b70a46a00a6a8e67a8b533dfaf9c?s=100&r=pg&d=mm" width="40" height="40" />
</td>

which looks like this :

This Gravatar is for tPenguinLTG, so how do we change that ? Well I use – right click on the person’s image in my comments screen, and select “Inspect Element”. This brings up a little window at the bottom of the screen, with the html. I then right click on the html and select “Copy as html”. Paste that into a text editor, the important bit is :

http://1.gravatar.com/avatar/86c0b70a46a00a6a8e67a8b533dfaf9c

For each row in the table I copy and paste the link for each individual gravatar that I want in my widget.

Second “cell”

For the second cell, same thing wrap in ‘td’ tag. I put the blog/person’s name, then link to blog with blog name, then a personal appraisal of them in double quotes. Like this :

<td>
<strong>
tPenguinLTG
<a title="http://tpenguinltg.wordpress.com" href="http://tpenguinltg.wordpress.com">'The Penguin' Says...
</a>
<em>"Probably the Coolest geek on wordpress"</em>
</strong>
</td>

Which looks like this:


tPenguinLTG
‘The Penguin’ Says…

“Probably the Coolest geek on wordpress”

The ‘strong’ tag says embolden this and the ’em’ tag says italics.

Putting it all together

Here’s what two rows look like for – “tPenguinLTG” and “afriend4ever54”, and I’ve added a little slogan at the top “Inspirers of Don Charisma”. You could copy and paste into your widget but don’t forget to change to your own favourites. Adding any further bloggers is just a matter of copying and pasting a row between the ‘tr /tr’ tags, and changing for the blog/blogger you want to show.

<table border="1" cellspacing="2">

<tr>
<td class="author column-author" style="overflow:visible;"><img src="http://1.gravatar.com/avatar/86c0b70a46a00a6a8e67a8b533dfaf9c?s=100&amp;r=pg&amp;d=mm" width="40" height="40"> </td>

<td>
<strong>
tPenguinLTG<br>
<a title="http://tpenguinltg.wordpress.com" href="http://tpenguinltg.wordpress.com">'The Penguin' Says...</a><br>
<em>"Probably the Coolest geek on wordpress"</em>
</strong>
</td>

</tr>

<tr>
<td class="author column-author" style="overflow:visible;"><img src="http://1.gravatar.com/avatar/5e9b7c074ea84285a258fd8e6008b834?s=100&amp;r=pg&amp;d=mm" width="40" height="40"> </td>

<td>
<strong>
Ann "afriend4ever54" Friend<br>
<a title="http://afriendofjesus2013.com/" href="http://afriendofjesus2013.com/">afriendofJESUS2013Blog
</a><br>
<em>"One of the loveliest ladies on wordpress"</em>
</strong>
</td>

</tr>

</table>

Which looks something like this :

tPenguinLTG
‘The Penguin’ Says…
“Probably the Coolest geek on wordpress”
Ann “afriend4ever54” Friend
afriendofJESUS2013Blog
“One of the loveliest ladies on wordpress”

Conclusion

It’s entirely possible to create your own great looking widgets with a bit of fiddling with html, and a bit of know-how from this article. HTML tables are great for laying things out nicely, and neatly. Firefox and Chrome provide an “inspect element” on right click of mouse which is really useful for grabbing links and html you want to re-use.

Enjoy:)



25 thoughts on “DIY Widget – Coolest Bloggers – “Fun” with HTML

  1. Thank you for liking “Nature’s Black Thumb” and “(Camera) Trick or Treat.” I enjoyed reading this informative post. I used the “Text – Arbitrary text or HTML” widget to add some social media buttons to the sidebar of one of my blogs, but I did not know that you could use this widget to create your own custom widgets with HTML. Thanks for the tip! 🙂

    1. You are welcome, it’s very interesting. In the old days of film cameras, that needed to be “wound on” manually, I got some interesting double exposure effects, so reckon it’s this kind of thing or very early “photoshop’ers”. However who can say for 100% certain ?

      Glad you like the widget, and yes the arbitrary text or html has many uses.

      Keep in touch

      DC

      1. Thank you for taking the time to respond to my comment. According to the articles I read, William H. Mumler and William Hope relied on double exposure to create their spirit photos. I do not know if they used any other techniques besides that one.

        Best regards to you,
        Arlene

      2. It’s an interesting article, and reminded me of the double exposures I’d made myself. I can do similar things now in photoshop. How does the saying go, don’t believe everything you read. Probably add “see” in there as well:)

        Warm regards

        Don Charisma

  2. Golly gee, Don. Thanks. Now if I can win my war with this computer, I’ll try battling my widgets. One war at a time is all I’m capable of right now though. Could possible invite a computer geek brother to visit, or a nevvie, or maybe even a teenage grandson. I’m gonna try it myself first though. After I decide the best way to destroy this darn computer. Or maybe just give in, admit defeat, and buy another. Nope, that’s not an option. Never let a computer see you sweat.

    1. The insurance company will have a long document telling you what’s covered and what’s not. Also check out excesses and what value they’ll pay. For instance if you purchased a $1000 computer 3 years ago, they might have $250 excess and then decide it’s only worth $300 dollars because of it’s age, so you end up with $100 for all that effort. Insurance companies in my experience don’t like to pay out, so they will generally put objections and obstacles, etc.

      Generally I keep all my old computer equipment when I upgrade, or give it away to a cause that’s needs it more than my own.

      Having a few “geeks” around doesn’t hurt, although I like to have at least attempted myself first, so I know what they are on about when they are telling me what I’m doing wrong:)

      Hope you get to “master” your computer anyway, in many ways it’s mostly about persistence and putting the hours in, which you probably already know anyway.

      TC

      Don Charisma dotorg & dotcom

  3. Aha! Thanks for featuring me!

    Nice job on the widget; it looks really nice. I get a little concerned when people use HTML tables for anything that’s not tabular data, but I think it’s acceptable in this case.

    A style suggestion: don’t bold your description (or “personal appraisal”, as you call it). Based on the tier system, the description is less important than the heading and should be conveyed as such.
    Also, on the technical side, if you’re going to wrap a <strong> around all the content in the cell, especially if it’s for presentational purposes, it’s better form (“more correct”) to use an inline CSS style:

    <td style="font-weight: bold;">
    

    But again, really nice!

    1. You keep on popping up, when I go geek or techy or hacker’y, and always an encouraging or helpful word !

      So thank you. I tend to use tables to line stuff up in HTML when I can’t do it any other way. Also “discovered” the ‘li’ list tag recently, which can automagically line things up dynamically, really cool for say a bunch of thumbnails that one’s not sure how wide the end page will be. Actually it was a list within a list, if that makes sense, got the idea from the “my community” widget, when I de-constructed it.

      I hear you on the style suggestions, css is on my list to tackle along with php, but only so many hours in the day. Generally aim to keep it simple as possible. And yes you’re right, convention dictates heading, then subheading, etc. The style bold is a neater way of doing if for sure and I’ve learn’t something.

      I’m more on the hacker/monkey-with-a-typewritter end of geek, kind of like to keep my hand in, but often don’t concentrate on one thing long enough to become a guru…

      I like to mix it up on my blog, then I’m getting visitors from different niches on one place and making friends everywhere.

      Thanks again dude, good to hear from you.

      Cheers

      DC

    1. My pleasure, partly for you … isn’t there something in the bible about giving what you want to receive ? … I started with people that left most comments on my blog, you’re in my top-5 !

      1. Aw.w…Now this is more blessing! Thank you for noticing and caring enough to reward me (us). You make it easy to comment though, you bring great topics to your place 🙂
        Good morning from Houston 🙂 may the day bring you laughter Don.

      2. Not that I’m religious man, more of a Buddhist than anything ! Happy to have encouraging positive people around it helps me, so we help each other really, what community “should” be about…It’s good evening/night where I am but thankyou and hope same for you:) DC

Leave a Reply for Don Charisma

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.