Friday, August 24, 2012

How To: Create the Most Basic Blogger Template Possible

Maybe you want to make a blog template from scratch, maybe you just need a blank template. You COULD try striping all the stuff out of an existing one. I did. It was a major pain in the butt. SO! Instead, let's start from scratch and just used the Most Basic Blogger Template Possible.
(Continued after the cut.)

Well, here you go, the most basic template possible to not throw a bX-error:
<html>
<head>
         <b:include data='blog' name='all-head-content'/>
<title>
          <b:if cond='data:blog.pageType == &quot;item&quot;'>
                <data:blog.pageName/> : <data:blog.title/>
        <b:else/>
                <data:blog.pageTitle/>
        </b:if>
        <b:if cond='data:blog.url == data:blog.homepageUrl'></b:if>
</title>
        <meta content='' name='description'/>
        <meta content='' name='keywords'/>
        <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'/>

<b:skin><![CDATA[
]]></b:skin>

</head>
<body>

<div id='wrapper'>
<b:section id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>
</b:section>
</div>

</body>
</html>
If you copy-paste this code into blogger's template editor (Template > HTML), and save, you shouldn't get any errors, and will end up with a page that looks like this:



Blogger will also automatically expand the code so that everything works properly, and you can proceed from there. 



Adding CSS

Lucky us, someone's already gone ahead and made a list of CSS classes used by blogger, paste this between <b:skin><![CDATA[ and ]]></b:skin> in the head of your xml document:
/* css classes created by Blogger */
body{}

div.section{}

/* Blogger navbar */
div.navbar{}
div.Navbar{}

/* Header */
div.header{}
div.Header{}
div#header-inner{}
div.titlewrapper{}
h1.title{}
div.descriptionwrapper{}
p.description{}

/* Sidebar */
div.sidebar{}

/* Main Section */
div.main{}
div.Blog{}
div.blog-posts{}

/* Post Date */
div.date-outer{}
h2.date-header{}

/* Posts */
div.date-posts{}
div.post-outer{}
div.post{}
h3.post-title{}
div.post-header{}
div.post-header-line-1{}
div.post-body{}

/* Post Footer */
div.post-footer{}
span.post-author{
span.post-timestamp{}
span.post-comment-link{}
span.post-share-buttons{}
span.post-labels{}
span.post-location{}
.post-feeds{}

/* Post Comments */
div.comments{}
div.comments h4{}
div#Blog1_comments-block-wrapper{}
div#comments-block{}
dt.comment-author{}
dt.comment-author a{}
dt.comment-author avatar-image-container{}
dd.comment-body{}
dd.comment-footer{}
span.comment-timestamp{}
p.comment-footer{}
div.comment-form{}
h4.comment-post-message{}
div.comment-form p{}
iframe.blogger-comment-from-post{}

/* Backlinks */
div#backlinks-container{}

/* Blog Pager */
div.blog-pager{}
div.blog-pager a.blog-pager-newer-link{}
div.blog-pager a.home-link{}

/* Post Feeds */
div.post-feeds{}

/ *Footer */
div.footer{}

/* ----- Widgets -------*/
div.widget{}
div.widget>h2{}
div.widget-content{}

/* Blog Archive Widget */
div.BlogArchive{}
div.BlogArchive>h2{}
div#ArchiveList ul.hierarchy{}
div#ArchiveList ul.hierarchy li{}
div#ArchiveList ul.hierarchy li a.toggle{}
div#ArchiveList ul.hierarchy li a.post-count-link{}
div#ArchiveList ul.hierarchy li span.post-count{}
div#ArchiveList ul.hierarchy ul.posts{}
div#ArchiveList ul.hierarchy ul.posts li{}

/* Attributiion Widget */
div.Attribution{}
div.Attribution a{}
Again, when you paste this into the very basic blogger template, and paste THAT into the blogger html editor, it will automatically expand to fill in the things blogger needs to function properly

Once you've got all that, you can do the ol' "Right click -> Inspect element" trick to figure out what the hell you're looking at, and then proceed accordingly. I'm just gonna go ahead and assume you know what you're doing.



Adding a Header 

Start by adding a wrapper to the CSS (div.header-wrapper{}) then add the following to the top of the template, above the posts wrapper and right below <body>:
<!--Header -->
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='5' showaddelement='yes'>
<!-- This holds custom widgets -->
<b:widget id='Header1' locked='true' type='Header'/>
<!-- This is the default header banner -->
</b:section></div>
<!--End of header -->
See that bit that says "maxwidgets='5'"? You can change that to whatever you want. Now, when you go to blogger's "Layout" section now, you should see two new blocks at the top of the page where you can add widgets.

Adding a Footer

As before, add a wrapper to the CSS (div.footer-wrapper{}) then add the following to the bottom of the template, below the end of the posts wrapper and right above </body></html>:
<!--Footer -->
<div id='footer-wrapper'>
<b:section class='footer' id='footer' maxwidgets='5' showaddelement='yes'>
</b:section></div>
<!--End of footer -->
Now when you go to "Layout" you'll have the option of adding gadgets to the footer. The end result of adding both the header and footer sections should look like this:


Adding Sidebars

Adding sidebars is a bit more complicated, as you actually have to style the things. I suggest just sticking them in a wrapper and floating it to one side, or make multiple columns. I don't care. It's your blog. Here's how you do it:
Step 1. Add a wrapper to the CSS sidecar section (div.sidebar-wrapper{})
Step 2. Find a place to put the sidebar in your code. I put it below the posts wrapper and above the footer.
<!--Sidebar -->
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'></b:section>
<b:section class='sidebar' id='sidebar2' preferred='yes'></b:section>
<!--You can keep adding to these, just make sure the id is different for each.-->
</div>
<!--End of sidebar -->
Step 3. Style the posts wrapper and the sidebar wrapper to get the desired result. In the downloadable template, the posts wrapper now looks like this:
#wrapper {
width: 60%;
float: left;
}
While the sidebar-wrapper looks like this:
div.sidebar-wrapper {
width: 15%;
float: right;
}
The end result being you now have two editable sections which will appear as a sidebar in the page. Since I did them as percentages, however, they show up as the first two bars beneath the posts section in the blogger layout editor:

