I also customize blog designs for free in return of just an ad of my blog. So far I have customized Amazingly Scientific, Unrevealed Spots, SKY28, etc. To customize yours, contact me.
Blogging can be fun until the looks of your blog start to haunt you. But then you might wish to change the design of your Blogger blog. But then you see very limited options! Here's how you can customise your Blogger blog's design to make it look like a professional one!
Firstly you need a blog template. Template is the design of your blog. Just like Blogger provides themes like Contempo, Soho, etc., templates are external files that you can upload as a theme. To find one, you may Google up best Blogger theme, best Blogger template, etc. You should find one from websites like Gooyabit Templates, ThemeForest, Templatify, etc. You can either have a paid one or the free version.
Once you have downloaded your template, search for an .xml file in among the downloaded files. Remember, thus is the only file we will need, so you can delete others (if any).
Now sign in to your blogger dashboard and go to "Theme". And download a backup of your theme by clicking that arrow and "Backup". I always do this step, so that if you mess up while customising the theme in future, you can upload the old one and do this customisation step some day later!
Next step is to upload that .xml file of the template as your theme. To do that, click that arrow again and select "Restore" and then browse for that .xml file and upload it. If it shows any error by any chance, delete and download the template again.
Now starts the tougher part. There are 3 steps in customising your theme:
1. Layout
Sign in to your Blogger dashboard after you have uploaded the new template. Then go to "Layout". Here you can change all the things without coding HTML like the placement of ads, showing social icons, header content, footer content and basically, the layout of your blog. Here you may adjust gadgets, add or remove gadgets, and so on. No further explanation needed as even a newbie knows how to do this step 1. Although if you need any help, feel free to comment below and seek my help.
2. Customize
This is another customisation step even a newbie knows. Go to "Theme" and hit customize. Here adjust fonts, font sizes, colors of links, buttons and other things, etc. This step also requires no extra skills. But still unable to do it? Comment below!
3. Edit HTML
This is a difficult step and only people with atleast basic knowledge of HTML, CSS and JavaScript (optional) can do this. if you don't have prior knowledge, do not attempt this step or you will end up messing it. You need to go to "Theme > Edit HTML". Now, the basic structure of any theme will look like this:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<title><data:blog.pageTitle/></title>
<!-- SOME META CONTENT -->
<!-- SOME CSS STYLING -->
</head>
<body>
<!-- BODY CONTENTS -->
<!-- SOME JAVASCRIPT -->
</body>
</html>
Meta content is some metadata with tag <meta /> which shouldn't be touched unless having proper knowledge. Then the CSS is the style of your theme. Like the colors, fonts, sizes and much more details than you get in step 2. If you have knowledge of CSS, yu can cautiously customize this accordingly. The same guess with javascript content.
Body content has <b:section> tags only. These tags denote the sections like Header, Sidebar, Ads, Page body, etc. in the above example. With this tag, you can change its following attributes: showaddelement – Consists of ‘yes’ or ‘no’ value. This establishes whether the Page Elements tab displays the ‘Add a Gadget’ link or not; maxwidgets – It limits the maximum number of widgets that can be added in a section. You can change the limit by changing the number.
<b:section> tags include only <b:widget> tags which are the widgets you add from layout. With proper knowledge, you can manipulate that too.
Hush! Don't forget to save your changes! And you are done! Boom! If you still have any issues, just drop a comment below!
Posts before October 2021 have been marked as "Old Posts". Less likely, but they might have out dated or incorrect information, ugly looking bits of code, no labels, etc. Don't get me wrong, many of these posts are top-notch and interesting too.
I thought it would be better not to delete or revamp these posts, even if they suck. The bitter truth is that old works always suck, but I take that as a positive tool to convey that I am growing. Besides there's no better way to showcase my journey without these old, messy, poorly written posts!
I thought it would be better not to delete or revamp these posts, even if they suck. The bitter truth is that old works always suck, but I take that as a positive tool to convey that I am growing. Besides there's no better way to showcase my journey without these old, messy, poorly written posts!
Old Post
This is really helpful!
ReplyDelete