Removing Space between Widgets

One of the annoying things in Blogger is the space it automatically puts between widgets, whether it is on the sidebar or in the labels column.  On investigating how to remove this, I discovered the following procedure.

Before making changes, one has to know the name of the component.  If you look at the lists to the right of this post, you will see titles like Playing with Food and Eyeglass Lens Tinting.  Each of these sections is a separate widget in Blogger; each can have margins set how one pleases.  However, those are not the names of the widgets.  Playing with Food, for example, is widget Label4. Eyeglass Lens Tinting is widget Label2.  Because I know these labels, I can create CCS programming to set the margins as I see fit.  Since I simply wanted to remove excess space above and below the widgets, I concentrated on those characteristics.

To search for the label, you will need to go to your blog's dashboard.  On the left of the screen, there will be a menu.  Click on Template.  This brings up a screen with many pictures.  The top two pictures are Live on Blog and Mobile.  Under the Live on Blog picture are two buttons.  Click on the Edit HTML button.  This will open the HTML editing screen.  Click anywhere inside the box containing the HTML, then press Cntl+F to search.  Type in something you know about the widget.  For example, I might type "Playing" (without the quotes, of course).&nbps; Press enter.  In my case, the search brought me to a like that looked like this:



As you can see, I have my id as Label4.  This is the widget for which I wish to create margins.  Now, where to place the coding?  All of your margin coding is inside a label called b:skin, so search for that.  If there is a black triangle next to the line, click on it.  This is where you will find all the margin coding.  Within b:scan, you will find separate sections, such as /* Headings.  Look for the item you wish to change.  I made my changes under /* Widgets because I was changing widgets.  To change the top and bottom margins for Label2, I entered the following:

#Label2{
margin-top: 20px;
margin-bottom: -15px;
}

This shrunk the distance between Label4 and Label2, creating a nicer look, in my opinion.

P.S.  If you do the first search and do not find anything, you will have to scroll through the code and find all those little black triangles and click on.  This opens up more coding to search.

Create a Chalkboard Background

As part of my blog design, I thought it would be kind of cool to have a chalkboard effect for my banner.  My search of the internet lead to discovery of this video.  I used it to create the banner background above.  That's really all I need to say in this post.

Change Blogger background image

While working on my Blogger template customization, I came across a really good step-by-step instruction on how to change the background image in Blogger.  Unfortunately, I did not save the link, and I did not save the URL.  A subsequent search also failed to turn up the exact same page.  In fact, all I found was xml coding, which does not need to be used in Blogger to accomplish this.  You just need to know where in Blogger to go.  So, here I try to re-create those step-by-step instructions.

Begin by logging into your Blogger account.  That should bring you to the Blogger home page, which should look something like the picture below.

From here, click on your blog name.  In the picture, that would be the black Bright 'N' Squirrelly.  That will bring you to the Overview screen.

On the left side of the screen will be the menu that appears on the left side of this screen.  Near the bottom of that menu is the selection "Template".  Click on Template.

That opens the Template screen, as pictured to the right.  Under the "Live on Blog" picture is a Customize button.  Click the button.

That will open the Designer screen, the upper right corner of which appears in this picture.  Under the white word Template is a gray word Background.  Click on Background.  This alters the screen to the next picture.

You can see Background is now white and the picture in the picture is your current background.  There is a small gray arrow to the right of the background picture.  Click on the arrow.
That opens the Select Background screen, pictured to the left.  (Click on the image to see it larger.)  You can select an image category and pick an image, or you can select Upload Image from the top of the list to add your own picture.  Clicking this will change the Select Background screen to the next picture.
Click on the Choose File button, and follow your computer's directory process and pick a file.  The file is limited in size to 300k.  To cover the entire screen without tiling, the image should be 1800 x 1600 pixels.  After the upload is complete, click the Done button.  This takes you back to the Template Designer screen.  Now, click Apply to Blog on the upper right of your screen.  Your image should now display as the background of your blog.

I hope you found this helpful.  Please feel free to comment or email me if you find it confusing.

Change Post Title Color

Well, I have been spending a lot of time on customizing my Blogger page.  It suddenly occurred to me, however, that some folks may wish to know how to accomplish some of the things I have done.  If you have specific questions, feel free to email me at bright.n.squirrelly@gmail.com.

This post is about how to change the post title color in Blogger.  In the image to the left, the post title is "A Test Post" and appears in red.  Changing the color requires adding some xml coding and then picking your colors.  The tutorial I followed appears at this link.  It is simply a few cut-and-pastes.  If you follow the instructions to the letter, you will be able to then choose your post title colors.

One warning.  A post title is a link, so you will need to pick three colors, one for each state of a link:  Normal, Hovering, and Clicked.  As you can see, I chose red for my normal, turquoise for my hovering, and purple for my clicked.  Again, if you have any questions or need some guidance, feel free to drop me an email.