How to customize your blog for free with quick and easy steps?

Many of us prefer Blogger as their first option for blogging as it's free of cost. As a matter of fact, the first thought that comes to our mind is if it's going to work or not, or if it is of our interest or not, or if we can earn money with it or not.

If you are still wondering about these questions, go check out my blog - How to make money with your own blog for free? I have already discussed in my blog why and how Blogger is the perfect platform to start with.

Since many of you are beginners here, you must have heard, "It's quite difficult to customize a blog in Blogger."But you are not aware that you can customize your blog with just a few simple and easy steps. Yes, some code needs to be inserted to customize the Blogger Theme. But not to worry! I will guide you through all the customization options available and how to use them for your blog.

Here are some of the basic customization options available -

Adding a widget to a particular page or post
Hiding or Removing attributions
Adding social media icons
Adding a customized footer with multiple columns
Adding a functionality specific to desktop or mobile view
Adding media-queries to set responsive width for all devices

Add a widget for a particular page or post.

A widget is basically a component that is used to add functionality to a blog. Generally, if you add a widget from layouts, it will apply to the entire blog. In case you want a particular functionality for a specific post or page, you need to insert the below-mentioned code inside <b: includable id=' main'> tag of your widget -

<b:if cond='data:blog.canonicalUrl == data:blog.homepageUrl'>
THE CODE FOR YOUR WIDGET GOES HERE
<b:else/>
<style type='text/css'>
#WidgetId {
display:none;
}
</style>

</b:if>

You can get your widget id from the layout section of your blog. Consider the following example to easily identify your widget id - 'PageList1', 'Header1' are these are widget ids. Similarly, you have to fetch the widget of the widget you want to add and replace it in the above code instead of the 'data: blog. Homepage URL,' you can provide your URL. If you cannot fetch it as 'blog.yourUrl,' just copy-paste your entire URL within single quotes, and it will work!

An example is shown below, where a contact widget is added only on the blog's contact page.

Hide or remove attributions

Attributions are basically a way of giving credit to someone. If you use any website like Blogger, WordPress, etc. you will see at the bottom of the site, something mentioned as "Powered by ....". So if you don't want people to know how or where you created your blog, you can remove it. To remove attributions from the footer or to remove any of the widgets from your layout that does not have a remove option available, change the settings using below mentioned steps -

Go to themes
Go to the widget you want to remove
Under that widget tag, find the property named as 'locked.'
Change the value of 'locked' to false.
Save changes and revisit the layout.
On edit, you will find an option to remove it.

Add social media icons.

By default, blogger does provide options to share your blog on different social media platforms. But if you want to add your social media links for people to come and follow, you can add it in the header or footer section of your blog. To add social media icons to your blog, add the below code wherever you want to display these icons -

<ul>
<li class='media_icon'>
<a href='<your facebook page url>' target='new'>
<img border='0' src='<image url>'/>
</a>
</li>
<li class='media_icon'>
<a href='<your instagram page url>' target='new'>
<img border='0' src='<image url>'/>
</a>
</li>
<li class='media_icon'>
<a href='<your youtube channel url>' target='new'>
<img border='0' src='<image url>'/>
</a>
</li>

</ul>

</div>

#social-icons {
margin-bottom:-30px;
height:50px;
width:100%;
clear:both;
z-index: 2;
position: relative;
}
.social-media-icons {
display:table
}
.social-media-icons ul {
text-align:right;
padding:5px 5px 0 0
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
.social-media-icons ul {
margin-bottom:0;
padding:0;
float:right;
}
.social-media-icons li.media_icon {
margin-left:6px;
padding-left:0 !important;
background:none !important;
display:inline;
float:left;
}
.social-media-icons li:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(-360deg);
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

You can check online images to find social media icons that suit your need. Here's one option that you can opt for - exclaimer.com

Add a customized footer with multiple columns.

By default, Blogger provides footer sections, i.e., footer widgets that you can use to create a footer. But that will be a simple generic footer with a single column. It doesn't provide options to add or remove columns in the footer. If you want multiple columns in the footer or a customized footer, just add the below code within your <body> tag at the end, i.e., before closing the body tag, just before </body> tag -

/* ----- LOWER SECTION CSS ----- */
#lower {
margin:auto;
padding: 0px 0px 10px 0px;
width: 100%;
background:#333434;
}
#lower-wrapper {
margin:auto;
padding: 20px 0px 20px 0px;
width: 960px;
}
#lowerbar-wrapper {
border:1px solid #DEDEDE;
background:#fff;
float: left;
margin: 0px 5px auto;
padding-bottom: 20px;
width: 32%;
text-align: justify;
font-size:100%;
line-height: 1.6em;
word-wrap: break-word;
overflow: hidden;

}

.lowerbar {

margin: 0; padding: 0;

}

.lowerbar .widget {

margin: 0; padding: 10px 20px 0px 20px;

}
.lowerbar h2 {
margin: 0px 0px 10px 0px;
padding: 3px 0px 3px 0px;
text-align: left;
color:#0084ce;
text-transform:uppercase;
font: bold 14px Arial, Tahoma, Verdana;
border-bottom:3px solid #0084ce;
}
.lowerbar ul {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
list-style-type: none;
}
.lowerbar li {
margin: 0px 0px 2px 0px;
padding: 0px 0px 1px 0px;
border-bottom: 1px dotted #ccc;

}

Add functionality specific to desktop or mobile view.

There may be certain functionalities that you want specifically on mobile or on desktop, maybe because it doesn't look good on the other platform or the hour's need. So to achieve something like this, you will have to add different widgets for both. To add different widgets or views for desktop and mobile, you can use the if-else conditions in the following way -

<b:if cond='data:blog.isMobile == "false"'>
//Code for Desktop version
<b:else />
//Code for Mobile Version

</b:if>

Add media-queries to set responsive width for all devices.

If you are using a Blogger theme, your blog's UI will work out perfectly regardless of the device. But since you are customizing your theme according to your need, it might be possible that the UI gets busted or overflows on one of the devices. That is the reason why you need to set the responsive width for all devices.

To set view of your blog for different device size, i.e., to make it responsive, you can add media queries for all screen sizes as given below -

/* For extra small devices like phones */
@media only screen and (max-width: 600px) {...}

/* For small devices like portrait tablets and large phones */
@media only screen and (min-width: 600px) {...}

/* For medium devices like landscape tablets */
@media only screen and (min-width: 768px) {...}

/* For large devices like laptops/desktops */
@media only screen and (min-width: 992px) {...}

/* For extra large devices like large laptops and desktops */

@media only screen and (min-width: 1200px) {...}

That's it. I have covered all the basic customization options that can be used and are enough to give your blog a professional look. If you are still wondering what will be the final look if you implement these options, you can check the website you are currently on. Yes! WebisteChef is also created using the above customization options. If you are hoping to achieve something like this, go and try out these options.

I hope you find this article useful. For any doubts or queries, do write to us in the comment section below.

Website Chef

Search This Blog