Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Tutorial Notes On Building A Blogger Theme
<html>
<head>
<link type='text/css' rel='stylesheet' href='https://www.blogger.com/static/v1/widgets/58827200-widget_css_bundle.css' />
<style id='page-skin-1' type='text/css'><!--
--></style>
</head>
<body>
<div class='no-items section' id='content'></div>
<script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/1030149806-widgets.js"></script>
<script type='text/javascript'>
window['__wavt'] = 'AOuZoY4qq5SzZFEv92GXY9YXgVuYCGWBSA:1496276877114';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d8083988119973250873','//vuetheme.blogspot.my/','8083988119973250873');
_WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '8083988119973250873', 'title': 'Vue Theme', 'url': 'http://vuetheme.blogspot.my/', 'canonicalUrl': 'http://vuetheme.blogspot.com/', 'homepageUrl': 'http://vuetheme.blogspot.my/', 'searchUrl': 'http://vuetheme.blogspot.my/search', 'canonicalHomepageUrl': 'http://vuetheme.blogspot.com/', 'blogspotFaviconUrl': 'http://vuetheme.blogspot.my/favicon.ico', 'bloggerUrl': 'https://www.blogger.com', '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\x22http://vuetheme.blogspot.com/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22Vue Theme - RSS\x22 href\x3d\x22http://vuetheme.blogspot.com/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Vue Theme - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/8083988119973250873/posts/default\x22 /\x3e\n', 'meTag': '\x3clink rel\x3d\x22me\x22 href\x3d\x22https://www.blogger.com/profile/02819052646477348772\x22 /\x3e\n', 'openIdOpTag': '\x3clink rel\x3d\x22openid.server\x22 href\x3d\x22https://www.blogger.com/openid-server.g\x22 /\x3e\n\x3clink rel\x3d\x22openid.delegate\x22 href\x3d\x22http://vuetheme.blogspot.com/\x22 /\x3e\n', 'mobileHeadScript': '', 'adsenseHostId': 'ca-host-pub-1556223355139109', 'adsenseHasAds': false, 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/7233581d12b63a5a', 'plusOneApiSrc': 'https://apis.google.com/js/plusone.js', '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': 'http://vuetheme.blogspot.my/', 'type': 'feed', 'isSingleItem': false, 'isMultipleItems': true, 'isError': false, 'isPage': false, 'isPost': false, 'isHomepage': true, 'isArchive': false, 'isLabelSearch': false}}]);
</script>
</body>
</html>
<html>
<head>
<b:skin />
</head>
<body>
<b:section id="content" />
</body>
</html>

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: https://nikahmadz.github.io/Theme-Basics/

@nikahmadz

This comment has been minimized.

Copy link
Owner Author

@nikahmadz nikahmadz commented Jun 1, 2017

To do:

html:
b:templateUrl='indie.xml' b:templateVersion='1.0.0'

head:
<meta name="author" content="SitePoint">
<link rel="stylesheet" href="css/styles.css?v=1.0">

body:
<b:include name='skipNavigation' />
<a id="main-anchor" name="main"></a>
<b:include name='quickedit'/>

foot:
<script src="js/scripts.js"></script>

@nikahmadz

This comment has been minimized.

Copy link
Owner Author

@nikahmadz nikahmadz commented Jun 4, 2017

Read widget data

Use JSON.stringify( _WidgetManager._GetAllData() ); to view widget data.

@nikahmadz

This comment has been minimized.

Copy link
Owner Author

@nikahmadz nikahmadz commented Jun 4, 2017

Widget default css

b:css='false'
remove the inclusion of
<link type='text/css' rel='stylesheet' href='https://www.blogger.com/static/v1/widgets/58827200-widget_css_bundle.css' />

@nikahmadz

This comment has been minimized.

Copy link
Owner Author

@nikahmadz nikahmadz commented Jun 4, 2017

Widget Version

b:defaultwidgetversion='2'

  • Enable the use of selected widget version
  • Set default widget version
@nikahmadz

This comment has been minimized.

Copy link
Owner Author

@nikahmadz nikahmadz commented Jun 4, 2017

