How To Make Blogger
How to make your own blogger templates! This question was revolving in my mind since last few months. Initially I started my blogging with blogspot and I used to search for new cool templates. No doubt, there are several beautiful and professional blogger templates available today. But a template can never touch your imaginations. Everyone thinks in a different way likewise they also want their template to be different.
Making your own template will provide you a lots of scope and space to act your thoughts. You can choose the width, height, no of columns and a lots of other things. But there are no such tutorials available that can guide us. So, I thought of coming up with a post which will have A to Z of making a blogger template.
Note that we are going to make HTML template. This is not a XML template. XML template is a bit more difficult to make. Well, I will cover that too, but later. For now we will learn the method of making a HTML blogger template. For this, you have to switch on to classic template and then add the code. There will be no widgets, you have to add all codes (adsense/HTML/JavaScript) manually. Still, there are several advantages of CSS templates.
Step 1 : Choose your CSS style :
There are thousands of free CSS templates available on net today. You can search and choose any of them. But just to make your life easier, I am providing few free CSS template sources. Check out them and choose one of your choice.
http://www.oswd.org/designs/browse/http://www.openwebdesign.org/browse.phpStep 2 : Changing the title tags of your template :
After downloading your template, open yourtemplate.htmlwith notepad or any of those html editors. Find <title> and </title>at the top of the template. Now put the below code between <title> and </title>.
<ItemPage><a href=”<$BlogURL$>”></ItemPage>< $BlogTitle$>< ItemPage></a></ItemPage>Now it should look like the below screenshot.
Step 3 : Changing Header Of Template :
Now find <body> tag and below there must be something like <div id=”header”>. Copy the below code and paste it there.
<ItemPage><a href=”<$BlogURL$>”></ItemPage><$BlogTitle$>< ItemPage></a></ItemPage>Look at the screen shot below to get the idea.
Step 4 : Putting Blogger Body Codes To Template :
This is the most important part. Body codes contain important things like blog posts, comments, post titles, post dates etc. <div id>for this section changes from template to template, so you need to get a good html editor like Adobe’s Dream Weaver to do editing. You may find a lots of <div id>codes there. You have to delete them all and then paste the blogger body code there. Get blogger post body codes here.
For an example the below screenshot is having <div id=”main”>. You can have “My Body” or “Contents” etc.
Step 5 : Showing Recent Posts :
Classic templates are not widget ready, I’ve told it before. So, we have to add everything mnually within the template code. Now, the most important thing that all we want is a recent posts tab, showing latest posts on our blog. Let’s add it.
It’s a simple code that you need to add between <ul> and </ul> tags . There should be two or four <ul>tags present in your template. Now you decide the location where you want this recent posts tab to show up. After selecting one location, delete all the <li> codes present between <ul> and </ul> tags. Then paste the below code:
<BloggerPreviousItems><li><a href=”<$BlogItemPermalinkURL$>”><$BlogPreviousItemTitle$></a></li>< /BloggerPreviousItems>Now we added recent posts section to our template.
Step 6 : Showing Archive :
Archieves section is very essential in a template. This works as a sitemap for search engines and hence having this will increase your SEO values. At the mean time it gives your users the freedom to navigate. It’s a must have for all the templates.
Find a tag starts with <ul> and ends with </ul>, delete all the <li> codes present inside it and paste the below code.
<MainOrArchivePage><ul><BloggerArchives><li><a href=”<$BlogArchiveURL$>”><$BlogArchiveName$></a></li></BloggerArchives></ul></MainOrArchivePage>We are almost done now!
Step 7 : Adding Other Things ( Adsense,Stats,Entrecard etc.) :
Repeat the same thing that you were doing for adding recent posts or archieves. Then add your adsense code or HTML code there. Hit save button and publish.
Step 8 : Editing Footer :
Footer tag is always labeled as <div id = footer>. Find this link and add your anchor link text or whatever you want there. And now we are completely done.
Congrats! Now you can make your own blogspot templates easily.
ไม่มีความคิดเห็น:
แสดงความคิดเห็น