How I made my Blogger blog my own

In my previous posts, I went over Why I moved from WordPress.com to Blogspot.com and How I moved from WordPress.com to Blogspot.com. Now I am going to go over some of the ways I customized my Blogger blog.

Since I had just restyled my WordPress.com blog recently, I decided I wanted to make my Blogger blog look as much like my old WordPress theme as possible. In addition to making it look like my old theme, I wanted to implement new features that I could never do with WordPress.com.

Left: WordPress.com   |   Right: Blogspot.com

It's strange that the colors look slightly different. I used the same background and header from my WordPress.com blog.

Basic Customizations

First here are some of the basic customizations that I did that do not involve any code. These are the pretty basic customizations to get your blog off the ground.

Started out with the Simple Template: This is the basic, bare bones, template with no background picture. From visiting other blogs, I knew that you will see the original background before it loads your custom background. I did not want this to happen with mine, so I started out with a template with no background.

Simple Template - Completely bare bones. This is how my Blogger blog started out looking like.

Custom background and header: Set these up in the Blogger Template Designer. I used the ones I had made from my previous blog, which I talk about in the post What's in a Name. I'll eventually work on my theme more. My WordPress theme required it to be a specific dimension, so I was stuck with these dimensions. Now that I am no longer constrained by WordPress.com, I want to eventually narrow up the header so it doesn't take up so much space.

Customized fonts and colors: Use the Blogger Template Designer to set up custom fonts and colors. Awwww, yeah! I am so glad I'm on Blogger versus WordPress.com. On WordPress.com you could customize your theme slightly... but then you had to pay for an upgrade to customize it more. Ain't nobody got time for that!

Set up columns: Use the Blogger Template Designer to set up your columns. I like the post/page column on the left and a sidebar the right. I also set up three widget columns on the bottom. I love that I can control this and I am not constrained to how the template is set up.

Blogger Template Designer - Edit the template for fonts, colors, background, header, column widths... so much more than what you can do with WordPress.com, even if you pay for the premium features!

Add a pages tab widget underneath the header: Use the Layout Editor to set up a pages tab widget underneath the header. When you click "add widget," you will want the pages widget. Then you will want to click and drag it to the horizontal position just under your header. You can then style it in the Blogger Template Designer. You can add static links to your pages widget by clicking the edit button from the template editor or from your blog.

This is what I originally went with... but then I added a drop down menu and search bar to my tabs! See this advanced option below.

Remove the Blogger Navbar at the top: In the Layout Editor, you can edit the navbar widget. You can choose a different style... or you can remove it! I like having it removed.

Blogger Layout Editor - Rearrange and add widgets. It is similar to WordPress.com's widget editor, except that there is a little more freedom on Blogger AND you can edit the template html for even more customization!

Advanced Customizations

Here are some of the more advanced things I did based on some tutorials. These tutorials were super easy for me to follow. I LOVE LOVE LOVE that I get to do fun stuff like this to my blog. With Wordpress.com I was so confined by their templates, it was so FRUSTRATING!

Auto Read More: Check out Blogger Sentral's Blogger Auto Read More With Thumbnail tutorial - I love this! To make it not squish up your images, set height or width to "" instead of a defined pixel. This keeps the images proportional but constrains one of the dimensions. I set mine to a specific width and let the height auto adjust. I found that the tutorial is missing a step; you need to replace all instances of the data:post.body line. My template had it in three locations.

Auto Read More - Both WordPress.com and Blogspot.com have a feature to insert a tag to inject an click to continue button... but this tutorial goes over how to set it up automatically! It also includes a thumbnail, which the tag injection does not do. I think this looks very clean.

Auto Author Biography Box: I followed Code it Pretty's Author Biography Box for Blogger tutorial to set up my author bio at the bottom of every post. I was very happy with how this turned out and the tutorial is very easy to follow. I customized mine by adding links to all of my social sites within the bio. It is a little redundant to have this both at the end of a post and in the sidebar, but whatever! :)

Auto Author Biography Box - this bit of code makes you bio show up on the bottom of every post, automatically. When you are ready to change the bio, you only have to change it in one location.

Related Post Widget: I initially installed LinkWithin, but then I read this article about Why to Not Use LinkWithin. The gist of the post is that LinkWithin steals your hits, which is bad for SEO. I immediately switched over to nRelate after reading this.

The nice thing about nRelate is that because you make an account, you get to have options! I customized how it looks to make it look as close to my project gallery as possible. You can also tell it to reindex your site whenever you want.

One of the main turnoffs for me about nRelate was their logo and sponsored ads... I didn't realize you don't have to have either of these! You can turn off their logo and opt out of ads. BUT the monetization of the widget is yours and there are lots of options for this as well, including where the ad is located (before/after your posts or random) and how many ad spots.

