Monday, April 11, 2011

How can I put horizontal lines between gadgets in sidebars and footer?

Answer:  I am a very visual person and am always tweaking my blog, Simply CVS, to change the looks and I have found an easy way to add a horizontal line to a sidebar to separate gadgets, or sets of gadgets.  You can see examples in my sidebars and
footer at Simply CVS

  • Option one:  Choose the HTML widget option.
  • Copy this and paste into your gadget.  <span class="Apple-style-span" style="color: #879ac3;">__________________________________________</span>
  • You may choose to change the color of the line by changing the color number.  You can find the HTML color number you want by visiting the HTML Color Code Generator.  Just replace the HTML color code above (highlighted with yellow) with the code of the color you want.
  • Also, you can add to make the line longer (underline key) or delete some.  I just add it and play around editing it until it is just the length I want.
  • You can also change it to a dashed line -------- if you choose, or dots........, or =============, or +++++++++, or ~~~~~~~~~~~~~~~~~~~, or anything you'd like!
  • Option two:  If you want it a little closer to the gadget and it happens to be an HTML gadget you can just paste this before or after the HTML in the gadget--or both.   And if it is closer than you want, tuck in another one and make it the color of your background and it won't show up but will leave a nice space between the gadget and line.
Check out all the Pop Quizzes here at Simply Blogging University for other quick tips for blogging.


Katrina @ They All Call Me Mom said...


I have a question about your blog. I notice you are a blogger blog. I am on blogger, too. How do you get your posts to have the "continue reading..." option where it doesn't show the entire post? I've tried and failed many times trying to do this. I know I must be missing something simple....


Cheryl said...

Katrina, first you must choose "updated editor" (if you haven't or are not sure it is in lesson one of blogging 101 ( Then read thru the page jump section in lesson #3 of blogging 101 (

Anonymous said...

I was wondering how to do this! Thank you!


Cheryl said...

Great, Luna. I never know if my little quirky ideas will help others or not so glad to hear it from you.

Amanda said...

Cheryl, this is kinda of off topic, but do you know if there is a way to re-size a gadget on your sidebar? The one I am talking about is my swagbucks swidget. You can go look on my right sidebar if you want to see what I'm talking about but it is like half cut off and I didn't know if there was a way to fix that.

Cheryl said...

I see what you mean, Amanda, and I have seen that on other blogs. I imagine it would be against Swagbucks' policy to resize it. And since it is a gadget which "performs actions" I do not think it could be resized--like a stagnant image would be. My only suggestion would be to move it to the bottom in the footer where there is more width.

Amanda said...

i had tried altering the dimensions before and it didnt show up. I thought I remember trying to put it at the bottom before and it wouldn't let me, but now it just did! Now I just need to center it, but I know you had a post about that somewhere ;) Thanks!

Cheryl said...

Amanda, I have tried to tweak HTML codes on gadgets to resize and couldn't, I really am not HTML knowledgeable, I am just learning on the fly with the blog. I think the centering post is a pop quiz, but can't guarantee that. That's what is so nice about search options :-).