CSS TO CUSTOMIZE BLOGGER

CSS TO CUSTOMIZE BLOGGER

Since switching to Squarespace I have become an avid Squarespace fan. However, I was on blogger for 7 years and I wouldn't ever change that. I learned so much during that time and it gave me a great opportunity to grow. Sometimes I think blogger gets a bad rap, but I still think it's a great platform. I think choosing a platform is all about your own needs. Even though I've switched to Squarespace I didn't want to leave my blogger roots behind and I'm determined to share as many blogger tips as I can.

One thing that I really had to learn while using blogger was CSS and one thing that is great about blogger is that it's pretty easy to add. When I first started with blogger I thought I was stuck with whatever templates they offered. But, the template is only the foundation of what you can accomplish. With a little CSS and some attention to design detail you can make a beautiful online space.

Over my 7 years on blogger I found and used lots of different CSS. Anytime I wanted to add something, change something, or take something away, I went looking for new CSS to make it happen. Below, you'll find all the CSS that was used on my blogger site. Some of the code my be old, you may already have some of the code installed, but I hope that there are some that find it extra helpful.

SquareSpace Crash Course : Using Blocks

REMOVING THE SHADOW BOX FROM IMAGES

This CSS was the very first CSS I ever installed on my blog. It removes the shadow box from images and I remember feeling like it took forever to figure this out. There are new and different ways to do this now, but this is definitely effective.

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: none !important;
border: none !important;
background: none !important;
-moz-box-shadow: 0px 0px 0px transparent !important;
-webkit-box-shadow: 0px 0px 0px transparent !important;
box-shadow: 0px 0px 0px transparent !important;
}

CENTERING YOUR POST TITLE

.post-title { text-align:center; }

CENTERING YOUR POST DATE

.date-header { text-align:center; }

JUSTIFYING YOUR POST TEXT

.post { text-align:justify; }

CENTERING YOUR NAVIGATION TABS

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

ADJUSTING THE WIDTH BETWEEN YOUR POST TITLE AND HEADER

h3.post-title {
margin-top: -10px !important;
}
.tabs-outer{
padding-bottom: 40px !important;
}

ADJUSTING THE WIDTH OF YOUR POST PHOTOS

.post-body img {
width: 700px;
height: auto;
}

REMOVE SUBSCRIBE TO POST (ATOM)

.feed-links {display:none !important;}

ADD A CUSTOM NAVIGATION BAR

This CSS was used specifically to install my blogger Navigation bar. This code was pretty difficult to figure out, so I asked a friend for help. He was able to get this installed without a hitch. When using and installing this CSS it will require some customization to your space, but it's a great foundation to get you started.

#nav {
width: 100%;
margin-top:-70px;
padding: 8px;
background-color: #5ec7dc;
z-index: 10;
left:0;
position: fixed;
}
#nav ul {
list-style: none;
margin: 0 auto;
padding: 0;
border:none;
width:1000px;
padding-left:100px;
}
#nav li {
float: left; }
#nav li a {
padding: 10px 30px 10px;
text-decoration: none;
color: #3f3e3f;
text-align: center;
font-family: "GFS Didot", Didot, serif;
font-size: 11px;
letter-spacing: 1px;
border:none;
}
#nav li a:hover {
background:none;
color: #912686;
}
.tabs-outer{
padding-bottom: 10px !important;
}

ADDING A HIDDEN PINTEREST IMAGE

Hidden Pinterest images are all the rage right now, right? The code below allows you to hide images within your post that only appear when someone goes to pin an image from your blog. This code simply needs to be added in front of your image code.

<div style="display: none;">
SquareSpace Crash Course : Using Blocks

I hope this was super helpful for all my blogger friends. Let me know if your run into any problems. What have been some of your favorite CSS? xoxo. Samantha.