Skip to content

Instantly share code, notes, and snippets.

Last active September 4, 2023 03:46
  • Star 13 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?
Tutorial Notes On Building A Blogger Theme
<link type='text/css' rel='stylesheet' href='' />
<style id='page-skin-1' type='text/css'><!--
<div class='no-items section' id='content'></div>
<script type="text/javascript" src=""></script>
<script type='text/javascript'>
window['__wavt'] = 'AOuZoY4qq5SzZFEv92GXY9YXgVuYCGWBSA:1496276877114';_WidgetManager._Init('//\x3d8083988119973250873','//','8083988119973250873');
_WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '8083988119973250873', 'title': 'Vue Theme', 'url': '', 'canonicalUrl': '', 'homepageUrl': '', 'searchUrl': '', 'canonicalHomepageUrl': '', 'blogspotFaviconUrl': '', 'bloggerUrl': '', 'hasCustomDomain': false, 'httpsEnabled': true, 'enabledCommentProfileImages': true, 'gPlusViewType': 'FILTERED_POSTMOD', 'adultContent': false, 'analyticsAccountNumber': '', 'encoding': 'UTF-8', 'locale': 'en', 'localeUnderscoreDelimited': 'en', 'languageDirection': 'ltr', 'isPrivate': true, 'isMobile': false, 'isMobileRequest': false, 'mobileClass': '', 'isPrivateBlog': true, 'feedLinks': '\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Vue Theme - Atom\x22 href\x3d\x22\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22Vue Theme - RSS\x22 href\x3d\x22\x3drss\x22 /\x3e\n\x3clink rel\x3d\\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Vue Theme - Atom\x22 href\x3d\x22\x22 /\x3e\n', 'meTag': '\x3clink rel\x3d\x22me\x22 href\x3d\x22\x22 /\x3e\n', 'openIdOpTag': '\x3clink rel\x3d\x22openid.server\x22 href\x3d\x22\x22 /\x3e\n\x3clink rel\x3d\x22openid.delegate\x22 href\x3d\x22\x22 /\x3e\n', 'mobileHeadScript': '', 'adsenseHostId': 'ca-host-pub-1556223355139109', 'adsenseHasAds': false, 'view': '', 'dynamicViewsCommentsSrc': '//', 'dynamicViewsScriptSrc': '//', 'plusOneApiSrc': '', 'sharing': {'platforms': [{'name': 'Get link', 'key': 'link', 'shareMessage': 'Get link', 'target': ''}, {'name': 'Facebook', 'key': 'facebook', 'shareMessage': 'Share to Facebook', 'target': 'facebook'}, {'name': 'BlogThis!', 'key': 'blogThis', 'shareMessage': 'BlogThis!', 'target': 'blog'}, {'name': 'Twitter', 'key': 'twitter', 'shareMessage': 'Share to Twitter', 'target': 'twitter'}, {'name': 'Pinterest', 'key': 'pinterest', 'shareMessage': 'Share to Pinterest', 'target': 'pinterest'}, {'name': 'Google+', 'key': 'googlePlus', 'shareMessage': 'Share to Google+', 'target': 'googleplus'}, {'name': 'Email', 'key': 'email', 'shareMessage': 'Email', 'target': 'email'}], 'googlePlusShareButtonWidth': 300, 'googlePlusBootstrap': '\x3cscript type\x3d\x22text/javascript\x22\x3ewindow.___gcfg \x3d {\x27lang\x27: \x27en\x27};\x3c/script\x3e'}, 'jumpLinkMessage': 'Read more &#187;', 'pageType': 'index', 'pageName': '', 'pageTitle': 'Vue Theme'}}, {'name': 'features', 'data': {'unsupported_browser_message': 'false', 'lightbox_img_parsing': 'false', 'sharing_get_link_dialog': 'false'}}, {'name': 'messages', 'data': {'edit': 'Edit', 'linkCopiedToClipboard': 'Link copied to clipboard!', 'ok': 'Ok', 'postLink': 'Post Link'}}, {'name': 'template', 'data': {'name': 'custom', 'localizedName': 'Custom', 'isResponsive': false, 'isAlternateRendering': false, 'isCustom': true}}, {'name': 'view', 'data': {'classic': {'name': 'classic', 'url': '?view\x3dclassic'}, 'flipcard': {'name': 'flipcard', 'url': '?view\x3dflipcard'}, 'magazine': {'name': 'magazine', 'url': '?view\x3dmagazine'}, 'mosaic': {'name': 'mosaic', 'url': '?view\x3dmosaic'}, 'sidebar': {'name': 'sidebar', 'url': '?view\x3dsidebar'}, 'snapshot': {'name': 'snapshot', 'url': '?view\x3dsnapshot'}, 'timeslide': {'name': 'timeslide', 'url': '?view\x3dtimeslide'}, 'isMobile': false, 'title': 'Vue Theme', 'description': '', 'url': '', 'type': 'feed', 'isSingleItem': false, 'isMultipleItems': true, 'isError': false, 'isPage': false, 'isPost': false, 'isHomepage': true, 'isArchive': false, 'isLabelSearch': false}}]);
<b:skin />
<b:section id="content" />