HTML5

As discussed in

HTML5 documents are defined using <!DOCTYPE html>

The structure of a typical HTML5 document may consist of the following:

<body>
	<header>
		<nav></nav>
	</header>
	<main role="main">
		<article>
			<header>
				<h1>Title 1</h1>
				<span>Subtitle</span>
				<div title="Article metas"></div>
			</header>
			<section title="Article texts">
				<h2>Title 2</h2>
				<p></p>
				<p></p>
				<p></p>
			</section>
			<section title="Figure collections">
				<figure></figure>
				<figure></figure>
				<figure></figure>
			</section>
			<section title="Article collections">
				<article></article>
				<article></article>
				<article></article>
			</section>
			<aside></aside>
			<footer></footer>
		</article>
	</main>
	<aside></aside>
	<footer></footer>
</body>

Deprecated tags in HTML5

@nikahmadz

This comment has been minimized.

Copy link
Owner Author

@nikahmadz nikahmadz commented Jun 4, 2017

Layout Version

b:layoutsVersion='3'

  • Will disable mobile theme option and adapt your theme to mobile.
  • Use layoutsVersion 3 on Blogger. The Layout menu will not show on the Blogger Theme Designer.
@nikahmadz

This comment has been minimized.

Copy link
Owner Author

@nikahmadz nikahmadz commented Jun 4, 2017

Mobile theme

On mobile devices, show a mobile version of your current theme.

  • Yes. Show mobile theme on mobile devices. (Choose mobile theme)
  • No. Show desktop theme on mobile devices.

Custom: Adapt your theme to mobile.

b:responsive='true'
Will disable mobile theme option and adapt your theme to mobile.

Be sure to preview your theme.

@nikahmadz

This comment has been minimized.

Copy link
Owner Author

@nikahmadz nikahmadz commented Jun 4, 2017

Upload your theme.

Upload a theme from a file on your hard drive.

  • Choose a theme XML file and click Upload
@nikahmadz

This comment has been minimized.

Copy link
Owner Author

@nikahmadz nikahmadz commented Jun 4, 2017

Basic theme structure

Start with a base theme and customize.
Basic theme structure must have a well-formed theme XML such as follows:

<html>
  <head>
    <b:skin />
  </head>
  <body>
    <b:section id="content" />
  </body>
</html>

Note:

following tags are automatically added by Blogger

<?xml version="1.0" encoding="UTF-8" ?>
<html 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'>
<b:skin><![CDATA[]]></b:skin>
@nikahmadz

This comment has been minimized.

Copy link
Owner Author

@nikahmadz nikahmadz commented Jun 4, 2017

Backup your theme

Download a backup of your theme. Some gadgets may not be backed up.
Backup includes only the gadgets in the Basics tab under Add a Gadget.

@nikahmadz

This comment has been minimized.

Copy link
Owner Author

@nikahmadz nikahmadz commented Jun 4, 2017

How to install a theme

Use themes to change how your blog look & function
People can see and interact with your blog in different ways by using one of Blogger’s themes.

