-blogger -blogspot -boilerplate -google -theme -web design art

A free Blogspot boilerplate template for theme designers

I designed free Google Blogger Blogspot template named "Boilerplate". It has minimal code, and is practically bare bones. Blogspot theme designers can use it to build their own theme from. The biggest thing about this template is that the comments inherit the blog post/page styling, which is something that current designers have struggled with doing. It also features body class names for the different areas of the website. It is free to use, commercially or privately, and royalty free. All I ask in return is a link back to this post. Sharing is caring...

Note: I will not be offering support for this template, and is only recommended for designers. Be sure to replace "TEMPLATE NAME", "TEMPLATE AUTHOR", and "AUTHOR URL" with your own.

<?xml version="1.0" encoding="UTF-8" ?>
<!-- ADD DOCTYPE -->
<!DOCTYPE html>
<!-- ADD HTML -->
<!-- NOTE: THE HTML TAG MUST INCLUDE THE PARAMETER "b:templateUrl='vegeclub.xml'", ALTHOUGH NOT ACCURATE, BUT BORROWED; TO APPLY SKIN VARIABLES TO THE COMMENT FORM -->
<html b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true' b:templateUrl='vegeclub.xml' b:templateVersion='1.3.0' expr:dir='data:blog.languageDirection' 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'>
  <!-- ADD DOCUMENT HEAD -->
  <head>
    <!-- ADD DEVICE WIDTH DETECTION -->
    <meta content='width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0' name='viewport'/>
    <!-- ADD TITLE TO ALL POSTS & PAGES -->
    <title>
      <b:if cond='data:view.isHomepage'>
        <data:blog.pageTitle/>
      <b:else/>
        <b:if cond='data:view.isError'>
          <data:blog.title/> | 404 Page Not Found
        <b:else/>
          <data:blog.title/> | <data:blog.pageName/>
        </b:if>
      </b:if>
    </title>
    <!-- ADD DEFAULT BLOGGER HEAD CONTENT -->
    <b:include data='blog' name='all-head-content'/>
    <!-- ADD THEME STYLES -->
    <b:skin version='1.3.0'>
      <![CDATA[
      /**********************************************/
      /**********************************************/
      /***   BLOGGER TEMPLATE STYLE               ***/
      /**********************************************/
      /***   NAME:     TEMPLATE NAME              ***/
      /***   DESIGNER: TEMPLATE AUTHOR            ***/
      /***   URL:      AUTHOR ADDRESS             ***/
      /**********************************************/
      /**********************************************/
      /***   BASED ON TEMPLATE                    ***/
      /**********************************************/
      /***   NAME:     Boilerplate                ***/
      /***   DESIGNER: Xarcell                    ***/
      /***   URL:      https://xarcell.studio     ***/
      /**********************************************/
      /**********************************************/
      /***   REQUIRED VARIABLES                   ***/
      /**********************************************/
      /* NOTE: These variables are required by name for the comment form to inherit the styles */
        <Variable name="posts.background.color" description="Post Background Color" type="color" default="#ffffff" value="#ffffff" />
        <Variable name="posts.title.color" description="Post Title Color" type="color" default="#000000" value="#000000" />
        <Variable name="posts.text.font" description="Post Text Font" type="font" default="serif" value="serif" />
        <Variable name="posts.text.color" description="Post Text Color" type="color" default="#444444" value="#444444" />
        <Variable name="posts.link.color" description="Post Link Color" type="color" default="#ff0000" value="#ff0000" />
        <Variable name="body.background.color" description="Site Background Color" type="color" default="#ffffff" value="#ffffff"/>
        <Variable name="body.background" description="Site Background Image" type="background" color="$(body.background.color)" default="$(color) url() repeat fixed center center /cover" value="$(color) url() repeat fixed center center /cover" />
        <Variable name="body.text.font" description="Font" type="font" default="sans-serif" value="sans-serif"/>
        <Variable name="body.text.color" description="Color" type="color" default="#444444" value="#444444"/>
        <Variable name="body.link.color" description="Link color" type="color" default="#777777" value="#777777"/>
      ]]>
    </b:skin>
    <!-- ADD ASENSE SCRIPTS -->
    <b:if cond='data:blog.adsenseClientId and !data:widgets.AdSense.empty'>
      <script async='async' src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'/>
    </b:if>
    <!-- ADD GOOGLE ANALYTICS SCRIPTS -->
    <b:include data='blog' name='google-analytics'/>
  </head>
  <!-- ADD DOCUMENT BODY -->
  <body>
    <!-- ADD HOME CLASS TO BODY ON INDEX -->
    <b:class cond='data:view.isHomepage' name='home'/>
    <!-- ADD PREVIEW CLASS TO BODY ON PREVIEW -->
    <b:class cond='data:view.isPreview' name='preview'/>
    <!-- ADD BLOGROLL CLASS TO BODY ON BLOGROLL -->
    <b:class cond='data:view.isMultipleItems' name='blogroll'/>
    <!-- ADD ITEM CLASS TO BODY ON POSTS -->
    <b:class cond='data:view.isSingleItem and !data:view.isPage' name='post'/>
    <!-- ADD PAGE CLASS TO BODY ON PAGES -->
    <b:class cond='data:view.isPage' name='page'/>
    <!-- ADD ARCHIVE CLASS TO BODY ON ARCHIVE -->
    <b:class cond='data:view.isArchive' name='archive'/>
    <!-- ADD LABEL CLASS TO BODY ON LABEL SEARCH -->
    <b:class cond='data:view.isLabelSearch' name='label'/>
    <!-- ADD SEARCH CLASS TO BODY ON SEARCH -->
    <b:class cond='data:view.isSearch and !data:view.isLabelSearch' name='search'/>
    <!-- ADD ERROR CLASS TO BODY ON ERROR -->
    <b:class cond='data:view.isError' name='error'/>
    <!-- ADD ADSENSE CLASS TO BODY IF BLOG HAS ADSENSE ACTIVATED -->
    <b:class cond='data:blog.adsenseClientId and !data:widgets.AdSense.empty' name='adsense'/>
    <!-- ADD MAIN HEADER -->
    <header class='main-header' id='main-header' role='banner'>
      <!-- ADD MAIN HEADER GADGET SECTION -->
      <b:section id='main-header-gadget-section' name='Main Header Gadget Section'/>
    </header>
    <!-- ADD MAIN CONTENT -->
    <main class='main-content' id='main-content' role='main'>
      <!-- ADD MAIN CONTENT GADGET SECTION -->
      <b:section class='main-content-gadget-section' id='main-content-gadget-section' name='Main Content Gadget Section'>
        <!-- ADD BLOG/ARTICLE GADGET -->
        <b:widget id='Blog1' locked='true' title='Main Content Gadget' type='Blog' visible='true'/>
      </b:section>
    </main>
    <!-- ADD MAIN FOOTER -->
    <footer class='main-footer' id='main-footer' role='contentinfo'>
      <!-- ADD MAIN FOOTER GADGET SECTION -->
      <b:section class='main-footer-gadget-section' id='main-footer-gadget-section' name='Main Footer Gadget Section'/>
    </footer>
  </body>
</html>
Enjoy!

Comments