Useful CSS/HTML codes for bloggers Part 2

Hello my lovely readers.Today's post will be the part 2 of my previous post, useful HTML codes for bloggers. The codes in the post will be about doing small changes in your blog layout. So those are more CSS codes(styling) than HTML. So let's start.

Center Pages Menu/PageList 

I think this is one of the most important  codes when you want do changes to layout. Personally I like the page list to be centered and not on the left side. How to do it? Well it's quite easy to do.

First thing you need is to go Template > Customize > Advanced > Add CSS ,it looks like that once you're there

The page list can be on top,like mine, or on the side.

a.Page List on the top

To center the menu all you have to do is to copy the code below and paste it in the location above( Template > Customize > Advanced > Add CSS)

.PageList {text-align:center !important;}
.PageList li {display:inline !important; float:none !important;}

b.Side Page List 

To center the page list copy the code below to the above location

.PageList {text-align:center !important;}

If you  have the page list in the side bar you might want to align right instead of center it,so the code to do so is

.PageList {text-align:right !important;}

Before you exit the page Don't forget to hip the "Apply to blog" button otherwise you changes will be lost.

source

Center header

How many times have you  made a pretty header and it aligns left? Do you want to center it to make look prettier? Well again this is super easy to do.

First thing you need is to go Template > Customize > Advanced > Add CSS ,it looks like that once you're there

Once you are there just copy the below code and paste it in the the white are

.header-outer {
margin-left:90px;
}

When you are in the template designer the blog preview is live. You will need to adjust the number 90 to a different one. Just try different numbers until you get the result you want. If you will reach 0 and the header still won't center you can use  negative numbers like -5.
Again before you exit don't forget to hit the "Apply to Blog" button.

Remove gap between gadgets
I've been wanting for long time to remove space between few gadgets.So after searching I found how. The first thing you need to do is obviously to decide between which gadgets/widgets you want to remove the gap. Now you need to find out the gadget ID. To do so go Dashboard > Layout  and click edit on the widget that is on the top ( from the 2 gadgets you want to remove space). New window will pop up. Expand the window until you see the complete URL. The gadget's ID is at the end of that URL.

Once you have the gadget's ID go Template > Customize > Advanced > Add CSS and paste in the the following code

#Followers1{
margin-bottom: -50px !important;
}

Change the "Followers1" to yours gadget ID, click "Apply to Blog" and you are done.

source

Google Custom Search

Ok this is something that not many may want but because I've been having problems with the blogger search widget I decided to install Google Custom Search. Some also say that installing this helps you with traffic but so far I haven't seen any changes though I only had it for few days so it might take sometime time to draw traffic.

So i was thinking of making a guide myself on how to install it but I found a great article on another blog so I just gonna link it to you so you can read it, click here

If you found this helpful please don't forget to share this post,I would appreciate it.

Also if you have any other questions about html or css please leave a comment and I will try my best to help