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. 

Posted by at
Labels: , , , , , , , , , ,

42 comments:

  1. UnknownJanuary 22, 2014 at 1:23 AM

    Thanks Bro it helped me :)

    ReplyDelete
  2. Vinit ConradoApril 9, 2014 at 7:25 AM

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

    ReplyDelete
  3. UnknownJuly 13, 2014 at 1:31 AM

    thank you very much!
    been looking for this for a while

    ReplyDelete
  4. AdeHazeSeptember 14, 2014 at 8:54 AM

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

    ReplyDelete
  5. UziDecember 14, 2014 at 1:37 PM

    God bless you good man!!

    ReplyDelete
  6. SatbirAugust 16, 2015 at 4:51 AM

    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
  7. MughiMarch 3, 2016 at 1:45 AM

    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
  8. UnknownSeptember 10, 2016 at 9:36 AM

    but this simplest blog does not show comments

    ReplyDelete
  9. DevkumarFebruary 20, 2018 at 9:34 PM

    Thanks very much bro......

    ReplyDelete
  10. ramzanApril 8, 2018 at 10:01 PM

    thanks

    ReplyDelete
  11. UnknownMay 6, 2018 at 9:36 PM

    thanks

    ReplyDelete
  12. Edward foxSeptember 17, 2018 at 3:48 AM

    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
  13. NicheExpertSeptember 19, 2018 at 2:06 PM

    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
  14. UnknownNovember 27, 2018 at 12:10 AM

    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
  15. Test-LabDecember 7, 2018 at 10:07 AM

    This comment has been removed by the author.

    ReplyDelete
  16. UnknownDecember 7, 2018 at 9:40 PM

    Nice idea,keep sharing your ideas with us.i hope this information's will be helpful for the new learners.
    german language learning courses in bangalore

    german language training centers in bangalore
    German Training in Anna Nagar
    German Training in T nagar

    ReplyDelete
  17. UnknownDecember 14, 2018 at 1:10 AM

    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
  18. madinDecember 14, 2018 at 11:09 PM

    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
  19. hania khanJune 13, 2019 at 3:46 AM

    Whatever logo plan you speak to your business, make sure that it talks about your organization's objective and mission. logo design service

    ReplyDelete
  20. Arya SteveOctober 11, 2019 at 1:47 AM

    This is a nice and informative, containing all information and also has a great impact on the new technology. Thanks for sharing it
    template design

    ReplyDelete
  21. Billy LoweNovember 14, 2019 at 4:39 PM

    So why is there so much "no no" about deleting blogger code and making it your own? I'm always afraid to delete anything. And I just don't understand the b if and b includable language. HELP

    ReplyDelete
  22. AnonymousSeptember 3, 2020 at 11:11 PM

    My friend mentioned to me your blog, so I thought I’d read it for myself. Very interesting insights, will be back for more!
    Tropic Diva

    ReplyDelete
  23. AnonymousSeptember 3, 2020 at 11:11 PM

    I was very pleased to find this site.I wanted to thank you for this great read!! I definitely enjoying every little bit of it and I have you bookmarked to check out new stuff you post.
    Tropic Diva

    ReplyDelete
  24. jackiedavisSeptember 8, 2020 at 6:16 AM

    Hey, great blog, but I don’t understand how to add your site in my reader. Can you Help me please?
    bandar slot terpercaya

    ReplyDelete
  25. Edward fox_DesingerSeptember 16, 2020 at 11:15 PM

    If you are searching "sports" in the market, I bet you will find plenty of android apps that especially designed for sports. So this article aims to give you some help before you choose one among so many apps. Generally speaking, first I will try some free apps as it won't cost me a fortune if I don't like it after the usage. check my blog

    ReplyDelete
  26. FoxyNovember 22, 2020 at 3:28 AM

    Technology-enabled solutions are intangible sales. People don't buy the machine; they buy what it enables. Average sales people tend to perceive technology as a tangible, so they focus on the functionality. Exceptional sales people understand that customers only care about the results the technology enables, which is intangible. This difference in perception about the nature of technology is the fundamental factor in determining a sales person's success. mobile tracker

    ReplyDelete
  27. FoxyDecember 15, 2020 at 9:47 PM

    Technology-enabled solutions are intangible sales. People don't buy the machine; they buy what it enables. Average sales people tend to perceive technology as a tangible, so they focus on the functionality. Exceptional sales people understand that customers only care about the results the technology enables, which is intangible. This difference in perception about the nature of technology is the fundamental factor in determining a sales person's success. camera spy

    ReplyDelete
  28. Mr PerfectJanuary 4, 2021 at 5:51 AM

    Some genuinely interesting information, well written and generally user genial . 토토사이트

    ReplyDelete
  29. bunnyNovember 3, 2021 at 4:57 AM

    The mobile content market covers many forms of media such as music, text, pictures, videos, etc. These media forms can be accessed using a mobile device which can be a smartphone or tablet handheld device. Devices such as iPhone, iPad, and Android devices have transformed the way consumer access content. singapore top mobile app developer

    ReplyDelete
  30. abdullahApril 15, 2022 at 4:34 PM

    I needed to thank you for this incredible read!! I unquestionably adored each and every piece of it. I have you bookmarked your site to look at the new stuff you post.
    sbobet mobile

    ReplyDelete
  31. Jerry BerryAugust 25, 2022 at 4:00 AM

    wingsbet88 Walaupun banyak yang telah mengenali kalau metode judi slot gacor. Akan namun, tentu sedang terdapat banyak yang belum paham serta mengerti gimana triknya. Oke, biar seluruhnya dapat menikmati main judi

    ReplyDelete
  32. Jerry BerryAugust 25, 2022 at 4:07 AM

    slot online terpercaya wingsbet88 Walaupun banyak yang telah mengenali kalau metode judi slot gacor. Akan namun, tentu sedang terdapat banyak yang belum paham serta mengerti gimana triknya. Oke, biar seluruhnya dapat menikmati main judi

    ReplyDelete
  33. Jerry BerryAugust 26, 2022 at 12:05 AM

    togel online terpercaya Selamat datang di situs judi slot online Fufu4d, Situs judi online Indonesia, Terbaik dan terpercaya di Indonesia. Situs judi pulsa terbaik

    ReplyDelete
  34. Jerry BerryAugust 26, 2022 at 12:12 AM

    situs togel online Selamat datang di situs judi slot online Fufu4d, Situs judi online Indonesia, Terbaik dan terpercaya di Indonesia. Situs judi pulsa terbaik

    ReplyDelete
  35. Jerry BerryAugust 28, 2022 at 9:13 AM

    judi online JuaraMpo Judi Online Terbaik Dan Terpercaya, dengan ini kami sangat membanggakan situs juarampo untuk membantu para bettor Indonesia dalam melakukan perjudian. Situs judi online juarampo sudah diakui dan memiliki lisensi terbaik dan bergengsi dalam gambling online, karena kami telah berhasil mendapatkan lisensi dari Pagcor sebagai agen situs judi Terpercaya.

    ReplyDelete
  36. Jerry BerryAugust 28, 2022 at 9:20 PM

    judi slot mudah menang Dollar4D adalah situs slot online terpercaya yang menyediakan fitur slot deposit pulsa tanpa potongan untuk provider Telkomsel dan XL. Kami juga dikenal sebagai salah satu agen slot online terbaik dan dipercayai oleh ribuan member setiap harinya.

    ReplyDelete
  37. Jerry BerryAugust 28, 2022 at 9:39 PM

    slot gacor mudah menang Dollar4D adalah situs slot online terpercaya yang menyediakan fitur slot deposit pulsa tanpa potongan untuk provider Telkomsel dan XL. Kami juga dikenal sebagai salah satu agen slot online terbaik dan dipercayai oleh ribuan member setiap harinya.

    ReplyDelete
  38. Jerry BerryAugust 30, 2022 at 4:47 AM

    https://letterboxd.com/datukgaming/ Selamat datang di situs DATUKGAMING yang merupakan situs game terbaik masa kini. DATUKGAMING menyediakan banyak macam game judi terpopuler yang dapat dimainkan dengan uang asli. DATUKGAMING juga merupakan situs judi yang terpercaya yang telah digunakan lebih dari 100,000 pemain setiap harinya.

    ReplyDelete
  39. Jerry BerryAugust 30, 2022 at 11:12 AM

    slot online Situs Slot Online TOP508 Adalah Situs Judi Slot Online Terpercaya di Indonesia yang Menyediakan Berbagai permainan Slot Online dan Bola Online serta Live Casino Online yang terbukti mudah menang.

    ReplyDelete
  40. Jerry BerryAugust 30, 2022 at 11:20 AM

    situs judi slot online Situs Slot Online TOP508 Adalah Situs Judi Slot Online Terpercaya di Indonesia yang Menyediakan Berbagai permainan Slot Online dan Bola Online serta Live Casino Online yang terbukti mudah menang.

    ReplyDelete
  41. Jerry BerryAugust 31, 2022 at 2:16 AM

    game slot Galanslot adalah situs slot online yang hadir untuk kamu pencinta game slot online dengan menyediakan permainan slot terbaru gacor dan terbaik yang memberikan rtp slot tertinggi untuk mendapatkan cuan disini. Jadi daftar segera dan dapatkan id slot gacor

    ReplyDelete
  42. Jerry BerryAugust 31, 2022 at 2:25 AM

    https://galanslot.com Galanslot adalah situs slot online yang hadir untuk kamu pencinta game slot online dengan menyediakan permainan slot terbaru gacor dan terbaik yang memberikan rtp slot tertinggi untuk mendapatkan cuan disini. Jadi daftar segera dan dapatkan id slot gacor

    ReplyDelete

Subscribe to: Post Comments (Atom)