| <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 »', '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 is a series of tutorial notes on building a Blogger theme.
Discover tips and learn how to start building your own Blogger theme:
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/
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.
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
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>
<section id="bgPhoto">
<div class='bg-photo-overlay'></div>
<div class='bg-photo-container'>
<div class='bg-photo'></div>
</div>
</section>
<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>
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>
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'/>
super includes
<b:include name='super.headerByline'/>
b:skin creates entries in Theme Designer > Advance CSS
There are 8++ types of pages available in Blogger.
Each URL has different object available:
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>
http://template-data.blogspot.my
http://blogger2ools.mystady.com/
https://support.google.com/blogger/answer/46871?hl=en&ref_topic=6321969
https://support.google.com/blogger/answer/46888?hl=en&ref_topic=6321969
https://support.google.com/blogger/answer/46995?hl=en&ref_topic=6321969
https://support.google.com/blogger/answer/47270?hl=en#global
<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.
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.
generates
so, pair it with