Theme Basics

Theme Basics is a series of tutorial notes on building a Blogger theme.

Discover tips and learn how to start building your own Blogger theme:

  • Minimum code requirements.
  • Basic templates.
  • Tags & Data definitions.
  • Resources and examples.

Learn how you can create your own Blogger template.
It is easy - You will enjoy it.

Visit project site for details:

Copy link

nikahmadz commented Jun 14, 2017

Background Photo

<section id="bgPhoto">
	<div class='bg-photo-overlay'></div>
	<div class='bg-photo-container'>
		<div class='bg-photo'></div>

Copy link

Google Gadgets

  • Uses iframe 👎

Copy link

nikahmadz commented Jun 16, 2017

Template Script

<b:template-script async='true' name='indie' version='1.0.0'/>


<script type="text/javascript" src="" async="true"></script>

Copy link

If you want to design your template to handle both single- and multiple-author blogs, you can use the data:team variable to distinguish between the two cases. E.g. <b:if cond='data:team=="true"'> (display multiple authors) </b:if>

Copy link

Private blog

Settings > Basic > Let search engines find your blog? > Yes / No

<b:class cond='data:blog.isPrivate' name='isPrivate'/>
<b:class cond='data:blog.isPrivateBlog' name='isPrivateBlog'/>

Copy link

To do:

super includes

<b:include name='super.headerByline'/>

Copy link

To do:

b:skin creates entries in Theme Designer > Advance CSS

Copy link

nikahmadz commented Jul 8, 2017

Blogger Page Types

There are 8++ types of pages available in Blogger.
Each URL has different object available:

  1. Homepage = isHomepage, feed, index
  2. Search = isSearch, feed, index
  3. Search Query = isSearch, feed, index, searchQuery
  4. Search Label = isSearch, feed, index, searchLabel
  5. Archive = isArchive
1. | <a href='/'>Home</a>
2. | <a href='/search'>Search</a>
2.1 | <a href='/search?q=a'>Search Query</a>
3. | <a href='/search/label/a'>Search Label</a>
4. | <a href='/2017_07_09_archive.html'>Archive</a>
5. | <a href='/2017/07/a.html'>Post</a>
6. | <a href='/p/a.html'>Page</a>
6.1 | <a href='/p/admin.html'>Admin</a>
7. | <a href='/404'>404</a>
		<b:if cond='data:blog.url == data:blog.homepageUrl'> 
			<b:comment><!-- 1. (homepage) only homepage --></b:comment>
		<b:elseif cond='data:blog.pageType == "item"'/>
			<b:comment><!-- 2. (page/post) all item pages --></b:comment>
		<b:elseif cond='data:blog.pageType == "static_page"'/>
			<b:comment><!-- 3. (page) all static pages --></b:comment>
		<b:elseif cond='data:blog.pageType == "archive"'/>
			<b:comment><!-- 4. (archive) all archive pages --></b:comment>
		<b:elseif cond='data:blog.searchQuery'/>
			<b:comment><!-- 5. (search) all search pages --></b:comment>
		<b:elseif cond='data:blog.searchLabel'/>
			<b:comment><!-- 6. (search/label) all label pages --></b:comment>
		<b:elseif cond='data:blog.pageType == "index"'/>
			<b:comment><!-- 7. (homepage/search) all index pages --></b:comment>
		<b:elseif cond='data:blog.pageType == "error_page"'/>
			<b:comment><!-- 8. all error pages --></b:comment>
			<b:comment><!-- unknown pages --></b:comment>

Copy link

nikahmadz commented Jul 25, 2017

<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>

And then save template.

Facebook and other social networks use the OG info to decide what to show from shared items. You need to make sure that the images you are including in your posts are big enough to be picked up but not so big that they eat up all your storage space in Picasaweb. I generally upload images that are under 300KB and they all seem to be picked up okay.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment