Using Blogger Skins Only for Page Layout - Blogger skin
is one of the elements that must be present in HTML blogger. However, its
presence causes HTML5 or AMP HTML validation errors.
For this reason, we use blogger skins only for page
layouts, so they won't cause HTML5 or AMP HTML validation errors.
Blogger Skin
What is blogger skin? Blogger skin is a tag for custom
CSS blogger with code <b:skin> and its appearance in HTML
becomes <style
id='page-skin-1' type='text/css'>
If you frequently tamper with Blogger HTML editing, then
you will be familiar with code like the following.
<b:skin><![CDATA[
...............
...............
...............
]]></b:skin>And if we look at the blog source page, it will look like this.
<style id='page-skin-1' type='text/css'><!--
...............
...............
...............
--></style>Causes HTML5 Validation Errors
However, the existence of this blogger skin causes HTML5
validation errors for type attributes that may not be present in the style tags
in the code generated by the blogger skin as follows.
<style id='page-skin-1' type='text/css'><!--
...............
...............
...............
--></style>And because if you wait for improvements from the blogger developer maybe sometime, to overcome the HTML5 validation error of this blogger skin tag is to change it to look like this.
<style>
<!-- /*<b:skin><![CDATA[*/
...............
...............
...............
]]></b:skin>So that the display in HTML becomes like this
<style>
<!-- /*<style id='page-skin-1' type='text/css'><!--*/
...............
...............
...............
--></style>Or some use the following trick for HTML5 validation. This method is to use blogger skins only for layout styles and create new style tags for custom CSS blog views.
<style>
<!-- /*<b:skin><![CDATA[
css style layout page here
*/]]></b:skin>
<style>
custom css for show blog here
</style>So that the display in HTML becomes like this
<style>
<!-- /*<style id='page-skin-1' type='text/css'><!--*/
css style layout page here
--></style>
<style>
custom css for show page here
</style>At this point the problem of HTML5 validation errors from blogger skin tags has actually been resolved. However, if we use HTML AMP, we will see an error again from HTML5 validation as above.
HTML AMP Validation Error
If we create AMP HTML on the Blogger platform, it will
obviously cause an AMP HTML error from the tag style generated from this
blogger skin. Because AMP only allows using <style
amp-custom='amp-custom'> for custom CSS.
Logically, we can use the following code to outsmart it.
<style amp-custom='amp-custom'>
<!-- /*<b:skin><![CDATA[*/
.................
.................
.................
]]></b:skin>However, we cannot use the HTML5 validation trick above to outsmart the AMP error from the skin of the blog because there will be another error that appears that HTML tags may not be in the CSS style of the generated code as follows.
<style amp-custom='amp-custom'>
<!-- /*<style id='page-skin-1' type='text/css'><!--*/
.................
.................
.................
--></style>For that, on AMP Blogger I use the following code to be valid AMP.
<!-- /*<b:skin><![CDATA[
css style for layout page here
*/]]></b:skin>
<style amp-custom='amp-custom'>
custom css for show blog here
</style>So that the blogger skin generated results are not legible on AMP as shown below.
But I keep thinking of the tricks above. Indeed the blogger skin is unreadable on AMP so it doesn't cause errors. However, the resulting code still looks odd and less clean.
Then I tried using this blogger skin only for page
layouts by using conditional tags for page layouts. And it worked, the theme
could be saved and the appearance of the blog and layout view was not error and
certainly valid AMP and HTML5.
And this trick can be used on custom templates for both AMP
and NON AMP.
The code used is as follows.
For Non AMP
<b:if cond='data:view.isLayoutMode'>
<b:skin><![CDATA[
css style for layout page here
]]></b:skin>
</b:if>
<style>
custom css for show blog here
</style>
For AMP HTML
<b:if cond='data:view.isLayoutMode'>
<b:skin><![CDATA[
css style for layout page here
]]></b:skin>
</b:if>
<style amp-custom='amp-custom'>
custom css for show blog here
</style>With that, the tag style results from generating blogger skins in the HTML blog are not visible, as in the following image for the Magic Company page sourcer.
May be useful.