Labels widget

As I was trying to figure out the whole 3 column thing last time, I knew I had a problem with my labels widget. I had set it to display as a cloud yet it was not doing it. After trying playing around with the options, I had to remove and add it back, and that fixed the problem. No more crazy long list of labels with tons of white space!



Still, I didn't like exactly how it was displayed, so I set out to find some customization option. I didn't want different size words, or just words, but more than that, I really had no idea what I wanted, so I'm not being too picky for this. I liked the idea of this one, with my colors instead.

Without any tweaks from the original tutorial:



And a few adjustments.



I thought it would be nice to replicate my 2 opposite rounded corner effect from my social media buttons, but it didn't work with %, I had to use fixed px.

There was a large space above and below the title of the widgets in the footer, which I could not figure out where it was coming from. I remembered that in Chrome you can Inspect Element (by right clicking anywhere on the page) and see how something is coded, so I did that and saw that there was a default margin around the titles that blogger was automatically placing.



So I just specified margin 0 and it fixed that.



This gave me the idea to do the same for the width of the footer, which I was having trouble getting it to be 100%, there was always a sliver of background on either side. By inspecting the element I saw there was indeed a margin being placed for the body, so again I just specified margin 0 and voila!!



SO happy to finally figure this one out!