Steps to install a theme:

  1. Sign in to Blogger. (https://www.blogger.com/)
  2. Choose a blog to update.
  3. In the left menu, click Theme.
  4. In the top right, click Backup/Restore.
  5. Backup: To save a copy of your current theme, click Download theme.
  6. Upload: To install a theme, choose a theme file on your hard drive and upload.

Ref: https://support.google.com/blogger/answer/1227173

@nikahmadz

This comment has been minimized.

Copy link
Owner Author

@nikahmadz nikahmadz commented Jun 4, 2017

Language attributes

<html expr:lang="data:blog.locale" expr:dir='data:blog.languageDirection'>
generates
<html dir='ltr' lang='en'>

@nikahmadz

This comment has been minimized.

Copy link
Owner Author

@nikahmadz nikahmadz commented Jun 4, 2017

Helpful Classes

These tags will add class names to the previous tag, usually implemented to <html> or <body> tag

<b:class expr:name='&quot;lang-&quot;+data:blog.languageDirection'/>
<b:class expr:name='&quot;lang-&quot;+data:blog.localeUnderscoreDelimited'/>
<b:class cond='data:blog.isMobile' name='isMobile'/>
<b:class cond='data:blog.isMobileRequest' name='isMobileRequest'/>
<b:class cond='data:blog.isMobile and data:blog.isMobileRequest' expr:name='data:blog.mobileClass'/>
<b:class cond='data:view.isPreview' name='isPreview'/>
<b:class cond='data:view.isSingleItem' name='isSingleItem'/>
<b:class cond='data:view.isMultipleItems' name='isMultipleItems'/>
<b:class cond='data:view.isError' name='isError'/>
<b:class cond='data:view.isPage' name='isPage'/>
<b:class cond='data:view.isPost' name='isPost'/>
<b:class cond='data:view.isHomepage' name='isHomepage'/>
<b:class cond='data:view.isArchive' name='isArchive'/>
<b:class cond='data:view.isLabelSearch' name='isLabelSearch'/>
<b:class cond='data:view.isSearch and !data:view.isLabelSearch' name='isSearch'/>
<b:class expr:name='&quot;viewType-&quot;+data:view.type'/>
<b:class expr:name='&quot;pageType-&quot;+data:blog.pageType'/>
<b:class cond='data:blog.isPrivate' name='isPrivate'/>

Example:
<html class='lang-ltr lang-en isMultipleItems isHomepage viewType-feed pageType-index isPrivate'>

@nikahmadz

This comment has been minimized.

Copy link
Owner Author

@nikahmadz nikahmadz commented Jun 4, 2017

SEO tags

<title><data:view.title.escaped/></title>

@nikahmadz

This comment has been minimized.

Copy link
Owner Author

@nikahmadz nikahmadz commented Jun 4, 2017

Skin tag

<b:skin />

are interpreted to

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

and generates

<style id='page-skin-1' type='text/css'><!--
--></style>

You can write some designer notes on your skin definition

<b:skin>
-----------------------------------------------
Name:     Barefoot
Designer: Nik Ahmad
URL:      groundtheme.blogger.com/p/barefoot
-----------------------------------------------
</b:skin>

To do:

<b:skin version='1.0.0'>

@nikahmadz

This comment has been minimized.

Copy link
Owner Author

@nikahmadz nikahmadz commented Jun 4, 2017

Viewport scale

<meta expr:content='data:blog.isMobile ? &quot;width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1&quot; : &quot;width=device-width,initial-scale=1&quot;' name='viewport'/>
@nikahmadz

This comment has been minimized.

Copy link
Owner Author

@nikahmadz nikahmadz commented Jun 4, 2017

Theme XML Validations:

  • We were unable to save your theme.
  • Your theme could not be parsed as it is not well-formed.
  • Please make sure all XML elements are closed properly.
  • Custom themes that mix HTTP and HTTPS may affect the security and user experience of your blog when it is viewed over HTTPS.
  • There should be one and only one skin in the theme, and we found: 0
  • We did not find any section in your theme. A theme must have at least one b:section tag.
  • One of the sections is missing the required id attribute. Every section should have a unique id.
  • One of the widgets is missing the required id attribute. Every widget should have a unique id.
  • The new widget with id "xxxx" has no type. A widget type is required when adding a new widget.
  • The new widget with id "xxxx" has an invalid type: xxxx.
  • The widget with id "xxxx" is not within a section. Every widget should be in a section.
  • The theme does not define a section with id "xxx-section".
@nikahmadz

This comment has been minimized.

Copy link
Owner Author

@nikahmadz nikahmadz commented Jun 4, 2017

Head contents

<b:include data='blog' name='all-head-content'/>

generates

<meta content='width=device-width,initial-scale=1' name='viewport'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<!-- Chrome, Firefox OS and Opera -->
<meta content='' name='theme-color'/>
<!-- Windows Phone -->
<meta content='' name='msapplication-navbutton-color'/>
<meta content='blogger' name='generator'/>
<link href='http://vuetheme.blogspot.my/favicon.ico' rel='icon' type='image/x-icon'/>
<link href='http://vuetheme.blogspot.com/' rel='canonical'/>
<link rel="alternate" type="application/atom+xml" title="Vue Theme - Atom" href="http://vuetheme.blogspot.com/feeds/posts/default" />
<link rel="alternate" type="application/rss+xml" title="Vue Theme - RSS" href="http://vuetheme.blogspot.com/feeds/posts/default?alt=rss" />
<link rel="service.post" type="application/atom+xml" title="Vue Theme - Atom" href="https://www.blogger.com/feeds/8083988119973250873/posts/default" />
<link rel="me" href="https://www.blogger.com/profile/02819052646477348772" />
<link rel="openid.server" href="https://www.blogger.com/openid-server.g" />
<link rel="openid.delegate" href="http://vuetheme.blogspot.com/" />
<!--Can't find substitution for tag [blog.ieCssRetrofitLinks]-->
<meta content='Meta description' name='description'/>
<meta content='http://vuetheme.blogspot.com/' property='og:url'/>
<meta content='Vue Theme' property='og:title'/>
<meta content='Meta description' property='og:description'/>
<!--[if IE]> <script> (function() { var html5 = ("abbr,article,aside,audio,canvas,datalist,details," + "figure,footer,header,hgroup,mark,menu,meter,nav,output," + "progress,section,time,video").split(','); for (var i = 0; i < html5.length; i++) { document.createElement(html5[i]); } try { document.execCommand('BackgroundImageCache', false, true); } catch(e) {} })(); </script> <![endif]-->
@nikahmadz

This comment has been minimized.

Copy link
Owner Author

@nikahmadz nikahmadz commented Jun 4, 2017

Section tag

Sections are areas of your page, such as a sidebar, footer.
See: https://support.google.com/blogger/answer/46888

<b:section id="content" />

generates

<div class='no-items section' id='content'></div>

Note:

  • id – (Required) A unique name, with letters and numbers only.
  • class - (Optional) Common class names are “navbar,” “header,” “main,” “sidebar,” and “footer.” If you change themes later, these names help Blogger determine how to transfer your content.
@nikahmadz

This comment has been minimized.

Copy link
Owner Author

@nikahmadz nikahmadz commented Jun 4, 2017

Adsense

<b:if cond='data:widgets.AdSense.first or data:blog.adsenseClientId'>
  <script async='async' src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'/>
</b:if>
@nikahmadz

This comment has been minimized.

Copy link
Owner Author

@nikahmadz nikahmadz commented Jun 4, 2017

Google Analytics

Add Google Analytics to your blog to see how visitors interact with your site.

head:
<b:include data='blog' name='google-analytics'/>
@nikahmadz

This comment has been minimized.

Copy link
Owner Author

@nikahmadz nikahmadz commented Jun 4, 2017

Template Skin

To do:

<b:template-skin>
@nikahmadz

This comment has been minimized.

Copy link
Owner Author

@nikahmadz nikahmadz commented Jun 4, 2017

Default Markups

To do:

<b:defaultmarkups>
@nikahmadz

This comment has been minimized.

Copy link
Owner Author

@nikahmadz nikahmadz commented Jun 4, 2017

Clipboard.js

To do:

<script async='async' src='//www.gstatic.com/external_hosted/clipboardjs/clipboard.min.js'/>
@nikahmadz

This comment has been minimized.

Copy link
Owner Author

@nikahmadz nikahmadz commented Jun 4, 2017

Background image

Contempo use:

<b:include cond='not data:view.isPreview' data='{ image: data:skin.vars.body_background.image, selector: &quot;.bg-photo&quot;, imageSizes: [480, 640, 800, 1200, 1600] }' name='responsiveImageStyle'/>

Simple use:

<b:if cond='data:skin.vars.body_background.image.isResizable'>
<b:include cond='not data:view.isPreview' data='{ image: data:skin.vars.body_background.image, selector: &quot;body&quot; }' name='responsiveImageStyle' />
</b:if>
@nikahmadz

This comment has been minimized.

Copy link
Owner Author

@nikahmadz nikahmadz commented Jun 4, 2017

Blog Widget

Every widget should be in a section

<b:section id='content'>
	<b:widget id='Blog1' type='Blog' />
</b:section>

is interpreted as

<b:section id='content'>
	<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog' visible='true'>...</b:widget>
</b:section>

generates

<div class='section' id='content'>
	<div class='widget Blog' data-version='2' id='Blog1'>
		<div class='blog-posts hfeed container' role='feed'></div>
		<div class='blog-pager container' id='blog-pager'></div>
	</div>
</div>
@nikahmadz

This comment has been minimized.

Copy link
Owner Author

@nikahmadz nikahmadz commented Jun 4, 2017

Skip Navigation

Skip navigation is an important feature for accessibility. Skip navigation allows screen reader users and persons with motor disabilities to go directly to the main content, without pressing the arrow or tab keys multiple times.

<b:include name='skipNavigation'/>

generates

<a class='skip-navigation' href='#main' tabindex='0'>Skip to main content</a>

so, pair it with

<a name="main"></a>
@nikahmadz

This comment has been minimized.

Copy link
Owner Author

@nikahmadz nikahmadz commented Jun 5, 2017

Mixed content on your blog

If you turn on HTTPS for your blog, you may have to change your blog content to make sure it works with HTTPS.

Mixed Content errors occur when a webpage downloads its initial HTML content securely over HTTPS, but then loads the follow-up content (such as images, videos, stylesheets, scripts) over insecure HTTP. These browser errors will degrade both HTTPS security and the user experience of your blog.

See: https://support.google.com/blogger/answer/6286127

@nikahmadz

This comment has been minimized.

Copy link
Owner Author

@nikahmadz nikahmadz commented Jun 5, 2017

Layouts Data Tags

there are many different tags you can use to include specific pieces of data in your template. They will all be formatted as data:name/ or data:name1.name2/, where name is the name of the particular piece of data you want to use. In the name1.name2 example, name2 is a particular item within a set of data called name1, e.g. photo.url.

This is a master list of all such available data. It is divided into sections by page element, because different types of widgets use different data.
See: https://support.google.com/blogger/answer/47270

@nikahmadz

This comment has been minimized.

Copy link
Owner Author

@nikahmadz nikahmadz commented Jun 12, 2017

jQuery

foot:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" integrity="sha384-xBuQ/xzmlsLoJpyjoggmTEz8OWUFM0/RC5BsqQBDX2v5cMvDHcMakNTNrHIW2I5f" crossorigin="anonymous"></script>
<script>jQuery.noConflict();</script>
@nikahmadz

This comment has been minimized.

Copy link
Owner Author

@nikahmadz 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>
	</div>
</section>
@nikahmadz

This comment has been minimized.

Copy link
Owner Author

@nikahmadz nikahmadz commented Jun 14, 2017

Google Gadgets

  • Uses iframe 👎
@nikahmadz

This comment has been minimized.

Copy link
Owner Author

@nikahmadz nikahmadz commented Jun 16, 2017

Template Script

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

generates

<script type="text/javascript" src="https://resources.blogblog.com/blogblog/data/res/3742035236-indie_compiled.js" async="true"></script>
@nikahmadz

This comment has been minimized.

Copy link
Owner Author

@nikahmadz nikahmadz commented Jun 17, 2017

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>

@nikahmadz

This comment has been minimized.

Copy link
Owner Author

@nikahmadz nikahmadz commented Jun 22, 2017

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'/>
@nikahmadz

This comment has been minimized.

Copy link
Owner Author

@nikahmadz nikahmadz commented Jun 22, 2017

To do:

super includes

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

This comment has been minimized.

Copy link
Owner Author

@nikahmadz nikahmadz commented Jul 6, 2017

To do:

b:skin creates entries in Theme Designer > Advance CSS

@nikahmadz

This comment has been minimized.

Copy link
Owner Author

@nikahmadz 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:else/>
			<b:comment><!-- unknown pages --></b:comment>
		</b:if>
@nikahmadz

This comment has been minimized.

Copy link
Owner Author

@nikahmadz 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