 |
| How to Create a Blank Blogger Template and Widget Codes |
How to Create a Blank Blogger Template and Widget Codes
In this article, we will discuss how to create a blank blogger template without much effort. Blank templates are useful for those who want to learn blogging template design.
It is also used to clean all unwanted UI elements in your themes, note that changing themes will not remove all UI elements. My personal way to clean up all the junk is to use a blank blogger template.
Anyway, let's start with the basics or outlines of a blogger template, if you know a little about HTML, you know that the home page consists of <html> and </html> and all the other elements within that tag. Requires.
How to Create a Blank Blogger Template
We will Discuss the latest updated theme structure which is widget version 3 and layout version 2
Basic Code Structure
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true' 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'><head>
<meta content='width=device-width, initial-scale=1' name='viewport'/>
<title><data:view.title.escaped/></title>
<b:include data='blog' name='all-head-content'/>
<meta content='width=device-width, initial-scale=1' name='viewport' />
<b:skin version='1.3.0'>
<![CDATA[
]]>
</b:skin>
<b:template-skin>
<![CDATA[
]]>
</b:template-skin>
</head>
<body>
<div id="blog-wrapper">
<header>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='' type='Header'></b:widget>
</b:section>
</header>
<div id="content-wrapper">
<div class="content-table">
<div class="content-row">
<b:section class='main column' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts Section' type='Blog' />
</b:section>
<aside class="column">
<b:section class='sidebar' id='sidebar' maxwidgets='' showaddelement='yes'>
</b:section>
</aside>
</div>
</div>
</div>
<footer>
<div>
Copyright © 2020 <strong><data:blog.title/></strong>
</div>
</footer>
</div>
</body>
</html>
<b:skin version='1.3.0'> holds the CSS required for the entire theme and <b:template-skin> should contain the view of your layout version in the dashboard.
A valid minimal form requires at least one partition and one widget. In the latest update of the layout version and widget version, you also have to add some additional icons to the old or previous version of the themes.
When you save the code after pasting the code above, you can see the additional code generated inside the theme. It is automatically entered by Blogger, so we only need to learn the syntax, and Blogger will do the rest.
Add the below code between </b:template-skin> and </head> and save the theme.
<b:defaultmarkups>
<b:defaultmarkup type='Common'>
<b:includable id='widgetNotAvailableInPreview'>
<b:if cond='data:widget.type == "AdSense"'>
<div class='vertical-ad-placeholder'>
<span><b:message name='messages.adsGoHere'/></span>
</div>
<b:else/>
<b:include name='super.widgetNotAvailableInPreview'/>
</b:if>
</b:includable>
</b:defaultmarkup>
<b:defaultmarkup type='AdSense,Blog'>
<b:includable id='defaultAdUnit'>
<b:comment>Clear out style (needs to be a non-empty string)</b:comment>
<b:with value='"/* Done in css. */"' var='style'>
<b:include name='super.defaultAdUnit'/>
</b:with>
</b:includable>
</b:defaultmarkup>
<b:defaultmarkup type='Blog,FeaturedPost'>
<b:includable id='headerByline'>
<b:include cond='data:view.isMultipleItems or data:widgets.Blog.first.headerByline.items.share' data='{ shareButtonClass: "post-share-buttons-top", overridden: true }' name='maybeAddShareButtons'/>
<b:include name='super.headerByline'/>
</b:includable>
</b:defaultmarkup>
<b:defaultmarkup type='Blog,FeaturedPost,PopularPosts'>
<b:includable id='commentsLink'>
<a class='comment-link' expr:href='data:post.commentsUrl' expr:onclick='data:post.commentsUrlOnclick'>
<b:include data='{ iconClass: "touch-icon" }' name='commentIcon'/>
<span class='num_comments'>
<b:if cond='data:post.numberOfComments > 0'>
<b:message name='messages.numberOfComments'>
<b:param expr:value='data:post.numberOfComments' name='numComments'/>
</b:message>
<b:else/>
<data:messages.postAComment/>
</b:if>
</span>
</a>
</b:includable>
<b:includable id='snippetedPostByline'>
<b:include name='headerByline'/>
</b:includable>
<b:includable id='postLabels'>
<b:comment>We don't display labels on the home page.</b:comment>
<b:if cond='data:view.isSingleItem and data:widget.type == "Blog"'>
<b:include name='super.postLabels'/>
</b:if>
</b:includable>
<b:includable id='postShareButtons' var='post'>
<b:comment>We call super.postShareButtons from the migrated positions.</b:comment>
</b:includable>
<b:includable id='postJumpLink'>
<b:comment>Overridden, and migrated to postFooter. Called as postFooterJumpLink.</b:comment>
</b:includable>
<b:includable id='postFooterJumpLink'>
<b:comment>Ripple, and show 'keep reading' as the default.</b:comment>
<div class='jump-link flat-button ripple'>
<a expr:href='data:post.hasJumpLink ? data:post.url fragment "more" : data:post.url' expr:title='data:post.title'>
<data:blog.jumpLinkMessage/>
</a>
</div>
</b:includable>
<b:includable id='postFooter' var='post'>
<div class='post-bottom'>
<div class='post-footer float-container'>
<b:include name='footerBylines'/>
<b:include cond='data:widget.type == "Blog"' data='post' name='postFooterAuthorProfile'/>
</div>
<b:if cond='data:view.isSingleItem'>
<b:include data='{ shareButtonClass: "post-share-buttons-bottom invisible", overridden: true }' name='maybeAddShareButtons'/>
<b:else/>
<b:include data='post' name='postFooterJumpLink'/>
</b:if>
</div>
</b:includable>
</b:defaultmarkup>
<b:defaultmarkup type='Blog'>
<b:includable id='main'>
<b:include name='noContentPlaceholder'/>
<b:comment>Cap the total number of ads (widgets and inline ads).</b:comment>
<b:with value='3' var='maxNumAds'>
<b:with value='data:widgets.AdSense.size' var='numDesktopAds'>
<b:with value='data:widgets.AdSense count (w => w.sectionId != "ads")' var='numMobileAds'>
<b:comment>Filter out the featured post, but only on the homepage.</b:comment>
<b:with value='data:widgets.FeaturedPost filter (w => w.sectionId == "page_body") map (w => w.postId)' var='featuredPostIds'>
<b:with value='data:view.isHomepage ? data:posts filter (post => post.id not in data:featuredPostIds) : data:posts' var='posts'>
<b:include name='super.main'/>
</b:with>
</b:with>
</b:with>
</b:with>
</b:with>
</b:includable>
<b:includable id='feedLinks'>
<b:comment>Don't show feed links.</b:comment>
</b:includable>
<b:includable id='postBodySnippet' var='post'>
<div class='container post-body entry-content' expr:id='"post-snippet-" + data:post.id'>
<b:if cond='data:post.featuredImage'>
<div class='snippet-thumbnail'>
<b:include data='{ image: data:post.featuredImage, imageSizes: [32, 64, 128, 256], imageRatio: "1:1", sourceSizes: "(max-width: 800px) 20vw, 128px" }' name='responsiveImage'/>
</div>
</b:if>
<b:include cond='data:post' data='post' name='postSnippet'/>
</div>
</b:includable>
<b:includable id='previousPageLink'><b:comment>Don't show</b:comment></b:includable>
<b:includable id='homePageLink'><b:comment>Don't show</b:comment></b:includable>
<b:includable id='nextPageLink'>
<a class='blog-pager-older-link flat-button ripple' expr:href='data:olderPageUrl' expr:title='data:messages.morePosts'>
<data:messages.morePosts/>
</a>
</b:includable>
<b:includable id='inlineAd' var='post'>
<div>
<b:class cond='data:post.adNumber + data:numDesktopAds lt data:maxNumAds' name='desktop-ad'/>
<b:class cond='data:post.adNumber + data:numMobileAds lt data:maxNumAds' name='mobile-ad'/>
<b:include data='post' name='super.inlineAd'/>
</div>
</b:includable>
</b:defaultmarkup>
<b:defaultmarkup type='BlogArchive'>
<b:includable id='main' var='this'>
<details class='collapsible extendable'>
<b:attr cond='data:view.isArchive' name='open' value='open'/>
<b:with value='true' var='renderAsDetails'>
<b:with value='data:messages.archive' var='defaultTitle'>
<b:include name='super.main'/>
</b:with>
</b:with>
</details>
</b:includable>
<b:includable id='flat'>
<b:include data='{ buttonClass: "pill-button", items: data:this.data, itemSet: "data", itemsMarkup: "super.flat" }' name='extendableItems'/>
</b:includable>
<b:includable id='hierarchy'>
<b:include data='{ buttonClass: "pill-button", limit: 1, items: data:this.data, itemSet: "data", itemsMarkup: "super.hierarchy" }' name='extendableItems'/>
</b:includable>
</b:defaultmarkup>
<b:defaultmarkup type='BlogSearch'>
<b:includable id='searchSubmit'>
<input class='search-action flat-button' expr:value='data:messages.search.escaped' type='submit'/>
</b:includable>
</b:defaultmarkup>
<b:defaultmarkup type='Label'>
<b:includable id='main' var='this'>
<details class='collapsible extendable'>
<b:attr cond='data:view.isLabelSearch' name='open' value='open'/>
<b:with value='true' var='renderAsDetails'>
<b:with value='data:messages.labels' var='defaultTitle'>
<b:include name='super.main'/>
</b:with>
</b:with>
</details>
</b:includable>
<b:includable id='list'>
<b:include data='{ buttonClass: "pill-button", items: data:this.labels, itemSet: "labels", itemsMarkup: "super.list" }' name='extendableItems'/>
</b:includable>
<b:includable id='cloud'>
<b:include data='{ buttonClass: "pill-button", items: data:this.labels, itemSet: "labels", itemsMarkup: "super.cloud" }' name='extendableItems'/>
</b:includable>
</b:defaultmarkup>
<b:defaultmarkup type='FeaturedPost'>
<b:includable id='snippetedPostContent'>
<b:comment>Re-order the thumbnail before the snippet, add 'Keep reading' link.</b:comment>
<b:include cond='data:this.postDisplay.showTitle' name='snippetedPostTitle'/>
<b:include name='headerByline'/>
<b:include cond='data:this.postDisplay.showFeaturedImage and data:post.featuredImage' data='post' name='snippetedPostThumbnail'/>
<b:include cond='data:this.postDisplay.showSnippet' data='post' name='postSnippet'/>
<b:include data='post' name='postFooter'/>
</b:includable>
<b:includable id='snippetedPostThumbnail'>
<div class='snippet-thumbnail'>
<b:with value='data:post.featuredImage.isYoutube ? resizeImage(data:post.featuredImage.youtubeMaxResDefaultUrl, 945, "945:600") : ""' var='highRes'>
<b:include data='{ image: data:post.featuredImage, imageSizes: [256, 512, 945, 1684], imageRatio: "945:600", sourceSizes: "(min-width: 954px) 842px, (min-width: 801px) calc(100vw - 112px), calc(100vw - 64px)", enhancedSourceset: data:highRes }' name='responsiveImage'/>
</b:with>
</div>
</b:includable>
</b:defaultmarkup>
<b:defaultmarkup type='Header'>
<b:includable id='image'>
<b:include name='super.image'/>
<b:comment>If we are replacing the title, force it to render anyway, and it'll be hidden in CSS.</b:comment>
<b:include cond='data:this.imagePlacement == "REPLACE"' name='title'/>
</b:includable>
<b:includable id='title'>
<div>
<b:class cond='data:this.imagePlacement == "REPLACE"' name='replaced'/>
<b:include name='super.title'/>
</div>
</b:includable>
</b:defaultmarkup>
<b:defaultmarkup type='PopularPosts'>
<b:includable id='main' var='this'>
<b:comment>Default the title to 'Popular posts from this blog'.</b:comment>
<b:with value='data:messages.popularPostsFromThisBlog' var='defaultTitle'>
<b:include name='super.main'/>
</b:with>
</b:includable>
<b:includable id='snippetedPostContent'>
<b:comment>Add a 'keep reading' link to the item-content.</b:comment>
<b:include name='snippetedPostTitle'/>
<b:include name='snippetedPostByline'/>
<div class='item-content float-container'>
<b:include cond='data:this.postDisplay.showFeaturedImage and data:post.featuredImage' name='snippetedPostThumbnail'/>
<b:if cond='data:this.postDisplay.showSnippet'>
<b:with value='"popular-posts"' var='snippetPrefix'>
<b:include cond='data:post' data='post' name='postSnippet'/>
</b:with>
</b:if>
<b:include data='post' name='postFooterJumpLink'/>
</div>
</b:includable>
</b:defaultmarkup>
<b:defaultmarkup type='PageList'>
<b:includable id='content'>
<div class='widget-content'>
<b:include cond='data:widget.sectionId == "page_list_top"' name='overflowablePageList'/>
<b:include cond='data:widget.sectionId != "page_list_top"' name='pageList'/>
</div>
</b:includable>
<b:includable id='overflowButton'>
<a><data:messages.moreEllipsis/></a>
</b:includable>
</b:defaultmarkup>
<b:defaultmarkup type='Profile'>
<b:includable id='main' var='this'>
<div class='wrapper'>
<b:class cond='!data:this.team' name='solo'/>
<b:comment>No title for single profiles. Default to 'Blog authors' for team.</b:comment>
<b:with value='data:messages.blogAuthors' var='defaultTitle'>
<b:include cond='data:this.team' name='widget-title'/>
</b:with>
<b:include name='content'/>
</div>
</b:includable>
<b:includable id='defaultProfileImage'>
<div class='default-avatar-wrapper'>
<b:include data='{ iconClass: "avatar-icon" }' name='defaultAvatarIcon'/>
</div>
</b:includable>
<b:includable id='userProfileText'>
<dd class='profile-textblock profile-snippet snippet-container r-snippet-container'>
<div class='snippet-item r-snippetized'>
<data:aboutme/>
</div>
<div class='snippet-fade r-snippet-fade hidden'/>
</dd>
</b:includable>
<b:includable id='viewProfileLink'>
<b:comment>Change link to 'visit profile'</b:comment>
<a class='profile-link visit-profile pill-button' expr:href='data:userUrl' rel='author'>
<data:messages.visitProfile/>
</a>
</b:includable>
</b:defaultmarkup>
</b:defaultmarkups>
Blogger Widget HTML Code
Now we can see some basic syntax for different widgets like search box, nav bar, header etc.
Search Widget
<b:widget id='BlogSearch1' locked='true' title='Search This Blog' type='BlogSearch' visible='true'>
</b:widget>
Header
<b:widget id='Header1' locked='true' title='CSS Minify (Header)' type='Header' visible='true'>
</b:widget>
Follow by Mail
<b:widget id='FollowByEmail1' locked='true' title='Newsletter' type='FollowByEmail' visible='true'>
</b:widget>
Blog Posts
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog' visible='true'>
</b:widget>
Conclusion
I hope this article about empty Blank Blogger template & widget icons helped you. If you think our article is missing something, please let us know.
You can freely comment on your doubts and questions below in comments. If you like this article, please share it with your friends. You can also find us on Twitter, Facebook, YouTube.
Thanks for reading: How to Create a Blank Blogger Template and Widget Codes, Sorry, my English is bad:)
