HOW TO | CUSTOMIZE BLOGGER BLOG ? (2015 EDITION)

♥

Hey Zengarmy,


A lot of you guys have been asking me
how I design & customize my blog,
or what HTML & CSS did I use on my blog template,
I would certainly love to reply to all of you one by one
IF I HAVE THE LUXURY OF TIME,
but sadly I didn't.


If I decided to reply to ALL of your questions one by one,
I might die from typing too much kerkerker (LOL)
So, I might as well write a blog post as detailed as possible
to answer all of your questions =)


Just a little disclaimer here :
I'M NOT A PROFESSIONAL, and I pretty much learned all of my
blogger customizing & designing skills from Google.
So I can only try my best to give you guys a "bird view"
of the things you ought to know when you're starting a blog.



✌



So basically, I design my own blog.
( YES I'M NOT LYING )
I don't really recommend spending money on buying
"pre-made templates" from other website designer,
just because I prefer adding my OWN personality into my blog.
By customizing your blog by yourself,
your blog will definitely appear more original & personalized than pre-made template.



♥



S T E P  1  :  Layout ?

The first thing you wanna do is to make sure your blog layout is eye-catchy.
I'm going to divide the "layout" part into 13 different parts,
so that it will be easier for you guys to follow along as I go through them.

( Left click to enlarge )

1. Favicon

The function of the favicon is to enable your website to have
its own icon, for when you open your website in a new tab.
( my website's icon is a "Z" in white with black background, saw it? )
If you saw it, good then, hahahahahah.

The icon that I used is in 800 x 800 pixel,
you can simply create them by using online photo editor,
the ones that I'm using frequently are :
www.fotoflexer.com
www.picmonkey.com



2. Navbar

If you wanna take your blog to the next level,
I personally recommend switching your navbar to "off" instead,
just because I think that the navbar is a little bit annoying.



3. Header

By default, your blog header is suppose to be in words & THAT'S ALL.
But you can always upload your own header photo,
(the one I'm using is 1158 x 441 pixel, and I DO NOT choose "shrink to fit")
and for the placement wise, I chose "instead of title and description".



4. Pages

Pages, in my opinion, is one of the MUST-HAVE-WIDGET on your blog.
You certainly don't want people to read your blog WITHOUT KNOWING YOU.
( well, unless you decided to keep your blog anonymous, I respect that. )

By default, your blog should have one "Home" page,
(which links to your own blog's URL)
BUT you can always add on a few other pages =)
You can do this by clicking the "Add external link" (as shown in the image above),
OR you can go to the "Pages" section to create new pages (as shown in the image below).
Basically, the function of a "Page" is to serve as a static post,
which it will always show on the top side of your blog page.
Normally, bloggers will create static posts of their "About" page
or "Contact" page for readers & advertisers to contact them for sponsors or advice.
I recommend taking a glimpse of your favorite bloggers' blog pages,
and take it as reference for what you need to write for your "Pages".

( Left click to enlarge )

T O   T H E   N E X T   P A R T . . . . . .

( Left click to enlarge )

5. Introduction

I recommend putting your profile picture right at the TOP of your sidebar.
It gives a really distinctive identity to your blog,
and it shows that "you love your blog & you're proud of it" =)
I DON'T RECOMMEND USING THE
"BLOGGER PROFILE" WIDGET !!
No. Don't use it. It looks hideous OMG.

I N S T E A D ,  U S E  . . . . . .

I recommend cutting your photo into a round edge,
just because it looks better in my opinion kerkerker.
Don't forget to add in a few lines of caption =)
(WARNING : DON'T WRITE AN ESSAY !!!)

DON'T FORGET TO CLICK 'SHRINK TO FIT" !!!

6. Translate

Don't forget to add in the "Translate" widget =)
You never know who will read your blog,
so better make sure you prepared the "Translate" button for them first hahah.
Although we all know that Google translate doesn't work under 90% of the circumstances,
it's better be safe than sorry.



7. Follow by E-Mail

This gadget is optional.
But most of the bloggers out there are using this gadget anyway, just to let you know.
People might NOT always follow you via "bloglovin" or "Google friend connect".
Sometimes they just simply bookmarked your blog's URL and come back occasionally,
OR they subscribed to you via e-mail notification.



8. Linkwithin

"Linkwithin" is NOT a gadget from Blogger,
but fear not, you don't need to register & it's COMPLETELY FREE !!!
All you have to do is to go to their website :
http://www.linkwithin.com/learn?ref=widget
Then, follow the instructions & it shall be done.
I really recommend this gadget if you're going for minimalism for your blog design.
"Linkwithin" basically links up any & every of your related blog post to each of your blog post.
It really helps in increasing your blog posts' clicks,
and directs your reader to their desired topics.
( ie. readers who love to read about "lifestyle" related blog post
will be directed towards your "lifestyle" blog post )

( Left click to enlarge )

9. Google+ Profile

FYI, all Blogger blogs are actually connected to a Google+ Profile,
and placing a "Google+ Profile" gadget in your sidebar means that
you are gaining blog followers when people follow your Google+ profile =)



10. Labels

( Left click to enlarge )

Sometimes you may not always blog about the same blog topic everyday.
You might want to blog about DIFFERENT topics such as food, fashion, thoughts & etc.

BUT HOW DO YOU CATEGORIZED THEM ?
THE SIMPLE ANSWER : BY ADDING LABELS TO YOUR BLOG POSTS.

Adding labels to each of your blog post will help you to divide
each categories of your blog posts into their correct places.
However, bear in mind that labels are NOT hastags !!!

I   R E P E A T :
L A B E L S   ≠   H A S H T A G S

Don't. And never use tonnes of unnecessary labels under one blog post.
( funny examples are : FollowForFollow, LikeForLike and etc. )
I mean ... you could use that on your social medias but NOT your blog.
Try to use proper labels such as : Lifestyle, Reviews, Fashion and etc.





11. Blog Archive

( Left click to enlarge )

When your blog entries are getting more and more,
you need a gadget that enables your readers to
assess your old blog post at the tip of their fingers,
and the "Blog Archive" gadget from Blogger is the gadget that you'll need.





12. Popular Posts

Your popular posts don't get popular for no reason.
It means that people actually enjoyed reading it,
so don't forget to add in the "Popular Posts" gadget from Blogger
to keep your most-read popular posts in check on the chart board =) 





13. Followers + Subscription Links

When people like your blog content,
they will want to follow your blog or subscribe to your contents,
so make sure you add in these gadgets.

♥

S T E P  2  :  Template ?

( Left click to enlarge )

Okay, now that you're done with the layout design,let's move on to the template design!
You can click on the "Template" and choose "Customise" as shown in the image above.
Once you're in, you shall be seeing this :

( Left click to enlarge )

By default, your blog is in the style "Simple".
I personally recommend using this style,
just because it's easier to be customized most of the time.

( Left click to enlarge )

Next up, you can choose to insert a background image for your blog.
But for me, I chose NOT to put any background image.
I decided to keep my blog's background WHITE for the moment,
just because it makes my blog post pop out a little bit MORE,
compare to when I inserted another background.
A small tips here, though, is to choose a LIGHTER BACKGROUND.
I strongly NOT recommend choosing a darker background,
because I personally think that it will "eat up" all the words that you type,
and put my blog readers in a super duper bad mood while reading my blog.
( not sure if that's true but it's just my opinion )

( Left click to enlarge )

Choosing the right width for your blog post & sidebar is crucial.
Depending on your preference, you can choose to make it wide or narrow.
I personally prefer wider space for my blog post,
hence I choose 1300px for my blog post area,
& 300px for my right sidebar area.
However, if you really prefer narrowed width for your blog post,
there's no harm in doing that =)
In fact, quite a number of fashion blogger in Malaysia used narrowed width.

( Left click to enlarge )

Here's what I've chosen for my blog's body layout and footer layout =)
YOU DON'T HAVE TO FOLLOW WHAT I'VE CHOSEN, just a wise advice to you.
Choosing the suitable body layout & footer layout for your blog
really depends on how you want to maximize the appearance of your blog post.
There's no magical formula that you have to abide to all the time,
just experiment with different styles until you're happy with it.
( that's basically how I do it )

( Left click to enlarge )

Okay, moving on to the last option in "Template" design.
For the "Advanced" option, I don't really have much to share with you,
you just have to experiment with different fonts and colors until you're happy with it.
YOU HAVE TO DO THIS, YOU HAVE NO CHOICE =)
However, I wish to draw your attention to the "Add CSS" button.
DO NOT, I REPEAT : DO NOT WRITE ANYTHING IN IT
UNTIL YOU'RE FAMILIAR WITH THE WORKING OF HTML !!!
( which I talk about it later )

♥

S T E P  3 : Touch Ups ?

Once you're done with both Step 1 & Step 2,
you're pretty much ready to venture into the world of HTML & CSS =)
You can basically find ALL THE CODES YOU NEED FROM GOOGLE
No kidding, you just have to spare "some time" to find it kerkerker.

( Left click to enlarge )

First thing first, you need to know where to paste in your HTML & CSS codes.
HTML is different from CSS.
For CSS, go to "Template" >> "Customise" >> "Advanced" >> "Add CSS".
For HTML, go to "Template" >> "Edit HTML", and you're in the right place.
Just a side note here, DO NOT FORGET TO BACKUP YOUR TEMPLATE !!!
You can click on the "Backup/Restore" button on the right top area.
(as shown in the image above)

( Left click to enlarge )

All right, let's continue with the HTML.
Once you clicked into the "Edit HTML",
the image above is what you should be seeing now.
Click on the "Format template" button.
( Don't worry it will NOT DELETE ALL YOUR CODES, chill )
After you've done it, press "Ctrl" & "F" on your keyboard simultaneously,
and you shall see :

( Left click to enlarge )

And ... VOILA !!!
Now you can paste in your HTML codes
ACCORDING TO THE INSTRUCTIONS ON THE WEBSITES THAT GIVE YOU THE CODES.
Can't find the desired websites that gives you the codes?
No worries I got you covered.


Here are a few websites that really helped me a lot :
www.xomisse.com
www.icanbuildablog.com
www.carrieloves.com
www.bloggersentral.com
www.theblogdecorator.com

♥

That should be all for now.
I hope this blog post somehow helped you to have a clearer idea
on how to customize & design your own blog.

Till next time, Zengarmy.



♥