Blog Design,  DIY Tips,  Personal

DIY & Tips for Blogspot Blog Design

Hey lovelies…. How you been doing? Yesterday is a holiday in my country and I had a good short break from work…. Need to re-evaluate what I want in my life and thus I made a resolution for 2016 since it’s just months away. Okie back to today topic, I have been wanting to share some tips on how to revamp your blog look without paying a hefty amount in fact it can be free….  If you know me in person, you know I love freedom and I don’t like the feeling of depending on people. So I been looking around for quite sometime to find a design from a provider where I still can customized some of the item myself. I do not want to keep on paying when I want to add any widget or changing font colours and etc. Also it’s really hard to find a responsive designer… I have encounter numerous time where I ask question or some question and these designer just gone mia….. I really hate when this happen so I prefer to have a template where I know well that i can make changes myself and no need to rely on others.

image

TEMPLATE

The most important thing is your template or the layout of your blog as it covers almost 90% of your blog outlook. So I have two ways to redesign your blog template which is free of charge.

A)Blogspot Advanced Customize Template

When I first started I rely heavily on this Blogspot Advanced Customize Template tool that is available by default in all Blogspot blog. It’s very easy, no html code involved just a few click and your blog can have a new look. I used this function to design my blog for almost 2years plus before I decided to use a new standalone template from other provider. You can refer to this link on a simple tutorial how you can modify your blog design in a simple way. Using this method is fully independent means you can change the design and setting anytime you want without any charges. The set back is that it’s pretty limited on the things you can do for example you cannot have those fancy fancy layout like a summary page with picture on top like my current blog.

p/s: I could find back my previous blog design and so I randomly search online to find a similar layout I used to have.

and my current blog design look like this. The photo will always be on top even though I draft my post with words first then photo.
image

Another setback is that the layout outlook is pretty the same with other blogger who are using this function.

B. Using FREE Theme Template from ThemeExposed.com.

I am using free template from this website now. They have plenty of template design to choose from. You can opt for not paying but you need to put credit at the bottom of your blog. Otherwise, just pay  USD 5 and you get free lifetime support and can eliminate the credit. Their template also comes with slider which is really hard to get even if you find from etsy.com where only a handful of designer include slider in their blog template. I really love slider as it make the whole blog more interesting as the picture slide and it encourage your reader to read other featured post. Now, nothing is perfect. The setback of this is that all the setting is fix as per what you see on the website. So if you want to change so of the setting like font colours, blog width and etc you have to look into the codes and edit it. Or you can pay the USD 5 and ask the developer. I am not sure on the response time as I did not try it. I ask one of my friend to help me with the code and she help me change the whole theme into pink theme. She charges a small amount of around RM50 to help change the coding. She is also a blogger you can find her contact here.

Now after you done the basic template design, you need to go into detail of your blog layout to customized it so it look more personalized and also to match your preference. Firsts we move to designing the blog header. It can be as simple as just a wording header, or your picture with your blog title wording or more fancier design you can hire a designer just to design the header. By that you are not tied to any provider on your blog design as you still can use the Blogspot customized template design function. I am going to show you a few option ya….

HEADER

A) Hire Designer.

By hiring designer you pay a small amount of money to save the hassle. Below is a design I hire a designer to draw for my blog. I can’t really tell you how much I pay because the flower and dress were designed by one of my friend for free as a help and then the cartoon face is the one I pay the designer, Gabriele to draw. You can contact her to discuss what sort of design you like for your blog. I find her price is really affordable, I believe a simple blog header wouldn’t cost more than RM 200.
Gabriele Designer contact: http://www.freewebs.com/gablim/index.htm

image

B) Draw Yourself using Adobe PhotoShop

I have just draw a simple header with some floral on top using Photoshop to replace my previous header. For this method it can be a little tedious but if you know simple photoshop skill this shouldn’t be any problem at all. So below are some of the steps to create the header.

image

1.Create a new space by clicking new and then fill up the size of header to fit your blog width. To find out your blog width you can see from the Blogspot Customize Template Designer page where you can adjust width.

image
this is how it look like after you click ok.

image

2.Then insert font and type your blog name with your desire font type. For more fancy font type, you can Google for free font download. After you download the font, it will be automatically available on your Photoshop.

image

3. Now the last step is to draw the flowers.. Don’t worry it’s very easy… You don’t need to draw it from sketch, there is different brush type available to download and use. All you have to do is download the brush type. Just google flower brush or any type of brush you like. Then load into your brush manager.

image

After you load the brushes you can select the flower brush type and start placing it on your header. As you can see in picture below the brush already in flower design, so all you have to do is just stamp over your header. If you cannot see the flower symbol of your brush it can be the brush size is to big so reduce the brush size on the brush manager tab or press one of this key on your keyboard.

image

Then just need to save in png file size and load into your blog and you’re done.

p/s: I can’t print screen the brush as it will disappear as I click print screen. So I am using my phone to capture it.

image

Now done with header, let’s move to Slider.

SLIDER

If you are using the Blogspot customized template design then you need to insert html code into your blog template as slider function is not available in Blogspot. I found this really good slider tutorial which I had used for a long time before I change to this new template. However this slider, you need to manually add your blogpost link that you like to featured. If you using the blog template from Theme Exposed, it will be automatically picked if you label your post with “featured” label. So, it’s easier then have to every time go to edit the html code with the latest post’s link. Oh you also need to manually upload the picture into the html code because it doesn’t have auto resize function.
Here is the tutorial link: http://imagesliderforblogger.blogspot.my/2013/02/add-javascript-image-slider-to-blogger.html#.VgLkzd-qqkq

This is how the slide look like.

My current slider (come with Theme Exposed template) look like this.

image


TOP BAR WITH DROP DOWN FUNCTION

This is really one of the hardest to make… I search for a very long time to make my own Top Bar with drop down function…. So again using Blogspot customized template, you will have to manually insert the code for the top bar with drop down function.  Off course this Top Bar colour option is very limited and hard to find a matching colour. with Theme Exposed, the matching Top Bar come together.

Here is the link for Top Bar with Drop Down Function: https://www.nosegraze.com/how-to-add-a-drop-down-menu-navigation-in-blogger/

The Manual Top Bar look like this.

image

Current Top Bar look like this
 image


SIDEBAR & WIDGET

For sidebar like social button, instagram widget, popular post and etc all can be done easily. For social button and instagram widget you just need to google for the html code and then insert into your blog via the layout tab and it’s done. For popular post and etc it’s available in blogspot. Similary can be done by going into your layout tab. I’m sure you all know how to do this. There is two type of side bar which I like to share the tutorial to add on to your blog.

A) Subscription Box

First is the subscription box, it took me very long to get a decent clean design. Most other I found have weird design… You can click Blogger Yard Tutorial here for this subscription box. It look like this. You can change the colour by changing the colour code.
image

B) Search Bar


Second is the search bar… OMG this also takes me forever to find the simple design. Tutorial from HelperBlogger here. It look like this and again you can change the colour by changing the colour code.
image

C) Oval Profile Picture

Third is how to make a oval profile picture on your sidebar. If you are beginner in photoshop then you can refer to this youtube tutorial else I think you know how to do it! Below is how my about me look like.
image

So here is all the tips I want to share with you on how to design your blog independently. No need to keep on rely on you designer to make changes and most importantly it’s FREE! Happy designing your blog ya. Thank you for reading my long post. See you in my next post soon. Muacksss…

Leave a Reply

Your email address will not be published. Required fields are marked *