Another option is to provide links to your partner sites. The widget will pull related posts from your blogroll. This is a great way to partner up with others and share traffic with them.

Top: Screenshot from Diana Rambles - Notice that this widget has an nRelate logo.  Without hovering over the links, you may not even know that the first link is a sponsored link. I always feel so teased by these. I actually clicked on it thinking I missed a post by Diana.
Bottom: Screenshot from my blog. I removed the nRelate logo and I am not offering ads.

Add Signature to the Bottom of Each Post: On WordPress.com, I used to insert my signature into every post... now it is automatically added! Plus, when I want to update my signature (which I have done at least once to match a new color scheme and will do again), I can do it once and it will update all posts! I used Code It Pretty's Automatic Post Signatures for Blogger tutorial. To make my signature appear before my nrelate widget, I replaced the following code:

div[id*="nrelate_related"]:before {   

with

.nrelate_related:before {

Signature, nRelate widget and Author Bio Box

Remove Border/Shadow from Pictures: The default is to always have a border/shadow. I just thought this looked tacky, so I removed them with Help Blogger's tutorial How To Remove Blogger Picture/Image Shadow And Border.

Remove the border/shadow from pictures (image courtesy of HelpBlogger's)

Auto Recent Posts Widget and Project Galleries: This is a wonderful widget to have! I used BlogerSentral's Recent Posts Image Gallery For Blogger tutorial to create a recent posts widget for my sidebar and category organized project galleries! What is great is that they auto update! Unlike my InLinkz widget that I used with my WordPress.com blog. I LOVE that my project gallery auto updates!

Auto Updating Project Gallery Organized by Category

Contact Form: I followed All Blog Tool's How To Make A Contact Form In Blogger tutorial to set up a contact form through Google Drive. I'm not sure that I like this contact form. What I don't like about it is the email notification. I have to navigate to google drive in order to see the form response, which is located in a spread sheet. With my wordpress.com form, it would send me an email with all the information and then I could reply via email. I might look into a different form engine, but I figure this is good enough for now. I have only received 3 contacts through my form so far, so it isn't a huge hassle.

Left: Contact Form
Right: Entries are saved to an excel sheet

Custom Pin It Button
I initially set up a custom pin it button via WhitSpeaks How To: Make a 'Pin It' Button Appear on Hover Over Images on your Blog. This is a pretty standard way to get a pinterest hover button.

BUT then I decided to go with Markerly. What I love about Marklery is that it offers multiple platforms for sharing images, text and the webpage. I was able to customize the button color, however the buttons on the side of my page didn't seem to change color.

I LOVE that I can add javascript code to my template now! Sweet!

Markerly Widget adds buttons to pictures when you hover over it. It also adds these buttons when you highlight text. There is also a widget on the side of my blog for sharing the page. The buttons change depending on the action. For instance, Pinterest isn't available to share if you highlight text.

Drop Down Menu: I ended up replacing my pages tab to this drop down menu with search bar, as it would resemble the old wordpress.com blog more and free up space in my sidebar by taking care of the search widget. Check out HelpBlogger's Create Horizontal Navigation Menu With Drop Down Submenus Using CSS tutorial.

I removed the rounded corners, adjusted the centering by decreasing the left margin and reduced the margin underneath the header. Here are a few comments on the tutorial page for doing the last two:

• Tip to eliminate the indent. I used -30 just like Erin.
• Tip to reduce the margin underneath the menu.

I also reduced the width of the search bar in order to hide an unsightly leaf image in the background of the free image provided by the tutorial.

Drop Down Menu - the pages tab widget in blogger just has the top level tabs. I set up this drop down widget.

Update: I ended up going back to the pages layout, mainly because I accidently restored my template to an older version before I made this customization. Secondly, I found that having this custom drop down menu breaks the menu in a mobile browser. I don't know about you, but I am often reading blogs on my phone, so having a good mobile experience is important.

I am so happy to be over at Blogger now. All of these code tweaks and font/color tweaks were unavailable over at WordPress.com. I could have paid money to have less than half of the features available here at Blogger. So nice!

So what do you think of how I set up my Blog? Are there any special tweaks you did to yours that you like better? I am newish to Blogger, so let me know your own tips and tricks in the comments or add your link to the resource list below.

Resources

I'm glad I wrote that all out. I just know that I am going to want to play with the template and end up starting from scratch. Now I have a place to jog my memory on how to do all of these things.

Happy Blogging!

Linking to: Freedom Fridays | Weekend Wonders | Sharing with Domestic Superhero | Friday Link Party | What to do Weekends