Template

If you would like to download the template, you can do so here. To install it on your blog, go to the blog's "Template" page, click "Backup / Restore" (backup your existing template), then upload the .xml file. 

19 comments:

  1. These kind of post are always inspiring and I prefer to read quality content so I happy to find many good point here in the post, writing is simply great, thank you for the post.
    website design

    ReplyDelete
  2. This is a terrific post and lends exceptional clarity. Thank you so very much.

    ReplyDelete
  3. thank you very much!
    been looking for this for a while

    ReplyDelete
  4. Thanks broo,,,,,,, you helped me so much...

    ReplyDelete
  5. Aha... I was searching for a Basic Template so that I can design my own template for blogger from SCRATCH... You saved me Man.. Thanks a lot!

    ReplyDelete
  6. it will be great if you make this tutorial on video like this: https://www.youtube.com/watch?v=rg-plkkl9hE

    sadly it wrote on Indonesian Language Y_Y
    it will more easy to understand for begginer like me
    regards
    Mugianto

    ReplyDelete
  7. but this simplest blog does not show comments

    ReplyDelete
  8. Did you know that you can actually get your ex to call you back, and it's actually really easy, as long as you know what you are doing? Well I'm sure if you knew these sooner, you'd have gotten your ex back by now, but either way, once you use these tricks, your ex will not be able to resist calling you back! Here are 4 tricks to make your ex return your 800.

    ReplyDelete
  9. With the technology today, it is not surprising that a mysterious person can access your phone number and victimize you with frightening phone calls. While there are others who just do it for fun to annoy other people through free business calls you also need to be alert when calls are already threatening and violating your privacy.

    ReplyDelete
  10. Digital Marketing is something that will suit anyone. Right from graduates, sales/marketing professionals, housewives looking for a work at home option or those freelancing enthusiasts. By the way, nice article. Like the way you organised the content...

    SEO Training In Chennai

    ReplyDelete
  11. Amazing information,thank you for your ideas.after along time i have studied an interesting information's.we need more updates in your blog.
    best vmware training in bangalore
    vmware certification bangalore
    vmware Course in Anna Nagar
    vmware Courses in Tnagar

    ReplyDelete
  12. Replica Audemars Piguet Watches, combining elegant style and cutting-edge technology, a variety of styles of Replica Audemars Piguet royal-oak Watches, the pointer walks between your exclusive taste style.

    ReplyDelete