Socialesale.com Banner

Blogger Tutorial - How to add borders to gadgets

Wednesday, July 20, 2016

Blogger/Blogspot tutorial/guide how to add borders to gadgets/widgets
Another Blogger tutorial for something that took me a little while to figure out, hope it helps someone...

How to add borders to gadgets.


First you will need to go to your Blogger Blog's Dashboard. Click on Template, and click on Customize. Then in the upper left corner click on Advanced, and then click on Add CSS. In the box that will open, copy and paste the below code:

.sidebar .widget {
border:3px dashed #000000;
padding:10px; 
}

You will be able to see in the preview below that all your Gadgets now have black dashed borders to them.

You can edit the color, the width of the border, the type, and the space betweent the gadget's content and the border.

A) To change the width of the border play around with changing the number where it says "3px"

B) To change the color, google search for "HTML color codes" and test a few colors to find one you like, and change where it says "#000000"

C) To change the type, replace the word "dashed" with dotted, or solid, or double, and see which one you like best.

D) To change the space between the gadget and the border, play with the number where it says "10px"


That's it. Now you can add a customized border to your sidebars gadgets/widgets!! Enjoy!! :)


============================
My Blogger Blog:
http://seriouslyfunnyhumor.blogspot.com/
============================
Find me on Twitter:
https://twitter.com/Lionsnr892
============================
Find me on Google+
https://plus.google.com/+JamesYoung24
============================

+Blog +Free-blog +Blogger +Blogspot +Create-blog +Blog-creation +Starting-a-blog +Starting-blogspot +Creating-blogspot +Gmail +Google +Website +Personal-blog +Blogger-tutorial +Facebook +Facebook-thumbnail +HTML +Blogger-HTML +Facebook-cache +Facebook-preview +Website +Archive +Blogger-archive +Blogspot-archive +Blogger-archive-expand +Blogger-archive-collapse +Blogger-archive-gadget +Blogger-gadget +Blog-widget +Blog-gadget +Blog-border +Blog-gadget-border +Blog-widget-border +Add-borders-to-gadgets +Add-borders-to-widgets +Blogger-add-gadget-borders

Picture --> I took the Screenshot from Blogger's page


↠ This post was originally published on Bubblews in the Tutorials category by me (Bubblerian) on August 26th 2013.


No comments:

Post a Comment